HTML5 W3C 標籤學習筆記

時間 2019-11-17

標籤 html5 html w3c 標籤學習筆記欄目 HTML5 简体版

原文原文鏈接

HTML 5 <!DOCTYPE> 標籤

定義和用法

<!DOCTYPE> 聲明是文檔中的第一個成分，位於 <html> 標籤以前。該標籤告知瀏覽器文檔所使用的 HTML 規範。javascript

HTML 4.01 與 HTML 5 之間的差別

在 HTML 4.01 中有 3 個不一樣的文檔類型，在 HTML 5 中只有一個：<!DOCTYPE HTML>。php

HTML 5 <a> 標籤

定義和用法

<a> 標籤訂義超連接，它用於從一個頁面鏈接到另外一個頁面。css

HTML 4.01 與 HTML 5 之間的差別

在 HTML 4.01 中，<a> 標籤既能夠是超連接，也能夠是錨。這取決因而否描述了 href 屬性。html

在 HTML 5 中，<a> 是超連接，可是假如沒有 href 屬性，它僅僅是超連接的一個佔位符。html5

HTML 5 有一些新的屬性，同時再也不支持一些 HTML 4.01 的屬性。java

例子：

<a href="http://www.baidu.com">點擊到百度</a>

屬性	描述	4	5
charset	不同意。規定目標 URL 的字符編碼。	4
coords	不同意。規定適於 shape 屬性的座標，爲圖像映射定義圖像的區域。	4
href	連接的目標 URL。	4	5
hreflang	規定目標 URL 的基準語言。僅在 href 屬性存在時使用。	4	5
media	規定目標 URL 的媒介類型。默認值：all。僅在 href 屬性存在時使用。		5
name	不同意。命名一個錨。不支持。使用 id 代替。	4
ping	由空格分隔的 URL 列表，當用戶點擊該連接時，這些 URL 會得到通知。web 僅在 href 屬性存在時使用。chrome		5
rel	規定當前文檔與目標 URL 之間的關係。僅在 href 屬性存在時使用。	4	5
rev	不同意。規定目標 URL 與當前文檔之間的關係。	4
shape	不同意。爲當前 area 標籤中的映射定義的地區類型。與 coords 屬性一塊兒使用。	4
target	在何處打開目標 URL。僅在 href 屬性存在時使用。	4	5
type	規定目標 URL 的 MIME 類型。僅在 href 屬性存在時使用。	4	5

HTML 5 <abbr> 標籤

定義和用法

表示一個縮寫形式，好比 "Inc."、"etc."。經過對縮寫詞語進行標記，您就可以爲瀏覽器、拼寫檢查程序、翻譯系統以及搜索引擎分度器提供有用的信息。canvas

表示定義的縮寫形式，以下代碼所示，在部分瀏覽器上若是設置了title屬性，那麼在用戶光標焦點在abbr標籤上的時候會顯示title的值。

<abbr title="javascript">JS</abbr>

HTML <address> 標籤

瀏覽器支持

全部瀏覽器都支持 <address> 標籤。

定義和用法

<address> 標籤訂義文檔或文章的做者/擁有者的聯繫信息。api

若是 <address> 元素位於 <body> 元素內，則它表示文檔聯繫信息。

若是 <address> 元素位於 <article> 元素內，則它表示文章的聯繫信息。

<address> 元素中的文本一般呈現爲斜體。大多數瀏覽器會在 address 元素先後添加折行。

提示和註釋

提示：<address> 標籤不該該用於描述通信地址，除非它是聯繫信息的一部分。

提示：<address> 元素一般連同其餘信息被包含在 <footer> 元素中。

<adress>
write by:<a href="http://www.baidu.com">"gavin"</a>

</adress>

HTML <applet> 標籤（applet java的程序）

定義和用法

HTML5 中不支持 <applet> 標籤。請使用 object 元素標籤代替。

HTML 4.01 中不同意使用 <applet> 元素。

<applet> 標籤訂義嵌入的 applet。

必需的屬性

屬性	值	描述
code	URL	規定 Java applet 的文件名。
object	name	定義了包含該 applet 的一系列版本的資源名稱。

HTML <area> 標籤

瀏覽器支持

全部主流瀏覽器都支持 <area> 標籤。

定義和用法

<area> 標籤訂義圖像映射中的區域（注：圖像映射指得是帶有可點擊區域的圖像）。（在圖像上用此標籤訂義的部分區域是能夠點擊的，點擊以後能夠單獨出來顯示。）

area 元素老是嵌套在 <map> 標籤中。

註釋：<img> 標籤中的 usemap 屬性與 map 元素 name 屬性相關聯，建立圖像與映射之間的聯繫。

提示和註釋：

註釋：<img> 中的 usemap 屬性可引用 <map> 中的 id 或 name 屬性（由瀏覽器決定），因此咱們須要同時向 <map> 添加 id 和 name 兩個屬性。

必需的屬性

屬性	值	描述
alt	text	定義此區域的替換文本。

可選的屬性

屬性	值	描述
coords	座標值	定義可點擊區域（對鼠標敏感的區域）的座標。
href	URL	定義此區域的目標 URL。
nohref	nohref	從圖像映射排除某個區域。
shape	default rect circ poly	定義區域的形狀。
target	_blank _parent _self _top	規定在何處打開 href 屬性指定的目標 URL。

