javascript
JS魔法堂：doctype我们应该了解的基础知识
一、前言
什么是doctype？其實我們一直使用，卻很少停下來看清楚它到底是什么，對網(wǎng)頁有什么作用。本篇將和大家一起探討那個默默無聞的doctype吧！
?
二、什么是doctype
doctype或DTD就是聲明在文檔首行，位于<html>前，用于告知瀏覽器該文檔遵循那種級別的HTML或XHTML規(guī)范。
其聲明格式如下：
<!DOCTYPE①?html②?PUBLIC③?"公共標識符"④?"系統(tǒng)標識符"⑤?[<!ELEMENT name (#PCDATA)>]⑥>
? ①. dotype固定的起始部分
②. 聲明文檔以html標簽為根標簽
③. PUBLIC用于表示第四部分是公共標識符
④. 公共標識符
⑤. 系統(tǒng)標識符
⑥. 內(nèi)部子集，html不常見，一般出現(xiàn)在XML中
?
三、doctype的種類
? doctype有三種類型（Strict、Transitional和Frameset）。Strict是最為嚴格的類型，要求文檔內(nèi)容做到樣式與數(shù)據(jù)完全分離，html標簽中不允許使用任何表現(xiàn)層屬性（如width等）；Transitional為非常寬松的DTD，允許你繼續(xù)使用HTML4.01的標簽，并且數(shù)據(jù)和樣式無需完全分離；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還有一個十分重要的用途，那就是觸發(fā)文檔模式的切換了。W3C規(guī)定在沒有有效的doctype時，瀏覽器將以怪異模式解析、渲染文檔，否則就采用標準模式處理文檔。當然具體情況并沒有那么簡單，具體可以請看《JS魔法堂：瀏覽器模式和文檔模式怎樣玩？》
? ? ?那么不同的DTD會使瀏覽器切換到哪種狀態(tài)，請參考下圖：
??注意：由于在現(xiàn)實使用過程中，發(fā)現(xiàn)doctype最大的作用就是用于文檔模式的切換，于是HTML5規(guī)范將doctype的聲明格式簡化為<!DOCTYPE html>，因此以后我們直接寫這個簡化版就好了。（“理論指導(dǎo)實踐，實踐驗證真理”被再一次驗證了）
?
五、DocumentType類型 ??
? IE9+、FF、Chrome和Safari均支持DocumentType類型，因此我們可以通過document.doctype獲取DocumentType類型的DTD對象。若文檔沒有聲明DTD，則返回null。
? 5.1. 獲取方式
? ? 除了通過document.doctype獲取外，還可以通過document.childNodes[0]來獲取。
??5.2. 特點
? ? 不能動態(tài)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：獲取系統(tǒng)標識
internalSubset：獲取內(nèi)部子集
?
??5.5. IE5678下的DTD節(jié)點的解析
由于IE5678沒有DocumentType類型，因此document.doctype恒返回null。而通過document.childNodes[0]返回的是以注釋類型來解析DTD。
?
六、總結(jié) ?
? 看了這么多，其實只需在以后開發(fā)的時候記得在文檔首行加上<!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
尊重原創(chuàng)，轉(zhuǎn)載請注明來自：http://www.cnblogs.com/fsjohnhuang/p/3821463.html?^_^肥仔John
如果您覺得本文的內(nèi)容有趣就掃一下吧！捐贈互勉！
本文轉(zhuǎn)自^_^肥仔John博客園博客，原文鏈接：http://www.cnblogs.com/fsjohnhuang/p/3821463.html，如需轉(zhuǎn)載請自行聯(lián)系原作者
總結(jié)
以上是生活随笔為你收集整理的JS魔法堂：doctype我们应该了解的基础知识的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python之文件目录和路径
- 下一篇： javascript 对象方法、类方法、