DIV CSS 佈局教程網

我們知道Html5是在HTML4的基礎上添加了許多的新標簽，也刪除了HTML4中一些標簽，具體的Html5新標簽請看文章，有具體的說明。

也許你會有疑問，Html4的標簽已經非常豐富了，也能滿足我們日常的web開發，那“為什麼要添加這些新標簽？”，你也想知道新的標簽到底能發揮什麼樣的作用，我想直接告訴你的是“Html5使HTML4所作的同樣的事情簡單化了。”，也就是Html5提供了更富有語義的，高效的標簽。

所以，我們在這裡具體的看一下HTML4要實現的功能，在Html5中會采用什麼樣的最終標准來得到相同的結果。

以下介紹的是Html5的新標簽：

• Html5: <article></article>
• Html4: <div class="article"></div>

這個標簽的唯一目的是廢除需要定義的一個類。

定義和用法

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

• Html5: <aside></aside>
• Html4: <div class="aside"></div>

這個標簽的唯一目的是廢除需要定義的一個類。

定義和用法

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

• Html5: <audio src="xyz.ogg" autoplay controls></audio>
• Html4: <object type="application/ogg" data="xyz.ogg"><param name="src" value="xyz.ogg"></object>

<audio>主要是來取代 <object> 標簽的復雜表現。

定義和用法

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

• Html5: <canvas id="box" width="250" height="250"></canvas>
• Html4 (closest equivalent): <object data="inc/hdr.svg" type="image/svg+XML" width="250" height="250"></object>

這個 HTML 元素是為了客戶端矢量圖形而設計的。它自己沒有行為，但卻把一個繪圖 API 展現給客戶端 Javascript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上。也就是說“ Html 5 canvas 提供了通過 JavaScript 繪制圖形的方法，此方法使用簡單但功能強大。”

定義和用法

<canvas> 標簽定義圖形，比如圖表和其他圖像。

• Html5: <command onclick=cut()" label="cut">
• Html4: none

這些元素都可以根據用戶的操作和選擇來改變頁面顯示內容，而無需從服務器上下載新頁面。Best practice is to move the JavaScript to a separate file and reference it unobtrusively so you would never need this Html5 element.

定義和用法

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

• Html5: <datalist></datalist>
• Html4: see combobox.

This new element adds the missing combobox element to forms so that you don’t have to use JavaScript to create it. Possibly the most useful of the new tags that have been added.

定義和用法

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

• Html5: <details></details>
• Html4: <dl class="details" style="display:hidden"></dl>

details 元素意思是查看進一步信息，這些信息可能默認不顯示出來。可以通過legend元素來觸發這段信息。Details元素還可以應用在腳注或尾注上。 This tag adds the ability to toggle the visibility of sections of the web page without the need for CSS and JavaScript.

定義和用法

<details> 標簽定義元素的細節，用戶可進行查看，或通過點擊進行隱藏。

• Html5: <embed data="flash.swf" width="300" height="200" type="application/x-shockwave-Flash"></embed>
• Html4: <object data="flash.swf" width="300" height="200" type="application/x-shockwave-Flash"></object>

Adding the proprietary embed tag into the standards when the standard object tag already serves the same purpose is completely pointless. The only advantage that the embed tag currently has is in simplifying the code needed to support IE6. By the time that the embed tag becomes part of the standard IE6 will be long gone and the embed tag will basically just duplicate the functionality of the object tag.

定義和用法

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

• Html5: <figure></figure>
• Html4: <dl class="figure"></dl>

這個標簽的唯一目的是廢除需要定義的一個類。

定義和用法

<figure> 標簽用於對元素進行組合。

• Html5: <header></header>
• Html4: <div class="header"></div>

這個標簽的唯一目的是廢除需要定義的一個類。

定義和用法

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

• Html5: <hgroup></hgroup>
• Html4: <div class="hgroup"></div>

這個標簽的唯一目的是廢除需要定義的一個類。

定義和用法

它的作用是將標題分組。主要用在副標題、 別名等。

• Html5: <iframe src="xiframe.htm"></iframe>
• Html4: <object type="text/Html" data="xiframe.htm"></object>

Adding the deprecated iframe tag back into the standards when the standard object tag already serves the same purpose is completely pointless. The only advantage that the iframe tag currently has is in simplifying the code needed to support IE6. By the time that the iframe tag becomes part of the standard IE6 will be long gone and the iframe tag will basically just duplicate the functionality of the object tag.

定義和用法

<iframe> 標簽創建包含另一個文檔的行內框架。

HTML 4.01 與 Html 5 之間的差異

在 Html 5 中，僅僅支持 src 屬性

• Html5: <keygen>
• Html4: no equivalent

這是全新的功能被添加到浏覽器。定義和用法

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

• Html5: <mark></mark>
• Html4: <span class="mark"></span>

這個標簽的唯一目的是廢除需要定義的一個類。

定義和用法

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

• Html5: <menu></menu>
• Html4: <ul class="menu"></ul>

這個標簽的唯一目的是廢除需要定義的一個類。

定義和用法

<menu> 標簽定義菜單列表。當希望列出表單控件時使用該標簽。

HTML 4.01 與 Html 5 之間的差異

在 Html 4.01 中，不贊成使用 menu 元素。

在 Html 5 中，重新定義了 menu 元素，且使用用於排列表單控件。

• Html5: <meter></meter>
• Html4: no equivalent

這是一個全新的元素。

定義和用法

<meter> 標簽定義度量（單位）。僅用於已知最大和最小值的度量。

• Html5: <nav></nav>
• Html4 <ul class="nav"></ul>

這個標簽的唯一目的是廢除需要定義的一個類。

定義和用法

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

• Html5: <output></output>
• Html4: <span class="output"></span>

這是一個全新的元素。

定義和用法

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

• Html5: <progress></progress>
• Html4: no equivalent

這是一個全新的元素。

定義和用法

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

• Html5: <section></section>
• Html4: <div class="section"></div>

這個標簽的唯一目的是廢除需要定義的一個類。

定義和用法

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

• Html5: <source>
• Html4: <param>

<param>標簽可為包含它的 <object> 標簽提供參數的。<source>是為<video>和<audio>提供參數的。

The source element serves the same purpose inside audio and video elements as param does inside object elements. Since audio and video elements are just named objects these elements are equivalent.

定義和用法

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

• Html5: <time></time>
• Html4: <span class="time"></span>

This new element does serve to make the time available in a standard format within an attribute of the tag and so may simplify time related processing in JavaScript attached to the page. Whetyher this is a sufficIEnt gain to make it worth adding a whole new tag is questionable.

定義和用法

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

• Html5: <video src="xyz.ogv" type=video/ogg"></video>
• Html4:<object type="video/ogg" data="xyz.ogv"><param name="src" value="xyz.ogv"></object>

定義和用法

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