HTML 元素參考

此頁面列出了所有使用標籤建立的 HTML 元素

它們按功能分組,以幫助您輕鬆找到所需內容。在每個元素頁面以及此頁面側邊欄中都提供了所有元素的字母順序列表。

注意: 有關 HTML 元素和屬性基礎知識的更多資訊,請參閱HTML 元素剖析

主根

Element 描述
<html> 表示 HTML 文件的根(頂級元素),因此也稱為 根元素。所有其他元素都必須是此元素的後代。

文件元資料

元資料包含有關頁面的資訊。這包括有關樣式、指令碼和資料的資訊,以幫助軟體(搜尋引擎瀏覽器等)使用和呈現頁面。樣式和指令碼的元資料可以在頁面中定義,也可以連結到包含資訊的另一個檔案。

Element 描述
<base> 指定用於文件中所有相對 URL 的基 URL。文件中只能有一個此類元素。
<head> 包含有關文件的機器可讀資訊(元資料),例如其標題指令碼樣式表
<link> 指定當前文件與外部資源之間的關係。此元素最常用於連結到 CSS,但也可用於建立網站圖示(“favicon”樣式圖示和移動裝置主螢幕和應用程式圖示等)。
<meta> 表示不能由其他 HTML 元相關元素(如 <base><link><script><style><title>)表示的元資料
<style> 包含文件或文件部分的樣式資訊。它包含 CSS,該 CSS 應用於包含此元素的文件內容。
<title> 定義在瀏覽器標題欄或頁面標籤中顯示的文件標題。它只包含文字;元素中的 HTML 標籤(如果有)也被視為純文字。

分割槽根

Element 描述
<body> 表示 HTML 文件的內容。文件中只能有一個此類元素。

內容分割槽

內容分割槽元素允許您將文件內容組織成邏輯片段。使用分割槽元素為頁面內容建立大致輪廓,包括頁首和頁尾導航,以及標題元素來標識內容部分。

Element 描述
<address> 指示封閉的 HTML 提供個人或組織聯絡資訊。
<article> 表示文件、頁面、應用程式或站點中的獨立作品,旨在獨立分發或重用(例如,在聯合中)。示例包括論壇帖子、雜誌或報紙文章、部落格條目、產品卡片、使用者提交的評論、互動式小部件或小工具,或任何其他獨立內容項。
<aside> 表示文件的一部分,其內容與文件的主要內容僅間接相關。旁白通常以側邊欄或標註框的形式呈現。
<footer> 表示其最近祖先分割槽內容分割槽根元素的頁尾。<footer> 通常包含有關部分作者、版權資料或相關文件連結的資訊。
<header> 表示介紹性內容,通常是一組介紹性或導航輔助工具。它可能包含一些標題元素,以及徽標、搜尋表單、作者姓名和其他元素。
<h1><h2><h3><h4><h5><h6> 表示六個級別的節標題。<h1> 是最高節級別,<h6> 是最低節級別。
<hgroup> 表示與任何輔助內容(例如副標題、替代標題或標語)分組的標題。
<main> 表示文件主體的主要內容。主要內容區域包含與文件中心主題或應用程式中心功能直接相關或擴充套件其內容。
<nav> 表示頁面的一個部分,其目的是提供導航連結,無論是當前文件內部還是到其他文件。導航部分的常見示例是選單、目錄和索引。
<section> 表示文件中通用的獨立部分,沒有更具體的語義元素來表示它。部分通常應有標題,極少數例外。
<search> 表示包含一組表單控制元件或其他與執行搜尋或過濾操作相關的內容的部分。

文字內容

使用 HTML 文字內容元素組織放置在開放 <body> 和閉合 </body> 標籤之間的塊或內容部分。對於可訪問性SEO很重要,這些元素標識該內容的用途或結構。

