HTML分組元素

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、

通用分组

这是一个通用分组

这是另一个通用分组

解釋：

元素在早期的版本中非常常用，透過

這種一般性分組元素進行佈局。而在HTML5中，由於語意的緣故，被其他各種文檔元素所取代。和

段落的差別是，兩段文本的上下空隙是沒有的，空隙間隔和
換行一樣。

透過對比看看

和

的區別

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

3、

引用大段它處內容

這是一個大段的來自它處的內容

這是一個大段的來自它處的內容

這是另一個大段的來自它處的內容

解釋：

元素實際作用除了和

元素一樣，有段落空隙的功能，還包含了首尾縮排的功能。語意上表示，大段的引用它處的內容。

4、

展現格式化內容<p><pre class='brush:php;toolbar:false;'><pref> ##### ##### ##### ##### ##### </pref>

登入後複製

解釋：

元素實際作用就是編輯器只排版的，原封不動的展現出來，原封不動的表現簡單的排版，複雜的排版就無法滿足要求了。 <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/930/634/103/1487058091703651.png" class="lazy" title="HTML分組元素" alt="HTML分組元素" style="max-width:90%" style="max-width:90%"/></p><p></p>5、<hr>添加分隔<p><pre class='brush:php;toolbar:false;'><div>这是一个通用分组</div> <hr> <div>这是另一个通用分组</div>

登入後複製

解釋：此元素實際作用就是增加一條分割線，意圖呈現上下文主題的分割。

6、

• 新增無序列表

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

  解釋：
  元素表示無序列表，而
  • 元素則是內部的列表項目

    
    

    7、<

    7、<

    7、< ol>
  • 新增有序列表

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

    解釋：
    元素表示有序列表，而
    1. 元素則是內部的列表項目。
       元素目前支援三種屬性
                           

                         ol元素屬性

       

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

          li元素屬性

       

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

       清單

            

       這是一份文件

             

       這裡是這份文件的詳細內容1

         

       這裡是這份文件的詳細內容1

         

       這裡是這份文件的詳細內容1

         內容2

       解釋：這三個元素是一個整體，但

       或
       並非都必須出現

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

       9、

       使用插圖

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

          

       解釋：這兩個元素一般用於圖片的版面

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

        

       🎜🎜更多請關注分組元素相關文章！ 🎜