[新世界的大門]這仍是我瞭解的那個HTML標籤嗎？

寫在前面

因爲 IE 這種老古董的存在和瀏覽器廠家標準不一的狀況，前端開發者們大多更願意寫 JavaScript，而對 HTML 和 CSS 嗤之以鼻。但隨着 win10 的普及和 Edge 轉投 chromium 的懷抱，你們是否是能夠對前端開發的將來更多了一些期待，其實如今 HTML 和 CSS 標準推出的也是很快了，爲什麼不分出一點時間給它們呢。下面整理了一些你們可能不熟悉或不常常用的標籤，不知道會不會刷新你對 HTML 的認識？

想要給漢字加上拼音

你有沒有遇到過在頁面裏想要給一些生僻字加上註釋拼音的場景，如今好了，有了 ruby ，你能夠很方便地的給漢字加上拼音了。

<ruby> 快狗打車<rt>kuaigoudache</rt> </ruby>
複製代碼

這時候你可能想給拼音加上聲調，細心的同窗還可能注意到了拼音和漢字有時候並不會徹底地對齊，怎麼作？搜狗輸入法切換軟鍵盤能夠添加聲調，或者點開下面的 /在線中文拼音轉換/ 輸入漢字可得拼音；對齊的終極大法就是單獨給每一個字加拼音，rp 是 瀏覽器不支持 ruby 標籤時的降級方案。

<ruby>
  快<rp>(</rp><rt>kuài</rt><rp>)</rp> 狗<rp>(</rp><rt>gǒu</rt><rp>)</rp> 打<rp>
    (</rp ><rt>dǎ</rt><rp>)</rp> 車<rp>(</rp><rt>chē</rt><rp>)</rp>
</ruby>
複製代碼

codepen > 在線中文拼音轉換 > ruby| MDN

details 掛件

details 建立一個掛件，默認處於關閉狀態，只有在打開的狀態纔會顯示其中隱藏的內容。

<details>
  <summary>總結</summary>
  <!-- 非必填，默認顯示「詳細信息」 -->
  我是內容，我是內容。我是內容，我是內容。我是內容，我是內容。
</details>
複製代碼

codepen > details | MDN

meter 計量器

meter 用來展現肯定範圍內的標量值。 Min (fix: 大小寫統一) 最小值，若是設置必需要比最大值小，不設置時默認爲 0；max 最大值，若是設置必需要比最小值大，不設置時默認爲 1。 low 和 high 分別定義了低值區間上限值和高值區間的下限值，瀏覽器會根據當前值所在的區間渲染不一樣的效果。 注意區別於 progress，若是隻是用來表示百分比和進度，建議用progress。

<!-- 計量器 -->
<p>油體積：<meter min="0" max="100" value="60" high="85">60L</meter></p>
<p>油體積：<meter min="0" max="100" value="90" high="85">85L</meter></p>
複製代碼

codepen > meter | MDN

progress進度條

progress 用來顯示任務的完成進度，外觀如何顯示能夠本身定義，一般顯示成進度條的形式。

<label for="file">進度:</label>
<progress id="file" max="100" value="60"> 60% </progress>
複製代碼

progress | MDN

picture 圖片元素

picture 元素包含一個或多個 source 元素和一個img 元素，包含的img 元素更像是一個備選方案，瀏覽器加載的時候會先檢查每個 source 元素的srcset、media、type等屬性，並選用最合適的一個，若是沒有合適的，就會顯示img元素。

<picture>
  <!-- 屏幕尺寸大於800px才顯示，不然顯示 下面的 img -->
  <source srcset="https://cn.vuejs.org/images/logo.png" media="(min-width: 800px)" />
  <img src="https://static.daojia.com/assets/project/tosimple-pic/iview-logo_1558354678823.png" />
</picture>
複製代碼

picture | MDN

output 顯示錶單元素的計算結果

能夠組成一個簡易計算器。

<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">50</output>
</form>
複製代碼

codepen > output | MDN

track 媒體元素

HTML 5 新增標籤，看成 audio 和 video 的子元素，通常是用來處理字幕等功能。 track添加的數據的類型經過 kind 屬性指定，屬性值能夠是： subtitles | captions | descriptions | chapters | metadata 。

<video controls poster="/images/sample.gif">
  <source src="sample.mp4" type="video/mp4" />
  <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en" />
  Sorry, your browser doesn't support embedded videos.
</video>
複製代碼

track | MDN

結尾

誠然，有一些標籤會有必定的兼容性，好比 picture。但若是你的目標用戶使用 IE 的份額不多，爲了更好的用戶體驗和網站性能，能夠評估這樣是否是也值得呢。

Can I use… Support tables for HTML5, CSS3, etc

關於咱們

快狗打車前端團隊專一前端技術分享，按期推送高質量文章，歡迎關注點贊。