HTML 文档的 DOCTYPE 到底有什么用？不写会怎样

<!DOCTYPE html> 的唯一作用是给浏览器一个开关信号：用标准模式渲染这个页面。不写 DOCTYPE，所有主流浏览器都会退回怪异模式（quirks mode），CSS 盒模型、百分比高度、表格字号统统按 20 年前的老规则解析，布局直接错位。HTML5 里那句短到不像话的声明，不指向任何 DTD，它存在就是为了这一件事。

DOCTYPE 是什么？为什么 HTML5 只剩 <!DOCTYPE html>

结论：DOCTYPE 是 SGML 时代遗留的「文档类型声明」，不是 HTML 标签，本身不渲染任何内容，只负责触发渲染模式。

HTML 4.01 时代要写一长串，比如 Strict 版本：

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

带 DTD URL 的 Strict 触发标准模式；Transitional 带 URL 触发「接近标准模式」（almost standards mode）；如果把 URL 删掉只留 PUBLIC 那一段，浏览器就掉进怪异模式。HTML5 规范发现没人真的去下载 DTD，于是砍成 <!DOCTYPE html>——大小写不敏感（<!doctype html> 一样生效）、没有闭合标签、前面允许空白和换行。规范里的说法很直白：保留它纯粹是为了让老浏览器别掉进怪异模式。

不写 DOCTYPE 会怎样？

结论：文档开头没有 DOCTYPE 时，Chrome、Firefox、Safari、Edge、IE 一律用怪异模式渲染，document.compatMode 返回 "BackCompat"，页面不会报错，但布局会静悄悄地跑偏。

具体会变的几件事：

1. 盒模型变了：怪异模式下 width 包含 padding 和 border（IE5 盒模型）。一个 width:200px; padding:20px; border:5px 的 div，标准模式实际占 250px，怪异模式只占 200px。
2. 百分比高度异常：标准模式下父元素 height:auto 时，子元素 height:100% 计算结果是 auto；怪异模式下会一路向上取到视口高度。
3. 表格不再继承字号：怪异模式里 table 内的 font-size 用浏览器默认值，不走继承。
4. 类名/ID 匹配变大小写不敏感：Gecko 等引擎在怪异模式下 .Foo 和 .foo 视为同一个选择器。
5. 行内图片、line-height 等细节偏移：像素级对不齐，视觉稿还原失败。

另外 W3C 校验器会直接报错，一些靠 compatMode 做特性判断的老库（比如 jQuery 1.x 的 $.support.boxModel）也会走错分支。

怎么检查当前页面跑在哪种模式？

结论：控制台敲一行 document.compatMode，返回 "CSS1Compat" 是标准模式，返回 "BackCompat" 就是怪异模式。

想加兜底可以在入口脚本里写：

if (document.compatMode === 'BackCompat') {
  console.warn('页面处于怪异模式，请检查 DOCTYPE');
}

注意 document.compatMode 区分不了「标准模式」和「接近标准模式」，两者都返回 CSS1Compat；要精确判断得直接读 DOCTYPE 字符串。

写 DOCTYPE 有哪些容易踩的坑？

结论：DOCTYPE 必须是文档最开头的内容，它前面出现注释、XML 声明或任何可见字符，都可能让浏览器退回怪异模式，旧版 IE 对此尤其敏感。

• 允许的：DOCTYPE 之前的空白字符、换行。
• 危险的：<!-- comment --> 或 <?xml version="1.0"?> 放在 DOCTYPE 之前，IE6/IE7 会因此进怪异模式。
• 别用 HTML4 Transitional 的无 URL 版本，那等于主动选择怪异模式。
• 需要兼容只认老写法的系统时，可以用 <!DOCTYPE html SYSTEM "about:legacy-compat">，同样触发标准模式，且是 HTML5 规范认可的写法。
• iframe 里、document.write 动态写入的文档都要有自己的 DOCTYPE，父页面的声明不会继承下去。

一句话总结

<!DOCTYPE html> 这十几个字符不干别的事，就是让浏览器用标准模式渲染。不写它，你写的 CSS 会按 20 年前的规则解释，盒模型、百分比高度、表格字号全部变样，而且浏览器不会给你任何提示。所以永远把它放在文件第一行，前面什么都不放。