您是否遇到過，團隊里總是有些人亂聲明doctype甚至沒有聲明它，甚至還反問你，要着干嘛？有啥鳥用，沒聲明也沒報錯呀！我只能說一個字：靠！
Doctype是啥?
<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規范。
Document Type 文檔類型，縮寫成DOCTYPE，在html中它就是個標簽：<!DOCTYPE>，它有自己的聲明格式，不是在html標簽前加上它就完事了的，查看qq.com頁面源碼可見如下聲明：
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DOCTYPE 包含 6 部分：
- 字符串“<!DOCTYPE”
- 根元素通用標識符“HTML”
- 字符串“PUBLIC”
- 被引號括起來的公共標識符（publicId）
- 被引號括起來的系統標識符（systemId）重點在這里 ，繼續往下看
- 字符串“>”
看上去蠻復雜的，不用去糾結，一般只有三種（Strict Transitional Frameset）聲明（以XHTML為例）
XHTML Strict DTD-要求嚴格的DTD，你不能使用任何表現層的標識和屬性（交給css來表現），例如<br>；能夠使html非常的干凈。
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML Transitional DTD-要求非常寬松的DTD，它允許你繼續使用HTML4.01的標識(但是要符合xhtml的寫法)
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML Frameset DTD-當您希望使用框架時，請使用此 DTD！
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
簡單舉例說說strict和transitional的不同，按照XHTML Strict DTD的規定（看DTD內容），th標簽是不能有width屬性的，但transitional可以有
在XHTML Strict DTD聲明的html中出現th標簽屬性width時，則會出現警告信息(如下圖)，改成transitional dta就不會出現警告
Doctype起啥作用?
上面也提到，Doctype告訴瀏覽器使用什么樣的html或xhtml規范來解析html文檔，上文說到的DOCTYPE組成中的第5部分所引入的dtd文件則包含了標記、attributes 、properties、約束規則。除此外，Doctype還會對瀏覽器的渲染模式產生影響，不同的渲染模式會影響到瀏覽器對於 CSS 代碼甚至 JavaScript 腳本的解析，所以Doctype是非常關鍵的，尤其是在 IE 系列瀏覽器中，由DOCTYPE 所決定的 HTML 頁面的渲染模式至關重要。
兩種渲染模式：
- BackCompat：標准兼容模式未開啟（或叫怪異模式[Quirks mode]、混雜模式）
- CSS1Compat：標准兼容模式已開啟（或叫嚴格模式[Standards mode/Strict mode]）
長話短說兩種渲染模式的由來，很久以前W3C標准沒出現的時候，江湖很混亂，頁面上根本就沒有doctype這個東西，亂世出英雄啊，w3c標准出現后頁面上就有了doctype，為了照顧老前輩的頁面（沒有doctype或使用HTML4以下[不包括HTML4]的DTD聲明），怪異模式就出現了，保證古董頁面能正常顯示；江湖統一之后，大家都開始使用w3c標准，這就是標准模式。
測試ie 8、 ff10、 chrome16的渲染模式，測試文檔如下：（只是給予直觀感受，並非全面周到的測試）
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<!--未聲明DOCTYPE-->
<script>document.write(document.compatMode);</script>
</body>
</html>
結果為：
IE 8.0：BackCompat Firefox 10.0：BackCompat Chrome 16.0：BackCompat
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<!--聲明DOCTYPE-->
<script>document.write(document.compatMode);</script>
</body>
</html>
結果為：
IE 8.0：CSS1Compat Firefox 10.0：CSS1Compat Chrome 16.0：CSS1Compat
說了半天的doctype對渲染模式的影響，有什么用呢？不同的渲染模式對CSS2.1規范的解析有很大差異，尤其是對盒模型的解釋，所以我們的目標是如何聲明doctype以使我們的頁面被以標准模式解析，這是關鍵。
Doctype的選擇！！
上面已經提到，頁面中的Doctype的聲明會影響瀏覽器的渲染模式，渲染模式又跟頁面最終的呈現效果息息相關，所以盡量選擇那些能“激活”主流瀏覽器標准模型的Doctype。
[from KB001: 兼容性問題與瀏覽器的內核及渲染模式]
表中提到了“近似標准模式”
近似標准模式（Almost Standards Mode）從字面意思上看與標准模式非常類似，但確實有小的差別。主要體現在對於表格單元格內垂直方向布局渲染差異。IE8 開始、Firefox、Chrome、Safari、Opera 7.5 開始，這些瀏覽器的標准模式更加嚴格的遵循了 CSS2.1 規范，故對於在目前看來不太“標准”的以前的標准模式，被賦予了“近似標准模式”的名字。但是在較早的 IE6 IE7 以及 Opera 7.5 之前版本中，瀏覽器無法嚴格遵循 CSS2.1 規范，故對於它們來說沒有這個近似標准模式，也可以理解為它們的近似標准模式就是標准模式。
至於如何選擇，參考表格自然明白，不用廢話了！
參考資料很重要！！
【HTML <!DOCTYPE> 標簽】http://www.w3cschool.cn/tag_doctype.html
【CS002: DOCTYPE 與瀏覽器模式分析】http://w3help.org/zh-cn/casestudies/002
【KB001: 兼容性問題與瀏覽器的內核及渲染模式】http://w3help.org/zh-cn/kb/001