Element 描述
<blockquote> 指示封閉的文字是擴充套件引用。通常,這透過縮排在視覺上呈現。引用來源的 URL 可以使用 cite 屬性給出,而來源的文字表示可以使用 <cite> 元素給出。
<dd> 為描述列表(<dl>)中前面的術語(<dt>)提供描述、定義或值。
<div> 流內容的通用容器。它對內容或佈局沒有影響,除非使用 CSS 進行樣式化(例如,直接對其應用樣式,或對其父元素應用某種佈局模型,如彈性盒)。
<dl> 表示描述列表。該元素包含一組術語(使用 <dt> 元素指定)和描述(由 <dd> 元素提供)的列表。此元素的常見用途是實現詞彙表或顯示元資料(鍵值對列表)。
<dt> 指定描述或定義列表中的術語,因此必須在 <dl> 元素內部使用。它通常後跟一個 <dd> 元素;但是,連續多個 <dt> 元素表示由緊接的下一個 <dd> 元素定義了幾個術語。
<figcaption> 表示描述其父 <figure> 元素其餘內容的標題或圖例。
<figure> 表示自包含內容,可能帶有可選標題,使用 <figcaption> 元素指定。圖、其標題及其內容被引用為一個單元。
<hr> 表示段落級元素之間的主題分隔符:例如,故事中的場景變化,或章節內主題的轉變。
<li> 表示列表中的專案。它必須包含在父元素中:有序列表(<ol>)、無序列表(<ul>)或選單(<menu>)。在選單和無序列表中,列表項通常使用專案符號顯示。在有序列表中,它們通常在左側顯示一個遞增的計數器,例如數字或字母。
<menu> <ul> 的語義替代品,但瀏覽器將其(並透過可訪問性樹公開)視為與 <ul> 沒有區別。它表示一個無序的專案列表(由 <li> 元素表示)。
<ol> 表示一個有序的專案列表——通常呈現為編號列表。
<p> 表示一個段落。段落在視覺媒體中通常以文字塊的形式呈現,與其他相鄰塊透過空行和/或首行縮排分隔,但 HTML 段落可以是相關內容的任何結構性分組,例如影像或表單欄位。
<pre> 表示預格式化文字,應按 HTML 檔案中的編寫方式準確呈現。文字通常使用非比例字型或等寬字型呈現。此元素內部的空白按原樣顯示。
<ul> 表示一個無序的專案列表,通常呈現為專案符號列表。

內聯文字語義

使用 HTML 內聯文字語義定義單詞、行或任何任意文字片段的含義、結構或樣式。

