前端開發不得不瞭解的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 Elementsarea 與 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 Elementsaddress 定義包含聯繫信息的一個章節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 代表菜單noframesnoscript 定義當瀏覽器不支持腳本時顯示的替代文字object 代表一個外部資源 ,如圖片、HTML 子文檔、插件等ol 定義一個有序列表p 定義一個段落pre 代表其內容已經預先排版過,格式應當保留script 定義一個內聯腳本或鏈接到外部腳本。腳本語言是 JavaScripttable 定義多維數據tbody 代表表格中一塊具體數據 (表格主體)td 代表表格中的單元格tfoot 代表表格中一塊列摘要 (表尾)th 代表表格中的頭部單元格thead 代表表格中一塊列標籤 (表頭)tr 代表表格中的行ul 定義一個無序列表-3.Inline Elementsa 代表一個鏈接到其他資源的超鏈接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 定義一個內聯腳本或鏈接到外部腳本。默認腳本語言是 JavaScriptselect 代表下拉框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)聯繫郵箱:simple2012hcz@126.com版權聲明: 本文章除特別聲明外,均採用 CC BY-NC-SA 4.0 許可協議。轉載請註明出處!