1. 新的文檔類(lèi)型（Doctype）
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
上面這個(gè)既麻煩又難記的XHTML文檔類(lèi)型你還在使用嗎？ 如果還是這樣的話，現(xiàn)在該切換到新的HTML5文檔類(lèi)型了。
<!DOCTYPE html>
現(xiàn)在只要這么簡(jiǎn)單的15個(gè)字符就可以了。（注意：你的doctype的申明需要出現(xiàn)在你html文件的第一行。）
2. 圖形（Figure）元素
你還在考慮用下面的代碼來(lái)標(biāo)記圖片嗎？
<mg src=”path/to/image” alt=”About image” />
<p>Image of Mars. </p>
上面的代碼它不能以簡(jiǎn)單而且富有語(yǔ)義關(guān)聯(lián)的方式與圖形的標(biāo)題關(guān)聯(lián)，因?yàn)樗鼉H僅是用段落標(biāo)記以及圖片元素包裹，而 HTML5通過(guò)引進(jìn)<figure>元素，改進(jìn)了這一點(diǎn)。當(dāng)結(jié)合 <figcaption> 元素使用時(shí)，我們就可以將圖形標(biāo)題與圖形配對(duì)起來(lái)。代碼如下：
<figure>
<img src=”path/to/image” alt=”About image” />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>
3. 重新定義<small>
原來(lái)你可以利用<small>元素來(lái)創(chuàng)建與logo密切相關(guān)的副標(biāo)題。不過(guò)，現(xiàn)在HTML5修改了這個(gè)用法，<small>元素被重新定義了，或者更恰當(dāng)?shù)卣f(shuō)，它現(xiàn)在用來(lái)代表小字或其他邊注（如，網(wǎng)站底部的版權(quán)聲明）。
4. 不再需要腳本、鏈接類(lèi)型
很可能你仍然像下面的代碼一樣給你的鏈接和腳本標(biāo)簽添加類(lèi)型的屬性。
<link rel=”stylesheet” href=”path/to/stylesheet.css” type=”text/css” />
<script type=”text/javascript” src=”path/to/script.js”></script>
在HTML5中，這已經(jīng)不再需要了。 意味著說(shuō)這兩個(gè)標(biāo)簽分別代表著樣式和腳本。因此，我們可以將它們的類(lèi)型屬性都刪除掉。代碼如下：
<link rel=”stylesheet” href=”path/to/stylesheet.css” />
<script src=”path/to/script.js”></script>
5. 使用還是不使用引號(hào)
記住，HTML5與XHTML不同，如果你不喜歡的話你不必用引號(hào)將屬性包裹起來(lái)。不過(guò)，要是你覺(jué)得用引號(hào)會(huì)讓你覺(jué)得更加舒服的話，當(dāng)然也不會(huì)有任何問(wèn)題。
<p class=myClass id=someId> Start the reactor.
6. 使你的內(nèi)容可編輯
HTML5其中一個(gè)非常強(qiáng)大的功能就是"contenteditable"，顧名思義它將允許用戶編輯元素（包括他的子元素）內(nèi)包含的任何文本內(nèi)容。它的用途非常廣，如，簡(jiǎn)單的任務(wù)清單或是基于wiki的站點(diǎn)也非常實(shí)用，此外，它還有一個(gè)優(yōu)勢(shì)就是利用了本地的存儲(chǔ)。
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>untitled</title>
</head>
<body>
<h2> To-Do List </h2>
<ul contenteditable=”true”>
<li> Break mechanical cab driver. </li>
<li> Drive to abandoned factory
<li> Watch video of self </li>
</ul>
</body>
</html>
或者，按照第五條技巧所說(shuō)的，你也可以將第九行的代碼寫(xiě)成這樣（不用引號(hào)）：
<ul contenteditable=true>
7. 電子郵件輸入
如果我們應(yīng)用"電子郵件"類(lèi)型來(lái)指定輸入的形式，我們可以命令瀏覽器只允許符合有效電子郵件地址結(jié)構(gòu)的字符串輸入。雖然說(shuō)內(nèi)置的表單驗(yàn)證很快就會(huì)到來(lái)，但是我們也不能完全依靠這個(gè)。比較舊的瀏覽器不理解這種"電子郵件"類(lèi)型，它們只會(huì)簡(jiǎn)單地返回到普通的文本框。
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>untitled</title>
</head>
<body>
<form action=”" method=”get”>
<label for=”email”>Email:</label>
<input id=”email” name=”email” type=”email” />
<button type=”submit”> Submit Form </button>
</form>
</body>
</html>
在說(shuō)到瀏覽器所支持和不支持的元素以及屬性時(shí)，你必需知道當(dāng)前所有瀏覽器都不是那么可靠。例如，Opera只有在你指定name屬性時(shí)才支持電子郵件驗(yàn)證。不過(guò)，它不支持占位符屬性（下面即將要講到的）。最后，雖然你可以使用這種形式的驗(yàn)證，不過(guò)不要過(guò)分依賴它。
【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過(guò)測(cè)試外，其他素材未做測(cè)試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請(qǐng)勿用于商業(yè)用途。如損害你的權(quán)益請(qǐng)聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。