面试— !Doctype的作用，严格模式和混杂模式的区别、以及如何触发两种模式

!Doctype是html5标准网页声明,全称为Document Type HyperText Mark-up Language，意思为文档种类为超文本标记性语言或超文本链接标示语言，现在是这个简洁形式，支持html5标准的主流浏览器都认识这个声明。表示网页采用html5。

!Doctype的作用

<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。
告知浏览器的解析器用什么文档标准解析这个文档。
DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

这个标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

public 这行声明了文档的根元素是 html，它在公共标识符被定义为 "-//W3C//DTD XHTML 1.0Strict//EN" 的 DTD 中进行了定义。浏览器将明白如何寻找匹配此公共标识符的 DTD。如果找不到，浏览器将使用公共标识符后面的URL 作为寻找 DTD 的位置。

作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。

document.compatMode：

BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面，也叫混杂模式/兼容模式。

CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面，即严格模式。

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,浏览器按照自己的方式解析渲染页面，在不同的浏览器就会显示不同的样式。

如果页面添加了!DOCTYPE，那么就等同于开启了标准模式，浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，页面在所有的浏览器里显示的就都是一个样子了。

严格模式和混杂模式的区别

1、如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。（严格 DTD ——严格模式）

2、包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）

3、DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。（DTD不存在或者格式不正确——混杂模式）

4、HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）

具体

1、盒模型的解析，这应该是众所周知的问题了。混杂模式下会按照IE5.5的盒模型解析。而标准模式是按标准的盒模型解析。

2、当一个块元素div或一个单元格中包含的内容只有图片时，在标准模式下，不管IE还是标准，在图片底部都有3像素的空白。
但在混杂模式下，标准浏览器（Chrome）中div距图片底部默认没有空白。
（标准模式下的底部3像素空白，与img vertial-align的默认值baseline有关，其实大多数时候我们并不希望它保留空白，去除的方法也很简单，设置vertial-align为一个不是baseline的合法值即可。）

3、在混杂模式下，表格中的字体不会继承它祖先元素（比如body，比如包含table的div）的字体样式。
4、在IE的混杂模式下，给inline元素设置高宽都有效。

5、在混杂模式下，IE和其他浏览器对百分比宽度的解析是不一样的。如果父级是行内块或者浮动或者有定位的元素，给子元素设置百分比宽度100%时，IE的混杂会以父级的100%算（父级没有设置宽度，则再往上一层找），而标准浏览器是取决于内容的宽度。

6、在混杂模式下，当我们给一个元素设百分比高度，其他浏览器（正常，inline高度无变化，inline-block和block都会按百分比），而IE是自适应到内容高度。

7、overflow溢出默认值的问题。标准模式下，溢出元素是溢出可见的，超出部分的内容呈现在它的包含元素外。在混杂模式下，IE浏览器的溢出元素会自适应内容的尺寸。

触发严格模式:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

触发混杂模式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

面试— !Doctype的作用，严格模式和混杂模式的区别、以及如何触发两种模式

猜你喜欢