第六十二節，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          表示列表的編號類型，值分別爲：一、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>

效果：

這是一張圖

解釋：這兩個元素通常用於圖片的佈局。