HTML grouping element

HTML5分组元素

所谓分组元素就是用来组织相关内容的HTML5元素，清晰有效的进行归类

一、元素分类汇总

   元素名称                               说明    

p    表示段落    

div    一个没有任何语义的通用元素，和span是对应的元素    

blockquote    表示引自它处的大段内容    

pre    表示其格式应该被保留的内容    

hr    表示其段落级别的主题转换，即水平线    

ul，ol    表示无序列表，有序列表    

li    用于ul，ol元素中的列表项    

dl，dt，dd    表示包含一系列术语和定义说明的列表。dt在dl内部表示术语，一般充当标题，dd在dl内部表示定义，一般是内容    

figure    表示图片    

figcaption    表示figure元素的标题    

二、分组元素解析

1、

建立段落

这是一个段落

这是另一个段落

解释：

元素实际作用就是将内部元素包含的文本形成一个段落；而段落和段落之间保持一定的空隙

2、

通用分组

这是一个通用分组

这是另一个通用分组

Explanation: The

element was very commonly used in earlier versions, and was laid out through the general grouping element of

. In HTML5, due to semantics, it is replaced by various other document elements. The difference from

paragraphs is that there is no upper and lower space between the two paragraphs of text, and the gap interval is the same as
line breaks.

Look at the difference between

and

by comparison

<p>这是一个段落</p>
<p>这是另一个段落</p>
<div>这是一个通用分组</div>
<div>这是另一个通用分组</div>

##3.

Quote a large section of other content

This is a long paragraph from somewhere else

This is another big paragraph from somewhere else

Explanation: The actual function of the

element is the same as that of the

element. It has the function of paragraph gap and also includes the function of indentation at the beginning and end. Semantically speaking, it refers to a large section of content elsewhere.

#4.

Display formatted content</p><pre class='brush:php;toolbar:false;'><pref> ##### ##### ##### ##### ##### </pref>

Copy after login

Explanation: The actual function of the

element is how the editor typeset it, and it is displayed intact. Of course, this is only suitable for simple typesetting, and complex typesetting cannot meet the requirements. </p><p></p><p>##5. <hr>Add separation<img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/930/634/103/1487058091703651.png" class="lazy" title="HTML grouping element" alt="HTML grouping element" style="max-width:90%" style="max-width:90%"/><pre class='brush:php;toolbar:false;'><div>这是一个通用分组</div> <hr> <div>这是另一个通用分组</div>

Copy after login

Explanation: The actual function of this element is to add a dividing line, intended to present the separation of contextual topics.

##6.

• Add an unordered list

  <ul>
      <li>张三</li>
      <li>李四</li>
      <li>王五</li>
      <li>马六</li>
  </ul>

  Explanation: The
  element represents an unordered list, while < The ;li> element is an internal list item

  ##7.

  1. Add an ordered list

     <ol>
         <li>张三</li>
         <li>李四</li>
         <li>王五</li>
         <li>马六</li>
     </ol>

     Explanation: < The ol> element represents an ordered list, while the

  2. element is an internal list item.
     Element currently supports three attributes
     
                                                                                                                                       ’s ’ ’s ’ ’s ’ ’ ’s ’ ’ ’ s it ’s ’ ’ t - - to

     ## li element attribute

     <ul>
         <li>张三</li>
         <li>李四</li>
         <li>王五</li>
         <li>马六</li>
     </ul>
     <ol>
         <li>张三</li>
         <li>李四</li>
         <li>王五</li>
         <li>马六</li>
     </ol>
     
         
     张三
         
     李四
         
     王五
         
     马六
     
     
         
     张三
         
     李四
         
     王五
         
     马六
     
     
         
     张三
         
     李四
         
     王五
         
     马六
     
     
         
     张三
         
     李四
         
     王五
         
     马六
     
     
         
     张三
         
     李四
         
     王五
         
     马六
     

     ##8、

     Generate description list

     

     This is a document

     

     Here are the details of this document1

     Here are the details of this document 2

     

     Explanation: These three elements are a whole, but< ;dt> or

     does not have to appear

     <ol>
         <li>张三</li>
         <li>李四</li>
         <li>王五</li>
         <li>马六</li>
     </ol>
     
         
     张三
         
     李四
         
     王五
         
     马六
     

     ##9,

     Use illustrations

     <dl>
     <dt>这是第一份文件</dt>
     <dd>这是第一份文件的详细内容1</dd>
     <dd>这是第一份文件的详细内容2</dd>
     <dt>这是第二份文件</dt>
     <dd>这是第二份文件的详细内容1</dd>
     <dd>这是第二份文件的详细内容2</dd>
     </dl>

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

     <figure>
          <figcation>这是第一张图</figcation>
          <img  src="/static/imghw/default1.png"  data-src="1.png"  class="lazy"   alt="HTML grouping element" >
     </figure>

     More articles related to HTML grouping elements Please pay attention to PHP Chinese website!