前端開發不得不瞭解的HTML5標籤

HTML5 元素有多種維度展示方式，常見以下：

• 1.按照類別分類
• 2.按照是否Block元素

按照類別分：

根元素

• - html 代表 HTML 或 XHTML 文檔的根。其他所有元素必須是這個元素的子節點。
• 文檔元數據
• head 代表關於文檔元數據的一個集合，包括腳本或樣式表的鏈接或內容。
• title 定義文檔的標題，將顯示在瀏覽器的標題欄或標籤頁上。該元素只能包含文本，包含的標籤不會被解釋。
• base 定義頁面上相對 URL 的基準 URL。
• link 用於鏈接外部的 CSS 到該文檔。
• meta 定義其他 HTML 元素無法描述的元數據。
• style 用於內聯 CSS。
• -
• 腳本
• script 定義一個內聯腳本或鏈接到外部腳本。腳本語言是 JavaScript。
• noscript 定義當瀏覽器不支持腳本時顯示的替代文字。
• template 這個元素在 HTML5 中加入 通過 JavaScript 在運行時實例化內容的容器。
• -
• 章節
• body 代表 HTML 文檔的內容。在文檔中只能有一個 元素。
• section 這個元素在 HTML5 中加入 定義文檔中的一個章節。
• nav 這個元素在 HTML5 中加入 定義只包含導航鏈接的章節。
• article 這個元素在 HTML5 中加入 定義可以獨立於內容其餘部分的完整獨立內容塊。
• aside 這個元素在 HTML5 中加入 定義和頁面內容關聯度較低的內容——如果被刪除，剩下的內容仍然很合理。
• h1~ h6 標題元素實現了六層文檔標題，h1 是最大的標題，h6 是最小的標題。標題元素簡要地描述章節的主題。
• header 這個元素在 HTML5 中加入 定義頁面或章節的頭部。它經常包含 logo、頁面標題和導航性的目錄
• footer 這個元素在 HTML5 中加入 定義頁面或章節的尾部。它經常包含版權信息、法律信息鏈接和反饋建議用的地址。
• address 定義包含聯繫信息的一個章節。
• main 這個元素在 HTML5 中加入 定義文檔中主要或重要的內容。
• -
• 內容組織
• p 定義一個段落。
• hr 代表章節、文章或其他長內容中段落之間的分隔符。
• pre 代表其內容已經預先排版過，格式應當保留 。
• blockquote 代表引用自其他來源的內容。
• ol 定義一個有序列表。
• ul 定義一個無序列表。
• li 定義列表中的一個列表項。
• dl 定義一個定義列表（一系列術語和其定義）。
• dt 代表一個由下一個
• 定義的術語。
• dd 代表出現在它之前術語的定義。
• figure 這個元素在 HTML5 中加入 代表一個和文檔有關的圖例。
• figcaption 這個元素在 HTML5 中加入 代表一個圖例的說明。
• div 代表一個通用的容器，沒有特殊含義。
• -
• 文字展示
• a 代表一個鏈接到其他資源的超鏈接 。
• em 代表強調 文字。
• strong 代表特別重要 文字。
• small 代表註釋 ，如免責聲明、版權聲明等，對理解文檔不重要。
• s 代表不準確或不相關 的內容。
• cite 代表作品標題 。
• q 代表內聯的引用 。
• dfn 代表一個術語包含在其最近祖先內容中的定義 。
• abbr 代表省略 或縮寫 ，其完整內容在 title 屬性中。
• data 這個元素在 HTML5 中加入 關聯一個內容的機器可讀的等價形式 （該元素只在 WHATWG 版本的 HTML 標準中，不在 W3C 版本的 HTML5 標準中）。
• time 這個元素在 HTML5 中加入 代表日期 和時間 值；機器可讀的等價形式通過 datetime 屬性指定。
• code 代表計算機代碼 。
• var 代表代碼中的變量 。
• samp 代表程序或電腦的輸出 。
• kbd 代表用戶輸入 ，一般從鍵盤輸出，但也可以代表其他輸入，如語音輸入。
• sub,- sup 分別代表下標 和上標 。
• i 代表一段不同性質 的文字，如技術術語、外文短語等。
• b 代表一段需要被關注 的文字。
• u 代表一段需要下劃線呈現的文本註釋，如標記出拼寫錯誤的文字等。
• mark 這個元素在 HTML5 中加入 代表一段需要被高亮的引用 文字。
• ruby 這個元素在 HTML5 中加入 代表被ruby 註釋 標記的文本，如中文漢字和它的拼音。
• rt 這個元素在 HTML5 中加入 代表ruby 註釋 ，如中文拼音。
• rp 這個元素在 HTML5 中加入 代表 ruby 註釋兩邊的額外插入文本 ，用於在不支持 ruby 註釋顯示的瀏覽器中提供友好的註釋顯示。
• bdi 這個元素在 HTML5 中加入 代表需要脫離 父元素文本方向的一段文本。它允許嵌入一段不同或未知文本方向格式的文本。
• bdo 指定子元素的文本方向 ，顯式地覆蓋默認的文本方向。
• span 代表一段沒有特殊含義的文本，當其他語義元素都不適合文本時候可以使用該元素。
• br 代表換行 。
• wbr 這個元素在 HTML5 中加入 代表建議換行 (Word Break Opportunity) ，當文本太長需要換行時將會在此處添加換行符。
• -
• 文字編輯
• ins 定義增加 到文檔的內容。
• del 定義從文檔移除 的內容。
• -
• 圖片等資源展示
• img 代表一張圖片 。
• iframe 代表一個內聯的框架 。
• embed 這個元素在 HTML5 中加入 代表一個嵌入 的外部資源，如應用程序或交互內容。
• object 代表一個外部資源 ，如圖片、HTML 子文檔、插件等。
• param 代表 - object 元素所指定的插件的參數 。
• video 這個元素在 HTML5 中加入 代表一段視頻 及其視頻文件和字幕，並提供了播放視頻的用戶界面。
• audio 這個元素在 HTML5 中加入 代表一段聲音 ，或音頻流 。
• source 這個元素在 HTML5 中加入 為 - video 或 - audio 這類媒體元素指定媒體源 。
• track 這個元素在 HTML5 中加入 為 - video 或 - audio 這類媒體元素指定文本軌道（字幕） 。
• canvas 這個元素在 HTML5 中加入 代表位圖區域 ，可以通過腳本在它上面實時呈現圖形，如圖表、遊戲繪圖等。
• map 與 - area 元素共同定義圖像映射 區域。
• area 與 - map 元素共同定義圖像映射 區域。
• svg 這個元素在 HTML5 中加入 定義一個嵌入式矢量圖 。
• math 這個元素在 HTML5 中加入 定義一段數學公式 。
• -
• 表格
• table 定義多維數據 。
• caption 代表表格的標題 。
• colgroup 代表表格中一組單列或多列 。
• col 代表表格中的列 。
• tbody 代表表格中一塊具體數據 （表格主體）。
• thead 代表表格中一塊列標籤 （表頭）。
• tfoot 代表表格中一塊列摘要 （表尾）。
• tr 代表表格中的行 。
• td 代表表格中的單元格 。
• th 代表表格中的頭部單元格 。
• -
• 表單
• form 代表一個表單 ，由控件組成。
• fieldset 代表控件組 。
• legend 代表 - fieldset 控件組的標題 。
• label 代表表單控件的標題 。
• input 代表允許用戶編輯數據的數據區 （文本框、單選框、複選框等）。
• button 代表按鈕 。
• select 代表下拉框 。
• datalist 這個元素在 HTML5 中加入 代表提供給其他控件的一組預定義選項 。
• optgroup 代表一個選項分組 。
• option 代表一個 - select 元素或 - datalist 元素中的一個選項
• textarea 代表多行文本框 。
• keygen 這個元素在 HTML5 中加入 代表一個密鑰對生成器 控件。
• output 這個元素在 HTML5 中加入 代表計算值 。
• progress 這個元素在 HTML5 中加入 代表進度條 。
• meter 這個元素在 HTML5 中加入 代表滑動條 。
• -
• 導航等交互元素
• details 這個元素在 HTML5 中加入 代表一個用戶可以(點擊)獲取額外信息或控件的小部件 。
• summary 這個元素在 HTML5 中加入 代表 - details 元素的綜述 或標題 。
• menuitem 這個元素在 HTML5 中加入 代表一個用戶可以點擊的菜單項。
• menu 這個元素在 HTML5 中加入 代表菜單。

