HTML分組元素

高洛峰
發布: 2017-02-14 15:47:40
原創
2693 人瀏覽過

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>
登入後複製

HTML分組元素

3、

引用大段它處內容

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

解釋:
元素實際作用除了和

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




4、
展現格式化內容<p><pre class="brush:html;toolbar:false"><pref> ##### ##### ##### ##### ##### </pref>
登入後複製

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

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

HTML分組元素

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. 元素則是內部的列表項目。
          元素目前支援三種屬性

                              

          HTML分組元素                  ol元素屬性

          HTML分組元素

          <ul>
              <li>张三</li>
              <li>李四</li>
              <li>王五</li>
              <li>马六</li>
          </ul>
          <ol>
              <li>张三</li>
              <li>李四</li>
              <li>王五</li>
              <li>马六</li>
          </ol>
          
          1. 张三
          2. 李四
          3. 王五
          4. 马六
          1. 张三
          2. 李四
          3. 王五
          4. 马六
          1. 张三
          2. 李四
          3. 王五
          4. 马六
          1. 张三
          2. 李四
          3. 王五
          4. 马六
          1. 张三
          2. 李四
          3. 王五
          4. 马六
          登入後複製

          HTML分組元素   li元素屬性

          HTML分組元素

          <ol>
              <li>张三</li>
              <li>李四</li>
              <li>王五</li>
              <li>马六</li>
          </ol>
          
          1. 张三
          2. 李四
          3. 王五
          4. 马六
          登入後複製
          清單

               
          這是一份文件

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

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

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

            內容2

          HTML分組元素解釋:這三個元素是一個整體,但

          並非都必須出現

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

          9、
          使用插圖

          <figure>
               <figcation>这是第一张图</figcation>
               <img  src="1.png" alt="HTML分組元素" >
          </figure>
          登入後複製
          登入後複製

             

          HTML分組元素解釋:這兩個元素一般用於圖片的版面

          <figure>
               <figcation>这是第一张图</figcation>
               <img  src="1.png" alt="HTML分組元素" >
          </figure>
          登入後複製
          登入後複製

           

          🎜🎜更多請關注分組元素相關文章! 🎜
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!