doctype必须是文档第一个非空白字符，否则触发quirks模式；常见错误包括前置空格、bom、注释或构建注入，验证需检查document.compatmode是否为"css1compat"。
没有 ，<a style="color:#f60; text-decoration:underline;" title="浏览器" href="https://m.php.cn/zt/16180.html" target="_blank">浏览器</a>大概率进 Quirks 模式；加了但写错位置或格式，照样失效。这不是“有没有”的问题，而是“有没有被正确识别”的问题。
DOCTYPE 必须是文档第一个非空白字符
浏览器在词法分析阶段， 是第一个 Token。只要它前面出现任意内容（哪怕一个空格、换行、BOM 字节、HTML 注释 <code><!-- -->），解析器就直接降级为 Quirks 模式。
- 常见错误：模板引擎注入的注释（如
<!-- built by webpack -->）顶在最前 - 常见错误：UTF-8 BOM（
EF BB BF）偷偷塞在文件开头，肉眼不可见但破坏 DOCTYPE 有效性 - 常见错误：服务端渲染时拼接字符串，误在 DOCTYPE 前插入空行或调试日志
- 验证方式：用
document.doctype检查是否为null；更可靠的是看document.compatMode——"BackCompat"就是 Quirks，"CSS1Compat"才是 Standards
DOCTYPE 大小写与空格敏感，但仅限 HTML5 声明
是唯一被现代浏览器无条件识别为 Standards 模式的声明。其他写法风险极高：
（小写 doctype）—— 多数浏览器仍接受，但规范不保证，不推荐（全大写）—— 合法，但部分旧工具链可能误处理或带 SYSTEM 引用的旧式 DTD —— 可能触发 Almost Standards Mode，表格图片对齐行为异常或拼错成 <code>—— 直接失效，Quirks 模式
Quirks 模式下 CSS 行为退化是布局崩坏的根源
不是“样式没生效”，而是底层计算逻辑变了。最典型的是盒模型和 margin: auto：
-
box-sizing默认退化为border-box的反向逻辑：width: 200px在 Quirks 下 = 内容 + padding + border 总宽；Standards 下 = 仅内容区宽度 -
margin: auto在块级元素上无法水平居中（因为 Quirks 下不触发块级格式化上下文的居中规则） - 百分比高度（
height: 50%）在父容器未设明确高度时，Quirks 下常计算为 0 - 表格内联元素（如
<img>）默认垂直对齐方式不同，容易导致文字基线错位
构建/部署环节最容易漏掉的验证点
本地开发看着正常，上线后出问题，往往是因为构建产物悄悄破坏了 DOCTYPE 结构：
- Webpack/Vite 插件自动注入
<script></script>或<link>标签到开头，却没检查是否压到了 DOCTYPE 前面 - CDN 或代理层开启 HTML 压缩时，错误地把 DOCTYPE 和第一个
标签之间的换行删掉，导致某些老旧解析器误判 - 后端模板（如 Django、Thymeleaf）使用
{% extends %}或<include></include>时，父模板没写 DOCTYPE，子模板写了也没用 - 建议在 CI 流程里加一行检查：
head -n 1 index.html | grep -q "" || exit 1
Quirks 模式不是“兼容性开关”，它是整条解析管线的底层重定向——从 Tokenizer 阶段就开始走另一套规则。修复它不靠 hack CSS，而要确保 在字节流最前端稳稳落位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
