【譯】10 個你不知道你需要的 HTML 元素

譯者：前端小智

原文：dev.to/emmawedekin…

我聽過 “HTML很容易” 這種情緒的次數比我想象的要多。 雖然我同意 HTML 可能比其他程式語言更容易學習，但你不應該認為它是理所當然的。

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

因此，今天我們將發覺 10 個你可能不知道存在的 HTML 元素，希望你可以建立易訪問、結構更健全的 web 應用程式。

如果你想了解更多關於 HTML 的知識，可以訪問W3Schools以獲得更多的 HTML 元素。

Audio

執行效果：

檢視示例

Blockquote

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

執行效果：

檢視示例

Output

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

執行效果：

檢視示例

Picture

<picture> 通過包含零或多個 <source> 元素和一個 <img> 元素來為不同的顯示/裝置場景提供影像版本。瀏覽器會選擇最匹配的子 <source> 元素，如果沒有匹配的，就選擇 <img> 元素的 src 屬性中的URL。然後，所選影像呈現在<img>元素佔據的空間中。

source 元素具有以下屬性：

• srcset(必填)：定義要顯示的影像的URL

• media：media 屬性允許你提供一個用於給使用者代理作為選擇 元素的依據的媒體條件(media condition)（類似於媒體查詢）。如果這個媒體條件匹配結果為 false，那麼這個 元素會被跳過。<source><source>

• sizes： 定義單個寬度值，具有寬度值的單個媒體查詢，或具有寬度值的逗號分隔的媒體查詢列表

• type: type 屬性允許你為 元素的 srcset 屬性指向的資源指定一個 MIME 型別。如果使用者代理不支援指定的型別，那麼這個 元素會被跳過。<source><source>

如果瀏覽器不支援該元素，或者所有<source>標籤都不匹配，則使用<img>標籤提供向後相容性。

Progress

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

<progress> 標籤不能替代<meter>標籤，因此指示磁碟空間使用情況或查詢結果相關性的元件應該使用<meter>標籤。

執行效果：

檢視示例

Meter

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

你可以使用<meter>標籤來顯示磁碟使用情況統計資料，或者指示搜尋結果的相關性。

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

執行效果：

檢視示例

Template

HTML內容模板（<template>）元素是一種用於儲存客戶端內容機制，該內容在載入頁面時不會呈現，但隨後可以在執行時使用JavaScript例項化。

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

Time

<time>標籤定義了人類可讀的日期或時間。 這可以用於以機器可讀方式編碼日期和時間，以便使用者代理可以將生日提醒或預定事件新增到使用者的日曆。 此外，這允許搜尋引擎產生“更智慧”的搜尋結果。

執行效果：

檢視示例

Video

<video> 標籤指定一個影片剪輯或視訊流。支援的格式包括MP4、WebM和Ogg。

執行效果：

檢視示例

Word Break Opportunity

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

執行效果：

檢視示例

希望這十個HTML元素為你提供了一些構建出色應用程式的新工具。

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

歡迎加入前端大家庭，裡面會經常分享一些技術資源。