一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　什么是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

　　

JS魔法堂：doctype我们应该了解的基础知识的更多相关文章

  1. JS魔法堂：浏览器模式和文档模式怎么玩？

    一.前言 从IE8开始引入了文档兼容模式的概念,作为开发人员的我们可以在开发人员工具中通过“浏览器模式”和“文档模式”(IE11开始改为“浏览器模式”改成更贴切的“用户代理字符串”)品味一番,它的出现 ...

  2. JS魔法堂:不完全国际化&本地化手册 之 理論篇

    前言  最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已. ...

  3. JS魔法堂:不完全国际化&本地化手册 之 实战篇

    前言  最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已. ...

  4. JS魔法堂：判断节点位置关系

    一.前言 在polyfill querySelectorAll 和写弹出窗时都需要判断两个节点间的位置关系,通过jQuery我们可以轻松搞定,但原生JS呢?下面我将整理各种判断方法,以供日后查阅. 二 ...

  5. JS魔法堂：LINK元素深入详解

    一.前言 我们一般使用方式为 <link type="text/css" rel="stylesheet" href="text.css&quo ...

  6. JS魔法堂：IMG元素加载行为详解

    一.前言 在<JS魔法堂:jsDeferred源码剖析>中我们了解到img元素加载失败可以作为函数异步执行的优化方案,本文打算对img元素的加载行为进行更深入的探讨. 二.资源加载的相关属 ...

  7. JS魔法堂：jsDeferred源码剖析

    一.前言 最近在研究Promises/A+规范及实现,而Promise/A+规范的制定则很大程度地参考了由日本geek cho45发起的jsDeferred项目(<JavaScript框架设计& ...

  8. JS魔法堂：属性、特性，傻傻分不清楚

    一.前言 或许你和我一样都曾经被下面的代码所困扰 var el = document.getElementById('dummy'); el.hello = "test"; con ...

  9. JS魔法堂：那些困扰你的DOM集合类型

    一.前言 大家先看看下面的js,猜猜结果会怎样吧! 可选答案: ①. 获取id属性值为id的节点元素 ②. 抛namedItem is undefined的异常 var nodes = documen ...

随机推荐

  1. Requirejs加载超时问题的一个解决方法：设置waitSeconds=0

    有时Requirejs会遇到加载js超时问题 除了排查js脚本问题,网络问题以外的一个解决方法是加大Require的等待时间waitSeconds,或者直接设置为0,这个参数的意义是:The numb ...

  2. 关闭/开启 ubuntu 自动更新提示

    发现vps登陆后只有apt update后才知道有多少包需要更新不是很傻么,本地的ubuntu在登录时就有很好的提示,并且还能告知系统负载情况,很有用,这里就想开起来.首先这个提示的名字叫Motd. ...

  3. Codeforces Round #382 (Div. 2)B. Urbanization 贪心

    B. Urbanization 题目链接 http://codeforces.com/contest/735/problem/B 题面 Local authorities have heard a l ...

  4. jQuery Mobile 移动开发中的日期插件Mobiscroll使用说明

    近期在移动方面的开发,使用jQuery Mobile ,移动方面的插件不如Web 方面的插件多,选择的更少,有一些需要自己去封装,但功力尚不足啊. 日期插件JQM也提供了内置的,但样式方面不好看,只好 ...

  5. 【python】——小程序之电话薄

    初学python,写一个小程序练习一下.主要功能就是增删改查的一些功能.主要用到的技术:字典的使用,pickle的使用,io文件操作.代码如下: import pickle #studentinfo ...

  6. HBase修改压缩格式及Snappy压缩实测分享

    一.要点 有关Snappy的相关介绍可参看Hadoop压缩-SNAPPY算法,如果想安装Snappy,可以参看Hadoop HBase 配置 安装 Snappy 终极教程. 1. HBase修改Tab ...

  7. [亿能测试_www.gdtesting.com]测试技术资料网盘共享

    [亿能测试_www.gdtesting.com]测试技术资料网盘共享: http://pan.baidu.com/share/home?uk=974090852

  8. 使用DOSBox在Win7_x64下搭建汇编环境

    1. 软件安装 1. debug.exe,masm.exe,link.exe,edit.com等汇编工具,一般32位的windows系统有自带,但64位系统下并没有,而且将32位系统下的工具拷贝到64 ...

  9. 删除Visual Studio Online 中团队项目

    最新文章:Virson's Blog 方法1:使用TFSDeleteProject删除: 1).在本地Visual Studio中登录云端TFS服务器: 2). 连接成功之后,打开VS命令工具,下图红 ...

  10. 从今天起，记录CEF使用开发心得经验

    已经使用CEF来呈现桌面程序界面大半年了,从来没有写过相关博文.发现网上的中文资料甚至英文已经无法满足我的开发需求,不少问题只得自己探索.在此先谢过网络上各位CEF使用开发博文的贡献者,没有你们我也难 ...