必须用<!DOCTYPE html>且置于文件首字节，否则浏览器触发怪异模式：document.compatMode返回BackCompat，导致盒模型、scrollTop、getBoundingClientRect()等行为退化至IE5.5标准。
没有 <!DOCTYPE html>，浏览器大概率会用怪异模式解析你的 HTML —— 这不是警告，是事实。它直接影响 <div> 的盒模型计算、getBoundingClientRect() 返回值、甚至 document.body.scrollTop 是否可用。
为什么 <!DOCTYPE html> 必须放在第一行？
它不是标签，是解析指令；浏览器一读到文档开头，就立刻决定用哪种模式渲染。一旦前面有 BOM、空格、注释或任何字符，document.compatMode 就可能返回 "BackCompat"，而不是 "CSS1Compat"。
- 常见错误：VS Code 自动生成的 UTF-8 BOM（尤其 Windows 环境下保存为“UTF-8 with BOM”）
- 验证方法：在控制台运行
document.compatMode，结果不是"CSS1Compat"就说明出问题了 - 编辑器设置建议：保存时选 “UTF-8 without BOM”，或用命令行工具如
xxd检查文件开头字节
<!DOCTYPE html> 和旧版 DOCTYPE 的关键区别
HTML5 的 <!DOCTYPE html> 不引用 DTD，不依赖外部文件，也不校验语法 —— 它唯一作用就是触发标准模式。而 HTML 4.01 或 XHTML 的 DOCTYPE 需要完整声明公共标识符和系统标识符，比如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
这类写法容易出错：URL 失效、大小写不一致、引号遗漏、空格多一个少一个，都会让浏览器退回到怪异模式。
立即学习“前端免费学习笔记（深入）”；
- HTML5 版本大小写不敏感，但惯例全小写；
<!doctype html>也合法，但不推荐 - 旧版 DOCTYPE 中的 URI 地址只是形式，现代浏览器根本不请求它，但拼写错误仍会触发怪异模式
- XHTML 的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">已无实际必要，除非你真在用 XML 解析器
怪异模式下哪些 CSS/JS 行为会悄悄变样？
这不是“样式没生效”，而是底层解析逻辑不同。很多 bug 看似随机，根源就在 DOCTYPE 缺失或错误。
-
box-sizing: border-box在怪异模式下对<table>无效，padding仍撑开宽度 -
offsetWidth计算包含border的方式与标准模式不一致（尤其 IE 兼容路径遗留） -
document.documentElement.scrollTop在怪异模式下不可靠，必须改用document.body.scrollTop（反之亦然） -
line-height在内联元素中的继承行为异常，导致文字垂直对齐错位
最麻烦的不是报错，而是它不报错 —— 页面看起来“差不多”，但在 Safari 和 Firefox 里 margin 表现不同，或某天 Chrome 升级后布局突然塌陷。这种问题往往排查半天才发现是 <!DOCTYPE html> 被模板引擎自动删掉了，或者构建脚本把首行注释当冗余清除了。