HTML <article> 標籤

<article>
  <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9（簡稱 IE9）於 2011 年 3 月 14 日發佈.....</p>
</article>

Internet Explorer 9, Firefox, Opera, Chrome 以及 Safari 支持 <article> 標籤。

註釋：Internet Explorer 8 以及更早的版本不支持 <article> 標籤。

定義和用法

<article> 標籤規定獨立的自包含內容。

一篇文章應有其自身的意義，應該有可能獨立於站點的其他部分對其進行分發。

<article> 元素的潛在來源：

論壇帖子
報紙文章
博客條目
用戶評論

HTML <aside> 標籤

瀏覽器支持

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <aside> 標籤。

註釋：Internet Explorer 8 以及更早的版本不支持 <aside> 標籤。

定義和用法

<aside> 標籤訂義其所處內容以外的內容。

aside 的內容應該與附近的內容相關。

提示和註釋：

提示：<aside> 的內容可用做文章的側欄。

支持HTML全局屬性

HTML <audio> 標籤音頻標籤

實例

一段簡單的 HTML 5 音頻：

您的瀏覽器不支持 audio 標籤。
<audio src="someaudio.wav"></audio>

瀏覽器支持

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <audio> 標籤。

註釋：Internet Explorer 8 以及更早的版本不支持 <audio> 標籤。

HTML5的新標籤

屬性

new : HTML5 中的新屬性。

屬性	值	描述
autoplay	autoplay	若是出現該屬性，則音頻在就緒後立刻播放。
controls	controls	若是出現該屬性，則向用戶顯示控件，好比播放按鈕。
loop	loop	若是出現該屬性，則每當音頻結束時從新開始播放。
muted	muted	規定視頻輸出應該被靜音。
preload	preload	若是出現該屬性，則音頻在頁面加載時進行加載，並預備播放。若是使用 "autoplay"，則忽略該屬性。
src	url	要播放的音頻的 URL。

HTML <b> 標籤

定義粗體的文字，不建議使用，沒有任何語義化

提示和註釋

註釋：根據 HTML5 規範，在沒有其餘合適標籤更合適時，才應該把 <b> 標籤做爲最後的選項。HTML5 規範聲明：應該使用 <h1> - <h6> 來表示標題，使用 <em> 標籤來表示強調的文本，應該使用 <strong> 標籤來表示重要文本，應該使用 <mark> 標籤來表示標註的/突出顯示的文本。

提示：您也可以使用 CSS "font-weight" 屬性來設置粗體文本。

HTML <base> 標籤

定義和用法

<base> 標籤爲頁面上的全部連接規定默認地址或默認目標。（在head中填寫）

一般狀況下，瀏覽器會從當前文檔的 URL 中提取相應的元素來填寫相對 URL 中的空白。

使用 <base> 標籤能夠改變這一點。瀏覽器隨後將再也不使用當前文檔的 URL，而使用指定的基本 URL 來解析全部的相對 URL。這其中包括 <a>、<img>、<link>、<form> 標籤中的 URL。

HTML <bdi> 標籤

html5的新標籤，瀏覽器支持有限：

如今只有firefox 和chrome 瀏覽器支持這個標籤。

定義和用法

bdi 指的是 bidi 隔離。

<bdi> 標籤容許您設置一段文本，使其脫離其父元素的文本方向設置。

在發佈用戶評論或其餘您沒法徹底控制的內容時，該標籤頗有用。

屬性

屬性	值	描述
dir	ltr rtl auto	可選。規定 <bdi> 元素內的文本的文本方向。默認值：auto。

屬性值值描述 ltr 默認。從左向右的文本方向。 rtl 從右向左的文本方向。

HTML <bdo> 標籤

定義和用法

bdo 元素可覆蓋默認的文本方向。

瀏覽器兼容：

全部瀏覽器都支持這個標籤

可選的屬性

屬性	值	描述
dir	ltr rtl	定義文字的方向

（l在哪裏就表明是從哪裏開始）

HTML <big> 標籤

定義和用法

<big> 標籤呈現大號字體效果。

使用 <big> 標籤能夠很容易地放大字體。這簡直不能再簡單了：瀏覽器顯示包含在 <big> 標籤和其相應的 </big> 標籤之間的文字時，其字體比周圍的文字要大一號。可是，若是文字已是最大號字體，這個 <big> 標籤將不起任何做用。

更妙的是，能夠嵌套 <big> 標籤來放大文本。每個 <big> 標籤均可以使字體大一號，直到上限 7 號文本，正如字體模型所定義的那樣。

可是使用 <big> 標籤的時候仍是要當心，由於瀏覽器老是很寬大地試圖去理解各類標籤，對於那些不支持 <big> 標籤的瀏覽器來講，它常常將其認爲是粗體字標籤。

瀏覽器兼容：

全部瀏覽器都支持這個標籤

HTML <blockquote> 標籤（塊級引用）

定義和用法

<blockquote> 標籤訂義塊引用。

<blockquote> 與 </blockquote> 之間的全部文本都會從常規文本中分離出來，常常會在左、右兩邊進行縮進（增長外邊距），並且有時會使用斜體。也就是說，塊引用擁有它們本身的空間。

代碼：

<html>

<body>

Here comes a long quotation:

This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.

</blockquote>

請注意，瀏覽器在 blockquote 元素先後添加了換行，並增長了外邊距。

