標籤歸納
關鍵點
- 過濾H5廢除標籤。
- 過濾樣式標籤 （可以通過樣式表進行解決）。
- 過濾相容性差的標籤（表現為部分瀏覽器相容或者實際應用少）。
目的
該文章的目的是歸納出目前在html文件常用的一些標籤，方便開發者進行查詢和學習。
標籤的歸類會從重要性依次遞減
基礎標籤
1. <!DOCTYPE>
定義文件型別，在html5文件之前有html4、xhtml等文件型別，為了讓瀏覽器解析並支援對應的文件結構，可以採用此標籤進行宣告，而我們就只需要關注html5如何進行宣告，它很簡潔，只有一種宣告方式。
<!DOCTYPE html>2. <html>
html標籤又叫做根元素，所有標籤都應該巢狀在html標籤中，瀏覽器可以根據html根節點，解析出一個dom的節點樹形結構文件，而該結構的根節點就是以html節點展開，其他元素都必須為該元素的子節點。
3. <head>
head標籤定義文件的頭部，就是個放置頭部元素的容器，主要內容：元資訊，比如做有meta標籤宣告的一些內容，有助於瀏覽器進行搜尋；標題，文件的標題；樣式和指令碼標籤等。4. <meta>
元元素，主要描述文件的一些資訊，比如
<meta charset="UTF-8"> : 宣告文件預設的字符集是utf8；
<meta name="keywords" content="html5，h5">： 宣告文件的一些關鍵詞，有助於搜尋引擎的搜尋；
<meta http-equiv="content-type" content="text/js"> : 伺服器將把名稱/值對新增到傳送給瀏覽器的內容頭部；
更多的應用可以查詢該元素的用法。5. <title>
在head元素中，必須包含的就是title標籤，用來宣告文件的標題，可以顯示在瀏覽器的視窗中，在進行收藏文件的時候，也會作為書籤名稱，該標題的定義也是至關重要的。6. <base>
<base> 標籤為頁面上的所有連結規定預設地址或預設目標。
通常情況下，瀏覽器會從當前文件的 URL 中提取相應的元素來填寫相對 URL 中的空白。使用 <base> 標籤可以改變這一點。瀏覽器隨後將不再使用當前文件的 URL，而使用指定的基本 URL 來解析所有的相對 URL。這其中包括 <a>、<img>、<link>、<form> 標籤中的 URL。7. <body>
定義文件的主體，文件顯示的內容都是放置在body元素中。8. <!-- -->
html註釋標籤，在進行文件結構設計的時候，可以宣告註釋，助於理解。文件佈局標籤
1. <div>
塊級元素，最早之前都是用div來佈局文件結構，html5之後，我們可以採用更多的語義化元素配合div元素進行更合理的佈局2. <header>
頭部元素結構，通常用來佈局文件的頭部，裡面可以包含文件的標題，導航，Logo等資訊，也可以是佈局某個章節或某部分的標題部分3. <nav>
導航連結，如果裡面包含了a連結等跳轉到其他頁面的，就應用使用該標籤4. <section>
表示一個包含在HTML文件中的獨立部分，它沒有更具體的語義元素來表示，一般來說會有包含一個標題。
注意：
通常在section中都會包含一個標題元素h1-h6，來辨別每一個section
如果元素內容被分割成幾個部分的話，更多是採用article元素代替section
不要把section當成一個普通的容器來使用，這本是div的用法5. <article>
獨立的內容，潛在來源：文章，論壇帖子，評論，部落格條目等6. <h1> - <h6>
標題元素，樣式表現為加粗模式，但更重要的是語義化，h1是最重要的標題，依次遞減7. <p>
段落元素，塊級元素8. <span>
普通文字元素9. <br\>
換行元素10. <pre>
html文件中多個空格和換行被瀏覽器解析的時候只會變成一個空格，為了保持我們定義的空格和換行結構，我們可以pre來保持預格式化的文字，應用場景比如程式碼，與code標籤一起應用11. <hr>
水平切割線，用來劃分段落、文章12. <aside>
定義內容之外的內容，通常可以用作文章的側邊欄13. <footer>
<footer> 標籤定義文件或節的頁尾。
<footer> 元素應當含有其包含元素的資訊。頁尾通常包含文件的作者、版權資訊、使用條款連結、聯絡資訊等等。
可以在一個文件中使用多個 <footer> 元素。連結標籤
1. <a>
定義一個超連結，可以用從一個頁面跳轉到另一個頁面，通過href屬性指定資源路徑，同時a標籤也可以用來做錨，通過宣告name或者id，在href屬性用#加對應的name值或者id值，可以跳到對應的位置，name在html已經被廢除，最好通過id來命名。2. <style>
內部樣式表，為當前文件頁定義樣式，優先順序大於外部樣式表link，小於元素屬性style，通常有個預設且唯一的屬性，type=“text/css”。位於head元素中。因為style跟link存在關係，所以歸類在一起了。3. <link>
定義文件與外部資源的關係，rel屬性可以定很多種，其中我們經常用就是styleshhet（樣式表）和icon（圖示），然後href屬性可以指定外部資源的路徑。程式設計標籤
1. <script>
定義客戶端指令碼，通常都是載入javascript指令碼，可以在元素內容裡面寫指令碼邏輯，也可以通過src屬性載入外部指令碼。2. <noscript>
定義客戶端指令碼，通常都是載入javascript指令碼，可以在元素內容裡面寫指令碼邏輯，也可以通過src屬性載入外部指令碼。影象標籤
1. <img>
從網頁上嵌入一張 影象，有兩個必需屬性，src屬性指定影象路徑，alt屬性在影象不可載入時，用來代替的文字描述。
因為<img>標籤是應用比較多的元素，所以該歸類比較靠前，如果對其他影象元素應用比較少的，可以靠後記憶2. <map>
定義影象對映區域的容器，所有具體的對映區域都是在子節點<area>標籤中進行定義。
注意點：
1. 要使用圖片對映，必須在<img>標籤中使用usemap屬性指定對映容器。
2. 我們在<map>標籤中應指定name和id屬性，與上面<img>標籤中的usemap屬性掛鉤，而且因為瀏覽器的不同，他們可能使用<map>標籤中的name或者id屬性，所以我們應該在定義<map>的時候，都同時定義name和id屬性且保持一致，防止相容性產生的問題。3. <area>
定義影象對映的區域，<area>標籤總是要作為<map>標籤的子節點。
<area>標籤定義影象的區域主要取決於shape屬性和coords屬性，shape 屬性與 coords 屬性配合，可以規定區域的尺寸、形狀和位置。
如何定位區域可以自查屬性的應用，其次<area>標籤上可以定義是進行跳轉（href）或者不進行跳轉（nohref）。4. <canvas>
<canvas> 標籤只是圖形容器，您必須使用指令碼來繪製圖形。5. <figure>
<figure> 標籤規定獨立的流內容（影象、圖表、照片、程式碼等等）。6. <figcaption>
<figcaption> 標籤定義 figure 元素的標題（caption）。"figcaption" 元素應該被置於 "figure" 元素的第一個或最後一個子元素的位置。
列表標籤
1. <ul>
定義一個無序列表，全稱：unorder list2. <ol>
定義一個有序列表，全稱：order list3. <li>
列表的一個項，作為<ul>或者<ol>的子節點4. <dl>
自定義列表，全稱：definition list5. <dt>
自定義列表的項，全稱：definition title6. <dd>
自定義列表的項的內容，全稱：definition data表單標籤
1. <form>
<form>標籤為使用者輸入建立表單，收集資料，提交到伺服器。form 元素是塊級元素。2. <input>
<input>標籤為使用者輸入資料，根據 type 屬性的多樣性，input元素可以包含文字、隱藏值、密碼、單選按鈕、核取方塊等多種格式輸入框。3. <textarea>
多行文字的輸入控制元件。4. <button>
定義按鈕，根據type屬性，可以設定不同型別的按鈕。5. <select>
下拉框，提供多種資料進行選擇。6. <optgroup>
<optgroup> 標籤定義選項組。optgroup 元素用於組合選項。
當您使用一個長的選項列表時，對相關的選項進行組合會使處理更加容易。7. <option>
option 元素定義下拉選單中的一個選項（一個條目）。
瀏覽器將 <option> 標籤中的內容作為 <select> 標籤的選單或是滾動列表中的一個元素顯示。
option 元素位於 select 元素內部。8. <label>
<label> 標籤為 input 元素定義標註（標記）。
label 元素不會向使用者呈現任何特殊效果。不過，它為滑鼠使用者改進了可用性。如果您在 label 元素內點選文字，就會觸發此控制元件。就是說，當使用者選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制元件上。
<label> 標籤的 for 屬性應當與相關元素的 id 屬性相同。9. <fieldset>
fieldset 元素可將表單內的相關元素分組。
<fieldset> 標籤將表單內容的一部分打包，生成一組相關表單的欄位。
當一組表單元素放到 <fieldset> 標籤內時，瀏覽器會以特殊方式來顯示它們，它們可能有特殊的邊界、3D 效果，或者甚至可建立一個子表單來處理這些元素。
<fieldset> 標籤沒有必需的或唯一的屬性。
<legend> 標籤為 fieldset 元素定義標題。10. <legend>
legend 元素為 fieldset 元素定義標題（caption）。11. <datalist>
<datalist> 標籤定義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。datalist 及其選項不會被顯示出來，它僅僅是合法的輸入值列表。請使用 input 元素的 list 屬性來繫結 datalist。表格標籤
1. <table>
<table> 標籤定義 HTML 表格。
簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成。
tr 元素定義表格行，th 元素定義表頭，td 元素定義表格單元。2. <caption>
caption 元素定義表格標題。
caption 標籤必須緊隨 table 標籤之後。
您只能對每個表格定義一個標題。通常這個標題會被居中於表格之上。3. <thead>
<thead> 標籤定義表格的表頭。該標籤用於組合 HTML 表格的表頭內容。
thead 元素應該與 tbody 和 tfoot 元素結合起來使用。tbody 元素用於對 HTML 表格中的主體內容進行分組，而 tfoot 元素用於對 HTML 表格中的表注（頁尾）內容進行分組。4. <tbody>
<tbody> 標籤表格主體（正文）。該標籤用於組合 HTML 表格的主體內容。5. <tfoot>
<tfoot> 標籤定義表格的頁尾（腳註或表注）。該標籤用於組合 HTML 表格中的表注內容。6. <tr>
<tr> 標籤定義 HTML 表格中的行。tr 元素包含一個或多個 th 或 td 元素。7. <th>
定義表格內的表頭單元格。
HTML 表單中有兩種型別的單元格：
表頭單元格 - 包含表頭資訊（由 th 元素建立）
標準單元格 - 包含資料（由 td 元素建立）
th 元素內部的文字通常會呈現為居中的粗體文字，而 td 元素內的文字通常是左對齊的普通文字。8. <td>
<td> 標籤定義 HTML 表格中的標準單元格。9. <col>
<col> 標籤為表格中一個或多個列定義屬性值。
如需對全部列應用樣式，<col> 標籤很有用，這樣就不需要對各個單元和各行重複應用樣式了。
您只能在 table 或 colgroup 元素中使用 <col> 標籤。10. <colgroup>
<colgroup> 標籤用於對錶格中的列進行組合，以便對其進行格式化。
如需對全部列應用樣式，<colgroup> 標籤很有用，這樣就不需要對各個單元和各行重複應用樣式了。
<colgroup> 標籤只能在 table 元素中使用。格式標籤
1. <em>
<em> 標籤告訴瀏覽器把其中的文字表示為強調的內容。2. <strong>
<strong> 標籤和 <em> 標籤一樣，用於強調文字，但它強調的程度更強一些。3. <mark>
<mark> 標籤定義帶有記號的文字。4. <sup>
<sup> 標籤可定義上標文字。5. <sub>
<sup> 標籤可定義下標文字。6. <del>
定義文件中已被刪除的文字。7. <ins>
定義文件中已被刪除的文字。8. <bdo>
bdo 元素可覆蓋預設的文字方向。9. <code>
<code> 標籤用於表示計算機原始碼或者其他機器可以閱讀的文字內容。10. <var>
<var> 標籤表示變數的名稱，或者由使用者提供的值。11. <samp>
代表程式或電腦的輸出 。12. <kbd>
<kbd> 標籤定義鍵盤文字。13. <abbr>
通過對縮寫進行標記，能對瀏覽器，搜尋引擎提供有用的資訊，通常會配合title屬性，來顯示其全稱。14. <address>
<address> 標籤定義文件或文章的作者/擁有者的聯絡資訊。
如果 <address> 元素位於 <body> 元素內，則它表示文件聯絡資訊。
如果 <address> 元素位於 <article> 元素內，則它表示文章的聯絡資訊。
<address> 元素中的文字通常呈現為斜體。
大多數瀏覽器會在 address 元素前後新增折行。15. <q>
<q> 標籤定義短的引用。
瀏覽器經常在引用的內容周圍新增引號。16. <blockquote>
<blockquote> 標籤定義塊引用。
<blockquote> 與 </blockquote> 之間的所有文字都會從常規文字中分離出來，經常會在左、右兩邊進行縮排（增加外邊距），而且有時會使用斜體。也就是說，塊引用擁有它們自己的空間。17. <cite>
<cite> 標籤通常表示它所包含的文字對某個參考文獻的引用，比如書籍或者雜誌的標題。
按照慣例，引用的文字將以斜體顯示。
用 <cite> 標籤把指向其他文件的引用分離出來，尤其是分離那些傳統媒體中的文件，如書籍、雜誌、期刊，等等。如果引用的這些文件有聯機版本，還應該把引用包括在一個 <a> 標籤中，從而把一個超連結指向該聯機版本。
<cite> 標籤還有一個隱藏的功能：它可以使你或者其他人從文件中自動摘錄參考書目。我們可以很容易地想象一個瀏覽器，它能夠自動整理引用表格，並把它們作為腳註或者獨立的文件來顯示。<cite> 標籤的語義已經遠遠超過了改變它所包含的文字外觀的作用；它使瀏覽器能夠以各種實用的方式來向使用者表達文件的內容。18. <progress>
<progress> 標籤標示任務的進度（程式）。19. <ruby>
<ruby> 標籤定義 ruby 註釋（中文注音或字元）。
在東亞使用，顯示的是東亞字元的發音。
與 <ruby> 以及 <rt> 標籤一同使用：ruby 元素由一個或多個字元（需要一個解釋/發音）和一個提供該資訊的 rt 元素組成，還包括可選的 rp 元素，定義當瀏覽器不支援 "ruby" 元素時顯示的內容20. <rt>
<rt> 標籤定義字元（中文注音或字元）的解釋或發音。21. <rp>
<rp> 標籤在 ruby 註釋中使用，以定義不支援 ruby 元素的瀏覽器所顯示的內容。音訊/視訊標籤
1. <audio>
<audio> 標籤定義聲音，比如音樂或其他音訊流2. <vedio>
<video> 標籤定義視訊，比如電影片段或其他視訊流。3. <source>
<source> 標籤為媒介元素（比如 <video> 和 <audio>）定義媒介資源。
<source> 標籤允許您規定可替換的視訊/音訊檔案供瀏覽器根據它對媒體型別或者編解碼器的支援進行選擇。框架標籤
1. <iframe>
iframe 元素會建立包含另外一個文件的內聯框架（即行內框架）。被過濾標籤
這些標籤，我們無須理它，或者記憶它
相容性支援問題：<details>、<dialog>、<summary>、<embed>、<object>、<param>、<command> 、<output>、<bdi>、<meter> 、<time>、<wbr>、<track>、<main>
html5廢除標籤：<acronym>、<center>、<font>、<applet>、<dir>、<menu>、<menuitem>、<basefont>、<isindex>、<keygen>、<big>、<s>、<tt>、<u>、<frame>、<frameset> 、<noframes>
樣式標籤：<b>、<i>、<small>、<strike>
建議少用：<dfn>
本作品採用《CC 協議》，轉載必須註明作者和本文連結