這一章節介紹的新標簽主要是用于語義化的新結構標簽， 其他的標簽會在后面的章節陸續介紹。

很多同學都了解和使用過HTML5，也許你也知道了<p>的用法。但是很多人并不清楚<p>的適用范圍，它與<div>的使用區別又是什么？。學完這一節，你對這些標簽的用法和適用場景，都會一清二楚。

什么是語義化

那么有童鞋可能要問了：什么是語義化？它什么作用，很重要嗎？

?

每個HTML標簽都有自己特定含義（語義），語義化是指使用語義恰當的標簽，使頁面有良好的結構，頁面元素有含義，能夠讓人和搜索引擎都容易理解。

?

舉個例子，當你蓋一棟房子的時候，有的地方該用磚頭，有的部分該用瓷片，還有的地方得用水泥糊上，這樣蓋出來房子才會結實，整潔和美觀。

如果硬是要瓷片替代磚頭，房子勉強也能蓋起來，但是這樣的房子不牢固，容易倒塌，外觀也不好看。

?

網頁的語義化也是這個理兒，表示段落的時候你就得用<p>標簽，表示標題就得用<h1>~<h6>標簽，這樣的網頁稱之為結構良好，讓人和搜索引擎容易理解。你硬是要用<div>標簽，瀏覽器也能成功展示你想要的效果，但是這樣的網頁結構并不友好，不利于搜索引擎識別網頁的關鍵信息，網頁標簽一旦多了，維護起來，也是很蛋疼的。

?

HTML5帶來的這些語義化的新標簽，就是讓開發者能創建出更好的頁面結構。不用，你就是辜負了HTML5的一番好意了。

學習21個新標簽

講完了語義化，接下來，我們就來演示一下這些標簽的用法和使用場景。

1

<header>標簽：標簽定義文檔或者文檔的一部分區域的頁眉。

例子：可以用它來定義一個頁面文章的頁眉。

? ?<header>
??? ? ? <h1>22省份遭遇高溫持久戰</h1>
??? ? ? <span>2016-08-01 00:28</span>
? ?</header>

用法很簡單，用<header>標簽來替代了我們常用的<div class="header">形式。一個頁面，可以擁有多個<header>標簽。

2

<nav>標簽：定義導航鏈接的部分。

例子：用它來定義一個頁面的導航。

? ?<nav>
??? ? ? <a href="#">公司首頁</a>
??? ? ? <a href="#">產品簡介</a>
? ? ??? <a href="#">加入我們</a>
? ? ??? <a href="#">聯系我們</a>
? ?</nav>

用<nav>標簽代替了以前的<div class="nav">的形式。并不是每個HTML文檔都用得上<nav>標簽，要根據結構布局需求來使用。

3

<footer> 標簽：定義文檔或者文檔的一部分區域的頁腳。

例子：包含文檔創作者的姓名、文檔的版權信息等等。

? ?<footer>
?? ? ?? 作者：前端君 <br />
?? ? ?? ? web前端教程公眾號版權所有
? ?</footer>

用<footer>標簽可以代替以前的<div class="footer">的寫法，一個頁面，可以擁有多個<footer>標簽。

4

<p> 標簽：定義文檔的某個區域。

乍一看，這不是跟div差不多嗎？這個問題前端君也疑惑了很久，在寫這個章節的時候，決定要找出它們的區別。

官方是這些解釋的：

The p element represents a ? generic p of a document or application. A p, in this ? context, is a thematic grouping of content, typically with a heading.

大概的意思是：<p>元素表示文檔或應用的一個部分。所謂“部分”，這里是指按照主題分組的內容區域，通常會帶有標題。

注意到嗎？這里的<p>標簽，通常里面會包含標題和內容。也就是說<p>不是通用容器元素。如果僅僅是當做普通的容器，那應該用<div>元素。

<p>標簽所包含的區域里面，應該包含標題<h1>~<h6>標簽和內容段落<p>標簽，而div標簽使用的時候，并沒有這樣的要求。

例子：定義一個含有標題和段落的<p>區域。

? ?<p>
?? ? ?? <h1>臺風“妮妲”登陸廣東深圳</h1>
?? ? ? ?<p>今年第4號臺風“妮妲”于2日3時35分以強臺風級在廣東省深圳市大鵬半島登陸，中心最大風力14級。</p>
? ?</p>

所以大家要謹記了，不能拿p標簽當做div來使用。

5

<article> 標簽：定義文章、頁面或者是應用程序當中的獨立完整可以被外部引用的內容。

什么意思呢？它可以以一篇文章、一篇帖子、一段評論形式出現。除了內容主題以外，通常還會有自己的標題及腳注。

例子：包含標題+內容+腳注的案例。

? ?<article>
??? ? ? <header>
??????? ? ? <h1>數說臺風...</h1>
??? ? ? </header>
??? ? ? <p>今年第4號臺風“妮妲”....</p>
??? ? ? <footer>注：版權歸天氣網所有</footer>
? ?</article>

像以上的案例中，包含了頭部標題、內容和腳注的模塊，就適合使用<article>標簽，<article>標簽可以適當地嵌套使用。

6

