Doctype的作用? 严格模式和混杂模式的区 分，以及如何触发这2种模式?

Doctype 的作用

1.< ！ DOCTYPE> 声明叫做文档类型 DTD ，它的作用就是用来标识浏览器使用哪种文档类型，让

浏览器知道以何种方式解析文档。

2. 必须位于 HTML 文档的第一行，处于标签之前，但是不属于 HTML 文档标签。

3. 声明文档的解析类型（

document.compatMode ），是为了避免浏览器的怪异模式。

严格模式和混杂模式的区别，以及如何触发两种模式

1. 严格模式： 浏览器按照 W3C 的标准解析代码，又称为标准模式。

2. 混杂模式： 浏览器按照自己的方式来解析代码，以一种向后兼容的方式呈现。

3.Doctype 可声明的三种 DTD 类型： 严格版本，过渡版本，基于框架的 HTML 版本。

4. 区别： 浏览器使用严格模式和混杂模式，与文档中的 DTD 直接相关

（

1 ）如果用文档中包含严格的 DOCTYPE ，则以严格模式呈现（严格 DTD-- 严格模式）

（

2 ）包含过渡 DTD 和 URL 的 DOCTYPE ，以严格模式呈现；包含过渡的 DTD 而没有 URL ，以

混杂模式呈现；（过渡 DTD+URL-- 严格，过渡 DTD （无 URL ） -- 混杂模式））

（

3 ） HTML5 中没有 DTD ，没有严格和混杂模式的区分， HTML5 中有相对宽松的语法，尽

可能实现向后兼容

（

4 ） DOCTYPE 不存在或者格式不正确，以混杂模式呈现（

DTD 不存在或格式不正确 -- 混

杂模式）

5. 严格模式和混杂模式解析语句的不同点

（

1 ）可以设置行内元素的宽高，在严格模式下给内联元素设置宽高都不起作用，在混杂

模式下生效

（

2 ）可设置百分比高度在严格模式下，如果没有给父元素设置高度，而子元素的高度以

百分比呈现，这时是不生效的

（

3 ）盒模型的宽高包含 padding 和 border 在 W3C 的标准下，给一个元素设置宽高，则呈现

的是内容的宽高。在 IE5.5 以下及其他浏览器的混杂模式下，盒子的宽度还包括 padding 和

border 。

（

4 ）使用 margin ： 0 auto 在 IE 下会失效使用 margin ： 0 auto 在严格模式下会水平居中，而

在混杂模式下会失效，但可以设置 text-align ： center 来水平居中。

（

5 ）混杂模式下的图片 padding 会失效， Table 中的字体属性将无法继承父元素的设置，

white-space ： pre 会失效。

（

1 ）如果用文档中包含严格的 DOCTYPE ，则以严格模式呈现（严格 DTD-- 严格模式）

（

2 ）包含过渡 DTD 和 URL 的 DOCTYPE ，以严格模式呈现；包含过渡的 DTD 而没有 URL ，以

混杂模式呈现；（过渡 DTD+URL-- 严格，过渡 DTD （无 URL ） -- 混杂模式））

（

3 ） HTML5 中没有 DTD ，没有严格和混杂模式的区分， HTML5 中有相对宽松的语法，尽

可能实现向后兼容 （

4 ） DOCTYPE 不存在或者格式不正确，以混杂模式呈现（

DTD 不存在或格式不正确 -- 混

杂模式）