html分組元素

?

學(xué)習(xí)要點(diǎn)：

??? 1.分組元素總匯

??? 2.分組元素解析

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

一．分組元素總匯

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

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

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

????????? div??????? 　　　　　　　　一個(gè)沒有任何語義的通用元素，和span是對應(yīng)元素

?????? blockquote??? 　　　　　　表示引自他出的大段內(nèi)容

?????????? pre?????? 　　　　　　　　表示其格式應(yīng)被保留的內(nèi)容

?????????? hr??????? 　　　　　　　　表示段落級別的主題轉(zhuǎn)換，即水平線

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

?????????? li??????? 　　　　　　　　用于ul,ol元素中的列表項(xiàng)

???????????????????? 表示包含一系列術(shù)語和定義說明的列表。dt在dl內(nèi)部表示

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

???????????????????? 術(shù)語，一般充當(dāng)標(biāo)題；dd在dl內(nèi)部表示定義，一般是內(nèi)容。

???????? figure????? 表示圖片

?????? figcaption??? 表示figure元素的標(biāo)題

?

二．分組元素解析?

?1.<p>建立段落

<p>這是一個(gè)段落</p> <p>這也是一個(gè)段落</p>

效果：

這是一個(gè)段落

這也是一個(gè)段落

解釋：<p>元素實(shí)際作用就是將內(nèi)部包含的文本形成一個(gè)段落；而段落和段落之間保持一定量的空隙。

?

2.<div>通用分組

<div>這是一個(gè)通用分組</div> <div>這是又一個(gè)通用分組</div>

效果：

這是一個(gè)通用分組 這是又一個(gè)通用分組 解釋：<div>元素在早期的版本中非常常用，通過<div>這種一般性分組元素進(jìn)行布局。而在HTML5中，由于語義的緣故，被其他各種文檔元素所代替。和<p>段落的區(qū)別就是，兩段文本的上下空隙是沒有的，空隙間隔和<br>換行一樣。

?

3.<blockquote>引用大段他出內(nèi)容

<blockquote>這是一個(gè)大段引自他出內(nèi)容</blockquote> <blockquote>這是另一個(gè)大段引自他出內(nèi)容</blockquote>

效果：

這是一個(gè)大段引自他出內(nèi)容 這是另一個(gè)大段引自他出內(nèi)容

解釋：<blockquote>元素實(shí)際作用除了和<p>元素一樣，有段落空隙的功能，還包含了首尾縮進(jìn)的功能。語義上表示，大段的引用他出的內(nèi)容。

?

4.<pre>展現(xiàn)格式化內(nèi)容

<pre>######################### </pre>

效果：

#########################

解釋：<pre>元素實(shí)際作用就是編輯器怎么排版的，原封不動的展現(xiàn)出來。當(dāng)然，這種只適合簡單的排版，復(fù)雜的排版就無法滿足要求了。

?

5.<hr>添加分隔

<hr>

效果：

---

?

?解釋：<hr>元素實(shí)際作用就是添加一條分割線，意圖呈現(xiàn)上下文主題的分割。

?

6.<ul><li>添加無序列表

<ul><li>張三</li><li>李四</li><li>王五</li><li>馬六</li> </ul>

效果：

• 張三
• 李四
• 王五
• 馬六

?解釋：<ul>元素表示無序列表，而<li>元素則是內(nèi)部的列表項(xiàng)。

?

7.<ol><li>添加有序列表

<ol><li>張三</li><li>李四</li><li>王五</li><li>馬六</li> </ol>

效果：

張三

李四

王五

馬六

?解釋：<ol>元素表示有序列表，而<li>元素則是內(nèi)部的列表項(xiàng)。<ol>元素目前支持三

種屬性。

ol元素屬性

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

start???????? 從第幾個(gè)序列開始統(tǒng)計(jì)：<ol start="2">?

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

效果：

張三

李四

王五

馬六

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

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

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

1數(shù)字類型

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

效果：

張三

李四

王五

馬六

a小寫字母類型

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

效果：

張三

李四

王五

馬六

A大寫字母類型

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

效果：

張三

李四

王五

馬六

i類型

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

效果：

張三

李四

王五

馬六

I類型

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

效果：

張三

李四

王五

馬六

?

li元素屬性

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

value????????? 強(qiáng)行設(shè)置某個(gè)項(xiàng)目的編號。

?

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

?

效果：

張三

李四

王五

馬六

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

?

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

<dl><dt>這是一份文件</dt><dd>這里是這份文件的詳細(xì)內(nèi)容1</dd><dd>這里是這份文件的詳細(xì)內(nèi)容2</dd> </dl>

效果：

這是一份文件

這里是這份文件的詳細(xì)內(nèi)容1

這里是這份文件的詳細(xì)內(nèi)容2

解釋：這三個(gè)元素是一個(gè)整體，但<dt>或<dd>并非都必須出現(xiàn)。

?

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

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

效果：

這是一張圖

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/adc8868/p/5954374.html

總結(jié)

以上是生活随笔為你收集整理的第六十二节，html分组元素的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。