浅谈HTML文档模式-venoral

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高版本浏览器无论在什么模式下都能正常显示

1. 盒模型是混杂模式和标准模式的主要区别
   <=IE6将盒子的padding和border算到盒子尺寸中，这被称为IE盒模型。
   W3C标准的盒模型中，box大小就是content大小。
   这一区别将导致页面绘制时所有块级元素都出现很大差别，所以两种不同的文档模式下的页面也区别很大。
2. 影响图片元素的垂直对齐方式，就是在行框对基线的选择，IE的怪异模式会以Bottom-line为基线，标准模式下以base-line为基线。
3. 影响table元素继承字体的某些属性，在IE5的怪异模式下不会继元素的一部分属性，尤其是font-size属性。
4. IE5怪异模式中内联元素可以定义尺寸
5. IE标准模式下，overflow取值为visible即溢出可见，在怪异模式下该溢出会被当作扩展box来对待，元素的大小由其内容决定，溢出不会被裁剪，而是父元素会自动调整自己的宽高以完全适应包含内容。

影响javascript的情况

跨浏览器确定一个窗口大小不是一件简单事，注意以下介绍的属性获取后的值都是整数而且没单位，即使是小数浏览器计算时也会四舍五入。
IE9+，FF，Safari，Opera，Chrome均为此提供四个属性：innerWidth，innerHeight，outerWidth，outerHeight。

1. IE9+，Safari，FF：outerWidth，outerHeight返回浏览器窗口本身尺寸（无论是从最外层的window对象还是从某个框架访问）。innerWidth和innerHeight返回各自视图区高度（减去边框宽度）。
2. Opera：outerWidth，outerHeight表示页面视图容器的大小。innerWidth和innerHeight表示页面表示该容器中页面视图区大小（减去边框宽度）。
3. Chrome：JavaScript高程上说outerWidth和outerHeight与innerWidth和innerHeight返回相同的值，即视口大小而非浏览器窗口大小。（？？经测试并没有，表现的和其他浏览器一致都是浏览器窗口尺寸和视口区尺寸）　　　　　　　　　　　　　　　　
   　

虽然<=IE8没有取得浏览器窗口尺寸的属性，但是可通过DOM提供页面可见区域的相关信息：虽然最终无法确定浏览器窗口本身大小但却可以取得页面视口大小。
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;
  //<=IE8不支持上面两种属性
  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详解