6.HTML5 grouping elements

What is a grouping element, first look at the following example:

 <  span  >  scolia<  span  >  scolia</ span  ></ span  >  <  span  >  scolia</ span  >  <  span  >  scolia</ span  >  

The above code looks like this:

First, the text elements of the first line are nested seamlessly, and the next two lines are not nested and appear in one line, but the elements are separated by a space.

The grouping element is this:

 <  div  >  scolia<  div  >  scolia</ div  ></ div  >  <  div  >  scolia</ div  >  <  div  >  scolia</ div  >  

The effect of the display is this:

　　

It can be seen that whether it is nested or independent, the text in the element will be displayed in line , and separate from other text, this is the meaning of the so-called grouping.

The following table summarizes what the grouping elements are:

Element name	Description
P	Represents a paragraph
Div	A generic element without any semantics, and span is the corresponding element
Blockquote	Indicates a large section of the content from which he was quoted
Or:	Indicates what the format should be preserved
hr	Represents a paragraph-level theme transformation, which is a horizontal line
Ul,ol	Indicates unordered list, with sequence table
Li	Used for list items in the Ul,ol element
Dl,dt,dd	Represents a list that contains a series of terms and definition descriptions. DT represents the term within the DL, and generally serves as the title; DD represents the definition within the DL, typically content.
Figure	Represents a picture
Figcaption	The caption that represents the figure element

1.<p> creating a paragraph

< P > This is a paragraph </p><p> This is also a paragraph </  p>

Explaining that the:<p> element actually works is to form a paragraph within the text that is contained inside, while maintaining a certain amount of space between paragraphs and paragraphs.

2.<div> Universal Grouping

< Div > This is a generic grouping </div><Div> This is yet another universal grouping </ Div >

EXPLANATION The:<div> element is very common in earlier versions, and is laid out by <div> this generic grouping element. In HTML5, for semantic reasons, it is replaced by various other document elements. The difference between the <p> paragraph is that there is no upper and lower gap between the two paragraphs, and the gap interval is the same as <br> line break .

3.<blockquote> quote Big Paragraph He's out of the content

< blockquote > This is a big paragraph from his content </blockquote><blockquote  > This is another big paragraph quoted him out of the content </blockquote>

Explaining that the:<blockquote> element actually functions in addition to the <p> element, has the function of the paragraph void, and also contains the function of the indentation . Semantically, the large segment references him out of the content.

4.<pre> presentation of formatted content

< Pre >     #####        #####            #####        #####    #####</pre>

Explaining the actual function of the:<pre> element is how the editor is formatted and displayed intact. Of course, this is only suitable for simple typesetting, complex layout can not meet the requirements.

5.

< hr/ >

Explaining that the:

6.<ul><li> Adding unordered lists

<ul>    <Li>Tom</Li>    <Li>John doe</Li>    <Li>Harry</Li>    <Li>Caifan</Li></ul> 

The effect is as follows:

Explains that the:<ul> element represents an unordered list, while the <li> element is an internal list item.

7.<ol><li> Adding an ordered list

<ol>    <Li>Tom</Li>    <Li>John doe</Li>    <Li>Harry</Li>    <Li>Caifan</Li> </ol> 

The display results are as follows:

Explains that the:<ol> element represents a sequence table, while the <li> element is an internal list item. The <ol> element currently supports three types of attributes.

Property name	Description
Start	Starting from the first series statistics: <ol start= "2" >
Reversed	Whether to arrange in reverse order: <ol Reversed> support to test yourself
Type	Represents the number type of the list, with values of 1, a, a, I, I

　　

The <li> element can use the following properties:

Property name	Description
Value	Forcibly set the number of an item

<value= "7"> Harry </li>

8.<dl><dt><dd> Generating a description list

<DL>    <DT>This is a document.</DT>    <DD>Here is the detailed content of this document 1</DD>    <DD>Here is the detailed content of this document 2</DD></DL> 

The effect is as follows:

Explanation: These three elements are a whole, but not all <dt> or <dd> must appear.

9.<figure><figcaption> using illustrations

<  Figure >    < figcaption > This is a picture </figcaption>    <src = "Img.png" > </  Figure >

Because I did not prepare the picture, so the effect is as follows:

Explanation: These two elements are generally used for the layout of a picture.

Finally, here to explain a question, why my code here to do a good job of typesetting and indentation, must this be effective? You don't have to ask for such neat typography, you can nest in one line of code, as I did at the beginning of the presentation. However, the readability of the code is very low, both at the time of development and maintenance is inconvenient. The most important role of typesetting is to facilitate themselves, in addition to neat and beautiful code like elegant artwork, can bring a kind of secret pleasure.

6.HTML5 grouping elements