HTML5和HTML4的區(qū)別：HTML5新標(biāo)簽的用法解釋

時(shí)間：2022-05-29 18:51:01 | 來源：網(wǎng)絡(luò)營銷

時(shí)間：2022-05-29 18:51:01 來源：網(wǎng)絡(luò)營銷

HTML5本身是由W3C推薦出來的，它的開發(fā)是通過谷歌、蘋果，諾基亞、中國移動(dòng)等幾百家公司一起醞釀的技術(shù)，這個(gè)技術(shù)最大的好處在于它是一個(gè)公開的技術(shù)。換句話說，每一個(gè)公開的標(biāo)準(zhǔn)都可以根據(jù)W3C的資料庫找尋根源。另一方面，W3C通過的HTML5標(biāo)準(zhǔn)也就意味著每一個(gè)瀏覽器或每一個(gè)平臺(tái)都會(huì)去實(shí)現(xiàn)（具體可查看億企邦的《各大主流瀏覽器對(duì)HTML5的兼容性測(cè)試及結(jié)果分析》相關(guān)介紹）。

同時(shí)，HTML5提供了一些新的元素和屬性，例如<nav>（網(wǎng)站導(dǎo)航塊）和<footer>。這種標(biāo)簽將有利于搜索引擎的索引整理，同時(shí)更好的幫助小屏幕裝置和視障人士使用，除此之外，還為其他瀏覽要素提供了新的功能，如<audio>和<video>標(biāo)記，同樣一些過時(shí)的HTML4標(biāo)記也將逐步的取消，如<font>和<center>。那么，今天我就借助億企邦的平臺(tái)跟大家分享一下HTML5標(biāo)簽和HTML4標(biāo)簽的區(qū)別和用法：

1、<article>標(biāo)簽

<article>標(biāo)簽定義外部的內(nèi)容，比如來自一個(gè)外部的新聞提供到億企邦的一篇新文章，或者來自blog的文本，或者是來自論壇的文本，亦或是來自其他外部源內(nèi)容。

HTML5: <article></article>

HTML4: <div></div>

2、<aside>標(biāo)簽

<aside>標(biāo)簽定義article以外的內(nèi)容。aside的內(nèi)容應(yīng)該與article的內(nèi)容相關(guān)。

HTML5: <aside>Aside的內(nèi)容是獨(dú)立的內(nèi)容，但應(yīng)與文檔內(nèi)容相關(guān)。</aside>

HTML4: <div>Aside的內(nèi)容是獨(dú)立的內(nèi)容，但應(yīng)與文檔內(nèi)容相關(guān)。</div>

3、<audio>標(biāo)簽

<audio>標(biāo)簽定義聲音，比如音樂或其他音頻流。

HTML5: <audio src="someaudio.wav">您的瀏覽器不支持audio標(biāo)簽。</audio>

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

4、<canvas>標(biāo)簽

<canvas>標(biāo)簽定義圖形，比如圖表和其他圖像。這個(gè)HTML元素是為了客戶端矢量圖形而設(shè)計(jì)的，它自己沒有行為，但卻把一個(gè)繪圖API展現(xiàn)給客戶端JavaScript以使腳本能夠把想繪制的東西都繪制到一塊畫布上（具體可查看億企邦的《深入解析HTML5的8大性能》相關(guān)介紹）。

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

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

5、<command>標(biāo)簽

<command>標(biāo)簽定義命令按鈕，比如單選按鈕、復(fù)選框或按鈕。

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

HTML4: none

6、<datalist>標(biāo)簽

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

HTML5: <datalist></datalist>

HTML4: see combobox.

7、<details>標(biāo)簽

<details>標(biāo)簽定義元素的細(xì)節(jié)，用戶可進(jìn)行查看，或通過點(diǎn)擊進(jìn)行隱藏。與<legend>一起使用，來制作detail的標(biāo)題。該標(biāo)題對(duì)用戶是可見的，當(dāng)在其上點(diǎn)擊時(shí)可打開或關(guān)閉detail。

HTML5: <details></details>

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

8、<embed>標(biāo)簽

<embed>標(biāo)簽定義嵌入的內(nèi)容，比如插件。

HTML5: <embed src="horse.wav" />

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

9、<figcaption>標(biāo)簽

<figcaption>標(biāo)簽定義figure元素的標(biāo)題。“figcaption” 元素應(yīng)該被置于“figure”元素的第一個(gè)或最后一個(gè)子元素的位置。

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

HTML4: none

10、<figure>標(biāo)簽