</body>

</html>

提示和註釋：

提示：請使用 q 元素來標記短的引用。

註釋：如需把頁面做爲 strict XHTML 進行驗證，那麼 <blockquote> 元素必須包含塊級元素，好比這樣：

HTML <button> 標籤

實例

如下代碼標記了一個按鈕：

<button type="button">Click Me!</button>

瀏覽器支持：

全部主流瀏覽器都支持 <button> 標籤。

重要事項：若是在 HTML 表單中使用 button 元素，不一樣的瀏覽器會提交不一樣的值。Internet Explorer 將提交 <button> 與 <button/> 之間的文本，而其餘瀏覽器將提交 value 屬性的內容。請在 HTML 表單中使用 input元素來建立按鈕。

定義和用法

<button> 標籤訂義一個按鈕。

在 button 元素內部，您能夠放置內容，好比文本或圖像。這是該元素與使用 input 元素建立的按鈕之間的不一樣之處。

<button> 控件與 <input type="button"> 相比，提供了更爲強大的功能和更豐富的內容。<button> 與 </button> 標籤之間的全部內容都是按鈕的內容，其中包括任何可接受的正文內容，好比文本或多媒體內容。例如，咱們能夠在按鈕中包括一個圖像和相關的文本，用它們在按鈕中建立一個吸引人的標記圖像。

惟一禁止使用的元素是圖像映射，由於它對鼠標和鍵盤敏感的動做會干擾表單按鈕的行爲。

請始終爲按鈕規定 type 屬性。Internet Explorer 的默認類型是 "button"，而其餘瀏覽器中（包括 W3C 規範）的默認值是 "submit"。

屬性

new : HTML5 中的新屬性。

屬性	值	描述
autofocus	autofocus	規定當頁面加載時按鈕應當自動地得到焦點。
disabled	disabled	規定應該禁用該按鈕。
form	form_name	規定按鈕屬於一個或多個表單。
formaction	url	覆蓋 form 元素的 action 屬性。註釋：該屬性與 type="submit" 配合使用。
formenctype	見註釋	覆蓋 form 元素的 enctype 屬性。註釋：該屬性與 type="submit" 配合使用。
formmethod	get post	覆蓋 form 元素的 method 屬性。註釋：該屬性與 type="submit" 配合使用。
formnovalidate	formnovalidate	覆蓋 form 元素的 novalidate 屬性。註釋：該屬性與 type="submit" 配合使用。
formtarget	_blank _self _parent _top framename	覆蓋 form 元素的 target 屬性。註釋：該屬性與 type="submit" 配合使用。
name	button_name	規定按鈕的名稱。
type	button reset submit	規定按鈕的類型。
value	text	規定按鈕的初始值。可由腳本進行修改。

註釋：formenctype 屬性可能的值：

application/x-www-form-urlencoded
multipart/form-data
text/plain

HTML <canvas> 標籤（畫布）

瀏覽器支持

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <canvas> 標籤。

註釋：Internet Explorer 8 以及更早的版本不支持 <canvas> 標籤。

定義和用法

<canvas> 標籤訂義圖形，好比圖表和其餘圖像。

<canvas> 標籤只是圖形容器，您必須使用腳原本繪製圖形。

<canvas id="canvas" height="500" width="500"></canvas>
<script>
    var content;
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        content = canvas.getContext("2d");
        draw();
    };
    function draw(){
        content.fillStyle="blue";
        content.fillRect(100,100,300,300)
    }
</script>

具體狀況參照api

HTML <caption> 標籤

<table border="1">
  
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table><caption>Monthly savings</caption>

定義表單的標題

定義和用法

caption 元素定義表格標題。

caption 標籤必須緊隨 table 標籤以後。您只能對每一個表格定義一個標題。一般這個標題會被居中於表格之上

HTML <em> <strong> <dfn> <code> <samp> <kbd><var> <cite> 標籤

定義和用法

如下元素都是短語元素。雖然這些標籤訂義的文本大多會呈現出特殊的樣式，但實際上，這些標籤都擁有確切的語義。

咱們並不反對使用它們，可是若是您只是爲了達到某種視覺效果而使用這些標籤的話，咱們建議您使用樣式表，那麼作會達到更加豐富的效果。

<em>	把文本定義爲強調的內容。
<strong>	把文本定義爲語氣更強的強調的內容。
<dfn>	定義一個定義項目。
<code>	定義計算機代碼文本。
<samp>	定義樣本文本。
<kbd>	定義鍵盤文本。它表示文本是從鍵盤上鍵入的。它常常用在與計算機相關的文檔或手冊中。
<var>	定義變量。您能夠將此標籤與 <pre> 及 <code> 標籤配合使用。
<cite>	定義引用。可以使用該標籤對參考文獻的引用進行定義，好比書籍或雜誌的標題。

HTML <command> 標籤命令

<menu>
<command onclick="alert('Hello World')">
Click Me!</command>
</menu>

瀏覽器支持：

只有IE9能支持這個標籤

定義和用法

command 元素表示用戶可以調用的命令。

<command> 標籤能夠定義命令按鈕，好比單選按鈕、複選框或按鈕。

只有當 command 元素位於 menu 元素內時，該元素纔是可見的。不然不會顯示這個元素，可是能夠用它規定鍵盤快捷鍵。

屬性