<aside> 標簽：定義 <article> 標簽外的內容。

它定義的內容應該與附近的內容相關。具體用兩種使用方法：

1、嵌套在<article>標簽內，此時它的主要表示的是內容的附屬信息部分，其中的內容可以是與當前文章有關的相關資料、名詞解釋，等等。

示例：<aside> 標簽被包含在<article>標簽內。

? ?<article>
??? ? ? <p>今年第4號臺風“妮妲”....</p>
??? ? ? <aside>
?????? ? ?? <span>文章排名：2</span>
?????? ? ?? <span>熱門關鍵字：臺風、妮妲</span>
?????? ? ?? <span>事件熱度：5</span>
??? ? ? </aside>
? ?</article>

這個案例中的<aside>定義的內容就是作為整個<article>文章的相關信息介紹。

ps：<article>標簽本應該包含標題和腳注部分，但是這里用于講解而省略。

2、在<article>標簽之外使用，作為頁面或站點全局的附屬信息部分。最典型的是側邊欄，其中的內容可以使友情鏈接，博客中的其它文章列表、廣告單元等。

示例：一個關于前幾天臺風報道文章的相關文章推薦列表部分。

? ?
? ?<aside>
?? ? ?? <h1>相關推薦</h1>
?? ? ?? <a href="#">原來廣東是被“禍害”的地方...</a>
?? ? ?? <a href="#">菜市場是臺風“妮妲”最早...</a>
?? ? ?? <a href="#">臺風肆虐的朋友圈是這樣的...</a>
? ?</aside>

7

<details> 標簽：用于描述文檔或文檔某個部分的細節。

<summary> 標簽：包含<details> 標簽的標題。

這兩個標簽一般都會一起使用，所有我們在這里一并學習。

<details>?標簽定義文檔的細節，用戶可進行查看，或通過點擊進行隱藏。而<summary> 標簽作為<details> 標簽的標題，一般會作為第一個子元素。

示例：<details> 標簽和<summary> 標簽一起使用的案例。

? ?<details>
??? ? ? <summary>細節的標題</summary>
??? ? ? <p>細節內容，點擊可查看或者隱藏</p>
? ?</details>

<details> 標簽和<summary>結合使用，最終的頁面效果是這樣的：

(這是一個gif的動畫圖)

是不是很好玩，自帶手風情的切換效果。用戶可以通過鼠標點擊查看或者隱藏，默認效果是隱藏的，點擊再展開。如果你想它默認就展開的話，可以通過設置<details>的一個屬性：open。

? ?<details open></details>

目前，只有 Chrome 和 Safari 6 支持 <details> 標簽。

9

<figure> 標簽：規定獨立的流內容（圖像、圖表、照片、代碼等等）。

<figcaption> 標簽：元素定義<figure>的標題。

一個figure元素內最多只允許放置一個figcaption元素，其他元素可無限放置。

示例：<figure> 標簽和<figcaption> 標簽一起使用。

? ?<figure>
??? ? ? <figcaption>橫跨珠江的獵德大橋</figcaption>
??? ? ? <img src="ld.jpg" alt="獵德大橋">
? ?</figure>

效果如下圖：

注：<figcaption> 元素應該被置于 <figure> 元素的第一個或最后一個子元素的位置。

11

<mark> 標簽：定義帶有記號的文本。

示例：帶有<mark>標簽的段落。

? ?<p>廣東的<mark>強風雨</mark>將持續至3日8時</p>

效果圖：

哈哈，這貨自帶背景變黃色的效果。

12

<meter> 標簽：定義度量衡。

僅用于已知最大和最小值的度量。它有個必選的屬性value，用于規定度量的當前值。

示例：80%的度量例子。

? ?<meter value="0.8"></meter>

效果圖：

你所看到的也是<meter>自帶的樣式，綠色部分長度代表值當前值。樣子長得是不是很像一個進度條？但它并不是專業的進度條標簽，要表示進度條，你得用下面這個新標簽。

13

<progress>標簽：定義運行中的任務進度（進程）。

<progress> 標簽有兩個重要的屬性，max屬性規定需要完成的值，value規定進程的當前值。在實際使用過程中，它經常與 JavaScript 一起使用來顯示任務的進度。

示例：總任務為100，當前只完成了15%。

? ?
? ?<progress value="15" max="100"></progress>

效果圖：

樣式也是自帶的。大家在使用的時候，切莫與定義度量衡的<meter>標簽混淆了，畢竟它們的外觀和用法比較相似。

14

<time> 標簽：定義時間或日期。

用法很簡單，但這里的定義時間和定義日期是兩種不同的用法。我們先來看看怎么定義時間。

示例：定義一個時間。

? ?<p>明天早上<time>9:00</time>準時到公司</p>

示例：結合datetime屬性，定一個日期，比如：2016年的中秋節。

? ?<p>還有一個多月就<time datetime="2016-09-15">中秋節</time>了</p>

案例中<time>標簽內容是“中秋節”的日期，而屬性datetime標示的是中秋節所對應的時間。<time>標簽不會附帶任何樣式，跟<span>標簽一樣。但是不同的是<time>標簽更具有語義。

