DOCTYPE不是标签而是浏览器模式开关，必须为<!DOCTYPE html>且首行无任何字符，否则触发Quirks Mode导致盒模型、line-height等渲染异常，document.compatMode为"BackCompat"即降级。
DOCTYPE 不是标签，而是浏览器的模式开关
它不参与 DOM 构建，也不被解析为元素，<!DOCTYPE html> 这行既没有开始标签也没有结束标签，纯粹是一个解析指令。浏览器在读取 HTML 时，第一件事就是检查这行——如果缺失、位置错误（比如前面有空格或注释），或者写成 <!doctype>、<!DOCTYPE HTML PUBLIC ...> 等过时形式，就可能触发 Quirks Mode。
这种模式下，IE 和旧版 Edge 会把 width 当作包含 padding 和 border 的总宽（即怪异盒模型），而现代标准是 content-box；Chrome 虽然对盒模型处理一致，但 line-height 计算、table 单元格对齐等细节仍会退化。这不是“还能用”，而是“表面能看，实际不可靠”。
HTML5 DOCTYPE 必须放在第一行，且前面不能有任何内容
哪怕一个空格、一段注释、甚至 BOM 字节，都会让某些浏览器（尤其是 IE 和旧版 Edge）降级到怪异模式。常见踩坑点包括：
- 编辑器自动插入 UTF-8 BOM（尤其 Windows 下用记事本保存时）
- 模板引擎在
<!DOCTYPE html>前渲染了空行或条件注释 - PHP 文件开头有
<?php前的空白字符 - 构建工具（如 Webpack/Vite）注入的 runtime 注释没被清理干净
验证是否生效，最直接的方法是打开开发者工具 → Elements 面板顶部查看 document.compatMode：返回 "CSS1Compat" 表示标准模式；"BackCompat" 就是怪异模式。
立即学习“前端免费学习笔记（深入）”；
不要混用旧版 DOCTYPE，HTML5 只需要一种写法
<!DOCTYPE html> 是唯一推荐且足够有效的声明。其他形式不仅冗余，还可能引入兼容风险：
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">：触发标准模式，但依赖外部 DTD 网络加载（已废弃），部分离线环境会失败 -
<!DOCTYPE html SYSTEM "about:legacy-compat">：虽合法但无实际优势，仅用于极特殊向后兼容场景 -
<!doctype html>或<!DOCTYPE HTML>：大小写不敏感，但统一小写更稳妥，避免团队风格混乱
注意：XHTML 声明如 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 已完全过时，现代项目中不应出现。
DOCTYPE 影响远不止渲染，它决定整个解析上下文
很多人只关注“页面有没有错位”，但它的作用更底层：
- CSS 解析器行为：比如
rem单位是否以根元素font-size为基准（怪异模式下部分浏览器忽略根字体设置） - JavaScript API 返回值：
getBoundingClientRect()在怪异模式下可能返回非整数坐标，影响精确布局判断 - 表单控件默认样式：
<input type="number">的微调按钮、日期选择器 UI 在不同模式下渲染逻辑不同 - 甚至影响
fetch()的 CORS 默认行为——某些老版本 WebView 在怪异模式下会忽略mode: 'cors'设置
真正容易被忽略的是：这个声明一旦出错，所有后续代码都在一个隐性偏差环境中运行。你调试 CSS 时反复改 box-sizing，却没意识到根本原因在第一行——这才是它最危险的地方。