new : HTML5 中的新屬性。

屬性	值	描述
checked	checked	定義是否被選中。僅用於 radio 或 checkbox 類型。
disabled	disabled	定義 command 是否可用。
icon	url	定義做爲 command 來顯示的圖像的 url。
label	text	爲 command 定義可見的 label。
radiogroup	groupname	定義 command 所屬的組名。僅在類型爲 radio 時使用。
type	checkbox command radio	定義該 command 的類型。默認是 "command"。

HTML <datalist> 標籤 new lable in HTML5

定義和用法

<datalist> 標籤訂義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。

datalist 及其選項不會被顯示出來，它僅僅是合法的輸入值列表。

請使用 input 元素的 list 屬性來綁定 datalist。

<input list="cars">
<datalist id="cars">
    <option>banz</option>
    <option>bmw</option>
    <option>長安</option>
</datalist>

注意:input 的list特性是用來綁定datalist的，datalist是不會單獨顯示的，只有在input裏輸入的類似的值時會作提示做用。

瀏覽器支持

全部主流瀏覽器都支持 <datalist> 標籤，除了 Internet Explorer 和 Safari。

HTML <del> 標籤

定義和用法

定義文檔中已被刪除的文本。

a dozen is  12 pieces<del>20</del>

在瀏覽器上的效果是被標記的文字會顯示一條刪除線。

提示和註釋：

註釋：請與 <ins> 標籤配合使用，來描述文檔中的更新和修正。

可選的屬性

屬性	值	描述
cite	URL	指向另一個文檔的 URL，此文檔可解釋文本被刪除的緣由。
datetime	YYYYMMDD	定義文本被刪除的日期和時間。

HTML <details> 標籤 new lable in HTML5

瀏覽器支持

目前只有 Chrome 和 Safari 6 支持 <details> 標籤。

定義和用法

<details> 標籤用於描述文檔或文檔某個部分的細節。

提示和註釋

提示：與 <summary> 標籤配合使用能夠爲 details 定義標題。標題是可見的，用戶點擊標題時，會顯示出 details。

代碼：

<details>
    <summary>Copyright 2011.</summary>
    <p>All pages and graphics on this web site are the property of W3School.</p>
</details>

屬性

new : HTML5 中的新屬性。

屬性	值	描述
open	open	定義 details 是否可見。

HTML 5 <dialog> 標籤

定義和用法

<dialog> 標籤訂義對話，好比交談。

提示和註釋

提示：對話中的每一個句子都必須屬於 <dt> 標籤所定義的部分。請看下面的例子。

<dialog open>
    <dt>老師</dt>
    <dd>2+2 等於？</dd>
    <dt>學生</dt>
    <dd>4</dd>
    <dt>老師</dt>
    <dd>答對了！</dd>

屬性：open控制是否可見。

HTML <embed> 標籤

定義和用法

屬性

new : HTML5 中的新屬性。

屬性	值	描述
height	pixels	設置嵌入內容的高度。
src	url	嵌入內容的 URL。
type	type	定義嵌入內容的類型。
width	pixels	設置嵌入內容的寬度。

HTML <fieldset> 標籤

定義圍繞表單中元素的邊框。

全部瀏覽器都支持這個標籤

<form>

身高：<input type="text" />

體重：<input type="text" />

</fieldset>

</form>

定義和用法

fieldset 元素可將表單內的相關元素分組。

<fieldset> 標籤將表單內容的一部分打包，生成一組相關表單的字段。

當一組表單元素放到 <fieldset> 標籤內時，瀏覽器會以特殊方式來顯示它們，它們可能有特殊的邊界、3D 效果，或者甚至可建立一個子表單來處理這些元素。

<fieldset> 標籤沒有必需的或惟一的屬性。

<legend> 標籤爲 fieldset 元素定義標題。

HTML <figcaption> 標籤

定義圖片的標題，放在<figure>內

<figure>
  
  <img src="">
</figure><figcaption>黃浦江上的的盧浦大橋</figcaption>

瀏覽器支持：IE9以上和現代主流的瀏覽器都支持這個標籤

定義和用法

<figcaption> 標籤訂義 figure 元素的標題（caption）。

"figcaption" 元素應該被置於 "figure" 元素的第一個或最後一個子元素的位置。

HTML <figure> 標籤

定義媒介內容的分組，以及他們的標題。

全部主流瀏覽器都支持這個標籤。

定義和用法

<figure> 標籤規定獨立的流內容（圖像、圖表、照片、代碼等等）。

figure 元素的內容應該與主內容相關，但若是被刪除，則不該對文檔流產生影響。

提示和註釋

提示：請使用 <figcaption> 元素爲 figure 添加標題（caption）。

HTML <footer> 標籤

定義section或者page的頁腳

IE8以前的瀏覽器不支持。

定義和用法

<footer> 標籤訂義文檔或節的頁腳。

<footer> 元素應當含有其包含元素的信息。

頁腳一般包含文檔的做者、版權信息、使用條款連接、聯繫信息等等。

您能夠在一個文檔中使用多個 <footer> 元素。

HTML <form> 標籤

表單標籤

  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
<form action="form_action.asp" method="get"></form>

定義和用法

<form> 標籤用於爲用戶輸入建立 HTML 表單。

表單可以包含 input 元素，好比文本字段、複選框、單選框、提交按鈕等等。