15

<wbr>標簽： 規定在文本中的何處適合添加換行符。

這個怎么理解呢，舉個例子你就懂了。很多時候我們的文檔內容中，存在著單詞，特別是比較長的單詞，當它們遇到換行的時候，很容易出現錯位的現象，比如：

當XMLHttpRequest單詞遇到了換行的時候，它并沒有很好地適配容器的寬度，而出現了錯位。

那么有童鞋說了：我們可以用word-break來控制它換行不就行了嗎？確實，我們可以用word-break來實現換行，讓它不錯位。但是，閱讀效果并不是最優。

看到了，此時XMLHttpRequest單詞被拆分得亂七八糟，根本不利于閱讀。這個時候，如果我們使用了<wbr>合理地進行換行控制，效果就理想多了。

? ?你要學好XML <wbr> Http <wbr> Request 對象

我們將XMLHttpRequest單詞拆分成三部分 ：XML+Http+Request，因為我們認為這樣的拆分更符合人的閱讀習慣。我們看看效果：

這個時候，如果XMLHttpRequest單詞遇到換行的時候，瀏覽器跟根據<wbr>標示位置，合理地對單詞進行換行拆分。

注意：<wbr>并不是一個閉合的標簽。它是一個空標簽，跟<br>、<hr>類似。

往下的這幾個新標簽的瀏覽器支持度并不樂觀，但是出于學習的目的，前端君還是來介紹一下。

16

<dialog>標簽：定義對話框或窗口。

<dialog>標簽有一個open屬性，它控制對話框的顯示和隱藏。對話框會以絕對定位，水平居中的形式顯示。不過，目前只有Chrome瀏覽器支持。

? ?<dialog open>這是對話窗口</dialog>

用法很簡單，只需要在標簽內編寫對話框的內容即可。效果如下圖：

open屬性表示dialog窗口展開，省略open屬性，dialog窗口會被隱藏。雖然很實用的一個標簽，但是瀏覽器對它的支持不完善，很遺憾。

17

<ruby>標簽：定義 注釋（中文注音或字符）。

<rt> 標簽：定義字符（中文注音或字符）的解釋或發音。

<rp> 標簽：在 ruby 注釋中使用，以定義不支持 <ruby>標簽的瀏覽器所顯示的內容。

這3個標簽得結合著一起使用，但是瀏覽器都它的支持各不一樣。

? ?<ruby>
??? ? ? 世界貿易
? ? ? ?<rt>
??????? ? ? <rp> ( </rp>
??????? ? ? shi jie mao yi
??????? ? ? <rp> ) </rp>
??? ? ? </rt>
? ?</ruby>

看著貌似挺復雜的，其實并不難，我們一起來看看效果。

當瀏覽器支持<ruby>標簽的時候，<rp>標簽就會被隱藏，顯示結果為：

<rt>標簽的內容會以標注拼音的形式顯示在 “世界貿易” 的上方。倘若瀏覽器不支持<ruby>標簽，又會怎樣顯示呢？我們來看看：

這個時候，<ruby>標簽的內容就會顯示在同一行，很人性化。但是，瀏覽器對這個標簽的支持度不高，除非特殊情況，否則沒必要使用這個標簽

20

<bdi>標簽：允許您設置一段文本，使其脫離其父元素的文本方向設置。

這個標簽你一定很陌生，在日常開發中壓根都沒用過，何況瀏覽器對它的支持也不友好。W3C上說只有Chrome和Firefox支持。但我測試了一下，他倆并沒有支持，反倒IE支持了這個標簽。但整體來說，瀏覽器對這個標簽的支持還是有所欠缺。

這個標簽要結合屬性dir來一起使用，它的屬性值有：rtl(右到左)，ltr(左到右)。

示例：屬性dir值為ltr，表示從左到右。

? ?<bdi dir="ltr">你好</bdi>2016

顯示出來的結果：“你好2016”。

示例：屬性dir值為ltr，表示從右到左。

? ?<bdi dir="rtl">你好</bdi>2016

此時，顯示的結果就變成了：“2016你好”，因為<bdi>標簽的文本被移到了右側。

21

<command>標簽：定義命令按鈕。

目前沒有瀏覽器支持此標簽，只有IE9支持并僅僅支持部分功能。

? ?<command onclick="alert(1)">點擊我</command>

因為其很多的屬性沒有被瀏覽器支持，所以前端君暫時無法展示給大家看。這個標簽大家還是要慎用。

可能有童鞋會問：“為什么還有很多受用的標簽沒有講解呢？比如<vedio>和<audoi>標簽等等”。

前端君：“我根據新標簽的職能進行了劃分，本節講解的是語義化的結構標簽，后面的章節會陸續介紹其他新標簽。”

本節收獲

學完本節，你應該學會了：

1、語義化的含義和作用。

2、21個新標簽的用法和使用場景。

3、慎用瀏覽器支持度不完善的標簽。

注：要購買《ES6系列章節測試》兩套習題的同學，加前端君微信后可以直接留言，詳情點擊：《重磅：為ES6系列設計的2套習題+答案解析》。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的第三节：21个新的语义化标签，你撸过几个？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。