本文主要介紹Html5和Html4的區(qū)別。
語(yǔ)法的改變
內(nèi)容類(lèi)型
HTML5 的文件擴(kuò)展符與內(nèi)容類(lèi)型保持不變。擴(kuò)展符仍然為“.html”或“.htm”，內(nèi)容類(lèi)型(ContentType)仍然為“text/html”。
DOCTYPE聲明
DOCTYPE 聲明是 HTML 文件中必不可少的，它位于文件第一行。在 XHTML 1.0 Transitional 中，它的聲明方法如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
在 HTML5 中，刻意不使用版本聲明，一份文檔將會(huì)適用于所有版本的 HTML。HTML5 中的 DOCTYPE 聲明方法（不區(qū)分大小寫(xiě)）如下：
<!DOCTYPE html>
另外，當(dāng)使用工具時(shí)，也可以在 DOCTYPE 聲明方式中加入 SYSTEM 識(shí)別符，聲明方法如下面的代碼所示：
<!DOCTYPE HTML SYSTEM "about:legacy-compat">
在 HTML5 中像這樣的 DOCTYPE 聲明是允許的（不區(qū)分大小寫(xiě)，引號(hào)不區(qū)分是單引號(hào)還是雙引號(hào)）。
指定字符編碼
在 HTML4 中，使用 meta 標(biāo)簽的形式指定文件中的字符編碼，如下所示：
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" >
在 HTML5 中，可以使用對(duì) <meta> 標(biāo)簽直接追加 charset 屬性的方式來(lái)指定字符編碼，如下所示：
<meta charset="UTF-8">
兩種方法都有效，可以繼續(xù)使用前面那種方式（通過(guò) content 屬性來(lái)指定），但是不能同時(shí)混合使用兩種方式，在以前的 HTML 代碼中可能會(huì)存在下面代碼所示的標(biāo)記方式，但在 HTML5 中，這種字符編碼方式將被認(rèn)為是錯(cuò)誤的，這一點(diǎn)請(qǐng)注意：
<meta charset="UTF-8" http-equiv="Content-Type" content="text/html;charset=UTF-8">
從 HTML5 開(kāi)始，對(duì)于文件的字符編碼推薦使用 UTF-8。
可以省略標(biāo)記的元素
在 HTML5 中，標(biāo)簽的標(biāo)記分為“不允許寫(xiě)結(jié)束標(biāo)記”、“可以省略結(jié)束標(biāo)記”和“開(kāi)始標(biāo)記和結(jié)束標(biāo)記全部可以省略”三種類(lèi)型。讓我們來(lái)針對(duì)這三類(lèi)情況列舉一個(gè)標(biāo)簽清單，其中包括 HTML5 中的新標(biāo)簽。
不允許寫(xiě)結(jié)束標(biāo)記的標(biāo)簽有：
area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。
可以省略結(jié)束標(biāo)記的標(biāo)簽有：
li、dt、dd、p、rt、rp、op、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。
可以省略全部標(biāo)記的標(biāo)簽有：
html、head、body、colgroup、tbody。
“不允許寫(xiě)結(jié)束標(biāo)記的標(biāo)簽”是指，不允許使用開(kāi)始標(biāo)記與結(jié)束標(biāo)記將標(biāo)簽括起來(lái)的形式，只允許使用“<標(biāo)簽/>”的形式進(jìn)行書(shū)寫(xiě)。例如“<br>...</br>”的書(shū)寫(xiě)方式是錯(cuò)誤的，正確的書(shū)寫(xiě)方式為“<br/>”。當(dāng)然，HTML5之前的版本中<br>這種寫(xiě)法可以被沿用。
“可以省略全部標(biāo)記的標(biāo)簽”是指，該標(biāo)簽可以完全被省略。請(qǐng)注意，即使標(biāo)記被省略了，該標(biāo)簽還是以隱式的方式存在的。例如將body標(biāo)簽省略不寫(xiě)時(shí)，但它在文檔結(jié)構(gòu)中還是存在的，可以使用document.body進(jìn)行訪(fǎng)問(wèn)。
具有boolean值的屬性
對(duì)于具有boolean值的屬性，例如 disabled 與 readonly 等，當(dāng)只寫(xiě)屬性而不指定屬性值時(shí)，表示屬性值為true；如果想要將屬性值設(shè)為flase，可以不使用該屬性。另外，要想將屬性值設(shè)為true時(shí)，也可以將屬性名設(shè)定為屬值，或?qū)⒖兆址O(shè)定為屬性值。屬性值的設(shè)定方法可以參考下面的示例：
<!--只寫(xiě)屬性不寫(xiě)屬性值代表屬性為true-->
<input type="checkbox" checked>
<!--不寫(xiě)屬性代表屬性為false-->
<input type="checkbox">
<!--屬性值=屬性名，代表屬性為true-->
<input type="checkbox" checked="checked">
<!--屬性值=空字符串，代表屬性為true-->
<input type="checkbox" checked="">
省略引號(hào)
在之前的 HTML 版本中，大家已經(jīng)知道，指定屬性值的時(shí)候，屬性值兩邊既可以用雙引號(hào)，也可以用單引號(hào)。HTML5 在此基礎(chǔ)上做了一些改進(jìn)，當(dāng)屬性值不包括空字符串、“<”、“>”、"="、單引號(hào)、雙引號(hào)等字符時(shí)，屬性值兩邊的引號(hào)可以省略。如下面的代碼所示：
<!--請(qǐng)注意type的屬性值兩邊的引號(hào)-->
<input type="text">
<input type='text'>
<input type=text>
示例：
<!DOCTYPE html>
<meta charset="UTF-8">
<title>HTML5 標(biāo)記示例</title>
<p>這段代碼是根據(jù)HTML5語(yǔ)法
<br/>編寫(xiě)出來(lái)的。
1、該代碼完全是用 HTML5 寫(xiě)成的；
2、省略了<html>、<head>、<body>等標(biāo)簽；
3、DOCTYPE申明使用了 HTML5 支持的簡(jiǎn)潔申明方式；
4、用<meta>標(biāo)簽的 charset 屬性指定字符編碼；
5、省略了<p>標(biāo)簽的結(jié)束標(biāo)記；
6、使用<標(biāo)簽/>的方式來(lái)結(jié)束<title>標(biāo)簽以及<br>標(biāo)簽。
新增和廢除的元素（標(biāo)簽）
新增的結(jié)構(gòu)標(biāo)簽
在 HTML5 中，新增了以下與結(jié)構(gòu)相關(guān)的標(biāo)簽：
section標(biāo)簽
section 標(biāo)簽表示頁(yè)面中的一個(gè)內(nèi)容區(qū)塊，比如章節(jié)、頁(yè)眉、頁(yè)腳或頁(yè)面中的其他部分。
它可以與h1、h2、h3、h4、h5、h6等標(biāo)簽結(jié)合起來(lái)使用，標(biāo)識(shí)文檔結(jié)構(gòu)。
HTML5 中代碼示例：
<section>....</section>
HTML4 中代碼示例：
<div>...</div>
article標(biāo)簽
article 標(biāo)簽表示頁(yè)面中的一塊與上下文不相關(guān)的獨(dú)立內(nèi)容，比如博客中的一篇文章或報(bào)紙中的一篇文章。
HTML5 中代碼示例：
<article>...</article>
HTML4 中代碼示例：
<div>...</div>
aside標(biāo)簽
aside 標(biāo)簽表示 article 標(biāo)簽的內(nèi)容之外、并與article 標(biāo)簽的內(nèi)容相關(guān)的輔助信息。
HTML5 中代碼示例：
<aside>...</aside>
HTML4 中代碼示例：
<div>...</div>
header標(biāo)簽
header 標(biāo)簽表示頁(yè)面中的一個(gè)內(nèi)容區(qū)塊或整個(gè)頁(yè)面的標(biāo)題。
HTML5 中代碼示例：
<header>...</header>
HTML4 中代碼示例：
<div>...</div>
hgroup標(biāo)簽
hgroup 標(biāo)簽用于對(duì)整個(gè)頁(yè)面或頁(yè)面中一個(gè)內(nèi)容區(qū)塊的標(biāo)題進(jìn)行組合。
HTML5 中代碼示例：
<hgroup>...</hgroup>
HTML4 中代碼示例：
<div>...</div>
footer標(biāo)簽
footer 標(biāo)簽表示整個(gè)頁(yè)面或頁(yè)面中一個(gè)內(nèi)容區(qū)塊的腳注。一般來(lái)說(shuō)，它會(huì)包含創(chuàng)作者的姓名、創(chuàng)作日期以及創(chuàng)作者的版權(quán)或聯(lián)系信息。
HTML5 中代碼示例：
<footer>...</footer>
HTML4 中代碼示例：
<div>...</div>
nav標(biāo)簽
nav標(biāo)簽表示頁(yè)面中導(dǎo)航鏈接的部分。
HTML5 中代碼示例：
<nav>...</nav>
HTML4 中代碼示例：
<ul>...</ul>
figure標(biāo)簽
figure 標(biāo)簽表示一段獨(dú)立的流內(nèi)容，一般表示文檔主體流內(nèi)容中的一個(gè)獨(dú)立單元。使用 figcaption 標(biāo)簽為 figure 標(biāo)簽組添加標(biāo)題。
HTML5 中代碼示例：
<figure>
<figcaption>新增的結(jié)構(gòu)標(biāo)簽</figcaption>
<p>在 HTML5 中，新增了以下與結(jié)構(gòu)相關(guān)的標(biāo)簽：</p>
</figure>
HTML4 中代碼示例：
<dl>
<h1>新增的結(jié)構(gòu)標(biāo)簽</h1>
<p>在 HTML5 中，新增了以下與結(jié)構(gòu)相關(guān)的標(biāo)簽：</p>
</dl>
新增的其他標(biāo)簽
除了結(jié)構(gòu)標(biāo)簽外，在 HTML5 中，還新增了以下標(biāo)簽：
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>
audio標(biāo)簽
audio 標(biāo)簽定義音頻，比如音樂(lè)或其他音頻流。
HTML5 中代碼示例：
<audio src="someaudio.wav">audio標(biāo)簽</audio>
HTML4 中代碼示例：
<object type="application/ogg" data="someaudio.wav">
<param name="src" value="someaudio.wav">
</object>
canvas標(biāo)簽
canvas 標(biāo)簽表示圖形，比如圖表和其他圖像。這個(gè)標(biāo)簽本身沒(méi)有行為，僅提供一塊畫(huà)布，但它把一個(gè)繪圖 API 展現(xiàn)給客戶(hù)端JavaScript，以使腳本能夠把想繪制的東西繪制到這塊畫(huà)布上。
HTML5 中代碼示例：
<canvas id="myCanvas" width="200" height="200"></canvas>
HTML4 中代碼示例：
<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>
embed標(biāo)簽
embed 標(biāo)簽用來(lái)插入各種多媒體，格式可以是 midi、wav、aiff、au、mp3等。
HTML5 中代碼示例：
<embed src="horse.wav" />
HTML4 中代碼示例：
<object data="flash.swf" type="application/x-shockwave-flash"></object>
mark標(biāo)簽
mark 標(biāo)簽主要用來(lái)在視覺(jué)上向用戶(hù)呈現(xiàn)那些需要突出顯示或高亮顯示的文字。mark 標(biāo)簽的一個(gè)比較典型的應(yīng)用就是在搜索結(jié)果中向用戶(hù)高亮顯示搜索關(guān)鍵詞。
HTML5 中代碼示例：
<mark>...</mark>
HTML4 中代碼示例：
<span>...</span>
progress標(biāo)簽
progress 標(biāo)簽表示一個(gè)進(jìn)度條，可以使用 progress 標(biāo)簽來(lái)顯示那些執(zhí)行耗時(shí)較長(zhǎng)的操作，提升用戶(hù)體驗(yàn)。
HTML5 中代碼示例：
<progress value="22" max="100"></progress>
HTML4 中代碼示例：
這是 HTML5 中新增功能，故無(wú)法用 HTML4 代碼來(lái)實(shí)現(xiàn)，只能通過(guò) javascript 來(lái)控制。
time標(biāo)簽
time 標(biāo)簽表示日期或時(shí)間，也可以同時(shí)表示兩者。
HTML5 中代碼示例：
<time>...</time>
HTML4 中代碼示例：
<span>...</span>
ruby標(biāo)簽
ruby 標(biāo)簽表示 ruby 注釋?zhuān)ㄖ形淖⒁艋蜃址?br>
HTML5 中代碼示例：
<ruby>漢<rt><rp>(</rp>魏<rp>)</rp></rt></ruby>
HTML4 中代碼示例：
這是 HTML5 中新增的功能。
rt標(biāo)簽
rt 標(biāo)簽表示字符（中文注音或字符）的解釋或發(fā)音。
HTML5 中代碼示例：
<ruby>漢<rt>魏</rt></ruby>
HTML4 中代碼示例：
這是 HTML5 中新增的功能。
rp標(biāo)簽
rp 標(biāo)簽在 ruby 注釋中使用，以定義不支持 ruby 標(biāo)簽的瀏覽器所顯示的內(nèi)容。
HTML5 中代碼示例：
<ruby>漢<rt><rp>(</rp>魏<rp>)</rp></rt></ruby>
HTML4 中代碼示例：
這是 HTML5 中新增的功能。
wbr標(biāo)簽
wbr 標(biāo)簽表示軟換行。wbr 標(biāo)簽與 br 標(biāo)簽的區(qū)別是：br 標(biāo)簽表示此處必須換行；而 wbr 標(biāo)簽的意思是瀏覽器窗口或父級(jí)標(biāo)簽的寬度足夠?qū)挄r(shí)（沒(méi)必要換行時(shí)），不進(jìn)行換行，而當(dāng)寬度不夠時(shí)，主動(dòng)在此處進(jìn)行換行。wbr 標(biāo)簽好像對(duì)字符型的語(yǔ)言作用挺大，但是對(duì)于中文，貌似沒(méi)多大用處。
HTML5 中代碼示例：
<p>To learn AJAX, you must be fami<wbr>liar with the XMLHttp<wbr>Request Object.</p>
HTML4 中代碼示例：
這是 HTML5 中新增的功能。
command標(biāo)簽
command 標(biāo)簽表示命令按鈕，比如單選按鈕、復(fù)選框或按鈕。
HTML5 中代碼示例：
<command onclick="cut()" label="cut">
HTML4 中代碼示例：
這是 HTML5 中新增的功能。
details標(biāo)簽
details 標(biāo)簽表示用戶(hù)要求得到并且可以得到的細(xì)節(jié)信息。它可以與 summary 標(biāo)簽配合使用。summary 標(biāo)簽提供標(biāo)題或圖例。標(biāo)題是可見(jiàn)的，用戶(hù)點(diǎn)擊標(biāo)題時(shí)，會(huì)顯示出細(xì)節(jié)信息。summary 標(biāo)簽應(yīng)該是 details 標(biāo)簽的第一個(gè)子標(biāo)簽。
HTML5 中代碼示例：
<details>
<summary>HTML5</summary>
This document teaches you everything you have to learn about HTML 5.
</details>
HTML4 中代碼示例：
這是 HTML5 中新增的功能。
datalist標(biāo)簽
datalist 標(biāo)簽表示可選數(shù)據(jù)的列表，與 input 標(biāo)簽配合使用，可以制作出輸入值的下拉列表。
HTML5 中代碼示例：
<datalist></datalist>
HTML4 中代碼示例：
這是 HTML5 中新增的功能。
datagrid標(biāo)簽
datagrid 標(biāo)簽表示可選數(shù)據(jù)的列表，它以樹(shù)形列表的形式來(lái)顯示。
HTML5 中代碼示例：
<datagrid></datagrid>
HTML4 中代碼示例：
這是 HTML5 中新增的功能。
keygen標(biāo)簽
keygen 標(biāo)簽表示生成密鑰。
HTML5 中代碼示例：
<keygen>
HTML4 中代碼示例：
這是 HTML5 中新增的功能。
output標(biāo)簽
output 標(biāo)簽表示不同類(lèi)型的輸出，比如腳本的輸出。
HTML5 中代碼示例：
<output></output>
HTML4 中代碼示例：
<span></span>
source標(biāo)簽
source 標(biāo)簽為媒介標(biāo)簽（比如<video>和<audio>）定義媒介資源。
HTML5 中代碼示例：
<source>
HTML4 中代碼示例：
<param>
menu標(biāo)簽
menu 標(biāo)簽表示菜單列表。當(dāng)希望列出表單控件時(shí)使用該標(biāo)簽。
HTML5 中代碼示例：
<menu>
<li><input type="checkbox" />Red</li>
<li><input type="checkbox" />Blue</li>
</menu>
HTML4 中代碼示例：
在 HTML4 中 menu 標(biāo)簽不被推薦使用。
新增的input標(biāo)簽的類(lèi)型
HTML5 中新增了很多 input 標(biāo)簽的類(lèi)型，現(xiàn)列舉如下：
email
email 類(lèi)型表示必須輸入 E-mail 地址的文本輸入框。
HTML5 中代碼示例：
<input type="email" />
HTML4 中代碼示例：
這是 HTML5 中新增的功能。
url
url 類(lèi)型表示必須輸入U(xiǎn)RL地址的文本輸入框。
HTML5 中代碼示例：
<input type="url" />
HTML4 中代碼示例：
這是 HTML5 中新增的功能。
number
number 類(lèi)型表示必須輸入數(shù)值的文本輸入框。
HTML5 中代碼示例：
<input type="number" />
HTML4 中代碼示例：
這是 HTML5 中新增的功能。
range
range 類(lèi)型表示必須輸入一定范圍內(nèi)數(shù)字值的文本輸入框。
HTML5 中代碼示例：
<input type="range" />
HTML4 中代碼示例：
這是 HTML5 中新增的功能。
Date Pickers
HTML5 擁有多個(gè)可供選取日期和時(shí)間的新型輸入文本框：
HTML5 中代碼示例：
<input type="date" />----選取日、月、年
<input type="month" />----選取月、年
<input type="week" />----選取周和年
<input type="time" />----選取時(shí)間（小時(shí)和分鐘）
<input type="datetime" />----選取時(shí)間、日、月、年（UTC時(shí)間）
<input type="datetime-local" />----選取時(shí)間、日、月、年（本地時(shí)間）
HTML4 中代碼示例：
這是 HTML5 中新增的功能。
廢除的標(biāo)簽
由于各種原因，在 HTML5 中廢除了很多標(biāo)簽，簡(jiǎn)單介紹如下。
1、能使用CSS替代的標(biāo)簽
對(duì)于 basefont、big、center、font、s、strike、tt、u這些標(biāo)簽，由于它們的功能都是純粹為畫(huà)面展示服務(wù)的，在 HTML5 中提倡把畫(huà)面展示型功能放在 CSS 樣式表中統(tǒng)一編輯，所以將這些標(biāo)簽廢除了，并使用添加或編輯 CSS 樣式表的方式進(jìn)行替代。
2、不再使用frame框架
對(duì)于 frameset 標(biāo)簽、frame 標(biāo)簽與 noframes 標(biāo)簽，由于 frame 框架對(duì)網(wǎng)頁(yè)可用性存在負(fù)面影響，在 HTML5 中已不支持 frame 框架，只支持 iframe 框架，或者用服務(wù)器方創(chuàng)建的由多個(gè)頁(yè)面組成的復(fù)合頁(yè)面的形式，同時(shí)將以上這三個(gè)標(biāo)簽廢除。
3、只有部分瀏覽器支持的標(biāo)簽
對(duì)于 applet、bgsound、blink、marquee 等標(biāo)簽，由于只有部分瀏覽器支持這些標(biāo)簽，特別是 bgsound 標(biāo)簽以及 marquee 標(biāo)簽，只被 IE 所支持，所以在 HTML5 中被廢除。其中 applet 標(biāo)簽可由 embed 標(biāo)簽或 object 標(biāo)簽替代，bgsound 標(biāo)簽可由 audio 標(biāo)簽替代，marquee 可以由 JavaScript 編程的方式所替代。
4、其他被廢除的標(biāo)簽
廢除 rb 標(biāo)簽，使用 ruby 標(biāo)簽替代
廢除 acronym 標(biāo)簽，使用 abbr 標(biāo)簽替代
廢除dir 標(biāo)簽，使用 ul 標(biāo)簽替代
廢除 isindex 標(biāo)簽，使用 form 標(biāo)簽與 input 標(biāo)簽相結(jié)合的方式替代
廢除 listing 標(biāo)簽，使用 pre 標(biāo)簽替代
廢除 xmp 標(biāo)簽，使用 code 標(biāo)簽替代
廢除 nextid 標(biāo)簽，使用 GUIDS 替代
廢除 plaintext 標(biāo)簽，使用“text/plian”MIME類(lèi)型替代
全局屬性
1. contentEditable
主要功能：是否允許用戶(hù)編輯元素內(nèi)容。bool值。
例:
<p contenteditable="true">這是一段可編輯的段落。請(qǐng)?jiān)囍庉嬙撐谋尽?lt;/p>
語(yǔ)法:
<element contenteditable="value">
屬性值:
| 值 | 描述 |
|---|---|
| true | 規(guī)定可以編輯元素內(nèi)容。 |
| false | 規(guī)定無(wú)法編輯元素內(nèi)容。 |
| classname | 繼承父元素的 contenteditable 屬性。 |
2. designMode
主要功能：指定整個(gè)頁(yè)面是否允許用戶(hù)編輯元素內(nèi)容。bool值。
3. hidden
主要功能：隱藏頁(yè)面元素。bool值。
4. spellcheck
主要功能：規(guī)定是否對(duì)元素內(nèi)容進(jìn)行拼寫(xiě)檢查。
可對(duì)以下文本進(jìn)行拼寫(xiě)檢查：
類(lèi)型為 text 的 input 元素中的值（非密碼）
textarea 元素中的值
可編輯元素中的值
5. tabindex
主要功能：規(guī)定當(dāng)使用 "tab" 鍵進(jìn)行導(dǎo)航時(shí)元素的順序。
以下元素支持tableindex屬性：
<a>, <area>, <button>, <input>, <object>, <select> 以及 <textarea>。
<!DOCTYPE HTML>
<html>
<body>
<a tabindex="2">xyz</a><br />
<a tabindex="1">space</a><br />
<a tabindex="3">com</a>
</body>
</html>
6.draggable
主要功能：規(guī)定元素是否可拖動(dòng)。
提示：鏈接和圖像默認(rèn)是可拖動(dòng)的。
<p draggable="true">This is a draggable paragraph.</p>
屬性值:
| 值 | 描述 |
|---|---|
| true | 規(guī)定元素是可拖動(dòng)的。 |
| false | 規(guī)定元素是不可拖動(dòng)的。 |
| auto | 使用瀏覽器的默認(rèn)特性。 |
