HTML新增加的標籤

標籤

標記意義及用法分析/示例

屬性/屬性值/描述

<article>

定義獨立的內容，如論壇帖子、報紙文章、博客條目、用戶評論等內容。

支持HTML5的全局屬性和事件屬性。

<aside>

定義兩欄或多欄頁面的側邊欄內容，如聯繫我們、客服、網站公告等內容。

支持HTML5的全局屬性和事件屬性。

<audio>

定義音頻內容，如音樂或其他音頻流。

autoplay	autoplay	自動播放。
controls	controls	顯示控件。
loop	loop	自動重播。
preload	preload	預備播放。如果使用 “autoplay”，則忽略該屬性。
src	url	音頻的URL。

支持HTML5的全局屬性和事件屬性。

<audio src=”audio.wav”>

您的瀏覽器不支持 audio 標籤。（注：可以在開始標籤和結束標籤之間加上此文本內容，這樣若瀏覽器不支持此元素，就可以顯示出這個信息。）

</audio>

<canvas>

定義圖形，如圖表和其他圖像。（注：<canvas> 只是圖形容器，我們必須使用腳本來繪製圖形。）

height	pixels	設置 canvas 的高度。
width	pixels	設置 canvas 的寬度。

支持HTML5的全局屬性和事件屬性。

<canvas id=”myCanvas”></canvas>

<script type=”text/javascript”>

var canvas=document.getElementById(‘myCanvas’);

var ctx=canvas.getContext(‘2d’);

ctx.fillStyle=’#FFFF00′;

ctx.fillRect(0,0,20,30);

</script>

<command>

標記定義一個命令按鈕，比如單選按鈕、複選框或按鈕。只有當 command 元素位於 menu 元素內時，該元素纔是可見的。否則不會顯示這個元素，但是可以用它規定鍵盤快捷鍵。

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”

支持HTML5的全局屬性和事件屬性。

<menu>

<command οnclick=”alert(‘Hello!’)”>Click here.</command>

</menu>

<datalist>

定義選項列表，需與 input 元素配合使用，通過input 元素的 list 屬性來綁定，用來定義 input 可能的值。datalist 及其選項不會被顯示出來，它僅僅是合法的輸入值列表。

支持HTML5的全局屬性和事件屬性。

<input id=”fruits” list=”fruits” />

<datalist id=”fruits”>

<option value=”Apple”>

<option value=”Banana”>

</datalist>

<details>

用於描述文檔或文檔某個部分的細節。

open

open

定義 details 是否可見

支持HTML5的全局屬性和事件屬性。

<details>

<summary>Some title.</summary>

<p>Some details about the title.</p>

</details>

<embed>

定義外部的可交互的內容或插件。

height	pixels	設置嵌入內容的高度
src	url	嵌入內容的 URL
type	type	定義嵌入內容的類型
width	pixels	設置嵌入內容的寬度

支持HTML5的全局屬性和事件屬性。

<embed src=”someone.swf” />

<figure>

定義一組媒體內容（圖像、圖表、照片、代碼等）以及它們的標題。如果被刪除，則不應對文檔流產生影響。

支持HTML5的全局屬性和事件屬性。

<figure>

<p>The title of the image.</p>

<img src=”someimage.jpg” width=”100″ height=”50″ />

</figure>

<footer>

定義一個頁面或一個區域的頁腳。可包含文檔的作者姓名、創作日期或者聯繫信息。

支持HTML5的全局屬性和事件屬性。

<header>

定義一個頁面或一個區域的頭部。

支持HTML5的全局屬性和事件屬性。

<hgroup>

定義文件中一個區塊的相關信息，使用 <hgroup> 標籤對網頁或區段（section）的標題進行組合。

支持HTML5的全局屬性和事件屬性。

<hgroup>

<h1>Welcome my world!</h1>

<h2>This is a title.</h2>

</hgroup>

<keygen>

定義表單裏一個生成的鍵值。規定用於表單的密鑰對生成器字段。當提交表單時，私鑰存儲在本地，公鑰發送到服務器。

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

支持HTML5的全局屬性和事件屬性。

