1. 新的文檔類型(Doctype)

html?PUBLIC?”-//W3C//DTD?XHTML?1.0?Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

上面這個既麻煩又難記的XHTML文檔類型你還在使用嗎？如果還是這樣的話，現在該切換到新的HTML5文檔類型了。HTML5文檔類型：

html>

現在只要這么簡單的15個字符就可以了。(注意：你的doctype的申明需要出現在你html文件的第一行。)2. 圖形(Figure)元素你還在考慮用下面的代碼來標記圖片嗎？

Image?of?Mars.?

上面的代碼它不能以簡單而且富有語義關聯的方式與圖形的標題關聯，因為它僅僅是用段落標記以及圖片元素包裹，而 HTML5通過引進

元素，改進了這一點。當結合

This?is?an?image?of?something?interesting.?

3. 重新定義原來你可以利用元素來創建與logo密切相關的副標題。不過，現在HTML5修改了這個用法，元素被重新定義了，或者更恰當地說，它現在用來代表小字或其他邊注(如，網站底部的版權聲明)。4. 不再需要腳本、鏈接類型很可能你仍然像下面的代碼一樣給你的鏈接和腳本標簽添加類型的屬性。

在HTML5中，這已經不再需要了。意味著說這兩個標簽分別代表著樣式和腳本。因此，我們可以將它們的類型屬性都刪除掉。代碼如下：

5. 使用還是不使用引號記住，HTML5與XHTML不同，如果你不喜歡的話你不必用引號將屬性包裹起來。不過，要是你覺得用引號會讓你覺得更加舒服的話，當然也不會有任何問題。

?Start?the?reactor.

6. 使你的內容可編輯HTML5其中一個非常強大的功能就是"contenteditable"，顧名思義它將允許用戶編輯元素(包括他的子元素)內包含的任何文本內容。它的用途非常廣，如，簡單的任務清單或是基于wiki的站點也非常實用，此外，它還有一個優勢就是利用了本地的存儲。

html>untitled

?To-Do?List?

?Break?mechanical?cab?driver.??Drive?to?abandoned?factory?Watch?video?of?self?或者，按照第五條技巧所說的，你也可以將第九行的代碼寫成這樣(不用引號)：

7. 電子郵件輸入如果我們應用"電子郵件"類型來指定輸入的形式，我們可以命令瀏覽器只允許符合有效電子郵件地址結構的字符串輸入。雖然說內置的表單驗證很快就會到來，但是我們也不能完全依靠這個。比較舊的瀏覽器不理解這種"電子郵件"類型，它們只會簡單地返回到普通的文本框。

html>untitledEmail:?Submit?Form?

在說到瀏覽器所支持和不支持的元素以及屬性時，你必需知道當前所有瀏覽器都不是那么可靠。例如，Opera只有在你指定name屬性時才支持電子郵件驗證。不過，它不支持占位符屬性(下面即將要講到的)。最后，雖然你可以使用這種形式的驗證，不過不要過分依賴它。8. 占位符此前，我們需要使用JavaScript來創建文本框的占位符。你可以初步設定值屬性來看是否合適，但是只要用戶刪除了該文本，輸入的內容就會再次變成空的。占位符屬性有效地彌補了這一點。

9. 本地存儲多虧了HTML5的 local storage ，我們可以讓高級瀏覽器"記住"我們輸入的內容，就算后來瀏覽器關閉或者重新刷新也不受影響。盡管不是所有的瀏覽器都支持，但是最關鍵的 Internet Explorer 8, Safari 4, Firefox 3.5.都支持。10. 語義性的Header和Footer

上面的代碼一去不復返。Divs從根本上來說并沒有任何語義結構，即使應用上了ID還是如此。而在HTML5中，我們可以使用和元素，上面的代碼就可以替換為：

……

不過注意不要將這兩個元素與網站的頭部和腳部混淆起來。它們只是代表它們的容器。

來源 |?web前端開發

審核 | 呂梁?曾琦?李明輝(總編輯)

監制 | 方正

山東傳媒職業學院信息工程系

新媒體中心