HTML 元素分類概述

基礎元素

基礎元素是HTML文檔的根基。基礎元素在每一個網頁的源代碼裏都能見到,位置在文檔首行doctype 聲明的下方。doctype 表明了該頁面正在使用哪種版本的 (X)HTML。包含網頁內容的元素是放置在開始標籤 <html>和關閉標籤 </html> 之間的<html> 元素也被稱之爲根元素。

元素 描述
<html> HTML <html> 元素(或者說 HTML 根元素)代表着一個 HTML 文檔的根(root)。 所有其他元素皆是此元素的後代。

文檔元數據

元數據(Metadata)含有頁面的相關信息。這些包括樣式,腳本及數據的信息能幫助一些軟件 (如搜索引擎, 瀏覽器等等)更好運用以及渲染頁面。對於樣式和腳本的元數據可以直接在網頁裏定義或者鏈接到有這些的其他文件。

元素 描述
<base> HTML中的Base元素(<base>)指定文檔裏所有相對URL地址的基礎URL。一份文檔最多一個<base>元素。
<head> HTML Head 元素 (<head>) 規定文檔相關的通用信息(元數據),包括文檔標題、樣式或腳本的鏈接或定義。
<link> HTML <link>元素指定了外部資源與當前文檔的關係. 這個元素的使用方法包括爲導航定義關係框架.這個元素經常用來鏈接css文件。
<meta> HTML Meta 元素 (<meta>) 用來表達任何其他 HTML 元相關元素 (<base><link><script>,<style> 或者 <title>) 等無法表達的信息。
<style> HTML的<style>元素包含了文檔的樣式化信息或者文檔的一部分。指定的樣式化星系包含的該元素內,通常是CSS的格式。
<title> HTML <title> 元素 定義文檔的標題,顯示在瀏覽器的標題欄或標籤頁上。它只可以包含文本,若是包含有標籤,則包含的任何標籤都不會被解釋。

內容分區

內容分區元素能讓你將文檔內容組織成幾個邏輯塊。使用分區元素爲您的網頁內容創建一個大致的梗概,使用包括頁眉、頁腳導航和標題等元素來確定內容部分。

元素 描述
<address> HTML <address>元素可以讓作者爲它最近的<article>或者<body>祖先元素提供聯繫信息。在後一種情況下,它應用於整個文檔。
<article> <article>元素表示文檔、頁面、應用或網站中的獨立結構,其意在成爲可獨立分配的或可複用的結構,如在發佈中,它可能是論壇帖子、雜誌或新聞文章、博客、用戶提交的評論、交互式組件,或者其他獨立的內容項目。
<aside> <aside> 元素中連接到頁面中其他部分的內容,被認爲是獨立於該內容的一部分並且可以被單獨的拆分出來而不會使整體受影響。其通常表現爲側邊欄或者被插入在該內容裏。他們通常包含在工具條,例如來自詞彙表的定義。也可能有其他類型的信息,例如相關的廣告、筆者的傳記、web 應用程序、個人資料信息,或在博客上的相關鏈接。
<footer> HTML <footer> 元素表示最近一個章節內容或者根節點(sectioning root )元素的頁腳。一個頁腳通常包含該章節作者、版權數據或者與文檔相關的鏈接等信息。
<header> <header>元素表示一組引導性的幫助,可能包含標題元素,也可以包含其他元素,像logo、分節頭部、搜索表單等。
<h1>,<h2>,<h3>,<h4>,<h5><h6> 標題(Heading)元素有六個不同的級別,<h1> 是最高級的,而 <h6> 則是最低的。 一個標題元素能簡要描述該節的主題。標題信息可以由用戶代理可以使用,例如,自動構造某個文檔中的內容表(就像本文檔右邊浮動欄一樣)。
<hgroup> HTML <hgroup> Element (HTML Headings Group Element) 代表一個段的標題。它規定了在文檔輪廓裏(the outline of the document )的單一標題是它所屬的隱式或顯式部分的標題。
<nav> HTML導航欄 (<nav>) 描繪一個含有多個超鏈接的區域,這個區域包含轉到其他頁面,或者頁面內部其他部分的鏈接列表.
<section> HTML Section 元素 (<section>) 表示文檔中的一個區域(或節),比如,內容中的一個專題組,一般來說會有包含一個標題(heading)。一般通過是否包含一個標題 (<h1>-<h6>element) 作爲子節點 來 辨識每一個<section>。
  