<form action=”demo_keygen.asp” method=”get”>

Username: <input type=”text” name=”usr_name” />

Encryption: <keygen name=”security” />

<input type=”submit” />

</form>

<mark>

定義有標記的文本。請在需要突出顯示文本時使用此標籤。

支持HTML5的全局屬性和事件屬性。

<p>I like <mark>apple</mark> most.</p>

<meter>

定義度量衡。僅用於已知最大和最小值的度量。（注：必須定義度量的範圍，既可以在元素的文本中，也可以在 min/max 屬性中定義。）

high	number	定義度量的值位於哪個點，被界定爲高的值
low	number	定義度量的值位於哪個點，被界定爲低的值
max	number	定義最大值。默認值是 1
min	number	定義最小值。默認值是 0
optimum	number	定義什麼樣的度量值是最佳的值。如果該值高於 “high” 屬性，則意味着值越高越好。如果該值低於 “low” 屬性的值，則意味着值越低越好。
value	number	定義度量的值

支持HTML5的全局屬性和事件屬性。

<meter min=”0″ max=”10″>2</meter>

<meter>2 out of 5</meter>

<meter>10%</meter>

<nav>

定義導航鏈接。（注：如果文檔中有“前後”按鈕，則應該把它放到 <nav> 元素中。）

支持HTML5的全局屬性和事件屬性。

<nav>

<a href=”index.asp”>Home</a>

<a href=”Previous.asp”>Previous</a>

<a href=”Next.asp”>Next</a>

</nav>

<output>

定義不同類型的輸出，比如腳本的輸出。

for	id of another element	定義輸出域相關的一個或多個元素
form	formname	定義輸入字段所屬的一個或多個表單
name	unique name	定義對象的唯一名稱。（表單提交時使用）

支持HTML5的全局屬性和事件屬性。

<progress>

定義任務（如下載）的過程，可以使用此標籤來顯示 JavaScript 中耗費時間的函數的進度。

max	number	定義完成的值
value	number	定義進程的當前值

支持HTML5的全局屬性和事件屬性。

<progress>

<span id=”progress”>15</span>%

</progress>

<ruby>

定義 ruby 註釋（中文注音或字符）。在東亞使用，顯示的是東亞字符的發音。ruby 元素由一個或多個字符（需要一個解釋/發音）和一個提供該信息的 rt 元素組成，還包括可選的 rp 元素，定義當瀏覽器不支持 “ruby” 元素時顯示的內容。

支持HTML5的全局屬性和事件屬性。

<section>

定義文檔中的節（section、區段）。比如章節、頁眉、頁腳或文檔中的其他部分。

cite

URL

當 section 摘自 web 的時候使用

支持HTML5的全局屬性和事件屬性。

<source>

爲媒介元素（比如 <video> 和 <audio>）定義媒介資源。

media	media query	定義媒介資源的類型，供瀏覽器決定是否下載
src	url	媒介的 URL
type	numeric value	定義播放器在音頻流中播放起始位置。默認是從開頭播放。

支持HTML5的全局屬性和事件屬性。

<time>

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

datetime	datetime	規定日期或時間。否則，由元素的內容給定日期或時間
pubdate	pubdate	指示 <time> 元素中的日期或時間是文檔的發佈日期

支持HTML5的全局屬性和事件屬性。

<p>大家都是早上 <time>9:00</time> 上班。</p>

<p><time datetime=”2012-01-01″>元旦</time>晚會。</p>

<video>

定義視頻，比如電影片段或其他視頻流。

autoplay	autoplay	自動播放。
controls	controls	顯示控件。
height	pixels	設置視頻播放器的高度
loop	loop	自動重播。
preload	preload	預備播放。如果使用 “autoplay”，則忽略該屬性。
src	url	視頻的URL。
width	pixels	設置視頻播放器的寬度

支持HTML5的全局屬性和事件屬性。

<video src=”movie.ogg” controls=”controls”>

您的瀏覽器不支持 video 標籤。（注：可以在開始標籤和結束標籤之間加上此文本內容，這樣若瀏覽器不支持此元素，就可以顯示出這個信息。）

</video>