你知道卻不經常使用的HTML標籤（二）

以前寫過一個 你知道卻不經常使用的HTML標籤（一） ,今天接着以前的繼續來學習一下 HTML 的不經常使用但又特別實在的標籤吧。Follow me~~

八、vedio、audio 和 track

vedio、audio 和 track 三者都是 HTML5 的產物，相信不少小夥伴，都確定使用過<video>和<audio> ，由於比較經常使用，這裏就不介紹<video>和<audio>了，今天說一下<track>。

HTML <track> 元素 被看成媒體元素 <audio> 和<video>的子元素來使用。它容許指定計時字幕（或者基於時間的數據），例如自動處理字幕。

track 給媒體元素添加的數據的類型在 kind 屬性中設置，屬性值能夠是 subtitles, captions, descriptions, chapters 或 metadata。該元素指向當用戶請求額外的數據時瀏覽器公開的包含定時文本的源文件。

一個media 元素的任意兩個 track 子元素不能有相同的 kind, srclang, 和 label屬性。

<video controls width="250" src="xxx.mp4">
    <track default kind="captions" srclang="en" src="xxxxx.vtt"/>
Sorry, your browser doesn't support embedded videos.
</video>
複製代碼

效果圖：

九、optgroup 標籤

<optgroup> 標籤訂義選項組。

optgroup 元素用於組合選項。當您使用一個長的選項列表時，對相關的選項進行組合會使處理更加容易。

<select>
    <optgroup label="Group 1">
      <option>Option 1.1</option>
    </optgroup> 
    <optgroup label="Group 2">
      <option>Option 2.1</option>
      <option>Option 2.2</option>
    </optgroup>
    <optgroup label="Group 3" disabled>
      <option>Option 3.1</option>
      <option>Option 3.2</option>
    </optgroup>
 </select>
複製代碼

效果圖：

簡單的介紹這個功能，大多數的時候，咱們所選擇的框架開發，都會集成這種效果，可維護性也比較好，這裏權當認識一下這個標籤，不要遺忘了它~

十、output

HTML <output> 標籤是HTML 5 中的新標籤，表示計算或用戶操做的結果,執行計算而後在 <output> 元素中顯示結果。

註釋：Internet Explorer 不支持 標籤。

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" name="b" value="40" /> +
  <input type="number" name="a" value="10" /> =
  <output name="result"></output>
</form>
複製代碼

效果圖：

十一、progress 標籤

HTML中的progress (<progress>) 元素用來顯示一項任務的完成進度.

進度條：<progress value="70" max="100">70 %</progress> <br />
進度條：<progress></progress>
複製代碼

效果圖：

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

不過通常會用到進度條的地方，都是組件，框架自帶之類的，這個算是雞肋的了,不過了解一下仍是沒有壞處的，哦對了，這個標籤Internet Explorer 9 以及更早的版本不支持。

十二、meter 標籤

同progress 相比 meter 元素來度量給定範圍（gauge）內的數據：

<p>顯示度量值：</p>
<meter value="3" min="0" max="10">3/10</meter><br>
<meter value="0.6">60%</meter>
複製代碼

效果圖：

1三、details 標籤

HTML <details>元素可建立一個掛件，僅在被切換成展開狀態時，它纔會顯示內含的信息。<summary> 元素可爲該部件提供概要或者標籤。

<details>
  <summary>點擊展開</summary>
  <p>世間萬物，爲我所用，非我所得。</p>
</details>
複製代碼

效果圖：

注意： 目前只有 Chrome 和 Safari 6 支持 <details> 標籤。

-------------------------------The end ------------------------------------

以上是對上一章節的補充，你知道卻不經常使用的HTML標籤（一），還有更多有趣的標籤，歡迎評論，補充，把你知道的，都寫在評論區吧。

個人公衆號

打個廣告，路過的小夥伴，看到了掃個碼關注我吖，每週都會推送你不知道的有趣知識，同行之路，與我相伴。

微 信 掃 碼 關 注 我 吧 ❤