表單還能夠包含 menus、textarea、fieldset、legend 和 label 元素。

表單用於向服務器傳輸數據。

屬性

new : HTML5 中的新屬性。

屬性	值	描述
accept	MIME_type	HTML 5 中不支持。
accept-charset	charset_list	規定服務器可處理的表單數據字符集。
action	URL	規定當提交表單時向何處發送表單數據。
autocomplete	on off	規定是否啓用表單的自動完成功能。
enctype	見說明	規定在發送表單數據以前如何對其進行編碼。
method	get post	規定用於發送 form-data 的 HTTP 方法。
name	form_name	規定表單的名稱。
novalidate	novalidate	若是使用該屬性，則提交表單時不進行驗證。
target	_blank _self _parent _top framename	規定在何處打開 action URL。

說明

enctype 屬性可能的值：

application/x-www-form-urlencoded
multipart/form-data
text/plain

HTML <frame> 標籤

定義窗口集或者框架

<html>

<frameset cols="25%,50%,25%">
  
</frameset>

</html><frame src="frame_a.htm" />
  <frame src="frame_b.htm" />
  <frame src="frame_c.htm" />

定義了一個三列的框架，寬度分別是25% 50% 25%

定義和用法

<frame> 標籤訂義 frameset 中的一個特定的窗口（框架）。

frameset 中的每一個框架均可以設置不一樣的屬性，好比 border、scrolling、noresize 等等。

提示和註釋：

註釋：若是您但願驗證包含框架的頁面，請確保 doctype 被設置爲 "Frameset DTD"。閱讀更多有關 DOCTYPE 的內容。

重要事項：您不能與 <frameset></frameset> 標籤一塊兒使用 <body></body> 標籤。不過，若是您須要爲不支持框架的瀏覽器添加一個 <noframes> 標籤，請務必將此標籤放置在 <body></body> 標籤中！

可選的屬性

屬性	值	描述
frameborder	0 1	規定是否顯示框架周圍的邊框。
longdesc	URL	規定一個包含有關框架內容的長描述的頁面。
marginheight	pixels	定義框架的上方和下方的邊距。
marginwidth	pixels	定義框架的左側和右側的邊距。
name	name	規定框架的名稱。
noresize	noresize	規定沒法調整框架的大小。
scrolling	yes no auto	規定是否在框架中顯示滾動條。
src	URL	規定在框架中顯示的文檔的 URL。

HTML <header> 標籤

定義section或者page的頁眉

瀏覽器支持：

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <header> 標籤。

註釋：Internet Explorer 8 以及更早的版本不支持 <header> 標籤。

定義和用法

<header> 標籤訂義文檔的頁眉（介紹信息）。

HTML <iframe> 標籤

定義內聯框架

瀏覽器支持：

全部瀏覽器都支持這個標籤

屬性

new : HTML5 中的新屬性。

屬性	值	描述
align	left right top middle bottom	不同意使用。請使用樣式代替。規定如何根據周圍的元素來對齊此框架。
frameborder	1 0	規定是否顯示框架周圍的邊框。
height	pixels %	規定 iframe 的高度。
longdesc	URL	規定一個頁面，該頁面包含了有關 iframe 的較長描述。
marginheight	pixels	定義 iframe 的頂部和底部的邊距。
marginwidth	pixels	定義 iframe 的左側和右側的邊距。
name	frame_name	規定 iframe 的名稱。
sandbox	"" allow-forms allow-same-origin allow-scripts allow-top-navigation	啓用一系列對 <iframe> 中內容的額外限制。
scrolling	yes no auto	規定是否在 iframe 中顯示滾動條。
seamless	seamless	規定 <iframe> 看上去像是包含文檔的一部分。
src	URL	規定在 iframe 中顯示的文檔的 URL。
srcdoc	HTML_code	規定在 <iframe> 中顯示的頁面的 HTML 內容。
width	pixels %	定義 iframe 的寬度。

HTML <img> 標籤

定義圖像

定義和用法

img 元素向網頁中嵌入一幅圖像。

請注意，從技術上講，<img> 標籤並不會在網頁中插入圖像，而是從網頁上連接圖像。<img> 標籤建立的是被引用圖像的佔位空間。

<img> 標籤有兩個必需的屬性：src 屬性和 alt 屬性。

HTML <input> 標籤

文本輸入框

定義和用法

<input> 標籤用於蒐集用戶信息。

根據不一樣的 type 屬性值，輸入字段擁有不少種形式。輸入字段能夠是文本字段、複選框、掩碼後的文本控件、單選按鈕、按鈕等等。

屬性

new : HTML5 中的新屬性。

