5、HTML分組元素

HTML5分組元素

所謂分組元素就是用來組織相關(guān)內(nèi)容的HTML5元素，清晰有效的進行歸類

一、元素分類匯總

二、分組元素解析

1、<p>建立段落

<p>這是一個段落</p>
<p>這是另一個段落</p>

解釋：<p>元素實際作用就是將內(nèi)部元素包含的文本形成一個段落；而段落和段落之間保持一定的空隙

2、<div>通用分組

<div>這是一個通用分組</div>
<div>這是另一個通用分組</div>

解釋：<div>元素在早期的版本中非常常用，通過<div>這種一般性分組元素進行布局。而在HTML5中，由于語義的緣故，被其他各種文檔元素所代替。和<p>段落的區(qū)別是，兩段文本的上下空隙是沒有的，空隙間隔和<br>換行一樣。

通過對比看看<p>和<div>的區(qū)別

<p>這是一個段落</p>
<p>這是另一個段落</p>
<div>這是一個通用分組</div>
<div>這是另一個通用分組</div>

3、<blockquote>引用大段它處內(nèi)容

<blockquote>這是一個大段的來自它處的內(nèi)容</blockquote>
<blockquote>這是另一個大段的來自它處的內(nèi)容</blockquote>

解釋：<blockquote>元素實際作用除了和<p>元素一樣，有段落空隙的功能，還包含了首尾縮進的功能。語義上表示，大段的引用它處的內(nèi)容。

4、<pref>展現(xiàn)格式化內(nèi)容

<pref>
    #####
       #####
          #####
       #####
    #####
</pref>

解釋：<pref>元素實際作用就是編輯器怎么排版的，原封不動的展現(xiàn)出來，當(dāng)然這種只適合簡單的排版，復(fù)雜的排版就無法滿足要求了。

5、<hr>添加分隔

<div>這是一個通用分組</div>
<hr>
<div>這是另一個通用分組</div>

解釋：該元素實際作用就是添加一條分割線，意圖呈現(xiàn)上下文主題的分割。

6、<ul><li>添加無序列表

<ul>
    <li>張三</li>
    <li>李四</li>
    <li>王五</li>
    <li>馬六</li>
</ul>

解釋：<ul>元素表示無序列表，而<li>元素則是內(nèi)部的列表項

7、<ol><li>添加有序列表

<ol>
    <li>張三</li>
    <li>李四</li>
    <li>王五</li>
    <li>馬六</li>
</ol>

解釋：<ol>元素表示有序列表，而<li>元素則是內(nèi)部的列表項。<ol>元素目前支持三種屬性

                                                     ol元素屬性

<ul>
    <li>張三</li>
    <li>李四</li>
    <li>王五</li>
    <li>馬六</li>
</ul>
<ol>
    <li>張三</li>
    <li>李四</li>
    <li>王五</li>
    <li>馬六</li>
</ol>
<ol start="5">
    <li>張三</li>
    <li>李四</li>
    <li>王五</li>
    <li>馬六</li>
</ol>
<ol reversed>
    <li>張三</li>
    <li>李四</li>
    <li>王五</li>
    <li>馬六</li>
</ol>
<ol type="i">
    <li>張三</li>
    <li>李四</li>
    <li>王五</li>
    <li>馬六</li>
</ol>
<ol type="I">
    <li>張三</li>
    <li>李四</li>
    <li>王五</li>
    <li>馬六</li>
</ol>
<ol type="A">
    <li>張三</li>
    <li>李四</li>
    <li>王五</li>
    <li>馬六</li>
</ol>

                                          li元素屬性

<ol>
    <li>張三</li>
    <li>李四</li>
    <li>王五</li>
    <li>馬六</li>
</ol>
<ol>
    <li>張三</li>
    <li>李四</li>
    <li value="5">王五</li>
    <li>馬六</li>
</ol>

8、<dl><dt><dd>生成說明列表

<dl>

      <dt>這是一份文件</dt>

      <dd>這里是這份文件的詳細(xì)內(nèi)容1</dd>

      <dd>這里是這份文件的詳細(xì)內(nèi)容2</dd>

</dl>

解釋：這三個元素是一個整體，但<dt>或者<dd>并非都必須出現(xiàn)

<dl>
<dt>這是第一份文件</dt>
<dd>這是第一份文件的詳細(xì)內(nèi)容1</dd>
<dd>這是第一份文件的詳細(xì)內(nèi)容2</dd>
<dt>這是第二份文件</dt>
<dd>這是第二份文件的詳細(xì)內(nèi)容1</dd>
<dd>這是第二份文件的詳細(xì)內(nèi)容2</dd>
</dl>

9、<figure><figcaption>使用插圖

<figure>
     <figcation>這是第一張圖</figcation>
     <img src="1.png">
</figure>

解釋：這兩個元素一般用于圖片的布局

<figure>
     <figcation>這是第一張圖</figcation>
     <img src="1.png">
</figure>