學習要點：
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>
解釋：這兩個元素一般用於圖片的佈局。