屬性	值	描述
accept	mime_type	規定經過文件上傳來提交的文件的類型。
align	left right top middle bottom	不同意使用。規定圖像輸入的對齊方式。
alt	text	定義圖像輸入的替代文本。
autocomplete	on off	規定是否使用輸入字段的自動完成功能。
autofocus	autofocus	規定輸入字段在頁面加載時是否得到焦點。（不適用於 type="hidden"）
checked	checked	規定此 input 元素首次加載時應當被選中。
disabled	disabled	當 input 元素加載時禁用此元素。
form	formname	規定輸入字段所屬的一個或多個表單。
formaction	URL	覆蓋表單的 action 屬性。（適用於 type="submit" 和 type="image"）
formenctype	見註釋	覆蓋表單的 enctype 屬性。（適用於 type="submit" 和 type="image"）
formmethod	get post	覆蓋表單的 method 屬性。（適用於 type="submit" 和 type="image"）
formnovalidate	formnovalidate	覆蓋表單的 novalidate 屬性。若是使用該屬性，則提交表單時不進行驗證。
formtarget	_blank _self _parent _top framename	覆蓋表單的 target 屬性。（適用於 type="submit" 和 type="image"）
height	pixels %	定義 input 字段的高度。（適用於 type="image"）
list	datalist-id	引用包含輸入字段的預約義選項的 datalist 。
max	number date	規定輸入字段的最大值。請與 "min" 屬性配合使用，來建立合法值的範圍。
maxlength	number	規定輸入字段中的字符的最大長度。
min	number date	規定輸入字段的最小值。請與 "max" 屬性配合使用，來建立合法值的範圍。
multiple	multiple	若是使用該屬性，則容許一個以上的值。
name	field_name	定義 input 元素的名稱。
pattern	regexp_pattern	規定輸入字段的值的模式或格式。例如 pattern="[0-9]" 表示輸入值必須是 0 與 9 之間的數字。
placeholder	text	規定幫助用戶填寫輸入字段的提示。
readonly	readonly	規定輸入字段爲只讀。
required	required	指示輸入字段的值是必需的。
size	number_of_char	定義輸入字段的寬度。
src	URL	定義以提交按鈕形式顯示的圖像的 URL。
step	number	規定輸入字的的合法數字間隔。
type	button checkbox file hidden image password radio reset submit text	規定 input 元素的類型。
value	value	規定 input 元素的值。
width	pixels %	定義 input 字段的寬度。（適用於 type="image"）

HTML <keygen> 標籤

定義和用法

<keygen> 標籤規定用於表單的密鑰對生成器字段。

當提交表單時，私鑰存儲在本地，公鑰發送到服務器。

<form>
    username:<input type="text" name="user-name">
    Encryption:<keygen name="keygen"></keygen>
    <input type="submit">
</form>

瀏覽器支持

全部主流瀏覽器都支持 <keygen> 標籤，除了 Internet Explorer 和 Safari。

屬性

new : HTML5 中的新屬性。

屬性	值	描述
autofocus	autofocus	使 keygen 字段在頁面加載時得到焦點。
challenge	challenge	若是使用，則將 keygen 的值設置爲在提交時詢問。
disabled	disabled	禁用 keytag 字段。
form	formname	定義該 keygen 字段所屬的一個或多個表單。
keytype	rsa	定義 keytype。rsa 生成 RSA 密鑰。
name	fieldname	定義 keygen 元素的惟一名稱。 name 屬性用於在提交表單時蒐集字段的值。

HTML <label> 標籤

定義input元素的標註

<form>
  
  <input type="radio" name="sex" id="male" />
  <br />
  
  <input type="radio" name="sex" id="female" />
</form><label for="male">Male</label><label for="female">Female</label>

注意：作相關聯的時候，lable的for必定要和input的ID值一致才能匹配

定義和用法

<label> 標籤爲 input 元素定義標註（標記）。

label 元素不會向用戶呈現任何特殊效果。不過，它爲鼠標用戶改進了可用性。若是您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上。

<label> 標籤的 for 屬性應當與相關元素的 id 屬性相同。

HTML <legend> 標籤

定義fileset標籤的標題

例子

<form>
    <fieldset>
        <legend>info</legend>
        <label for="xman">man</label>
        <input type="radio" id="xman" name="sex">
        <label for="xwoman">woman</label>
        <input type="radio" id="xwoman" name="sex">
        身高：<input type="text" class="person-height">
        體重：<input type="text" class="person-weight">
    </fieldset>
</form>

HTML <map> 標籤

定義圖像映射

實例

帶有可點擊區域的圖像映射：

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />


  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />

<map name="planetmap" id="planetmap"></map>

定義和用法

定義一個客戶端圖像映射。圖像映射（image-map）指帶有可點擊區域的一幅圖像。

提示和註釋：

註釋：area 元素永遠嵌套在 map 元素內部。area 元素可定義圖像映射中的區域。

註釋：<img>中的 usemap 屬性可引用 <map> 中的 id 或 name 屬性（取決於瀏覽器），因此咱們應同時向 <map> 添加 id 和 name 屬性。

必需的屬性

屬性	值	描述
id	unique_name	爲 map 標籤訂義惟一的名稱。

HTML <mark> 標籤

馬克筆的的效果

實例

突出顯示部分文本：

<p>Do not forget to buy  today.</p><mark>milk</mark>

瀏覽器支持

Internet Explorer 8 以及更早的版本不支持 <mark> 標籤。

定義和用法

<mark> 標籤訂義帶有記號的文本。請在須要突出顯示文本時使用 <m> 標籤。

HTML <menu> 標籤

定義命令列表或者菜單

實例

帶有兩個菜單按鈕（"File" 和 "Edit"）的工具欄，每一個按鈕都包含帶有一系列選項的下拉列表：

 <li>
 <menu label="File">
 <button type="button" onclick="file_new()">New...</button>
 <button type="button" onclick="file_open()">Open...</button>
 <button type="button" onclick="file_save()">Save</button>
 </menu>
 </li>
 <li>
 <menu label="Edit">
 <button type="button" onclick="edit_cut()">Cut</button>
 <button type="button" onclick="edit_copy()">Copy</button>
 <button type="button" onclick="edit_paste()">Paste</button>
 </menu>
 </li>

