HTML5的严格模式和混杂模式与!DOCTYPE的关系

1.前言：
在讲HTML5的严格模式与混杂模式之前，我们需要谈谈HTML文件第一行必有的<!DOCTYPE>

2.在HTML文件的第一行，我们都会注意到有一行<!DOCTYPE>，这是什么意思呢？

其实<!DOCTYPE>是专门用来说明文档类型的，便于浏览器按指定的规则渲染页面。

3.那这跟标题中的严格模式与混杂模式有什么关系呢？

其实，使用了<!DOCTYPE>就表明HTML文档采用了标准模式：CSS1Compat。
而不使用<!DOCTYPE>采用的则是怪异模式：BackCompat。

4.让我们用例子来说明：

使用<!DOCTYPE>：

控制台使用document.compatMode查看文档的解析类型，输出的是CSS1Compat：

不使用<!DOCTYPE>:

document.compatMode输出的是BackCompat：

5.那标准模式与怪异模式有什么区别呢？

标准模式下，浏览器会使用W3C的标准解析渲染页面。
怪异模式下，浏览器使用的是自己的解析渲染引擎来解析渲染页面。这就会导致不同浏览器显示的效果大相径庭。