先记住这个答案
<!doctype html> 告诉浏览器用标准模式解析现代页面的布局行为，不写它可能进入怪异模式，盒模型等规则就会按兼容旧网页的方式计算。它本身不声明字符编码，也不是启用某批新标签的开关。排查“同一段 CSS 在旧页宽度不对”时，可先看页面开头和 document.compatMode。
<!doctype html>触发标准模式- 缺失声明可能进入怪异模式
- 它不声明字符编码
document.compatMode可检查模式
旧活动页为何进入怪异模式
接手一张旧活动页，CSS 写着 width: 300px; padding: 20px，在不同页面里盒子宽度似乎不一致。先看文档第一行和浏览器模式：如果进入怪异模式，盒模型等布局行为可能按历史兼容规则处理。把 <!doctype html> 放到文档开头后，再依据标准盒模型修复样式。不要把怪异模式当成某个单独属性失效，它影响的是整页的渲染前提。
<!doctype html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>示例</title></head>
<body><main>标准模式页面</main></body>
</html>
<!-- 声明放在文档开头 -->浏览器解析 HTML 时会根据文档类型声明选择兼容模式，常见有标准模式与怪异模式，历史声明还可能触发有限怪异模式。
示例把声明放在文件最开头，浏览器因此按标准模式处理后面的 HTML。这里的大小写不决定是否进入“HTML5 模式”；真正重要的是使用简洁、有效的现代 DOCTYPE。页面源码里若在它前面插入了不合适的内容，或引用了老式、会触发怪异模式的声明，就应通过浏览器实际的 document.compatMode 核实结果，而不是猜 CSS 哪一条坏了。
DOCTYPE 选择文档兼容模式
模式主要改变某些 CSS 布局兼容行为，不代表 HTML 解析器彻底换了一个。脚本可读取 document.compatMode：标准模式返回 CSS1Compat，怪异模式返回 BackCompat。声明应出现在文档开头，项目模板统一生成比每张页面手写更不容易遗漏。
怪异模式最容易在旧页面的盒模型和表格布局里暴露：同样的宽度声明，实际占用空间可能和标准模式下不一样。复制老活动页到新项目时，如果只拷贝 <body> 而漏掉文档开头声明，CSS 看上去没有变化却出现错位。先看 document.compatMode 是否为 CSS1Compat，再查覆盖样式，能避免在错误的兼容模式上不断打补丁。
容易答错的地方
- 把 DOCTYPE 当成字符编码声明
- 字符编码由响应头或
<meta charset>等决定；DOCTYPE 主要影响文档模式。 - 以为缺失只影响旧浏览器
- 现代浏览器仍保留怪异模式来兼容旧网页，新页面也应写标准声明。
面试官还会怎么问？
怎么在控制台确认当前模式？
读取 document.compatMode，CSS1Compat 表示标准模式，BackCompat 表示怪异模式。
写了 DOCTYPE 就一定没有布局差异吗？
不是。字体、视口、CSS 支持等仍可能造成差异；DOCTYPE 只排除兼容模式这一类原因。
大小写必须完全一致吗？
HTML 文档类型关键字不区分 ASCII 大小写，惯用简洁写法是 <!doctype html>。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。