第六十二節，html分組元素

html分組元素

?

學習要點：

??? 1.分組元素總匯

??? 2.分組元素解析

??? 本章主要探討HTML5中分組元素的用法。所謂分組，就是用來組織相關內容的HTML5元素，清晰有效的進行歸類。

一．分組元素總匯

??? 為了頁面的排版需要，HTML5提供了幾種語義的分組元素。

??????? 元素名稱???????????????????????????????? 說明

??????????? p ? ? ? ? ?　　　　　　　　表示段落

????????? div??????? 　　　　　　　　一個沒有任何語義的通用元素，和span是對應元素

?????? blockquote??? 　　　　　　表示引自他出的大段內容

?????????? pre?????? 　　　　　　　　表示其格式應被保留的內容

?????????? hr??????? 　　　　　　　　表示段落級別的主題轉換，即水平線

???????? ul,ol???? ??　　　　　　　　表示無序列表，有序列表

?????????? li??????? 　　　　　　　　用于ul,ol元素中的列表項

???????????????????? 表示包含一系列術語和定義說明的列表。dt在dl內部表示

??????? dl,dt,dd

???????????????????? 術語，一般充當標題；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>

效果：

1. 張三
2. 李四
3. 王五
4. 馬六

?解釋：<ol>元素表示有序列表，而<li>元素則是內部的列表項。<ol>元素目前支持三

種屬性。

ol元素屬性

屬性名稱?????????????????????????????????????? 說明

start???????? 從第幾個序列開始統計：<ol start="2">?

<ol start="3"><li>張三</li><li>李四</li><li>王五</li><li>馬六</li>
</ol>

效果：

3. 張三
4. 李四
5. 王五
6. 馬六

reversed??????? 是否倒序排列：<ol reversed>，一半主流瀏覽器不支持

<ol start="3" reversed><li>張三</li><li>李四</li><li>王五</li><li>馬六</li>
</ol>

type????????? 表示列表的編號類型，值分別為：1、a、A、i、I

1數字類型

<ol type="1"><li>張三</li><li>李四</li><li>王五</li><li>馬六</li>
</ol>

效果：

1. 張三
2. 李四
3. 王五
4. 馬六

a小寫字母類型

<ol type="a"><li>張三</li><li>李四</li><li>王五</li><li>馬六</li>
</ol>

效果：

1. 張三
2. 李四
3. 王五
4. 馬六

A大寫字母類型

<ol type="A"><li>張三</li><li>李四</li><li>王五</li><li>馬六</li>
</ol>

效果：

1. 張三
2. 李四
3. 王五
4. 馬六

i類型

<ol type="i"><li>張三</li><li>李四</li><li>王五</li><li>馬六</li>
</ol>

效果：

1. 張三
2. 李四
3. 王五
4. 馬六

I類型

<ol type="I"><li>張三</li><li>李四</li><li>王五</li><li>馬六</li>
</ol>

效果：

1. 張三
2. 李四
3. 王五
4. 馬六

?

li元素屬性

屬性名稱?????????????????????????????????????? 說明

value????????? 強行設置某個項目的編號。

?

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

?

效果：

1. 張三
2. 李四
9. 王五
10. 馬六

?注意：以上都是有序列表屬性

?

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

<dl><dt>這是一份文件</dt><dd>這里是這份文件的詳細內容1</dd><dd>這里是這份文件的詳細內容2</dd>
</dl>

效果：

這是一份文件

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

這里是這份文件的詳細內容2

解釋：這三個元素是一個整體，但<dt>或<dd>并非都必須出現。

?

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

<figure><figcaption>這是一張圖</figcaption><img src="22.png">
</figure>

效果：

這是一張圖

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

?