前言
最近在讀HTML5秘籍(the missing manual)，書中對HTML5的定義和理解是：HTML5實際上是一組獨立標准的集合。有些標准已經得到了支持，而另外一些標准幾年內(甚至永遠)不會得到支持，即HTML5在某些瀏覽器的某些版本中能夠運行。HTML5作為新一代web的開發標准，相信有不少開發者已經垂涎它各種具有革命性的新功能，諸如：語義化的標簽和元素、新增表單控件、化繁為簡的富媒體支持、神奇的本地數據存儲技術、強大的繪圖技術(canvas)以及離線、地理定位等。本文討論的只是如何利用html5的各種明確的語義化標簽來構建我們的頁面。
關於DOCTYPE
在HTML5來臨之前，一個標准的XHTML頭部代碼應該是這樣的：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> </head> ......
這么復雜的一大推代碼相信很少人會去手寫，也沒有必要去記住。（小弟不才，在HTML5沒來到之前都是直接打開 DW，現在是用sublime text2自動生成的，O(∩_∩)O~）
而一個標准的HTML5頭部是這樣的：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> .......
哪個更簡單些就不用我來說了，笨拙的我都能輕易記住了，這HTML5呀，果然是好東西啊。但是好使的東西總是需要付出點代價的(╯﹏╰），顯然是瀏覽器的兼容性問題，主要是微軟的 IE6、IE7、IE8 ，還有可能就是一些非主流瀏覽器和一些基於IE內核的瀏覽器。綜合考慮多方面因素，我們還是選擇HTML5，因為這個能省去100多字節（對於PV是百萬級以上的站點，能省下不少的流量呢）的頭部已經可以完美兼容了。大家都可能知道，在頁面沒有定義DOCTYPE的情況下或者因為一些字符使得DOCTYPE失效的情況下，會觸發各種怪異現象諸如盒模型不正確，js捕獲數據怪異等，而只要定義了瀏覽器就可以在標准模式下解析頁面，而不需要指定某個類型的DTD了。
豐富明確的語義化標簽
語義化編碼是每個從事前端開發人員都需具備的技能，但隨着web技術的發展和各種新技術、新思想的產生，原有的XHTML那具有語義化的標簽已經有點力不從心了。而HTML5就為我們提供了一系列新的標簽和屬性，讓我們在維護和修改頁面時不需面對嵌套N層、令人煩心的div了，並且使用這些新元素能讓任何人無障礙地訪問網頁，更利於搜索引擎，下面舉個例子說明下：
<div class="article"> <div class="header"> <h1>我是文章標題</h1> <div class="tool"> <a class="javascript:;">按鈕一</a> <a class="javascript:;">按鈕二</a> </div> </div> <div class="main"> <p>我是文章正文</p> </div> <div class="guidance">我是文章導讀</div> </div>
而運用HTML5可以這樣寫：
<section class="article"> <header class="header"> <h1>我是文章標題</h1> <section class="tool"> <a class="javascript:;">按鈕一</a> <a class="javascript:;">按鈕二</a> </section> </header> <article class="main"> <p>我是文章正文</p> </article> <footer class="guidance">我是文章導讀</footer> </section>
另外語義化標簽如：aside、figure、figcaption、hgroup、nav的運用，適用場合呢，我在這里就不一一列舉了，有興趣的童鞋可以 點擊這里，上面對於html各個標簽的講解還是蠻到位的。
HTML5標簽的向前兼容
有很多人在運用 HTML5標簽搭建新頁面的時候發現一個問題， 就是這些用起來感覺很好很爽的標簽在IE8以及以下版本的瀏覽器都不生效，加了樣式也是徒勞無益的，全部整齊地屬於inline行內元素，於是乎，有人就覺得，在IE8還沒被淘汰之前，HTML5在web應用上只是一個空想(include me)。不過，事實告訴我們，成功有時候需要借助外力，呵呵，又開始文縐縐了~
想讓HTML5向前兼容我們需要一段小小的JS函數來協助：
<script type="javascript"> document.createElement("article"); document.createElement("aside"); document.createElement("footer"); document.createElement("header"); document.createElement("nav"); document.createElement("section"); document.createElement("details"); document.createElement("dialog"); document.createElement("output"); document.createElement("time"); ... </script>
上面代碼的作用就是創建一系列標簽，使IE8及以下的瀏覽器都能識別。
然后就是給這些標簽一個css來初始化，由於IE8及以下瀏覽器對這些新標簽沒有提供默認樣式，所以他們都被解析為行內元素，因此我們需要在css初始化文件里添加以下代碼來使其變成塊級元素：
article,aside,footer,header,nav,section,hgroup{ display:block;} details,dialog,output,time{ display:inline;}
這樣的話我們在實際開發中就能運用HTML5了，不過在實際項目中我們一般會將js部分的那段初始化代碼封裝到一個js文件如resetHTML5_forIE.js，然后在header部分使用IE條件注釋針對IE進行調用:
<!--[if lte IE8]> <script type="text/javascript" src="js/resetHTML5_forIE.js"></script> <![endif]-->
結語
由於小弟才剛接觸HTML5，很多東西都是一筆帶過的，好像記流水賬似的^_^，講不清、說不准的還望各位前輩指正。哎呀，又到點吃飯了......(⊙o⊙)，ps：貌似下午又沒上課，逃課成指數遞增了。