前端開發不得不了解的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 代表代碼中的變量

      -

參考文獻：

• MDN web docs

本文由部落格一文多發平台 OpenWrite 釋出！