文档模式：
这个概念是通过使用文档类型 doctype 切换实现的，最终的两种渲染模式是混杂模式（quirks mode）和标准模式（standards mode）。这两种模式的差别就是工作在不同版本渲染引擎环境下，混杂模式会让ie的行为与（包含非标准特性的）ie5相同，标准模式则让ie的行为更接近标准行为。这两种模式主要影响css内容的呈现，在某些情况下也会javascript的解释执行（后面会详细说到）。之后ie又提出一种准标准模式（almost standards mode），这种模式下的浏览器特性有很多都是符合标准，但也不尽然，不标准的地方体现在处理图片间隙的时候（在表格中使用图片时问题最明显）。标准模式和准标准模式非常接近，在检测文档模式时也不会发现什么不同，这里在提到标准模式时，指的是除混杂模式之外的其他模式。
文档类型doctype定义和用法：
可以决定浏览器在哪种模式下工作。
声明必须是html文档第一行，位于 html> 标签之前。声明并不是html标签；它是指示web浏览器关于页面使用哪个html版本进行编写的指令，告知浏览器的解析器用什么文档类型规范来解析这个文档，针对每种规范浏览器同样也会选择对应的文档模式。html4.01中，声明引用dtd，因为html4.01基于sgml（标准通用标记语言，是现时常用的超文本格式的最高层次标准，是可以定义标记语言的元语言。html和xml派生于它。xml可以被认为是它的一个子集，xml的出现就是为了简化它以便用于更加通用的目的比如语义web，而html是它的一个应用）。dtd规定了标记语言的规则，让浏览器的渲染去遵守这个规则才能正确地呈现内容。
但html5不是基于sgml的因此不需要引用dtd。
文档类型doctype的语法：
顶级元素 可用性 注册//组织//类型 标签 定义//语言 url
定dtd文件的语法标签，用来申明dtd，作用就像html中链接外部css文件用到的 link> 标签一样，但类似c语言编译器内置的c语言语法），而html 指定当前文档最外层标签，顶级元素，xml里面叫root（根）标签（比如 doctype note system note.dtd> ），html是html（比如html5举例 doctype html> ）。通过document.doctype.name可获取public 说明指定的dtd文件是公共文件，相对私有文件来说的，也就是后面的url是任何人都可以访问的，也可以是system（从本地系统加载的dtd文件）。-//w3c//dtd xhtml 1.0 transitional//en 指定本html文件使用的dtd版本号，这个部只是针对html才有的。-/+指定组织是否由国际标准化组织iso注册，+表示名称已注册，-表示组织名未注册。internet工程任务组（ietf）和万维网协会（w3c）并非注册的iso组织，所以html中的注册项为-。组织指的是该!doctype声明引用的dtd文件的创建和维护的团体是w3c组织。dtd为所引用的对象类型，xhtml 1.0表示公开文本描述，后面可附带版本号。transitional表示文档类型定义是过渡型的，共三种下面介绍。en表示指定的公开文本语言为英文。document.doctype.publicid可获取。url 指定所引用dtd对象的位置 ,document.doctype.systemid可获取。一个dtd文档包含元素定义的规则，元素间关系的定义规则，元素可使用的属性，可使用的实体和符号规则。
dtd（document type definition）：
dtd标准可以理解成一种语法，这种语法规定了标签嵌套的规则，从而使html或xml的展示效果不会乱来。不同的dtd文件说明不同的标准dtd。dtd实际上是一个约束规则，规定文档中合法的都哪些元素，以及元素之间使用规则。
详解：
如果在文档开始处没有发现文档类型声明，则所有浏览器都会默认开启混杂模式，不同浏览器在这种模式下行为差异很大，如果不使用某些hack技术，跨浏览器的行为根本没有一致性可言。
(1).混杂模式：不引用任何文档类型定义，对文档的渲染影响很大。
(2).标准模式：可以使用下面任何一种文档类型来开启，使用严格型（strict）文档来触发。
//html
该dtd包含所有html元素和属性，但不包含展示性的和弃用的元素（比如font），不允许框架集（framesets）doctype html public -//w3c//dtd html 4.01//en http://www.w3.org/tr/html4/strict.dtd>doctype html>//xhtml
该dtd包含所有html元素和属性，但不包含展示性的和弃用的元素（比如font），不允许框架集（framesets）。必须以格式正确的xml来编写标记
doctype html public -//w3c//dtd xhtml 1.0 strict//en http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd>
(3).准标准模式：使用过渡型（transitional）或框架集型（frameset）文档来触发。
//html
该dtd包含所有html元素和属性，包括展示性的和弃用的元素（比如font），不允许框架集（framesets）。doctype html public -//w3c//dtd html 4.01 transitional//en http://www.w3.org/tr/html4/loose.dtd>
该dtd包含所有html元素和属性，包括展示性的和弃用的元素（比如font），但允许框架集内容。doctype html public -//w3c//dtd html 4.01 frameset//en http://www.w3.org/tr/html4/frameset.dtd>//xhtml
该dtd包含所有html元素和属性，包括展示性的和弃用的元素（比如font），不允许框架集（framesets），必须以格式正确的xml来编写标记。doctype html public -//w3c//dtd xhtml 1.0 transitional//en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
该dtd包含所有所有html元素和属性，包括展示性的和弃用的元素（比如font），允许框架集内容。doctype html public -//w3c//dtd xhtml 1.0 frameset//en http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd>
关于所有的 html5/html 4.01/xhtml 元素，以及它们会出现在什么文档类型 (dtd) 中可参考html元素和有效的dtd。
使用过渡型的dtd允许我们使用表现层的标识，元素，属性（指那些纯粹用来控制表现的tag，例如用于排版的表格，背景颜色标识等），也比较容易通过w3c代码校验。但html5强调html标识是用来表示结构，用css实现表现形式，也就是数据和表现相分离，所以尽量还是不要使用过渡型和框架型。
当浏览器开启了混杂模式的时候：
影响css的情况
主要是ie浏览器，其他chrome，ff以及ie高版本浏览器无论在什么模式下都能正常显示
盒模型是混杂模式和标准模式的主要区别
w3c标准的盒模型中，box大小就是content大小。
这一区别将导致页面绘制时所有块级元素都出现很大差别，所以两种不同的文档模式下的页面也区别很大。影响图片元素的垂直对齐方式，就是在行框对基线的选择，ie的怪异模式会以bottom-line为基线，标准模式下以base-line为基线。影响table元素继承字体的某些属性，在ie5的怪异模式下不会继元素的一部分属性，尤其是font-size属性。ie5怪异模式中内联元素可以定义尺寸ie标准模式下，overflow取值为visible即溢出可见，在怪异模式下该溢出会被当作扩展box来对待，元素的大小由其内容决定，溢出不会被裁剪，而是父元素会自动调整自己的宽高以完全适应包含内容。影响javascript的情况
跨浏览器确定一个窗口大小不是一件简单事，注意以下介绍的属性获取后的值都是整数而且没单位，即使是小数浏览器计算时也会四舍五入。
ie9+，ff，safari，opera，chrome均为此提供四个属性：innerwidth，innerheight，outerwidth，outerheight。
ie9+，safari，ff：outerwidth，outerheight返回浏览器窗口本身尺寸（无论是从最外层的window对象还是从某个框架访问）。innerwidth和innerheight返回各自视图区高度（减去边框宽度）。opera：outerwidth，outerheight表示页面视图容器的大小。innerwidth和innerheight表示页面表示该容器中页面视图区大小（减去边框宽度）。chrome：javascript高程上说outerwidth和outerheight与innerwidth和innerheight返回相同的值，即视口大小而非浏览器窗口大小。（？？经测试并没有，表现的和其他浏览器一致都是浏览器窗口尺寸和视口区尺寸）
虽然ie，ff，safari，opera，chrome中，document.documentelement.clientwidth和document.documentelement.clientheight保存页面视口信息。高版本的ie和chrome，ff浏览器在标准模式下是优先选择document.documentelement的，而document.body根据body元素内容宽高来计算的。在混杂模式下高版本ie和chrome的document.documentelement和document.body计算的值一样，但ff不正常。
（1）ff44.0.2 版本浏览器测验：标准模式表现下正常，混杂模式下document.body计算值正确，但document.documentelement计算有误。
（2）但在ie6中这些属性必须在标准模式下才有效，如果在混杂模式就必须通过document.body.clientwidth和document.body.clientheight取得相同信息。这里模拟了一下ie5文档模式，可见在混杂模式下只有document.body可用，而且获取的值还不一定正确。模拟ie7在标准模式下是优先选择document.documentelement的，但是获取的值也不一定正确。高版本的ie表现正常。
（3）标准模式下的chrome46.0.2490.80 ，要优先选择document.documentelement计算视口，而document.body.clientwidth和clientheight默认是body元素所包含内容的总宽高，这里我设置body的width为200px了。
混杂模式下的chrome，无论通过document.documentelement还是document.body中的clientwidth和clientheight属性都可取得视口大小。
//获取页面可见视口宽高，向后兼容function visualviewport(){ var visualobj={}; visualobj.pagewidth=window.innerwidth, visualobj.pageheight=window.innerheight; // if(typeof visualobj.pagewidth!=number){ if(document.compatmode==css1compat){ visualobj.pagewidth=window.documentelement.clientwidth; visualobj.pageheight=window.documentelement.clientheight; }else{ //兼容三大主流浏览器的混杂模式(因为ff在混杂模式下document.documentelement的两个属性表现不正常，所以集中用document.body) visualobj.pagewidth=window.body.clientwidth; visualobj.pageheight=window.body.clinetheight; } } return visualobj; }
参考：
《javascript高级程序设计》
html标签
怎么看网页是使用哪个html版本编写的？
doctype作用及用法详解
怪异模式（quirks mode）对 html 页面的影响
dtd详解