必须用且置于文件首字节，否则浏览器触发怪异模式：document.compatmode返回backcompat，导致盒模型、scrolltop、getboundingclientrect()等行为退化至ie5.5标准。
没有 ，浏览器大概率会用怪异模式解析你的 HTML —— 这不是警告，是事实。它直接影响 <code><div> 的盒模型计算、<code>getBoundingClientRect() 返回值、甚至 document.body.scrollTop 是否可用。
为什么 必须放在第一行？
它不是标签，是解析指令；浏览器一读到文档开头，就立刻决定用哪种模式渲染。一旦前面有 BOM、空格、注释或任何字符，document.compatMode 就可能返回 "BackCompat"，而不是 "CSS1Compat"。
- 常见错误：VS Code 自动生成的 UTF-8 BOM（尤其 Windows 环境下保存为“UTF-8 with BOM”）
- 验证方法：在控制台运行
document.compatMode，结果不是"CSS1Compat"就说明出问题了 - 编辑器设置建议：保存时选 “UTF-8 without BOM”，或用命令行工具如
xxd检查文件开头字节
和旧版 DOCTYPE 的关键区别
HTML5 的 不引用 DTD，不依赖外部文件，也不校验语法 —— 它唯一作用就是触发标准模式。而 HTML 4.01 或 XHTML 的 DOCTYPE 需要完整声明公共标识符和系统标识符，比如：
<p>这类写法容易出错：URL 失效、大小写不一致、引号遗漏、空格多一个少一个，都会让浏览器退回到怪异模式。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx"><img src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="overflowclass">html-to-pptx</a> <p class="overflowclass">将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p> </div> <a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>
- HTML5 版本大小写不敏感，但惯例全小写；
也合法，但不推荐 - 旧版 DOCTYPE 中的 URI 地址只是形式，现代浏览器根本不请求它，但拼写错误仍会触发怪异模式
- XHTML 的
已无实际必要，除非你真在用 XML 解析器
怪异模式下哪些 CSS/JS 行为会悄悄变样？
这不是“样式没生效”，而是底层解析逻辑不同。很多 bug 看似随机，根源就在 DOCTYPE 缺失或错误。
-
box-sizing: border-box在怪异模式下对<table> 无效，<code>padding仍撑开宽度 -
offsetWidth计算包含border的方式与标准模式不一致（尤其 IE 兼容路径遗留） -
document.documentElement.scrollTop在怪异模式下不可靠，必须改用document.body.scrollTop（反之亦然） -
line-height在内联元素中的继承行为异常，导致文字垂直对齐错位
最麻烦的不是报错，而是它不报错 —— 页面看起来“差不多”，但在 Safari 和 Firefox 里 margin 表现不同，或某天 Chrome 升级后布局突然塌陷。这种问题往往排查半天才发现是 被模板引擎自动删掉了，或者构建脚本把首行注释当冗余清除了。
