从Doctype说起，浏览器模式

2017-10-22 本文已影响47人单调先生

随意打开任何一个网站的源码，基本都会看到源码的头部有如下标识：

<!DOCTYPE....dtd>

前端工程师们对此并不陌生，因为我们用编辑器编写HTML文件时一般都会在代码最顶部写上这么一句，当然更多时候编辑器会自动帮我们生成。但是，很多前端们并不是很了解这句话的意思，这也是我写这篇的原因，顺便也帮自己整理一下

DOCTYPE 是什么？为什么要使用？

说DOCTYPE之前先介绍一个概念

DTD（document type definition，文档类型定义）

DTD是用来定义XML或HTML的文件类型的一系列语法规则，可用作内部doctype声明，也可用作外部引用声明，我们所熟悉的HTML文件的代码顶部就是DTD作为外部文档声明。
而为什么要使用DTD，是因为HTML有许多版本，为了让浏览器能够正确的解析和渲染网页，我们需要在HTML文件顶部声明该文档是由哪一个版本的HTML规范来编写的。

浏览器模式有哪些？

浏览器模式有以下两种：

标准模式（standards mode）

怪异模式（quirks mode）

标准模式里，浏览器按照规范解析渲染页面；而在怪异模式里，浏览器以一种老式的或者模拟老式浏览器的方式渲染页面。两种模式的主要区别如下所示:

对CSS IE盒模型的缺陷处理，IE6前盒模型的宽高算法与CSS规范指定冲突，IE6之后标准模式下采用符合CSS规范的算法，而怪异模式下仍旧使用先前不规范的算法
某些行内元素的垂直对齐
对表格内部字体样式的处理，标准模式下字体样式会被继承进表格内部，但在怪异模式下字体样式在文档中整体声明一次，在表格内部由于不被继承所以必须再次声明
!important声明，IE6不认识!important声明，但在怪异模式中IE6/7/8都不认识!important声明

怎么触发浏览器的模式

怪异模式

1. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
2. 文档不做声明

标准模式

1. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
2. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
3. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>
4. <!DOCTYPE HTML>    //HTML5

HTML5 为什么只需要写 <!DOCTYPE HTML>？

HTML5的文档声明简化成了<!DOCTYPE HTML>，对此W3C的解释是HTML5不基于SGML，也不要饮用DTD，但为了让浏览器正确的识别和解析需要声明文档类型，所以要写<!DOCTYPE HTML>

文档声明注意点

DOCTYPE 必须写在HTML的第一行
DOCTYPE 声明不区分大小写
DOCTYPE 声明不是一个标签
HTML文件不写DOCTYPE声明也基本能运行，但写DOCTYPE 声明是遵循W3C规范的一种做法，所以请遵守规范