Element 描述
<a> href 屬性一起,建立指向網頁、檔案、電子郵件地址、當前頁面中的位置或 URL 可以定址的任何其他內容的超連結。
<abbr> 表示縮寫或首字母縮略詞。
<b> 用於吸引讀者對元素內容的注意,否則不賦予特殊重要性。這以前被稱為粗體元素,大多數瀏覽器仍然以粗體顯示文字。但是,您不應使用 <b> 進行文字樣式化或賦予重要性。如果您希望建立粗體文字,應使用 CSS font-weight 屬性。如果您希望指示元素具有特殊重要性,應使用 <strong> 元素。
<bdi> 告訴瀏覽器的雙向演算法將其包含的文字與其周圍文字隔離處理。當網站動態插入某些文字且不知道插入文字的方向性時,它特別有用。
<bdo> 覆蓋文字的當前方向性,以便其中的文字以不同的方向呈現。
<br> 在文字中生成換行符(回車)。它對於撰寫詩歌或地址很有用,其中行劃分很重要。
<cite> 用於標記創意作品的標題。參考文獻可以根據上下文相關引用元資料約定以縮寫形式出現。
<code> 以指示文字是計算機程式碼的短片段的方式顯示其內容。預設情況下,內容文字使用使用者代理的預設等寬字型顯示。
<data> 將給定內容與機器可讀的翻譯連結。如果內容與時間或日期相關,則必須使用 <time> 元素。
<dfn> 用於指示定義短語或句子上下文中正在定義的術語。祖先 <p> 元素,<dt>/<dd> 配對,或 <dfn> 元素最近的節祖先,被認為是術語的定義。
<em> 標記具有強調重音的文字。<em> 元素可以巢狀,每個巢狀級別表示更高程度的強調。
<i> 表示由於某種原因(例如慣用文字、技術術語和分類名稱等)而與普通文字區分開的一段文字。歷史上,這些文字一直使用斜體字呈現,這是此元素命名為 <i> 的最初來源。
<kbd> 表示一段內聯文字,表示來自鍵盤、語音輸入或任何其他文字輸入裝置的使用者文字輸入。按照慣例,使用者代理預設使用其預設等寬字型呈現 <kbd> 元素的內容,儘管 HTML 標準並未強制要求。
<mark> 表示由於標記段落在封閉上下文中的相關性而被標記或突出顯示以供參考或註釋的文字。
<q> 表示封閉文字是一個短的內聯引用。大多數現代瀏覽器透過在文本週圍加上引號來實現此功能。此元素適用於不需要段落分隔符的短引用;對於長引用,請使用 <blockquote> 元素。
<rp> 用於為不支援使用 <ruby> 元素顯示 Ruby 註釋的瀏覽器提供回退括號。一個 <rp> 元素應包含包裝 <rt> 元素(包含註釋文字)的每個開頭和結尾括號。
<rt> 指定 Ruby 註釋的 Ruby 文字元件,用於為東亞排版提供發音、翻譯或音譯資訊。<rt> 元素必須始終包含在 <ruby> 元素中。
<ruby> 表示在基礎文字上方、下方或旁邊呈現的小注釋,通常用於顯示東亞字元的發音。它也可以用於註釋其他型別的文字,但這種用法不太常見。
<s> 將文字呈現為帶刪除線,或在文字上劃線。使用 <s> 元素表示不再相關或不再準確的事物。但是,<s> 不適用於指示文件編輯;為此,請酌情使用 <del><ins> 元素。
<samp> 用於封閉表示計算機程式示例(或引用)輸出的內聯文字。其內容通常使用瀏覽器的預設等寬字型(例如 Courier 或 Lucida Console)呈現。
<small> 表示旁註和小字,如版權和法律文字,獨立於其樣式呈現。預設情況下,它將其中文字的字型大小縮小一個字號,例如從 smallx-small
<span> 用於短語內容的通用內聯容器,本身不表示任何內容。它可用於將元素分組以進行樣式化(使用 classid 屬性),或者因為它們共享屬性值,例如 lang。它只應在沒有其他語義元素合適時使用。<span> 與 div 元素非常相似,但 div 是塊級元素,而 <span>內聯級元素
<strong> 指示其內容具有強烈的重要性嚴肅性緊迫性。瀏覽器通常以粗體顯示內容。
<sub> 指定應僅出於排版原因顯示為下標的內聯文字。下標通常以較低的基線使用較小的文字呈現。
<sup> 指定應僅出於排版原因顯示為上標的內聯文字。上標通常以較高的基線使用較小的文字呈現。
<time> 表示特定時間段。它可能包含 datetime 屬性,以將日期翻譯成機器可讀格式,從而實現更好的搜尋引擎結果或自定義功能(例如提醒)。
<u> 表示一段內聯文字,其應以指示其具有非文字註釋的方式呈現。預設情況下,這呈現為單個實心下劃線,但可以使用 CSS 進行更改。
<var> 表示數學表示式或程式設計上下文中的變數名稱。它通常使用當前字型的斜體版本呈現,儘管該行為取決於瀏覽器。
<wbr> 表示一個單詞中斷機會——文字中瀏覽器可以選擇性地換行的位置,儘管其換行規則不會在該位置建立換行。

影像和多媒體

