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

最新推荐文章于 2023-01-16 14:40:14 发布

乙只

最新推荐文章于 2023-01-16 14:40:14 发布

阅读量284

点赞数

分类专栏： HTML 文章标签：严格模式混杂模式 !doctype

本文链接：https://blog.csdn.net/qq_40664253/article/details/97304938

版权

HTML 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

!Doctype的作用：
<!DOCTYPE>声明叫做文档类型DTD，位于HTML文档中的第一行，处于 <html> 标签之前，不属于HTML文档标签。声明的作用是为了告诉浏览器该文件的类型，告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
HTML5为什么只需写<!DOCTYPE HTML>：
因为html5不基于SGML，因此不需要对DTD进行引用，但需要doctype来规范浏览器的行为。
严格模式和混杂模式的区别：
1、定义
严格模式：又称标准模式，是指浏览器按照W3C标准解析代码,按照规范呈现页面。
混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码，页面以一种比较宽松的向后兼容的方式显示。

判断是标准还是怪异：方法如下，执行代码 alert(window.top.document.compatMode) ;
//BackCompat 表示怪异模式
//CSS1Compat 表示标准模式

2、区分：
浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法

如果XHTML、HTML 4.01文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。
包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）
DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。（DTD不存在或者格式不正确——混杂模式）
HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）
意义：严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。
3、严格模式与混杂模式的语句解析不同点
1）盒模型的高宽包含内边距padding和边框border
混杂模式下盒子模型的高宽包括padding和border，而W3C标准中设置一个元素的高宽指的是content的高宽；
2）可以设置行内元素的高宽
混杂模式下可以设置行内元素的高度，而标准模式下不生效。
3）可设置百分比的高度
标准模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度无效。
4）用margin:0 auto设置水平居中在IE下会失效
标准模式下使用margin:0 auto;可以使元素水平居中，但是在混杂模式下会失效,混杂模式下的解决办法，用text-align属性
5）混杂模式下设置图片的padding会失效
6）混杂模式下Table中的字体属性不能继承祖先元素的设置
7）混杂模式下white-space:pre会失效
8)当一个块元素div或一个单元格中包含的内容只有图片时，在标准模式下，图片底部都会有3px的空白；但在混杂模式下，浏览器中div距图片底部默认没有空白。
（标准模式下的底部3px空白，与img vertial-align的默认值baseline有关，去除设置vertial-align为一个不是baseline的合法值即可。）
9）overflow溢出默认值问题。标准模式下，溢出元素是溢出可见的，超出部分的内容呈现在包含它的元素之外；但在混杂模式下，溢出元素会自适应内容的尺寸。
4、如何触发
根据是否存在！DOCTYPE判断，根据！DOCTYPE的类型也可判断。
参考此处