按照是否Block元素分：

• 1.Empty Elements
• area 與 map 元素共同定義圖像映射 區域。
• base 定義頁面上相對 URL 的基準 URL。
• basefont 4.0種標籤，目前已廢棄
• br 代表換行 。
• col 代表表格中的列 。
• frame 4.0種標籤，目前已廢棄
• hr 代表章節、文章或其他長內容中段落之間的分隔符。
• img 代表一張圖片 。
• input 代表允許用戶編輯數據的數據區 （文本框、單選框、複選框等）。
• isindex 4.0種標籤，目前已廢棄
• link 用於鏈接外部的 CSS 到該文檔。
• meta 定義其他 HTML 元素無法描述的元數據。
• param 代表 object 元素所指定的插件的參數
• embed 代表一個嵌入 的外部資源，如應用程序或交互內容
• -
• 2.Block Elements
• address 定義包含聯繫信息的一個章節
• applet 4.0種標籤，目前已廢棄
• blockquote 代表引用自其他來源的內容。
• button 代表按鈕
• center 4.0種標籤，目前已廢棄
• dd 代表出現在它之前術語的定義
• del 定義從文檔移除 的內容。
• dir 4.0種標籤，目前已廢棄
• div 代表一個通用的容器，沒有特殊含義
• dl 定義一個定義列表（一系列術語和其定義）
• dt 代表一個由下一個 dd 定義的術語
• fieldset 代表控件組
• form 代表一個表單 ，由控件組成
• frameset 4.0種標籤，目前已廢棄
• hr 代表章節、文章或其他長內容中段落之間的分隔符
• iframe 代表一個內聯的框架
• ins 定義增加 到文檔的內容
• isindex 4.0種標籤，目前已廢棄
• li 定義列表中的一個列表項
• map 與 area 元素共同定義圖像映射 區域
• menu 代表菜單
• noframes
• noscript 定義當瀏覽器不支持腳本時顯示的替代文字
• object 代表一個外部資源 ，如圖片、HTML 子文檔、插件等
• ol 定義一個有序列表
• p 定義一個段落
• pre 代表其內容已經預先排版過，格式應當保留
• script 定義一個內聯腳本或鏈接到外部腳本。腳本語言是 JavaScript
• table 定義多維數據
• tbody 代表表格中一塊具體數據 （表格主體）
• td 代表表格中的單元格
• tfoot 代表表格中一塊列摘要 （表尾）
• th 代表表格中的頭部單元格
• thead 代表表格中一塊列標籤 （表頭）
• tr 代表表格中的行
• ul 定義一個無序列表
• -
• 3.Inline Elements
• a 代表一個鏈接到其他資源的超鏈接
• abbr 代表省略 或縮寫 ，其完整內容在 title 屬性中
• acronym 4.0種標籤，目前已廢棄
• applet 4.0種標籤，目前已廢棄
• b 代表一段需要被關注 的文字
• basefont 4.0種標籤，目前已廢棄
• bdo 指定子元素的文本方向 ，顯式地覆蓋默認的文本方向
• big 4.0種標籤，目前已廢棄
• br 代表換行
• button 代表按鈕
• cite 代表作品標題
• code 代表計算機代碼
• del 定義從文檔移除 的內容
• dfn 代表一個術語包含在其最近祖先內容中的定義
• em 代表強調 文字
• font 4.0種標籤，目前已廢棄
• i 代表一段不同性質 的文字，如技術術語、外文短語等
• iframe 代表一個內聯的框架
• img 代表一張圖片
• input 代表允許用戶編輯數據的數據區 （文本框、單選框、複選框等）
• ins 定義增加 到文檔的內容
• kbd 4.0種標籤，目前已廢棄
• label 代表表單控件的標題
• map 與 area 元素共同定義圖像映射 區域
• object 代表一個外部資源 ，如圖片、HTML 子文檔、插件等
• q 代表內聯的引用
• s 代表不準確或不相關 的內容
• samp 代表程序或電腦的輸出
• script 定義一個內聯腳本或鏈接到外部腳本。默認腳本語言是 JavaScript
• select 代表下拉框
• small 代表註釋 ，如免責聲明、版權聲明等，對理解文檔不重要
• span 代表一段沒有特殊含義的文本，當其他語義元素都不適合文本時候可以使用該元素
• strike 4.0種標籤，目前已廢棄
• strong 代表特別重要 文字
• sub 代表下標
• sup 代表上標
• textarea 代表多行文本框
• tt 4.0種標籤，目前已廢棄
• u 4.0種標籤，目前已廢棄
• var 代表代碼中的變量
• -

參考文獻：

• https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list
• 本文作者：前端首席體驗師(CheongHu)
• 聯繫郵箱：[email protected]
• 版權聲明： 本文章除特別聲明外，均採用 CC BY-NC-SA 4.0 許可協議。轉載請註明出處！