Html5新標籤解釋及用法

點評：HTML 5 是一個新的網絡標準，目標在於取代現有的HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 標準

HTML 5 提供了一些新的元素和屬性，反映典型的現代用法網站。其中有些是技術上類似<div> 和<span> 標籤，但有一定含義，例如<nav>（網站導航塊）和<footer>。這種標籤將有利於搜索引擎的索引整理、小屏幕裝置和視障人士使用。同時為其他瀏覽要素提供了新的功能，通過一個標準接口，如<audio> 和<video> 標記。

一些過時的HTML 4 標記將取消，其中包括純粹用作顯示效果的標記，如<font> 和<center>，因為它們已經被CSS 取代。還有一些透過DOM 的網絡行為（via）。

下面我們來看一下HTML 5提供的一些新的標籤用法以及和HTML 4的區別。

<article>標籤定義外部的內容。比如來自一個外部的新聞提供者的一篇新的文章，或者來自blog 的文本，或者是來自論壇的文本。亦或是來自其他外部源內容。

HTML5:<article></article>

HTML4:<div></div>

<aside>標籤定義article 以外的內容。 aside 的內容應該與article 的內容相關。

HTML5:<aside>Aside 的內容是獨立的內容，但應與文檔內容相關。 </aside>

HTML4:<div>Aside 的內容是獨立的內容，但應與文檔內容相關。 </div>

<audio> 標籤定義聲音，比如音樂或其他音頻流。

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

HTML4:<object type=application/ogg data=someaudio.wav><param name=src value=someaudio.wav></object>

<canvas> 標籤定義圖形，比如圖表和其他圖像。這個HTML 元素是為了客戶端矢量圖形而設計的。它自己沒有行為，但卻把一個繪圖API 展現給客戶端JavaScript 以使腳本能夠把想繪製的東西都繪製到一塊畫布上。

HTML5:<canvas id=myCanvas width=200 height=200></canvas>

HTML4:<object data=inc/hdr.svg type=image/svg+xml width=200 height=200></object>

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

HTML5: <command onclick=cut() label=cut>

HTML4: none

<datalist> 標籤定義可選數據的列表。與input 元素配合使用，就可以製作出輸入值的下拉列表。

HTML5: <datalist></datalist>

HTML4: see combobox.

<details> 標籤定義元素的細節，用戶可進行查看，或通過點擊進行隱藏。與<legend> 一起使用，來製作detail 的標題。該標題對用戶是可見的，當在其上點擊時可打開或關閉detail。

HTML5: <details></details>

HTML4: <dl style=display:hidden></dl>

<embed> 標籤定義嵌入的內容，比如插件。

HTML5: <embed src=horse.wav />

HTML4: <object data=flash.swf type=application/x-shockwave-flash></object>

<figcaption> 標籤定義figure 元素的標題。 figcaption 元素應該被置於figure 元素的第一個或最後一個子元素的位置。

HTML5: <figure><figcaption>PRC</figcaption></figure>

HTML4: none

<figure> 標籤用於對元素進行組合。使用<figcaption> 元素為元素組添加標題。

HTML5: <figure><figcaption>PRC</figcaption><p>The People's Republic of China was born in 1949...</p></figure>

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

<footer> 標籤定義section 或document 的頁腳。典型地，它會包含創作者的姓名、文檔的創作日期以及/或者聯繫信息。

HTML5: <footer></footer>

HTML4: <div></div>

<header> 標籤定義section 或document 的頁眉。

HTML5: <header></header>

HTML4: <div></div>

<hgroup> 標籤用於對網頁或區段（section）的標題進行組合。

HTML5: <hgroup></hgroup>

HTML4: <div></div>

<keygen> 標籤定義生成密鑰。

HTML5: <keygen>

HTML4: none

<mark>主要用來在視覺上向用戶呈現那些需要突出的文字。 <mark>標籤的一個比較典型的應用就是在搜索結果中向用戶高亮顯示搜索關鍵詞。

HTML5: <mark></mark>

HTML4: <span></span>

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

HTML5: <meter></meter>

HTML4: none

<nav> 標籤定義導航鏈接的部分。

HTML5: <nav></nav>

HTML4:<ul></ul>

<output> 標籤定義不同類型的輸出，比如腳本的輸出。

HTML5: <output></output>

HTML4: <span></span>

<progress> 標籤運行中的進程。可以使用<progress> 標籤來顯示JavaScript 中耗費時間的函數的進程。

HTML5: <progress></progress>

HTML4: none

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

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

HTML4: none

<rt> 標籤定義字符（中文注音或字符）的解釋或發音。

HTML5: <ruby>漢<rt> ㄏㄢˋ </rt></ruby>

HTML4: none

<ruby> 標籤定義ruby 註釋（中文注音或字符）。

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

HTML4: none

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

HTML5: <section></section>

HTML4: <div></div>

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

HTML5: <source>

HTML4: <param>

<summary> 標籤包含details 元素的標題，details 元素用於描述有關文檔或文檔片段的詳細信息。 summary 元素應該是details 元素的第一個子元素。

HTML5: <details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details>

HTML4: none

<time> 標籤定義日期或時間，或者兩者。

HTML5: <time></time>

HTML4: <span></span>

<video> 標籤定義視頻，比如電影片段或其他視頻流。

HTML5: <video src=movie.ogg controls=controls>您的瀏覽器不支持video 標籤。 </video>

HTML4:<object type=video/ogg data=movie.ogv><param name=src value=movie.ogv></object>