一、前言
什么是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了,简单了吧?