HTML4和HTML5之間的主要不同點(diǎn)

時(shí)間：2024-07-30 21:15:18 HTML5 我要投稿

相關(guān)推薦

　　HTML超文本標(biāo)記語(yǔ)言（英文：HyperText Markup Language）是用于描述網(wǎng)頁(yè)文檔的一種標(biāo)記語(yǔ)言。HTML是Web編程的基礎(chǔ)，也就是說(shuō)萬(wàn)維網(wǎng)是建立在超文本基礎(chǔ)之上的，萬(wàn)維網(wǎng)主要由從服務(wù)器通過(guò)HTTP協(xié)議向?yàn)g覽器發(fā)送的HTML文檔組成。1997年W3C已經(jīng)正式推薦當(dāng)今主流的HTML4.0標(biāo)準(zhǔn)。

　　HTML5是一個(gè)還未完成的標(biāo)準(zhǔn)，而HTML4已經(jīng)正式使用了10多年了，它仍是當(dāng)前主流的標(biāo)準(zhǔn)。由于HTML5現(xiàn)在并沒(méi)有廣泛地運(yùn)用，而且搜索引擎支持效果也不佳，現(xiàn)在用HTML5來(lái)制作網(wǎng)頁(yè)并不會(huì)給你的網(wǎng)站帶來(lái)什么好處。重新開(kāi)發(fā)一個(gè)HTML5的網(wǎng)站，也要比把一個(gè)網(wǎng)站從HTML4遷移到HTML5上容易的多，這是因?yàn)檫@兩個(gè)版本之間有很大不同之處，下面介紹HTML4和HTML5之間的主要不同：

　　一、新的<video>和<audio>標(biāo)記替代FLASH

　　<canvas>、<source>、<video>和<audio>通過(guò)一個(gè)標(biāo)準(zhǔn)接口嵌入圖片、音頻和視頻多媒體，而無(wú)需安裝任何插件。

　　<audio>和<video>以替代<object>和<embed>標(biāo)記。

　　Canvas由一個(gè)可繪制地區(qū)HTML代碼中的屬性定義決定高度和寬度。JavaScript代碼可以訪問(wèn)該地區(qū)，通過(guò)一套完整的繪圖功能類似于其他通用二維的API，從而使動(dòng)態(tài)生成的圖形。

　　如通過(guò)<canvas>元素來(lái)顯示一個(gè)紅色的矩形：

　　<canvas id="myCanvas"></canvas><script type="text/javascript">var canvas=document.getElementById('myCanvas');var ctx=canvas.getContext('2d');ctx.fillStyle='#FF0000';ctx.fillRect(0,0,80,100);</script>

　　二、新的<section><article><header><footer>和<nav>標(biāo)記

　　HTML5的設(shè)計(jì)是要更好的描繪網(wǎng)站的解剖結(jié)構(gòu)，類似<p>和<span>的標(biāo)簽<section>、<article>、<header>和<nav>（網(wǎng)站導(dǎo)航塊）有利于搜索引擎的索引整理，也便于小屏幕裝置和視障人士使用。

　　隨著HTML5的到來(lái)，無(wú)處不在的<p id="header">和<p id="footer">傳統(tǒng)代碼方法，將變成標(biāo)簽<Header>和<footer>。

　　三、新的<menu>和<figure>標(biāo)記

　　新的<menu>標(biāo)記可以被用作普通的菜單，也可以用在工具條和右鍵菜單上。新的<figure>標(biāo)記是一種更專業(yè)的管理頁(yè)面上文字和圖像的方式。

　　四、全新的<form>標(biāo)記

　　新的<form>標(biāo)記對(duì)原有的表單元素進(jìn)行的全新的修改，用于創(chuàng)建供用戶輸入的HTML表單。<form>元素包含一個(gè)或多個(gè)表單元素，其中<input>標(biāo)簽規(guī)定用戶可輸入數(shù)據(jù)的輸入字段。

　　HTML5中的新標(biāo)簽：