<menu type="toolbar"></menu>

瀏覽器支持：

目前全部瀏覽器都不支持這個標籤。

HTML <menuitem> 標籤

定義用戶能夠經過鼠標右鍵調用的菜單項目

實例

包含不一樣 <menuitem> 元素的上下文菜單：

<menu type="context" id="mymenu">
  <menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png">
  </menuitem>
  <menu label="Share on...">
    <menuitem label="Twitter" icon="ico_twitter.png"
    onclick="window.open('//twitter.com/intent/tweet?text='+window.location.href);">
    </menuitem>
    <menuitem label="Facebook" icon="ico_facebook.png"
    onclick="window.open('//facebook.com/sharer/sharer.php?u='+window.location.href);">
    </menuitem>
  </menu>
  <menuitem label="Email This Page"
  onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
</menu>

HTML <meter> 標籤

預約義度量值（進度條的量度）新標籤

<meter value="10" min="0" max="100"></meter>

進度條的長短是經過計算value值在max中佔的百分比來顯示長度的

瀏覽器支持：

除了IE以外的主流瀏覽器都支持這個標籤

定義和用法

<meter> 標籤訂義已知範圍或分數值內的標量測量。也被稱爲 gauge（尺度）。

例子：磁盤用量、查詢結果的相關性，等等。

註釋：<meter> 標籤不該用於指示進度（在進度條中）。若是標記進度條，請使用 <progress> 標籤。

屬性

new : HTML5 中的新屬性。

屬性	值	描述
form	form_id	規定 <meter> 元素所屬的一個或多個表單。
high	number	規定被視做高的值的範圍。
low	number	規定被視做低的值的範圍。
max	number	規定範圍的最大值。
min	number	規定範圍的最小值。
optimum	number	規定度量的優化值。
value	number	必需。規定度量的當前值。

HTML <nav> 標籤

定義導航連接，代替使用<div class="nav">

瀏覽器支持，IE8及更早的版本不支持這個標籤。

定義和用法

<nav> 標籤訂義導航連接的部分。

HTML <ol> 標籤

定義有序列表。

全部瀏覽器都支持這個標籤

HTML <optgroup> 標籤

定義選擇列表中相應的組。

例子：

<form>
    <select>
        <optgroup label="lady">
            <option>sherry</option>
            <option>marry</option>
        </optgroup>
        <optgroup label="gentle">
            <option>轎車</option>
            <option>跑車</option>
        </optgroup>
    </select>
</form>

瀏覽器支持：

全部瀏覽器都支持這個標籤。

HTML <option> 標籤

下拉選擇框裏的選項標籤。

瀏覽器支持：

全部瀏覽器都支持這個標籤。

定義和用法

option 元素定義下拉列表中的一個選項（一個條目）。

瀏覽器將 <option> 標籤中的內容做爲 <select> 標籤的菜單或是滾動列表中的一個元素顯示。

option 元素位於 select 元素內部。

可選的屬性

屬性	值	描述
disabled	disabled	規定此選項應在首次加載時被禁用。
label	text	定義當使用 <optgroup> 時所使用的標註。
selected	selected	規定選項（在首次顯示在列表中時）表現爲選中狀態。
value	text	定義送往服務器的選項值。

HTML <output> 標籤

定義一些輸出類型

瀏覽器支持：

IE不支持這個標籤

定義和用法

<output> 標籤訂義不一樣類型的輸出，好比腳本的輸出。

實例：

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
    <span>0</span>
    <input type="range" id="a" value="50">
    <span>100</span>
    +<input type="number" id="b" value="50">
    =<output name="x" for="a b"></output>
</form>

屬性

new : HTML5 中的新屬性。

屬性	值	描述
for	element_id	定義輸出域相關的一個或多個元素。
form	form_id	定義輸入字段所屬的一個或多個表單。
name	name	定義對象的惟一名稱。（表單提交時使用）

HTML <progress> 標籤

進度標籤（新標籤）

瀏覽器支持：

IE9以前的版本不支持這個標籤

提示和註釋

提示：請結合 <progress> 標籤與 JavaScript 一同使用，來顯示任務的進度。

註釋：<progress> 標籤不適合用來表示度量衡（例如，磁盤空間使用狀況或查詢結果）。如需表示度量衡，請使用 <meter> 標籤代替。

實例：

<progress class="progress" value="0" max="100"></progress>

JS：