HTML 支援各種多媒體資源,例如影像、音訊和影片。

Element 描述
<area> 定義影像對映中具有預定義可點選區域的區域。影像對映允許影像上的幾何區域與超連結關聯。
<audio> 用於在文件中嵌入聲音內容。它可能包含一個或多個音訊源,使用 src 屬性或源元素表示:瀏覽器將選擇最合適的源。它也可以是流媒體的目標,使用 MediaStream
<img> 將影像嵌入文件。
<map> <area> 元素一起使用,以定義影像對映(可點選連結區域)。
<track> 用作媒體元素、音訊和影片的子元素。它允許您指定定時文字軌道(或基於時間的資料),例如自動處理字幕。軌道採用 WebVTT 格式.vtt 檔案)——Web 影片文字軌道。
<video> 在文件中嵌入支援影片播放的媒體播放器。您也可以將 <video> 用於音訊內容,但音訊元素可能提供更合適的使用者體驗。

嵌入內容

除了常規多媒體內容,HTML 還可以包含各種其他內容,即使它不總是容易互動。

Element 描述
<embed> 在文件的指定點嵌入外部內容。此內容由外部應用程式或其他互動內容源(如瀏覽器外掛)提供。
<fencedframe> 表示巢狀的瀏覽上下文,類似於 <iframe>,但內建了更多原生隱私功能。
<iframe> 表示巢狀的瀏覽上下文,將另一個 HTML 頁面嵌入到當前頁面中。
<object> 表示外部資源,可以將其視為影像、巢狀的瀏覽上下文或由外掛處理的資源。
<picture> 包含零個或多個 <source> 元素和一個 <img> 元素,為不同的顯示/裝置場景提供影像的替代版本。
<source> 為圖片、音訊元素或影片元素指定多個媒體資源。它是一個空元素,這意味著它沒有內容,也沒有結束標籤。它通常用於以多種檔案格式提供相同的媒體內容,以便在各種瀏覽器中提供相容性,因為它們對影像檔案格式媒體檔案格式的支援不同。

SVG 和 MathML

您可以使用 <svg><math> 元素將 SVGMathML 內容直接嵌入到 HTML 文件中。

Element 描述
<svg> 定義新座標系和視口的容器。它用作 SVG 文件的最外層元素,但它也可以用於在 SVG 或 HTML 文件中嵌入 SVG 片段。
<math> MathML 中的頂層元素。每個有效的 MathML 例項都必須封裝在其中。此外,您不能在另一個 <math> 元素中巢狀第二個 <math> 元素,但您可以在其中包含任意數量的其他子元素。

指令碼

為了建立動態內容和 Web 應用程式,HTML 支援使用指令碼語言,最突出的是 JavaScript。某些元素支援此功能。

Element 描述
<canvas> 用於 canvas 指令碼 APIWebGL API 來繪製圖形和動畫的容器元素。
<noscript> 定義一個 HTML 部分,如果頁面上的指令碼型別不受支援或瀏覽器中當前關閉指令碼,則插入該部分。
<script> 用於嵌入可執行程式碼或資料;這通常用於嵌入或引用 JavaScript 程式碼。<script> 元素也可以與其他語言一起使用,例如 WebGL 的 GLSL 著色器程式語言和 JSON

標示編輯

這些元素允許您提供指示,表明文字的特定部分已被修改。

Element 描述
<del> 表示已從文件中刪除的一段文字。例如,這可以用於渲染“跟蹤更改”或原始碼差異資訊。<ins> 元素可以用於相反的目的:指示已新增到文件中的文字。
<ins> 表示已新增到文件中的一段文字。您可以類似地使用 <del> 元素來表示已從文件中刪除的一段文字。

表格內容

此處的元素用於建立和處理表格資料。