<figure>標(biāo)簽用于對(duì)元素進(jìn)行組合，使用<figcaption>元素為元素組添加標(biāo)題。

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

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

11、<footer>標(biāo)簽

<footer>標(biāo)簽定義section或document的頁腳。它會(huì)包含創(chuàng)作者的姓名、文檔的創(chuàng)作日期以及/或者聯(lián)系信息。

HTML5: <footer></footer>

HTML4: <div></div>

12、<header>標(biāo)簽

<header>標(biāo)簽定義section或document的頁眉。

HTML5: <header></header>

HTML4: <div></div>

13、<hgroup>標(biāo)簽

<hgroup>標(biāo)簽用于對(duì)網(wǎng)頁或區(qū)段（section）的標(biāo)題進(jìn)行組合。

HTML5: <hgroup></hgroup>

HTML4: <div></div>

14、<keygen>標(biāo)簽

<keygen>標(biāo)簽定義生成密鑰。

HTML5: <keygen>

HTML4: none

15、<mark>標(biāo)簽

<mark>標(biāo)簽主要用來在視覺上向用戶呈現(xiàn)那些需要突出的文字，<mark>標(biāo)簽的一個(gè)比較典型的應(yīng)用就是在搜索結(jié)果中向用戶高亮顯示搜索關(guān)鍵詞。

HTML5: <mark></mark>

HTML4: <span></span>

16、<meter>標(biāo)簽

<meter>標(biāo)簽定義度量衡，僅用于已知最大和最小值的度量。必須定義度量的范圍，既可以在元素的文本中，也可以在 min/max 屬性中定義。

HTML5: <meter></meter>

HTML4: none

17、<nav>標(biāo)簽

<nav>標(biāo)簽定義導(dǎo)航鏈接的部分。

HTML5: <nav></nav>

HTML4:<ul></ul>

18、<output>標(biāo)簽

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

HTML5: <output></output>

HTML4: <span></span>

19、<progress>標(biāo)簽

<progress>標(biāo)簽運(yùn)行中的進(jìn)程，可以使用<progress>標(biāo)簽來顯示JavaScript中耗費(fèi)時(shí)間的函數(shù)的進(jìn)程。

HTML5: <progress></progress>

HTML4: none

20、<rp>標(biāo)簽

<rp>標(biāo)簽在ruby注釋中使用，以定義不支持ruby元素的瀏覽器所顯示的內(nèi)容。

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

HTML4: none

21、<rt>標(biāo)簽

<rt>標(biāo)簽定義字符（中文注音或字符）的解釋或發(fā)音。

HTML5: <ruby>? <rt> ㄏㄢ? </rt></ruby>

HTML4: none

22、<ruby>標(biāo)簽

<ruby>標(biāo)簽定義ruby注釋（中文注音或字符）。

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

HTML4: none

23、<section>標(biāo)簽

<section>標(biāo)簽定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁眉、頁腳或文檔中的其他部分。

HTML5: <section></section>

HTML4: <div></div>

24、<source>標(biāo)簽

<source>標(biāo)簽為媒介元素（比如：<video>和<audio>）定義媒介資源。

HTML5: <source>

HTML4: <param>

25、<summary>標(biāo)簽

<summary>標(biāo)簽包含details元素的標(biāo)題，“details” 元素用于描述有關(guān)文檔或文檔片段的詳細(xì)信息。“summary” 元素應(yīng)該是 “details” 元素的第一個(gè)子元素。

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

HTML4: none

26、<time>標(biāo)簽

<time>標(biāo)簽定義日期或時(shí)間，或者兩者。

HTML5: <time></time>

HTML4: <span></span>

27、<video>標(biāo)簽

<video>標(biāo)簽定義視頻，比如：電影片段或其他視頻流。

HTML5: <video src="movie.ogg" controls="controls">您的瀏覽器不支持 video 標(biāo)簽。</video>

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

億企邦點(diǎn)評(píng)：

用HTML5的優(yōu)點(diǎn)主要在于，這個(gè)技術(shù)可以進(jìn)行跨平臺(tái)的使用。比如你開發(fā)了一款HTML5的游戲，你可以很輕易地移植到UC的開放平臺(tái)、Opera的游戲中心、Facebook應(yīng)用平臺(tái)，甚至可以通過封裝的技術(shù)發(fā)放到App Store或Google Play上，所以它的跨平臺(tái)非常強(qiáng)大，也是大多數(shù)人對(duì)HTML5有興趣的主要原因。