Shulou(Shulou.com)06/03 Report--

This article mainly shows you the "detailed explanation of organizational content in html5", which is easy to understand and clear. I hope it can help you solve your doubts. Let the editor lead you to study and study this article "detailed explanation of organizational content in html5".

Establish a paragraph

HTML ignores carriage returns and other extra spaces you enter in the text, new paragraphs in the page are identified by p elements, and a paragraph contains one or more related sentences, usually around an opinion or argument, or there are some common themes between multiple arguments.

Antoni Gaud í

Many tourists are drawn to Barcelona to see Antoni Gaud í's incredible architecture.

Barcelona celebrated the 150th anniversary of Gaud í's birth in 2002.

You can add styles to paragraphs, including fonts, font sizes, colors, and so on.

P element

The p element has no specific meaning, and can be used to structure the content and give it meaning if no appropriate element is available, which is usually specified by the class or id attribute.

But be careful not to use p elements as a last resort, and give priority to those elements of semantic importance.

Pre-formatted content

The browser compresses all additional carriage returns and spaces and automatically wraps lines according to the size of the window. The pre element can change the way browsers process content, preventing white space characters from being merged, and allowing formatting in the source document to be preserved. Note, however, that it is best not to use this element unless it is necessary to retain the original format of the document, as it weakens the flexibility of the mechanism to control the rendering of results by using elements and styles.

The pre element is often used in conjunction with the code element to show code examples, because the format in the programming language is usually important.

Add this to your style sheet if you want to display a dotted border underneath the abbr element whenever it has a title attribute.

Abbr [title] {border-bottom: 1px dotted # 000;}

Quote content from other places

The blockquote element represents a piece of content quoted elsewhere, similar to the Q element (for short quotes, not across lines), but is usually used in scenarios with more content to be referenced. The cite attribute of this element can be used to specify the source of the referenced content.

The code is as follows:

Http://en.wikipedia.org/wiki/Apple">The apple forms a tree that is small and deciduous,.

Note that the browser ignores the formatting of the content in the blockquote element and indents the blockquote text by default. To establish a structure in a reference, you can use some organizational elements, such as p or hr.

The browser should automatically enclose the text in the Q element in quotation marks in a specific language, but the effect varies from browser to browser. The following is an example of using the Q element.

She tried again, this time in French: Avez-vous lu le livre High Tide in Tucson de Kingsolver? C'est inspirational.

Add topic separation

The hr element represents topic separation at the paragraph level. In HTML5, the hr element represents a transition to another related topic, and the idiomatic style is a straight line across the page.

Theme 1 theme 2.

The above example adds some hr elements to the blockquote element to form a certain structure.

Organize content into lists

The types of lists in HTML are ordered list, unordered list, and description list.

1) ordered list, with ol as the parent element and li as the list item

2) unordered list, with ul as the parent element and li as the list item

3) description list, dl is the parent element, dt and dd represent terms and descriptions in dl, respectively.

In addition, users can define their own lists.

Ordered list

The ol element represents an ordered list, and the list items are represented by the li element.

I like apples and oranges. I also like: bananas mangoes cherries plums peaches grapes You can see other fruits I like here

The ol element supports the following attributes:

1) start: sets the numbering value of the first item of the list. The default number of the first item is 1.

2) type: sets the type of number displayed next to each list item, including:

L: decimal numbers (default), 1, 2, 3, 4

A: lowercase Latin alphabet, a _ r _ b _ r _ c _ d

A: capital Latin alphabet, Amai Bpeng C Pol D

I: lowercase Roman numerals, iPercience, igraine, iirecoveryiv

I: uppercase Roman numerals, Imai II pr III Jue IV

3) reversed: list numbering is in descending order, which is supported by some browsers

Unordered list

The ul element represents the unordered list, and the li element represents the list item.

I like apples and oranges. I also like: bananas mangoes cherries plums peaches grapes You can see other fruits I like here

A bullet appears before each item in the unordered list, and the style of the symbol can be controlled with the CSS attribute list-style-type.

Attributes of the li element

The li element represents the items in the list, which can be used with ul or ol, and can contain the value attribute, which represents the sequence number of the list item.

I like apples and oranges. I also like: bananas mangoes cherries plums peaches grapes You can see other fruits I like here

Description list

Three elements are required to define the description list: the dl, dt, and dd elements, which have no local attributes:

1) dl: indicates the list of instructions

2) dt: indicates the term in the list of instructions

3) dd: indicates the definition in the description list.

I like apples and oranges. I also like: Apple The apple is the pomaceous fruit of the apple tree Malus domestica Banana The banana is the parthenocarpic fruit of the banana tree Musa acuminata Cherry The cherry is the stone fruit of the genus Prunus You can see other fruits I like here.

Custom list

The ul element in HTML combines the counter feature in CSS with the: before selector to generate complex lists. Here is an example:

. Body {counter-reset: OuterItemCount 5 InnerItemCount;} # outerlist > li:before {content: counter (OuterItemCount) ". "; counter-increment: OuterItemCount 2;} ulinnerlist > li:before {content: counter (InnerItemCount, lower-alpha). "; counter-increment: InnerItemCount;} I like apples and oranges. I also like: bananas mangoes, including: Haden mangoes Keitt mangoes Kent mangoes cherries plums Including: Elephant Heart plums Stanley plums Seneca plums peaches grapes You can see other fruits I like here.

Use illustrations

HTML5 defines illustration as an independent content unit with a title, which is usually referenced by the main body of the document as a whole, and deleting it from the document body will not affect the meaning of the document.

HTML uses figure elements to insert charts, photos, graphics, illustrations, code snippets, and so on. Figcaption is the title of figure, optionally, at the beginning or end of figure content.

I like apples and oranges. Listing 23. Using the code element var fruits = ["apples", "oranges", "mangoes", "cherries"]

[xss_clean] n ("I like" + fruits.length + "fruits"); You can see other fruits I like here.

The figure element generates an illustration that wraps the code element and adds a title to it with the figcaption element. Note that the figcaption element must be the first or last child of the figure element.

The figure element can contain multiple content blocks, but only one figcaption.

The above is all the contents of this article "detailed explanation of organizational content in html5". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.