Element 描述
<caption> 指定表格的標題(或名稱)。
<col> 定義由其隱式或顯式父 <colgroup> 元素表示的列組中的一個或多個列。<col> 元素僅在沒有定義 span 屬性的 <colgroup> 元素子元素時有效。
<colgroup> 定義表中列的組。
<table> 表示表格資料——即以包含資料的行和列組成的二維表格形式呈現的資訊。
<tbody> 封裝一組錶行(<tr> 元素),指示它們構成表(主)資料的主體。
<td> 作為 <tr> 元素的子元素,它定義了包含資料的表格單元格。
<tfoot> 封裝一組錶行(<tr> 元素),指示它們構成表腳,包含有關表列的資訊。這通常是列的摘要,例如,列中給定數字的總和。
<th> 作為 <tr> 元素的子元素,它將單元格定義為一組表格單元格的標題。此組的性質可以透過 scopeheaders 屬性明確定義。
<thead> 封裝一組錶行(<tr> 元素),指示它們構成表頭,其中包含有關表列的資訊。這通常以列標題(<th> 元素)的形式出現。
<tr> 定義表格中的一行單元格。行中的單元格可以使用 <td>(資料單元格)和 <th>(標題單元格)元素的混合來建立。

表單

HTML 提供了幾個元素,可以一起使用來建立使用者可以填寫並提交到網站或應用程式的表單。有關此內容的更多資訊,請參見 HTML 表單指南

Element 描述
<button> 由使用者透過滑鼠、鍵盤、手指、語音命令或其他輔助技術啟用的互動元素。啟用後,它會執行一個動作,例如提交表單或開啟對話方塊。
<datalist> 包含一組 <option> 元素,這些元素表示其他控制元件中可供選擇的允許或推薦選項。
<fieldset> 用於在網頁表單中將多個控制元件以及標籤(<label>)分組。
<form> 表示包含用於提交資訊的互動式控制元件的文件部分。
<input> 用於為基於 Web 的表單建立互動式控制元件,以接受使用者的輸入資料;根據裝置和使用者代理,提供了各種輸入資料型別和控制元件小部件。由於輸入型別和屬性的組合數量龐大,<input> 元素是 HTML 中最強大和最複雜的元素之一。
<label> 表示使用者介面中專案的標題。
<legend> 表示其父 <fieldset> 內容的標題。
<meter> 表示已知範圍內的標量值或分數。
<optgroup> <select> 元素中建立選項分組。
<option> 用於定義包含在 select、<optgroup><datalist> 元素中的專案。因此,<option> 可以表示彈出選單中的選單項和 HTML 文件中其他專案列表。
<output> 站點或應用程式可以注入計算結果或使用者操作結果的容器元素。
<progress> 顯示任務完成進度的指示器,通常顯示為進度條。
<select> 表示提供選項選單的控制元件。
<selectedcontent> 顯示關閉的 <select> 元素中當前選定的 <option> 的內容。
<textarea> 表示多行純文字編輯控制元件,當您希望允許使用者輸入大量自由格式文字時非常有用,例如,評論或反饋表單中的評論。

互動元素

HTML 提供了一系列有助於建立互動式使用者介面物件的元素。

Element 描述
<details> 建立披露小部件,其中資訊僅在小部件切換到“開啟”狀態時可見。必須使用 <summary> 元素提供摘要或標籤。
<dialog> 表示對話方塊或其他互動式元件,例如可關閉的警報、檢查器或子視窗。
<summary> 指定詳細資訊元素的披露框的摘要、標題或圖例。點選 <summary> 元素會切換父 <details> 元素的開啟和關閉狀態。

Web Components

Web Components 是一種與 HTML 相關的技術,它使得建立和使用自定義元素就像使用常規 HTML 一樣成為可能。此外,您可以建立標準 HTML 元素的自定義版本。

Element 描述
<slot> 作為 Web Components 技術套件的一部分,此元素是 Web Component 中的一個佔位符,您可以用自己的標記填充它,這允許您建立單獨的 DOM 樹並將它們一起呈現。
<template> 一種用於儲存 HTML 的機制,該 HTML 不在頁面載入時立即渲染,但可以在執行時透過 JavaScript 隨後例項化。