　　<article>：定義了一個(gè)文檔內(nèi)容的獨(dú)立片段，比如博客條目或報(bào)紙文章。

　　<aside>：定義頁(yè)面內(nèi)容之外的內(nèi)容，aside的內(nèi)容應(yīng)該與附近的內(nèi)容相關(guān)。

　　<audio>：定義聲音內(nèi)容。

　　<canvas>：定義圖形。

　　<command>：定義命令按鈕，比如單選按鈕、復(fù)選框。

　　<datagrid>：定義樹(shù)列表(tree-list)中的數(shù)據(jù)。

　　<datalist>：定義下拉列表。

　　<datatemplate>：定義數(shù)據(jù)模板。

　　<details>：定義元素的細(xì)節(jié)。

　　<dialog>：定義對(duì)話（會(huì)話）。

　　<embed>：定義外部交互內(nèi)容或插件。

　　<figure>：定義媒介內(nèi)容的分組，以及它們的標(biāo)題。

　　<figcaption>：定義figure元素的標(biāo)題。figcaption元素應(yīng)該被置于figure元素的第一個(gè)或最后一個(gè)子元素的位置，它是可選的。

　　<footer>：定義section或page的頁(yè)腳。

　　<header>：定義section或page的頁(yè)眉。

　　<m>：定義有記號(hào)的文本，請(qǐng)?jiān)谛枰怀鲲@示文本時(shí)使用<m>標(biāo)簽。

　　<meter>：定義預(yù)定義范圍內(nèi)的度量。

　　<nav>：定義導(dǎo)航鏈接。

　　<nest>：定義數(shù)據(jù)模板中的嵌套點(diǎn)。

　　<output>：定義輸出的一些類型。

　　<progress>：定義任何類型的任務(wù)的進(jìn)度。

　　<rule>：為升級(jí)模板定義規(guī)則。

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

　　<source>：定義媒介源。

　　<time>：定義日期或時(shí)間。

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

　　五、一些過(guò)時(shí)的HTML4標(biāo)記將取消

　　如<big><font>和<center>，因?yàn)樗鼈円呀?jīng)被CSS取代。

　　HTML5不再支持的HTML4標(biāo)簽：

　　<acronym>：定義首字母縮寫。

　　<applet>：定義applet。

　　<big>：定義大號(hào)字體效果，請(qǐng)使用<b>或<strong>標(biāo)簽代替（<strong>標(biāo)簽表示把文本標(biāo)記為相比其他文本更為重要，<b>標(biāo)簽在HTML5中被重新定義為文本中需要強(qiáng)調(diào)的部分）。

　　<center>：定義居中的文本。

　　<dir>：定義目錄列表。

　　<basefont>：請(qǐng)使用CSS代替。

　　<font>：定義文本的字體、尺寸和顏色。

　　<frame>：定義子窗口（框架）。

　　<frameset>：定義框架的集。

　　<isindex>：定義單行的輸入域。

　　<noframes>：定義noframe部分。

　　<s>：定義加刪除線的文本。（同strike）

　　<strike>：定義加刪除線的文本，請(qǐng)使用<del>標(biāo)簽代替。

　　<u>：定義下劃線文本。

　　<tt>：定義打字機(jī)文本。

　　六、<a><cite>和<menu>被修改、重新定義或標(biāo)準(zhǔn)化了

　　沒(méi)有href屬性的a元素代表一個(gè)假設(shè)可能放置一個(gè)鏈接的占位符。

　　<b>標(biāo)簽在HTML5中仍是粗體，但被重新定義為文本中需要強(qiáng)調(diào)的部分。

　　<head>元素不再允許object元素作為子元素。

　　<hr>元素顯示為一條水平線，代表一個(gè)段段專題間斷，不再支持align,noshade,size以及width屬性。

　　<strong>元素現(xiàn)在代表重要性而不是強(qiáng)烈的強(qiáng)調(diào)。

　　<small>元素現(xiàn)在代表注釋的小字（旁注）。

