速記H5的新標籤

一直有面試官問，h5的新標籤有哪些？一直記不住，今天整理了一下，發現其實蠻好記得。將其分類就行了;這裏我只寫一下，大部分瀏覽器都支持的

語義化標籤

咱們從一個網頁的頭記憶到尾 那麼首先就是header

1. header 定義文檔的頁眉
   通常用的話，應該就會把h標籤什麼的放在裏面，介紹文章信息
2. nav 定義導航連接
   基本上就是a標籤在裏面。分類，模塊什麼的
3. article 定義文章，
4. section 定義文檔中的節（section、區段）。好比章節、頁眉、頁腳或文檔中的其餘部分。
   屬性 cite section 的 URL，假如 section 摘自 web 的話。應該相似cite標籤吧。我基本沒見過使用。。。
5. footer 定義文檔或節的頁腳，
   元素應當含有其包含元素的信息。 頁腳一般包含文檔的做者、版權信息、使用條款連接、聯繫信息等等。您能夠在一個文檔中使用多個

   元素。
6. figcaption 定義figrue的標題
7. figure 規定獨立的流內容（圖像、圖表、照片、代碼等等）。figure 元素的內容應該與主內容相關，但若是被刪除，則不該對文檔流產生影響。

簡單腳本標籤

1. meter 已知範圍或分數值內的標量測量。也被稱爲 gauge（尺度）。 例子：磁盤用量、查詢結果的相關性，等等。 IE不支持

form 規定 <meterl > 元素所屬的一個或多個表單。 hight 規定被視做高值的度量 low 規定被視做低值的度量 max 最大值 min 最小值 value 當前值 optimum 設定最優值的地方

大概是這個樣子的:
min--low-optimum-height-max

<meter min="0" low="45" height="80" max="100" value="90">90</meter>
<meter min="0" low="45" height="80" max="100" value="90">75</meter>
<meter min="0" low="45" height="80" max="100" value="90">35</meter>
複製代碼

• 90
• 75
• 35

2. progress 表進度條 請結合 <progress> 標籤與 JavaScript 一同使用，來顯示任務的進度。

max 最大值 value 當前進度

<progress max="100" value="75">75</progress>
<progress>
複製代碼

• 75

3. output 標籤訂義不一樣類型的輸出，好比腳本的輸出。IE不支持

for 定義輸出域相關的一個或多個元素 form 定義輸入字段所屬的一個或多個表單 name 對象惟一標識符

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
複製代碼

0 100 + =

50

這裏的output好像被限制了,並不能自動變化了

音 畫 動態標籤

1. audio 音樂標籤
2. canvas 畫圖的 這個能夠看個人速記canvas系列
3. video 視頻的
4. source audio和video的資源標籤，避免瀏覽器不支持單一資源格式
5. track 視頻字幕啥的

加強系標籤

1. datalist 輸入時的自動補全，或者提示功能吧

<input list="cars" />
<datalist id="cars">
	<option value="BMW">
	<option value="Ford">
	<option value="Volvo">
	<option value="aMW">
</datalist>
複製代碼

2. details 建立一個掛件，被展開才顯示內容
3. summary details的標題，或者說顯示出來的部分 這兩個都不支持IE和Edge

<details>
    <summary>詳情請看</summmary>
    <p>也沒啥東西</p>
</details>
複製代碼

詳情請看

也沒啥東西

4. mark 定義標識，高亮文本
5. wbr 定義單詞換行的方，就是那種長單詞

新元素

1. aside 表示一個和其他頁面內容幾乎無關的部分，被認爲是獨立於該內容的一部分而且能夠被單獨的拆分出來而不會使總體受影響。其一般表現爲側邊欄或者標註框（call-out boxes）。

2. bdi 定義文本方向

3. embed 將外部內容嵌入文檔中的指定位置。此內容由外部應用程序或其餘交互式內容源（如瀏覽器插件）提供。

4. ruby rt rp 東亞文字的拼音或註釋 rt是上部的拼音，rp是不支持rt的時候出來的

<ruby>
  <rb>漢</rb>字
  <rp>(</rp><rt>han</rt>zi<rp>)</rp>
</ruby>
<ruby>
  漢 <rp>(</rp><rt>han</rt><rp>)</rp>
  字 <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>
複製代碼

漢字 (hanzi) 漢 (han) 字 (zi)

摘自

• [MDN]
• [W3C]