第 5 章 分組元素

水之原發表於2016-04-26

學習要點:

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>

解釋:這兩個元素一般用於圖片的佈局。

相關文章