你可能不知道的 10 個 HTML 元素

Emma Wedekind 原做，受權 New Frontend 翻譯。

我都記不得聽到過多少次「HTML 很容易」的說法。儘管我贊成，相比其餘編程語言，HTML 也許學起來要容易一些，但你不應理所固然地認爲它不值一提。

HTML 是強大的標記語言，在運用得當的狀況下，能夠爲 web 應用提供結構和強大的無障礙訪問功能。

所以，今天咱們將瞭解你可能不知道的十個 HTML 元素，但願它們有助於你建立更便於無障礙訪問，結構健全的 web 應用。

若是你想要了解更多 HTML 元素，能夠訪問 W3Schools。（譯者注：相比 W3Schools，我的更偏好 MDN。）

Audio

<audio> 標籤訂義聲音，例如音樂或其餘音頻流。當前支持的文件格式有：MP三、WAV、OGG。

<audio controls>
  <source src="cat.ogg" type="audio/ogg">
  <source src="cat.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>
複製代碼

Blockquote

<blockquote> 標籤指定引用自他處的內容。

<blockquote cite="https://codingcoach.io/">
  Coding Coach is a free, open-source platform which aims to connect software developers and mentors all over the world.
  It is built by a group of talented and passionate developers, designers, engineers, and humans who want to make the engineering world a better place to collaborate.
  This project was born out of a desire to provide a platform to connect mentors and mentees throughout the world at no cost.
  Coding Coach is created by the people, for the people.
</blockquote>
複製代碼

Output

<output> 標籤表示計算的結果。下面的例子中，加號和等號意味着第一項輸入值和第二項輸入值的和將「輸出」至 output 標籤；output 標籤的可選屬性 for 指明瞭加數的元素 id。

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

Picture

<picture> 標籤可用於指定圖像來源。使用 <picture>，可指定適配瀏覽器視圖的多張圖像。

picture 標籤包含兩種不一樣的標籤：一個以上 <source> 元素，一個 <image> 元素。

source 元素的屬性以下：

• srcset（必備）：定義顯示圖像的 URL
• media：接受任何 CSS 定義下合法的媒體請求
• sizes：定義單個寬度值，單個媒體請求和寬度值，或逗號分割的列表（每一個列表項爲媒體請求和寬度值）
• type：定義 MIME 類型

瀏覽器根據屬性值加載最合適的圖像；採用首個知足條件的 <source> 元素，並忽略後續 source 元素。

<img> 標籤提供向後兼容性（瀏覽器可能不支持 picture 元素，或全部 <source> 標籤均不匹配）。

<picture>
  <source media="(min-width: 650px)" srcset="img_cat_fat.jpg">
  <source media="(min-width: 465px)" srcset="img_cat_fluffy.jpg">
  <img src="img_kitten.jpg" alt="Kitten" style="width:auto;">
</picture>
複製代碼

Progress

<progress> 表示任務的進展。

<progress> 標籤並未取代 <meter> 標籤，所以磁盤用量、請求結果之類的地方應該使用 <meter> 標籤。

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

Meter

<meter> 標籤訂義了特定區間內的標量測度，或者一個比率。

<meter> 標籤可用於顯示磁盤用量或搜索結果相關性。

<meter> 標籤不該用於任務進度；任務進度之類的地方應該使用 <progress> 元素。

<meter value="4" min="0" max="10">4 out of 10</meter><br>
<meter value="0.3">30%</meter>
複製代碼

Template

<template> 標籤用來表示重複使用的模板代碼，對用戶隱藏。

<template>
  <h2>Cat</h2>
  <img src="img_cat.jpg">
</template>
複製代碼

配合 JavaScript 進行渲染：

function showMyTemplate() {
  const myTemplate = document.querySelector('template');
  const templateClone = myTemplate.content.cloneNode(true);
  document.body.appendChild(templateClone);
}
複製代碼

Time

<time> 標籤訂義人類可讀的日期時間，可以用來以機器可讀的形式編碼日期時間，以便客戶端在用戶日程中加入生日提醒或計劃事件。此外，也有助於搜索引擎提供「智能」搜索結果。

<p>My cat wakes up at <time>11:00</time> each day.</p>

<p>I have a date with my cat on <time datetime="2019-12-25 20:00">Christmas</time>.</p>
複製代碼

Video

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

<video width="320" height="240" controls>
  <source src="catMovie.mp4" type="video/mp4">
  <source src="catMovie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
複製代碼

WBR

若是有一長串文本，可使用 <wbr> 標籤指定文本比較理想的換行位置。

<p>super longggggggggggggggggggggggggggggggggggggggggggg<wbr>aaaaa</wbr>bbbbbb</p>
複製代碼

我但願這十個 HTML 元素爲你提供了建立炫酷應用的新工具。

封面來源於 Greg Rakozy

其餘內容推薦

• 6 款熱門 macOS 開源應用
• 22 個 iOS 開發熱門開源項目
• 你可能不知道的 npm 實用技巧