　　<cite>定義引用，可使用該標(biāo)簽對(duì)參考文獻(xiàn)的引用進(jìn)行定義，比如書籍或雜志的標(biāo)題，引用的文本將以斜體顯示。

　　<i>標(biāo)簽依然是斜體樣式，但它的意義已經(jīng)和之前有所不同，HTML5中只是為了將一段文字標(biāo)識(shí)出來(lái)，而不是為了設(shè)置斜體。

　　七、HTML4部分元素變更了屬性

　　table的border屬性只允許值為"1"以及空字符。

　　img的border屬性不再允許。

　　img和其他元素的width和height屬性不再允許包含百分比。

　　八、HTML4部分元素引入了幾個(gè)新屬性

　　為了和link元素的一致性，a和area（定義圖像映射中的區(qū)域）元素現(xiàn)在有了media屬性。

　　為了和a和link元素的一致性，area元素現(xiàn)在也有了hreflang、type和rel屬性。

　　主要為了和a元素的一致性，base元素也有了target屬性。（這已被廣泛支持）

　　script元素有了一個(gè)新屬性async，可以影響腳本的加載和執(zhí)行。

　　九、<noscript>標(biāo)簽將會(huì)被大量使用

　　HTML5時(shí)代將會(huì)是一個(gè)富媒體時(shí)代。傳統(tǒng)的文字、圖片、鏈接、音頻、視頻已經(jīng)滿足不了用戶不斷增長(zhǎng)的需求，大量的腳本能夠編輯出豐富的信息，包括游戲、個(gè)性化設(shè)計(jì)和交互式設(shè)計(jì)等。<noscript>元素用來(lái)定義在腳本未被執(zhí)行時(shí)的替代文本內(nèi)容，就如同<img>標(biāo)簽中的alt屬性。

　　HTML中很少用到但HTML5中可能很有用的標(biāo)簽：

　　<abbr>：表示一個(gè)縮寫形式，比如「Inc.」、」etc.」。最初是在HTML4.0中引入的，表示它所包含的文本是一個(gè)更長(zhǎng)的單詞或短語(yǔ)的縮寫形式。

　　<address>：定義文檔作者或擁有者的聯(lián)系信息。

　　<bdo>：定義文本顯示的方向。

　　<blockquote>：定義摘自另一個(gè)源的塊引用。<blockquote>與</blockquote>之間的所有文本都會(huì)從常規(guī)文本中分離出來(lái)，經(jīng)常會(huì)在左、右兩邊進(jìn)行縮進(jìn)，而且有時(shí)會(huì)使用斜體。也就是說(shuō)，塊引用擁有它們自己的空間。

　　<dl>：定義一個(gè)定義列表。

　　<dt>：定義一個(gè)定義列表中的一個(gè)項(xiàng)目，以及dialog中的角色。

　　<dd>：定義一個(gè)定義列表中對(duì)項(xiàng)目的描述。

　　<del>：定義文檔中已刪除的文本。（與<ins>一起使用，描述文檔中的更新和修正。）

　　<ins>：定義插入文本。（與<del>標(biāo)簽一起使用，來(lái)描述對(duì)文檔的更新和修正。）

　　<fieldset>：將表單內(nèi)的相關(guān)元素分組。

　　<legend>：為<fieldset>、<figure>以及<details>元素定義標(biāo)題。

　　<menu>：定義菜單列表。當(dāng)希望列出表單控件時(shí)使用該標(biāo)簽。（請(qǐng)使用CSS來(lái)定義列表的類型。）

　　<q>：定義一個(gè)短的引用。（瀏覽器經(jīng)常會(huì)在這種引用的周圍插入引號(hào)。）

　　十、新增事件屬性

　　HTML5元素可擁有事件屬性，這些屬性在瀏覽器中觸發(fā)行為，比如當(dāng)用戶單擊一個(gè)HTML5元素時(shí)啟動(dòng)一段JavaScript。下面列出的事件屬性，可以把它們插入HTML標(biāo)簽來(lái)定義事件行為。

　　HTML5中的新事件屬性舉例：