HTML5: organizational content
By default, the HTML document format is irrelevant to the format displayed in the browser window of the document content. For example, the browser converts several blank characters that are connected into a space, line breaks are ignored. HTML provides a way to organize content, segment the displayed content, and pre-arrange the content format.
When you create a paragraph HTML, the carriage return and other spaces entered in the text are ignored. The new section on the webpage is identified by the p element. A paragraph contains one or more sentences, it usually involves one point of view or argument, or multiple arguments have some common themes.
I Gaud í
When tourists are drawn to Barcelona to see each I Gaud í's incredible architecture.
Barcelona celebrated the 150th anniversary of Gaud í' s birth in 2002.
You can add styles for paragraphs, including fonts, font sizes, and colors.
The div element has no specific meaning. If no proper element is available, you can use this element to create a structure for the content and give it a meaning. Its meaning is usually specified through the class or id attribute.
However, it is recommended that you do not use div elements unless you have to. You should give priority to those elements with semantic importance. The browser compresses all the extra carriage return and space values in the pre-arranged content format and automatically wraps the lines according to the window size. The pre element can change the way the browser processes the content, prevent the combination of blank characters, and retain the format in the source document. However, it is recommended that you do not use this element unless it is necessary to retain the original format of the document, because it weakens the flexibility to control the rendering of results by using elements and styles.
Pre elements are usually used together with code elements to demonstrate code samples, because the formats in programming languages are usually important.
Add this to your style sheet if you want to display a dotted border underneathabbrElement whenever it hastitleAttribute.
abbr[title] {border-bottom: 1px dotted #000;}
The block quote element references a piece of content from another part. It is similar to the q element (used for short quotes and cannot be cross-row), but it is usually used in scenarios where many contents are to be referenced. The cite attribute of this element can be used to specify the source of the referenced content.
The apple forms a tree that is small and deciduous ,......
Note that the browser ignores the content format in the blockquote element. By default, the blockquote text is indented. To create a structure in the reference, you can use some organizational elements, such as p or hr.
The browser should automatically add quotation marks for specific languages to the text in the q element, but the effects of different browsers may be different. The following is an example of using the q element.
She tried again, this time in French:Avez-vous lu le livreHigh Tide in TucsonDe Kingsolver? C 'est inspirational.
Add topic separation the hr element represents a paragraph-level topic separation. In HTML5, the hr element represents a conversion to another related topic. A regular style is a straight line across the page.
Topic 1 Topic 2 ......
In the above example, some hr elements are added to the blockquote element to form a certain structure. Organize the content into an ordered list, unordered list, and description list of the list in the list HTML.
1) ordered list. ol is the parent element, and li is the list item;
2) unordered list. ul is the parent element and li is the list item;
3) description list. dl is the parent element. dt and dd represent the terms and descriptions in dl respectively.
In addition, you can define your own list. The ol element of the ordered list indicates the 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 hereol element supports the following attributes:
1) start: set the number of the first item in the list. The default number of the first item is 1;
2) type: Set the type of the number displayed next to each list item, including:
L: decimal number (default), 1, 2, 3, 4
A: lowercase Latin letters, a, B, c, d
A: uppercase Latin letters, A, B, C, D
I: lowercase roman numerals, I, ii, iii, iv
I: uppercase roman numerals, I, II, III, IV
3) reversed: list numbers are sorted in descending order, which is supported by some browsers.
The ul element of the unordered list indicates the unordered list, and the li element indicates the list items.
I like apples and oranges. I also like:
- Bananas
- Mangoes
- Cherries
- Plums
- Peaches
- Grapes
You can see other fruits I like here. A project symbol is displayed before each project in the unordered list. You can use the CSS attribute list-style-type to control the symbol style.
The attribute li element of the li element represents the items in the list. It can be used with ul and ol and can contain the value attribute, indicating the serial number of the list items.
I like apples and oranges. I also like:
- Bananas
- Mangoes
- Cherries
- Plums
- Peaches
- Grapes
You can see other fruits I like here to describe the definition of the list. The list requires three elements: dl, dt, and dd. These elements do not have local attributes:
1) dl: indicates the description list;
2) dt: indicates the terms in the list;
3) dd: indicates the definition in the 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. The ul element in the custom list HTML can be combined with the counter feature in CSS and the before selector to generate a complex list. The following is an example:
...... 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. the illustration HTML5 is defined as an independent content unit with a title, which is usually referenced by the document subject as a whole, deleting it from the document subject does not affect the meaning of the document.
HTML uses the figure element to insert charts, photos, graphs, illustrations, code snippets, etc. figcaption is the title of figure. Optional. It appears at the beginning or end of the figure content.
I like apples and oranges. Listing 23. Using the code element
var fruits = ["apples", "oranges", "mangoes", "cherries"];
document.writen("I like " + fruits.length + " fruits"); You can see other fruits I like here. The figure element generates an illustration that wraps the code element in it and adds a title to it with the figcaption element. Note that the figcaption element must be the first or last child element of the figure element.
The figure element can contain multiple Content blocks, but can contain only one figcaption.
