是浏览器切换渲染模式的唯一开关，必须位于文档最开头；缺失或错误将触发怪异模式，导致盒模型、尺寸计算等行为与标准模式完全不同。
没加 ，或者写错位置、大小写、拼写，浏览器大概率会进怪异模式（Quirks Mode），CSS盒模型、<code>document.body.clientWidth、getComputedStyle 行为全都不一样——这不是兼容性问题，是渲染引擎直接切换了整套解析逻辑。
为什么浏览器要靠 DOCTYPE 切换渲染模式
早期浏览器（IE6/7）为了兼容老页面，设计了两套 HTML 解析器：标准模式（Standards Mode）按 W3C 规范走；怪异模式（Quirks Mode）模拟 IE5 的非标行为。DOCTYPE 是唯一被所有浏览器识别的“开关信号”。它不参与 DOM 构建，也不影响 JS 执行，但决定从第一行 HTML 开始怎么解析标签、怎么计算宽度、怎么处理 vertical-align。
关键点：
必须是文档最开头，前面不能有任何字符（包括空格、BOM、注释）- 大小写不敏感，但建议全小写——某些旧构建工具或模板引擎会意外注入大写
HTML，导致部分 XML 解析器报错 - HTML5 不再需要 DTD 路径，
PUBLIC或SYSTEM声明属于 HTML4/XHTML 时代，现代项目里写它们反而容易因路径失效引发验证失败
常见 DOCTYPE 错误写法及对应后果
这些写法看似接近，实际效果差异极大：
立即学习“前端免费学习笔记（深入）”；
<!-- 注释 --> → 怪异模式（注释在 DOCTYPE 前）→ 标准模式（合法，小写 OK）→ 标准模式（HTML4 过渡型，但已过时）→ 标准模式（HTML5 允许，但无必要）- 漏掉
或写成 <code><doctype html></doctype>（缺感叹号）→ 怪异模式
验证方式很简单：打开 DevTools → Console 输入 document.compatMode，返回 "CSS1Compat" 是标准模式，"BackCompat" 就是怪异模式。
服务端模板、构建工具里容易踩的坑
很多问题不是手写 HTML 出错，而是生成流程引入干扰：
- PHP 模板中
<?php echo $header; ?> → 如果 <code>$header输出了空格或 BOM，就破坏了前置要求 - Webpack/Vite 的 HTML 插件默认注入
<script></script>标签到，但不会动 DOCTYPE —— 只要你自己写的 DOCTYPE 在顶部，就安全 - 某些 CMS（如 WordPress 主题）用
get_header()加载头部，如果 header.php 里 DOCTYPE 写在 PHP 代码块之后，而代码块输出了空白，同样触发怪异模式 - UTF-8 with BOM 编码的 .html 文件，BOM 字节（
EF BB BF）会出现在/code> 前，肉眼不可见但浏览器认得
只用 就够了，别画蛇添足
HTML5 规范明确只要求这个字符串。任何额外内容都是冗余甚至危险的：
- 加
PUBLIC+ DTD URL：现代浏览器忽略 URL，但旧版 IE 可能尝试加载并超时阻塞解析 - 写
（空字符串）：部分解析器视为无效声明，降级为怪异模式 - 在 XHTML 场景下误用
：XHTML 需要 <code>，但如今纯 XHTML 已基本淘汰
真正需要关注的，从来不是 DOCTYPE 本身多复杂，而是它前面有没有“看不见的东西”。检查方式永远就一条：document.compatMode，别信编辑器高亮，也别靠肉眼扫。
