學習要點：
1.分組元素總匯
2.分組元素解析
主講教師：李炎恢
本章主要探討 HTML5 中分組元素的用法。所謂分組，就是用來組織相關內容的 HTML5 元素，清晰有效的進行歸類。
一．分組元素總匯為了頁面的排版需要，HTML5 提供了幾種語義的分組元素。
元素名稱
說明
p
表示段落
div
一個沒有任何語義的通用元素，和 span 是對應元素
blockquote
表示引自他出的大段內容
pre
表示其格式應被保留的內容
hr
表示段落級別的主題轉換，即水平線
ul,ol
表示無序列表，有序列表
li
用於 ul,ol 元素中的列表項
dl,dt,dd
表示包含一系列術語和定義說明的列表。dt 在 dl 內部表示
術語，一般充當標題；dd 在 dl 內部表示定義，一般是內容。
figure
表示圖片
figcaption
表示 figure 元素的標題
二．分組元素解析
1.<p>建立段落
<p>
這是一個段落
</p>
<p>
這也是一個段落
</p>
解釋：<p>元素實際作用就是將內部包含的文本形成一個段落；而段落和段落之間保持一定量的空隙。
2.<div>通用分組
<div>
這是一個通用分組
</div>
<div>
這是又一個通用分組
</div>
解釋：<div>元素在早期的版本中非常常用，通過<div>這種一般性分組元素進行布局。
而在 HTML5 中，由於語義的緣故，被其他各種文檔元素所代替。和<p>段落的區別就是，兩段文本的上下空隙是沒有的，空隙間隔和<br>換行一樣。
3.<blockquote>引用大段他出內容
<blockquote>
這是一個大段引自他出內容
</blockquote>
<blockquote>
這是另一個大段引自他出內容
</blockquote>
解釋：<blockquote>元素實際作用除了和<p>元素一樣，有段落空隙的功能，還包含了首尾縮進的功能。語義上表示，大段的引用他出的內容。
4.<pre>展現格式化內容
<pre>
#####
#####
#####
#####
#####
</pre>
解釋：<pre>元素實際作用就是編輯器怎麼排版的，原封不動的展現出來。當然，這種只適合簡單的排版，復雜的排版就無法滿足要求了。
5.<hr>添加分隔
<hr>
解釋：<hr>元素實際作用就是添加一條分割線，意圖呈現上下文主題的分割。
6.<ul><li>添加無序列表
<ul>
<li>
張三
</li>
<li>
李四
</li>
<li>
王五
</li>
<li>
馬六
</li>
</ul>
解釋：<ul>元素表示無序列表，而<li>元素則是內部的列表項。
7.<ol><li>添加有序列表
<ol>
<li>
張三
</li>
<li>
李四
</li>
<li>
王五
</li>
<li>
馬六
</li>
</ol>
解釋：<ol>元素表示有序列表，而<li>元素則是內部的列表項。<ol>元素目前支持三種屬性
ol 元素屬性
屬性名稱
說明
start
從第幾個序列開始統計：<ol start="2">
reversed
是否倒序排列：<ol reversed>，一半主流浏覽器不支持
type
表示列表的編號類型，值分別為：1、a、A、i、I
li 元素屬性
屬性名稱
說明
value
強行設置某個項目的編號。
<li value="7">王五</li>
8.<dl><dt><dd>生成說明列表
<dl>
<dt>
這是一份文件
</dt>
<dd>
這裡是這份文件的詳細內容 1
</dd>
<dd>
這裡是這份文件的詳細內容 2
</dd>
</dl>
解釋：這三個元素是一個整體，但<dt>或<dd>並非都必須出現。
9.<figure><figcaption>使用插圖
<figure>
<figcaption>
這是一張圖
</figcaption>
<img src="img.png">
</figure>
解釋：這兩個元素一般用於圖片的布局。