6.html5 grouping element, 6.html 5 grouping

6.html5 grouping element, 6.html 5 grouping

What is a group element? First, let's look at the following example:

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

 

The above code shows the effect as follows:

 

First, the nested text of the first line of text elements is seamlessly connected, and the following two rows are displayed in one line without nesting, but each element is separated by a space.

The grouping element is like this:

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

 

The display effect is as follows:

　　

It can be seen that no matter whether it is nested or independent, the text in the element willLine feed displayIs separated from other texts. This is the meaning of grouping.

 

The following table summarizes the grouping elements:

Element name	Description
P	Paragraph
Div	A common element without any semantics. It corresponds to span.
Blockquote	Indicates the content of a large segment derived from him.
Pre	Content whose format should be retained
Hr	The conversion of a topic at the paragraph level, that is, a horizontal line.
Ul, ol	Indicates an unordered list.
Li	Used for list items in ul and ol Elements
Dl, dt, dd	A list of terms and definitions. Dt represents a term in dl and generally serves as the title. dd represents a definition in dl, which is generally the content.
Figure	Indicates the image
Figcaption	The title of the figure element.

 

 

1. <p> Create a paragraph

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

 

Explanation: <p> the actual function of an element is to form a paragraph in the internal text.Maintain a certain amount of gaps.

2. <div> General grouping

<Div> This is a universal group </div> <div> This is another universal group </div>

 

Explanation: <div> elements are frequently used in earlier versions. They are laid out using the <div> generic grouping element. In HTML5, it is replaced by other document elements due to semantics. The difference between a paragraph and a paragraph is,There is no gap between the upper and lower sections of the text. The gap is the same as that of <br> line feed..

 

 

3. <blockquote> reference the content of a large segment

<Blockquote> This is a large segment derived from its content </blockquote> <blockquote> This is another large segment derived from its content </blockquote>

 

Explanation: <blockquote> in addition to the <p> element, the <blockquote> element has the same function as the <p> element.Indention at the beginning and end. In semantics, the content of a large segment is referenced.

4. <pre> display formatted content

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

 

Explanation: the actual function of the <pre> element is to typeset the editor and present it intact. Of course, this kind of layout is only suitable for simple layout, and complicated layout cannot meet the requirements.

5.

 
Explanation: the actual function of the 


6. <ul> <li> Add unordered list
<Ul> <li> Zhang San </li> <li> li Si </li> <li> Wang Wu </li> <li> Ma 6 </li> </ul>
 
The effect is as follows:

Explanation: The <ul> element indicates an unordered list, while the <li> element indicates an internal list item.



 
7. <ol> <li> Add an ordered list
<Ol> <li> Zhang San </li> <li> li Si </li> <li> Wang Wu </li> <li> Ma 6 </li> </ol>
 
The display effect is as follows:

Explanation: <ol> elements represent ordered lists, while <li> elements represent Internal list items.<Ol>The element currently supports three attributes.

 

 
  
 
   
 
    
Attribute name
 
    
Description
 
   
 
   
 
    
Start
 
    
Start statistics from the sequence: <ol start = "2">
 
   
 
   
 
    
Reversed
 
    
Sort in reverse order: <ol reversed>. Test the support level by yourself.
 
   
 
   
 
    
Type
 
    
Indicates the number type of the list, with values: 1, a, A, I, and I
 
   
 
  

 
　　
<Li> elements can use the following attributes:

 

 
  
 
   
 
    
Attribute name
 
    
Description
 
   
 
   
 
    
Value
 
    
Forcibly set the ID of a project
 
   
 
  

 
<Li value = "7"> Wang Wu </li>
 
 

 
8. <dl> <dt> <dd> Generate a description list
<Dl> <dt> This is a file </dt> <dd> here is the details of this file 1 </dd> <dd> here is the details of this file. content 2 </dd> </dl>
 
The effect is as follows:

Explanation: these three elements are a whole, but not both <dt> and <dd> must appear.



 
9. <figure> <figcaption> Use illustrations
<Figure> <figcaption> This is a figure </figcaption>  </figure>
 
Because I have not prepared the image, the effect is as follows:

Explanation: these two elements are generally used for the layout of images.
 

 
 
Finally, I will explain the question here. Why do I have to make typographical and indent all the code here? Do I have to make it effective in this way? In fact, it is not required to be neatly formatted. You can nest it in a line of code as I demonstrated at the beginning. However, code readability is very low, which is inconvenient during development or maintenance. The biggest function of typographical editing is to make it easy for you. In addition, neat and beautiful code is like an elegant work of art, which brings a sense of secret pleasure.