10 個你不知道你須要的 HTML 元素

阿里雲最近在作活動，低至2折，有興趣能夠看看：
https://promotion.aliyun.com/...

---

爲了保證的可讀性，本文采用意譯而非直譯。

我聽過 「HTML很容易」 這種情緒的次數比我想象的要多。 雖然我贊成 HTML 可能比其餘編程語言更容易學習，但你不該該認爲它是理所固然的。

HTML 是一種功能強大的標記語言，可用於爲咱們的 web 應用程序提供結構並提供強大的可訪問性優點，但只有在適當使用時才能使用。

所以，今天咱們將發覺 10 個你可能不知道存在的 HTML 元素，但願你能夠建立易訪問、結構更健全的 web 應用程序。

若是你想了解更多關於 HTML 的知識，能夠訪問W3Schools以得到更多的 HTML 元素。

Audio

<audio>標籤能夠播放一個音頻，例如音樂或其餘音頻流。目前支持三種文件格式:MP三、WAV 和 OGG。

運行效果：

查看示例

Blockquote

<blockquote> 標籤指定從另外一個源引用的部分。

運行效果：

查看示例

Output

<output> 標籤表示一個計算的結果。你可使用加號和等號來指定應該將第一個和第二個輸入值輸出到輸出標記;可使用包含要合併的兩個元素的 ID 的 for 屬性來表示這一點。

運行效果：

查看示例

Picture

<picture> 經過包含零或多個 <source> 元素和一個 <img> 元素來爲不一樣的顯示/設備場景提供圖像版本。瀏覽器會選擇最匹配的子 <source> 元素，若是沒有匹配的，就選擇 <img> 元素的 src 屬性中的URL。而後，所選圖像呈如今<img>元素佔據的空間中。

source 元素具備如下屬性：

• srcset(必填)：定義要顯示的圖像的URL
• media：media 屬性容許你提供一個用於給用戶代理做爲選擇 <source> 元素的依據的媒體條件(media condition)（相似於媒體查詢）。若是這個媒體條件匹配結果爲 false，那麼這個 <source> 元素會被跳過。
• sizes： 定義單個寬度值，具備寬度值的單個媒體查詢，或具備寬度值的逗號分隔的媒體查詢列表
• type: type 屬性容許你爲 <source> 元素的 srcset 屬性指向的資源指定一個 MIME 類型。若是用戶代理不支持指定的類型，那麼這個 <source> 元素會被跳過。

若是瀏覽器不支持該元素，或者全部<source>標籤都不匹配，則使用<img>標籤提供向後兼容性。

Progress

<progress> 標籤表示任務的進度。

<progress> 標籤不能替代<meter>標籤，所以指示磁盤空間使用狀況或查詢結果相關性的組件應該使用<meter>標籤。

運行效果：

查看示例

Meter

<meter>標籤訂義了一個定義範圍內的標量度量，或者一個分數值。你還能夠經過名稱gauge引用此標記。

你可使用<meter>標籤來顯示磁盤使用狀況統計數據，或者指示搜索結果的相關性。

不該該使用<meter>標籤來指示任務的進度;這些類型的組件應該由<progress>元素定義。

運行效果：

查看示例

Template

HTML內容模板（<template>）元素是一種用於保存客戶端內容機制，該內容在加載頁面時不會呈現，但隨後能夠在運行時使用JavaScript實例化。

使用 JavaScript，你可使用cloneNode()方法渲染此內容。

Time

<time>標籤訂義了人類可讀的日期或時間。 這能夠用於以機器可讀方式編碼日期和時間，以便用戶代理能夠將生日提醒或預約事件添加到用戶的日曆。 此外，這容許搜索引擎產生「更智能」的搜索結果。

運行效果：

查看示例

Video

<video> 標籤指定一個影片剪輯或視頻流。支持的格式包括MP四、WebM和Ogg。

運行效果：

查看示例

Word Break Opportunity

若是你有一個很長的文本塊，或者一個很長的單詞，你可使用<wbr>標籤來指定文本主體中最理想的分割位置。這是一種確保瀏覽器在調整大小時不會在奇怪的位置中斷文本的方法。

運行效果：

查看示例

但願這十個HTML元素爲你提供了一些構建出色應用程序的新工具。

你的點贊是我持續分享好東西的動力，歡迎點贊！

交流

乾貨系列文章彙總以下，以爲不錯點個Star，歡迎 加羣 互相學習。

https://github.com/qq44924588...

我是小智，公衆號「大遷世界」做者，對前端技術保持學習愛好者。我會常常分享本身所學所看的乾貨，在進階的路上，共勉！

關注公衆號，後臺回覆福利，便可看到福利，你懂的。