HTML5 新元素

HTML5 中的新元素

下面列出的 HTML5 的新元素，以及對它們的描述。

新的語義/結構元素

HTML5 提供的新元素可以構建更好的文檔結構：

標簽 描述
<article> 定義文檔內的文章。
<aside> 定義頁面內容之外的內容。
<bdi> 定義與其他文本不同的文本方向。
<details> 定義用戶可查看或隱藏的額外細節。
<dialog> 定義對話框或窗口。
<figcaption> 定義 <figure> 元素的標題。
<figure> 定義自包含內容，比如圖示、圖表、照片、代碼清單等等。
<footer> 定義文檔或節的頁腳。
<header> 定義文檔或節的頁眉。
<main> 定義文檔的主內容。
<mark> 定義重要或強調的內容。
<menuitem> 定義用戶能夠從彈出菜單調用的命令/菜單項目。
<meter> 定義已知范圍（尺度）內的標量測量。
<nav> 定義文檔內的導航鏈接。
<progress> 定義任務進度。
<rp> 定義在不支持 ruby 注釋的瀏覽器中顯示什么。
<rt> 定義關于字符的解釋/發音（用于東亞字體）。
<ruby> 定義 ruby 注釋（用于東亞字體）。
<section> 定義文檔中的節。
<summary> 定義 <details> 元素的可見標題。
<time> 定義日期/時間。
<wbr> 定義可能的折行（line-break）。

閱讀更多有關 HTML5 語義的內容。

新的表單元素

標簽 描述
<datalist> 定義輸入控件的預定義選項。
<keygen> 定義鍵對生成器字段（用于表單）。
<output> 定義計算結果。

閱讀更多有關 HTML 表單元素中新老元素。

新的輸入類型

新的輸入類型 新的輸入屬性
  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height 和 width
  • list
  • min 和 max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

學習 HTML 輸入類型中的所有新老輸入類型。

學習 HTML 輸入屬性中的所有輸入屬性。

HTML5 - 新的屬性語法

HTML5 允許四種不同的屬性語法。

該例演示 <input> 標簽中使用的不同語法：

標簽 描述
Empty <input type="text" value="Bill Gates" disabled>
Unquoted <input type="text" value=Bill>
Double-quoted <input type="text" value="Bill Gates">
Single-quoted <input type="text" value='Bill Gates'>

在 HTML5 中，根據屬性所需，可能會使用所有這四種語法。

HTML5 圖像

標簽 描述
<canvas> 定義使用 JavaScript 的圖像繪制。
<svg> 定義使用 SVG 的圖像繪制。

閱讀更多有關 HTML5 Canvas 的內容。

閱讀更多有關 HTML5 SVG 的內容。

新的媒介元素

標簽 描述
<audio> 定義聲音或音樂內容。
<embed> 定義外部應用程序的容器（比如插件）。
<source> 定義 <video> 和 <audio> 的來源。
<track> 定義 <video> 和 <audio> 的軌道。
<video> 定義視頻或影片內容。

閱讀更多有關 HTML5 視頻的內容。

閱讀更多有關 HTML5 音頻的內容。