一、前言
什么是doctype？其實我們一直使用，卻很少停下來看清楚它到底是什么，對網頁有什么作用。本篇將和大家一起探討那個默默無聞的doctype吧！
二、什么是doctype
doctype或DTD就是聲明在文檔首行，位于<html>前，用于告知瀏覽器該文檔遵循那種級別的HTML或XHTML規范。
其聲明格式如下：
<!DOCTYPE① html② PUBLIC③ "公共標識符"④ "系統標識符"⑤ [<!ELEMENT name (#PCDATA)>]⑥>
①. dotype固定的起始部分
②. 聲明文檔以html標簽為根標簽
③. PUBLIC用于表示第四部分是公共標識符
④. 公共標識符
⑤. 系統標識符
⑥. 內部子集，html不常見，一般出現在XML中
三、doctype的種類
doctype有三種類型（Strict、Transitional和Frameset）。Strict是最為嚴格的類型，要求文檔內容做到樣式與數據完全分離，html標簽中不允許使用任何表現層屬性（如width等）；Transitional為非常寬松的DTD，允許你繼續使用HTML4.01的標簽，并且數據和樣式無需完全分離；Frameset表文檔會用到框架。
以XHTML為例：
Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
四、doctype的實際用途
除了上述用途外，doctype還有一個十分重要的用途，那就是觸發文檔模式的切換了。W3C規定在沒有有效的doctype時，瀏覽器將以怪異模式解析、渲染文檔，否則就采用標準模式處理文檔。當然具體情況并沒有那么簡單，具體可以請看《JS魔法堂：瀏覽器模式和文檔模式怎樣玩？》
那么不同的DTD會使瀏覽器切換到哪種狀態，請參考下圖：
注意：由于在現實使用過程中，發現doctype最大的作用就是用于文檔模式的切換，于是HTML5規范將doctype的聲明格式簡化為<!DOCTYPE html>，因此以后我們直接寫這個簡化版就好了。（“理論指導實踐，實踐驗證真理”被再一次驗證了）
五、DocumentType類型
IE9+、FF、Chrome和Safari均支持DocumentType類型，因此我們可以通過document.doctype獲取DocumentType類型的DTD對象。若文檔沒有聲明DTD，則返回null。
5.1. 獲取方式
除了通過document.doctype獲取外，還可以通過document.childNodes[0]來獲取。
5.2. 特點
不能動態CUD，僅僅能通過該API獲取DTD信息而已。
5.3. 屬性值
nodeType：10
nodeName：文檔類型的名稱（就是<!DOCTYPE 文檔類型的名稱>）
nodeValue：null
parentNode：HTMLDocument類型的元素對象（即是document）
parentElement：null
childNodes：空的NodeList
children：undefined
name：和nodeName一樣
entities：描述實體，恒返回null（IE9+有該屬性，而Chrome、FF直接刪除該屬性）
notations：描述符號，恒返回null（IE9+有該屬性，而Chrome、FF直接刪除該屬性）
5.4. DOM2、DOM3新增的屬性
publicId：獲取公共標識
systemId：獲取系統標識
internalSubset：獲取內部子集
5.5. IE5678下的DTD節點的解析
由于IE5678沒有DocumentType類型，因此document.doctype恒返回null。而通過document.childNodes[0]返回的是以注釋類型來解析DTD。
六、總結
看了這么多，其實只需在以后開發的時候記得在文檔首行加上<!DOCTYPE html>就OK了，簡單了吧？
七、參考資料，感謝你們！
正確使用DOCTYPE：http://www.cnblogs.com/shishm/archive/2012/02/29/2373080.html
Activating Browser Modes with Doctype：https://hsivonen.fi/doctype/（《前端翻譯：Activating Browser Modes with Doctype》）
全棧JavaScript之路（九）了解DocumentType類型 http://blog.csdn.net/liveinjs/article/details/36624691
尊重原創，轉載請注明來自：http://www.cnblogs.com/fsjohnhuang/p/3821463.html ^_^肥仔John
文章列表
留言列表