文本內容

使用 HTML 文本內容元素來組織在 開標籤<body> 和 閉標籤 </body> 裏的塊或章節的內容。這些元素能標識內容的宗旨或結構,而這對於 accessibility 和 SEO 很重要。

 元 素  描述
<dd> HTML <dd> 元素HTML 描述元素)用來指明一個描述列表  (<dl>) 元素中一個術語的描述。
這個元素只能作爲描述列表元素的子元素出現,並且必須跟着一個 <dt> 元素。
<div> HTML <div> 元素 (或 HTML 文檔分區元素) 是一個通用型的流內容容器,它在語義上不代表任何特定類型的內容,
它可以被用來對其它元素進行分組,一般用於樣式化相關的需求(使用 class 或 id 特性) 或者對具有相同特性的一組元素進行分組 (比如 lang),
它應該在沒有任何其它語義元素可用是才使用 (比如 <article> 或 <nav>) 。
<dl> HTML <dl> 元素 (或 HTML 描述列表元素)是一個包含術語定義以及描述的列表,通常用於展示詞彙表或者元數據 (鍵-值對列表)。
<dt> HTML <dt> 元素 (或 HTML 術語定義元素)用於在一個定義列表中聲明一個術語。該元素僅能作爲 <dl> 的子元素出現。
通常在該元素後面會跟着 <dd> 元素, 然而,多個連續出現的 <dt> 元素都將由出現在它們後面的第一個 <dd> 元素定義。
<figcaption> HTML <figcaption> 元素 是與其相關聯的圖片的說明/標題,用與描述其父節點 <figure> 元素裏的其他數據。
這意味着 <figcaption> 在<figure> 塊裏是第一個或最後一個。同時 HTML Figcaption 元素是可選的;
如果沒有該元素,這個父節點的圖片只是會沒有說明/標題。
<figure> HTML <figure> 元素代表一段獨立的內容, 經常與說明(caption) <figcaption> 配合使用, 並且作爲一個獨立的引用單元。
當它屬於主體(main flow)時,它的位置獨立於主體。
這個標籤經常是在主文中引用的圖片,插圖,表格,代碼段等等,當這部分轉移到附錄中或者其他頁面時不會影響到主體。
<hr> HTML <hr> 元素表示段落級元素之間的話題轉換。例如,一個故事中的場景的改變,或一個章節的主題的改變。
在HTML的早期版本中,它是一個水平線。現在它仍能在可視化瀏覽器中表現爲水平線,但就語義來界定其並不只是表明上的。
<li> HTML <li> 元素 (或者 HTML 列表條目元素) 用於表示列表裏的條目。
它必須被包含在一個父元素裏:一個有順序的列表(<ol>),一個無順序的列表(<ul>),或者一個菜單 (<menu>)。
在菜單或者無順序的列表裏,列表條目通常用點排列顯示。在有順序的列表裏,列表條目通常是在左邊有按升序排列計數的顯示,例如數字或者字母。
<main> HTML Main元素(<main>)呈現了文檔<body>或應用的主體部分。主體部分由與文檔直接相關,或者擴展於文檔的中心主題、應用的主要功能部分的內容組成。
這部分內容在文檔中應當是獨一無二的,不包含任何在一系列文檔中重複的內容,
比如側邊欄,導航欄鏈接,版權信息,網站logo,搜索框(當然,文檔的主要功能就是搜索框)。</main>
<ol> HTML <ol> 元素 (或者 HTML 有序列表 Element) 表示多個有序列表項。
通常情況下,有序列表中顯示在項前面的編號(a preceding numbering),可以是任何形式的,如數字,字母或羅馬數字甚至簡單的點。
在網頁的 HTML 描述中並沒有定義編號的樣式,但可以用相關的CSS定義,使用 list-style-type 屬性。
<p> HTML <p>元素(或者說 HTML 段落元素)表示文本的一個段落。
該元素通常表現爲一整塊與相鄰文本分離的文本,或以垂直的空白隔離或以首行縮進。另外,<p> 是塊級元素
<pre> HTML <pre> 元素(或者說 HTML 格式化文本)即預格式化文本。
在該元素中的文本通常以非比例的字體顯示出來,正如文件中所顯示的那樣。該元素裏的空格會全部顯示。
<ul> The HTML <ul> 元素 ( 或 HTML 無序列表元素 代表多項的無序列表,即無數值排序項的集合,且它們在列表中的順序是沒有意義的。
通常情況下,無序列表項的頭部可以是幾種形式,如一個點,一個圓形或方形。
頭部的風格並不是在頁面的HTML描述定義, 但在其相關的CSS 可以用 list-style-type 屬性。

內聯文本語義

使用 HTML 內聯文本語義(Inline text semantics)定義語句,結構,可以是一個詞,一段,或任意風格的文字。

元素 描述
<a> HTML 中的 <a>元素 (或HTML錨元素, Anchor Element) 用於定義一個超鏈接到同一頁上的某個位置,或者在網絡上的任何其它頁面。
它也可以用於(一個過時的方式),以創建用於一個錨點——即超鏈接定位到頁面中的內容,因此鏈接不只是連接到一個頁面的頂部(也可以是頁面的中部或者底部)。
<abbr> HTML中的<abbr>元素(或HTML縮寫元素)表示一個縮寫,並且可以視需要對它提供完整描述。
如果提供描述,那麼title屬性的值必須是這個完整描述,而不能是其他值。
比如 "Inc."、"etc."。通過對縮寫詞語進行標記,您就能夠爲瀏覽器、拼寫檢查程序、翻譯系統以及搜索引擎分度器提供有用的信息。
<b> HTML <b> 元素表示相對於普通文本字體上的區別,但不表示任何特殊的強調或者關聯。
它通常用在摘要中的關鍵字、審查中的產品名稱或者其他需要顯示爲加粗的文字區域。它的另一個使用例子是用來標記一篇文章中每一段的引言。
<bdi> HTML <bdi> 元素 (雙向隔離元素) 會隔離可能以不同方向進行格式化的外部文本。
<bdo> The HTML <bdo> Element (or HTML bidirectional override element) is used to override the current directionality of text. It causes the directionality
of the characters to be ignored in favor of the specified directionality.
<br> HTML 元素 換行 <br> 在文本中產生一個換行(回車鍵)。這對於寫詩或寫一個地址來說顯得很有用。它可以將行明顯地分開。
<cite> HTML引用( Citation)標籤 (<cite>) 表示一個作品的引用。它必須包含引用作品的符合簡寫格式的標題或者URL。
It must include the title of a work or a URL reference, which may be in an abbreviated form according to the conventions used for the addition of citation metadata.
<code> HTML <code> 元素呈現一段計算機代碼. 默認情況下, 它以瀏覽器的默認等寬字體顯示.
<data> HTML <data> 元素 將一個指定內容和機器可讀的翻譯聯繫在一起。但如果內容是與 time 或者 date 相關的,一定要使用 <time>
<dfn>  
<em> HTML 着重元素 (<em>) 標記出需要用戶着重閱讀的內容, <em> 元素是可以嵌套的,嵌套層次越深,則其包含的內容被認定爲越需要着重閱讀。
<i> HTML元素 <i> 用於表現因某些原因需要區分普通文本的一系列文本。例如技術術語、外文短語或是小說中人物的思想活動等,它的內容通常以斜體顯示。
<kbd>  
<mark> 這個 HTML mark 標籤代表突出顯示的文字,例如可以爲了標記特定上下文中的文本而使用這個標籤. 舉個例子,它可以用來顯示搜索引擎搜索後關鍵詞。
<q> HTML引用標籤 (<q>)表示一個封閉的並且是短的行內引用的文本. 這個標籤是用來引用短的文本,所以請不要引入換行符; 對於長的文本的引用請使用 <blockquote> 替代.
<rp>  
<rt>  
<rtc>  
<ruby> HTML <ruby> 元素 被用來展示東亞文字註音或字符註釋。
<s>  
<samp> <samp> 元素用於標識計算機程序輸出,通常使用瀏覽器缺省的 monotype 字體(例如 Lucida Console)。
<small>  
<span> HTML <span> 元素是短語內容的通用行內容器,並沒有任何特殊語義。
可以使用它來編組元素以達到某種樣式意圖(通過使用類或者Id屬性),或者這些元素有着共同的屬性,比如lang
應該在沒有其他合適的語義元素時才使用它。<span> 與 <div> 元素很相似,但 <div>是一個 塊元素 而 <span> 則是 行內元素 .
<strong> Strong 元素 (<strong>)表示文本十分重要,一般用粗體顯示。
<sub>  
<sup>  
<time> HTML time 標籤(<time>) 用來表示24小時制時間或者公曆日期,若表示日期則也可包含時間和時區。
<u>  
<var> <var> 標籤表示變量的名稱,或者由用戶提供的值。
<wbr>  

圖片和多媒體

HTML 支持各種多媒體資源,例如圖像,音頻和視頻。

元素 描述
<area> HTML <area> 元素 在圖片上定義一個熱點區域
<audio> HTML <audio> 元素用於在文檔中表示音頻內容。 <audio> 元素可以包含多個音頻資源, 這些音頻資源可以使用 src 屬性或者<source> 元素來進行描述;
 瀏覽器將會選擇最合適的一個來使用。對於不支持<audio>元素的瀏覽器,<audio>元素也可以作爲瀏覽器不識別的內容加入到文檔中。
<map>  
<track> HTML <track> 元素 被當作媒體元素—<audio> 和 <video>的子元素來使用。它允許指定計時字幕(或者基於事件的數據),例如自動處理字幕。
<video> HTML <video> 元素 用於在HTML或者XHTML文檔中嵌入視頻內容。

內嵌內容

除了常規的多媒體內容,HTML 可以包括各種其他的內容,即使它並不容易交互。

元素 描述
<embed> HTML <embed> 元素 用於表示一個外部應用或交互式內容的集合點,換句話說,就是一個插件。
<object> HTML <object> 元素(或者稱作 HTML 嵌入對象元素)表示引入一個外部資源,這個資源可能是一張圖片,一個嵌入的瀏覽上下文,亦或是一個插件所使用的資源。
<param>  
<source> This page has no content. Enrich MDC by contributing.

腳本

爲了創建動態內容和 Web 應用程序,HTML 支持使用腳本語言,最突出的就是 JavaScript。某些元素支持此功能。

元素 描述
<canvas> <canvas>元素可被用來通過腳本(通常是JavaScript)繪製圖形。比如,它可以被用來繪製圖形,製作圖片集合,甚至用來實現動畫效果。
你可以(也應該)在元素標籤內寫入可提供替代的的代碼內容,這些內容將會在在舊的、不支持<canvas>元素的瀏覽器或是禁用了JavaScript的瀏覽器內渲染並展現。
<noscript> <noscript> 標籤 當某個script類型在瀏覽器中不受支持或者被關閉時作爲替代的內容
<script> HTML <script> 元素的作用是在HTML或XHTML文檔中嵌入或引用可執行的腳本
沒有asyncdefer屬性的腳本和內聯腳本會在瀏覽器繼續解析剩餘文檔前被獲取並立刻執行

編輯標識

這些元素能標示出某個文本被更改過的部分。

元素 描述
<del> HTML 刪除文字元素(<del>)表示已經從文檔中刪除的文本範圍。此元素通常是(但不必)呈現刪除線的文本。
<ins> HTML <ins> 元素定義已經被插入文檔中的文本。

表格內容

這裏的元素用於創建和處理表格數據。

元素 描述
<caption> HTML <caption> 元素 (or HTML 表格標題元素) 展示一個表格的標題, 它常常作爲 <table> 的第一個子元素出現,同時顯示在表格內容的最前面,
但是,它同樣可以被CSS樣式化,所以,它同樣可以出現在任何一個一個相對於表格的做任意位置。
<col> The HTML Table Column Element (<col>) defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a<colgroup> element.
<colgroup> HTML 中的 表格列組(Column Group <colgroup>) 標籤用來定義表中的一組列表。
<table> HTML中table標籤 (<table>) 用來展示多行的數據。
<tbody>  
<td> The Table cell HTML element (<td>) defines a cell of a table that contains data. It participates in the table model.
<tfoot>  
<th>  
<thead>  
<tr>  

表單

HTML 提供了許多可一起使用的元素,這些元素能用來創建一個用戶可以填寫並提交到網站或應用程序的表單。可以在 HTML forms guide 得到更多的信息。

元素 描述
<button> HTML <button>元素 表示一個可點擊的按鈕。
<datalist> HTML Datalist 元素 (<datalist>) 包含了一組<option>元素,這些元素表示其它表單控件可選值.
<fieldset>  
<form> HTML <form> 元素 表示了文檔中的一個區域,這個區域包含有交互控制元件,用來向web服務器提交信息。
<input> input (<input>) 元素用來創建基於web表單的可交互控件.
<label> HTML <label> 元素 表示用戶界面的一個條目的標題。
它通常關聯一個控件,或者是將控件放置在label元素內,或者是用作其屬性。這樣的控制稱作label元素的labeled control 。
<legend> HTML的<legend>元素(也稱爲HTML的域說明元素(or HMTL
 Legend Field Element))代表一個用於表示它的父元素<fieldset>的內容的標題。</legend>
<meter>  
<optgroup> 在一個web表單中, HTML元素 <optgroup> 會創建包含在一個 <select> 元素中的一組選項
<option> In a Web form, the HTML <option> element is used to create a control representing an item within a <select>, an <optgroup> or a <datalist> HTML5 element.
<output> HTML 標籤定義一個用戶的操作或者計算的結果。
<progress> HTML中的progress (<progress>) 元素用來顯示一項任務的完成進度.
雖然規範中沒有規定該元素具體如何顯示,瀏覽器開發商可以自己決定,但通常情況下,該元素都顯示爲一個進度條形式.
<select> HTML select (<select>) 元素是一種表單控件,可創建選項菜單。菜單內的選項爲<option> , 可以由 <optgroup> 元素分組。選項可以被用戶預先選擇。
<textarea> The HTML <textarea> element represents a multi-line plain-text editing control.

交互元素

HTML 提供了一系列有助於創建交互式用戶界面對象的元素。

元素 描述
<details> <details> 標籤用於描述文檔或文檔某個部分的細節。
<dialog>  
<menu> HTML <menu> 元素 呈現了一組用戶可執行或激活的命令。這既包含了可能出現在屏幕頂端的列表菜單,也包含了那些隱藏在按鈕之下、當點擊按鈕後顯示出來的文本菜單。
<menuitem>  
<summary> <summary> 元素包含 details 元素的標題,<details>元素用於描述有關文檔或文檔片段的更多詳情。

Web 組件

Web 組件是種近似 HTML(HTML-related) 的技術,這使得它能夠,從本質上講,創建和使用自定義元素,就好像它是普通的 HTML。此外,你甚至可以創建自定義版本的標準 HTML 元素。

注意: Web組件的元素都在 World Wide Web Consortium (W3C) Web Components collection of specifications 定義而不是 HTML 規範。此外,Web 組件規範還沒有最後確定,隨時有可能發生更改。

元素 描述
<content>  
<element>  
<shadow>  
<template> HTML 模板元素 <template> 是一種機制,允許包含加載頁面時不渲染、但又可以隨後通過 JavaScript 實例化的客戶端內容
可以將模板視作爲存儲在頁面上稍後
使用的一小段內容。
儘管不會渲染,但解析器會在加載頁面的時候處理 
<template> 元素中的內容來確保它是有效的。

過時的和棄用的元素

警告: 下面這些舊的 HTML 元素已被棄用,不應該再使用。你千萬別在新的項目中使用它們,並且要儘快替換在舊項目裏的。在此列出僅供參考。

元素 描述
<acronym> HTML 元素 Acronym  (<acronym>) 允許作者明確地聲明一個字符序列組成了一個單詞的縮寫.
<applet> HTML中的Applet元素(<applet>) 標誌着包含了Java的applet。
<basefont>  
<big>  
<blink>  
<center>  
<command> command元素用來表示一個用戶可以調用的命令.
<content>  
<dir>  
<font>  
<frame>  
<frameset> <frameset>是一個HTML元素,用來包裹同是HTML元素的<frame>元素。
<isindex> <isindex>元素的作用是使瀏覽器顯示一個對話框,提示用戶輸入單行文本。
在W3C的規範中建議,<isindex>元素最好被放置在 <head> 標籤塊內,但是對於瀏覽器來說,<isindex>標籤在頁面任何位置都沒有關係。
<keygen> HTML <keygen> 元素是爲了方便生成密鑰材料和提交作爲 HTML form 的一部分的公鑰.這種機制被用於設計基於 Web 的證書管理系統。
按照預想,<keygen> 元素將用於 HTML 表單與其他的所需信息一起構造一個證書請求,該處理的結果將是一個帶有簽名的證書。
<listing>  
<marquee>  
<multicol>  
<nextid>  
<noembed>  
<plaintext>  
<spacer>  
<strike>  
<tt>  
<xmp> <xmp>標籤之間的內容不會被當作文檔內容解析,而會被用等寬字體直接呈現。HTML2規範建議,本標籤中的內容應該具有足夠容納每行80個字母的寬度。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章