廢棄和棄用元素

警告: 這些是已棄用且不應使用的舊 HTML 元素。您不應在新專案中使用它們,並且應儘快在舊專案中替換它們。 此處列出它們僅是為了完整性。

Element 描述
<acronym> 允許作者清楚地指示構成單詞縮寫或首字母縮略詞的字元序列。
<big> 以比周圍文字大一個字號的字型大小(例如,medium 變為 large)呈現封閉文字。大小上限為瀏覽器允許的最大字型大小。
<center> 在包含元素中水平居中顯示其塊級或內聯內容。
<content> 作為 Web Components 技術套件的廢棄部分——曾用於 Shadow DOM 中作為插入點,不打算在普通 HTML 中使用。它現在已被 <slot> 元素取代,後者在 DOM 中建立了一個陰影 DOM 可以插入的點。考慮改用 <slot>
<dir> 檔案和/或資料夾目錄的容器,可能帶有使用者代理應用的樣式和圖示。不要使用此廢棄元素;相反,您應該使用 <ul> 元素來表示列表,包括檔案列表。
<font> 定義其內容的字型大小、顏色和字型。
<frame> 定義可以顯示另一個 HTML 文件的特定區域。框架應在 <frameset> 中使用。
<frameset> 用於包含 <frame> 元素。
<image> 一個古老且支援不佳的 <img> 元素的前身。不應使用它。
<marquee> 用於插入滾動文字區域。您可以使用其屬性控制當文字到達其內容區域邊緣時發生的情況。
<menuitem> 表示使用者可以透過彈出選單呼叫的命令。這包括上下文選單,以及可能附加到選單按鈕的選單。
<nobr> 防止其包含的文字自動跨多行換行,這可能導致使用者必須水平滾動才能看到文字的整個寬度。
<noembed> 一種廢棄的非標準方式,用於為不支援嵌入元素或不支援作者希望使用的嵌入內容型別的瀏覽器提供替代或“回退”內容。此元素在 HTML 4.01 及更高版本中已被棄用,取而代之的是在 <object> 元素的開放和閉合標籤之間放置回退內容。
<noframes> 為不支援(或已停用支援)<frame> 元素的瀏覽器提供內容。儘管大多數常用瀏覽器都支援框架,但也有例外,包括某些特殊用途瀏覽器,如一些移動瀏覽器以及文字模式瀏覽器。
<param> 定義 <object> 元素的引數。
<plaintext> 將開始標籤之後的所有內容渲染為原始文字,忽略任何後續的 HTML。沒有結束標籤,因為其後的所有內容都被視為原始文字。
<rb> 用於分隔 Ruby 註釋的基本文字元件,即正在註釋的文字。一個 <rb> 元素應包裝基本文字的每個單獨原子段。
<rtc> 包含在 <ruby> 元素內部使用的 <rb> 元素的 Ruby 中呈現的字元的語義註釋。<rb> 元素可以同時具有發音(<rt>)和語義(<rtc>)註釋。
<shadow> 作為 Web Components 技術套件的廢棄部分,旨在用作陰影 DOM 插入點。如果您在陰影宿主下建立了多個陰影根,您可能已經使用過它。考慮改用 <slot>
<strike> 在文字上新增刪除線(水平線)。
<tt> 建立以內聯文字形式呈現的內容,該內容使用使用者代理預設的等寬字型。此元素的建立目的是為了將文字呈現為在固定寬度顯示器(如電傳打字機、純文字螢幕或行式印表機)上顯示的樣子。
<xmp> 在開始標籤和結束標籤之間呈現文字,而不解釋其中的 HTML 並使用等寬字型。HTML2 規範建議其寬度應足以容納每行 80 個字元。

另見