前言
- 什么是<!DOCTYPE>？是否需要在 HTML5 中使用？
- 什么是严格模式与混杂模式？
文档声明概念
HTML 文档通常以文档声明开始，该声明的作用是帮助浏览器确定其尝试解析和显示的 HTML 文档类型。
<!DOCTYPE html>
文档声明并非一个 HTML 标签。它是一条“信息”，告知浏览器期望的文档类型。
文档声明必须是 HTML 文档的第一行、且顶格显示，对大小写不敏感。因为任何放在 DOCTYPE 前面的东西，比如批注或 XML 声明，会令 IE9 或更早期的浏览器触发怪异模式。
HTML 版本从最开始诞生到最新的 HTML5，中间经历了很多版本，最显著的区别就是支持的 HTML 元素不同，例如：
书写文档声明原因是不同版本所支持的 HTML 元素类型是不同的，我需要告诉浏览器以哪一种文档类型方式来解析当前的这个 HTML 文件。
渲染模式
明白了文档类型声明的作用之后，接下来我们还需要看一个东西，那就是渲染模式。
浏览器渲染模式分为 3 种：
- 怪癖模式（混杂模式）[Quirks mode]
- 严格模式（标准模式） [Standars mode]
- 几乎标准模式 [Almost standards mode]
了解：
对于 HTML 文档来说，浏览器使用文档开头的 DOCTYPE 来决定用怪异模式处理或标准模式处理。
如果文档中没有 DOCTYPE 将触发文档的怪异模式。怪异模式最明显的影响是会触发怪异盒模型。
严格模式和怪异模式的部分渲染区别
-
盒模型的高宽包含内边距 padding 和边框 border
-
可以设置行内元素的高宽
在 standards 模式下，给 span 等行内元素设置 wdith 和 height 都不会生效，而在 Quirks 模式下，则会生效。 -
可设置百分比的高度
在 standards 模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。 -
用 margin:0 auto 设置水平居中在 IE 下会失效
使用 margin:0 auto 在 standards 模式下可以使元素水平居中，但在 Quirks 模式下却会失效，Quirks 模式下的解决办法，用 text-align 属性：body{text-align:center};#content{text-align:left} -
Quirks 模式下设置图片的 padding 会失效
-
Quirks 模式下 Table 中的字体属性不能继承上层的设置
-
Quirks 模式下 white-space:pre 会失效
补充：