function addProgress(){
   var p =$(".progress");
    var number = parseInt(p.attr("value"));
    if(number<100){
        number+=10;
        p.attr("value",number);
    }else{
        alert("you finish is job")
        window.clearInterval(timer);

    }

HTML <rp> 標籤

實例

一個 ruby 註釋：

<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>

瀏覽器支持：

IE8及以前的瀏覽器不支持。

定義和用法

<rp> 標籤在 ruby 註釋中使用，以定義不支持 ruby 元素的瀏覽器所顯示的內容。

ruby 註釋是中文註音或字符。

在東亞使用，顯示的是東亞字符的發音。

與 <ruby> 以及 <rt> 標籤一同使用：

ruby 元素由一個或多個字符（須要一個解釋/發音）和一個提供該信息的 rt 元素組成，還包括可選的 rp 元素，定義當瀏覽器不支持 "ruby" 元素時顯示的內容。

HTML <summary> 標籤

爲 <details> 元素定義可見的標題。

定義和用法

<summary> 標籤包含 details 元素的標題，"details" 元素用於描述有關文檔或文檔片斷的詳細信息。

提示和註釋

提示：請與 <details> 標籤一塊兒使用。標題是可見的，當用戶點擊標題時會顯示出詳細信息。

註釋："summary" 元素應該是 "details" 元素的第一個子元素。

HTML <section> 標籤

實例

文檔中的區段，解釋了 PRC：

  <h1>PRC</h1>
  <p>The People's Republic of China was born in 1949...</p>

<section></section>

定義和用法

<section> 標籤訂義文檔中的節（section、區段）。好比章節、頁眉、頁腳或文檔中的其餘部分。

HTML <source> 標籤

定義媒介源

實例

擁有兩份源文件的音頻播放器。瀏覽器應該選擇它所支持的文件（若是有的話）：

<audio controls>
   <source src="horse.ogg" type="audio/ogg">
   <source src="horse.mp3" type="audio/mpeg">
 Your browser does not support the audio element.
</audio>

瀏覽器支持：

IE8及以前的瀏覽器不支持這個標籤

定義和用法

<source> 標籤爲媒介元素（好比 <video> 和 <audio>）定義媒介資源。

<source> 標籤容許您規定可替換的視頻/音頻文件供瀏覽器根據它對媒體類型或者編解碼器的支持進行選擇。

屬性

new : HTML5 中的新屬性。

屬性	值	描述
media	media query	規定媒體資源的類型。
src	url	規定媒體文件的 URL。
type	numeric value	規定媒體資源的 MIME 類型。

HTML <tbody> 標籤

定義表格中的主體內容。

<table>
    <thead>
    <tr >
        <th>month</th>
        <th>day</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>6</td>
        <td>6</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td>data</td>
        <td>hour</td>
    </tr>
    </tfoot>
</table>

定義和用法

<tbody> 標籤表格主體（正文）。該標籤用於組合 HTML 表格的主體內容。

tbody 元素應該與 thead 和 tfoot 元素結合起來使用。

thead 元素用於對 HTML 表格中的表頭內容進行分組，而 tfoot 元素用於對 HTML 表格中的表注（頁腳）內容進行分組。

註釋：若是您使用 thead、tfoot 以及 tbody 元素，您就必須使用所有的元素。它們的出現次序是：thead、tfoot、tbody，這樣瀏覽器就能夠在收到全部數據前呈現頁腳了。您必須在 table 元素內部使用這些標籤。

提示：在默認狀況下這些元素不會影響到表格的佈局。不過，您可使用 CSS 使這些元素改變表格的外觀。

詳細描述

thead、tfoot 以及 tbody 元素使您有能力對錶格中的行進行分組。當您建立某個表格時，您也許但願擁有一個標題行，一些帶有數據的行，以及位於底部的一個總計行。這種劃分使瀏覽器有能力支持獨立於表格標題和頁腳的表格正文滾動。當長的表格被打印時，表格的表頭和頁腳可被打印在包含表格數據的每張頁面上。

提示和註釋：

註釋：<thead> 內部必須擁有 <tr> 標籤！

註釋：<thead>、<tbody> 以及 <tfoot> 不多被使用，這是由於糟糕的瀏覽器支持。咱們指望在 XHTML 的將來版本中這種狀況會發生變化。假如您使用 Internet Explorer 5.0 或更新的瀏覽器，能夠在咱們的 XML 教程中查看一個例子。

HTML <time> 標籤

定義時間：不會有任何的特殊效果，知識具備語義的標籤

定義和用法

<time> 標籤訂義公曆的時間（24 小時制）或日期，時間和時區偏移是可選的。

該元素可以以機器可讀的方式對日期和時間進行編碼，這樣，舉例說，用戶代理可以把生日提醒或排定的事件添加到用戶日程表中，搜索引擎也可以生成更智能的搜索結果。

屬性

new : HTML5 中的新屬性。

屬性	值	描述
datetime	datetime	規定日期 / 時間。不然，由元素的內容給定日期 / 時間。
pubdate	pubdate	指示 <time> 元素中的日期 / 時間是文檔（或 <article> 元素）的發佈日期。

HTML <track> 標籤

定義用在媒體播放器中的文本軌道。

實例

播放帶有字幕的視頻：

瀏覽器支持：

Internet Explorer 10, Chrome 以及 Opera 支持 <track> 標籤。

目前全部主流瀏覽器都不支持 <track> 標籤。

實例

<video width="320" height="240" controls="controls">
  <source src="forrest_gump.mp4" type="video/mp4" />
  <source src="forrest_gump.ogg" type="video/ogg" />
  <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
  <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
</video>

屬性

new : HTML5 中的新屬性。

屬性	值	描述
default	default	規定該軌道是默認的，假如沒有選擇任何軌道。
kind	captions chapters descriptions metadata subtitles	表示軌道屬於什麼文本類型。
label	label	軌道的標籤或標題。
src	url	軌道的 URL。
srclang	language_code	軌道的語言，若 kind 屬性值是 "subtitles"，則該屬性必需的。