是浏览器切换渲染模式的唯一开关，必须位于文档最开头；缺失或错误将触发怪异模式，导致盒模型、尺寸计算等行为与标准模式完全不同。

没加 ，或者写错位置、大小写、拼写，浏览器大概率会进怪异模式（Quirks Mode），CSS盒模型、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 允许，但无必要）
• 漏掉 或写成 （缺感叹号）→ 怪异模式

验证方式很简单：打开 DevTools → Console 输入 document.compatMode，返回 "CSS1Compat" 是标准模式，"BackCompat" 就是怪异模式。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

服务端模板、构建工具里容易踩的坑

很多问题不是手写 HTML 出错，而是生成流程引入干扰：

• PHP 模板中 → 如果 $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 需要 ，但如今纯 XHTML 已基本淘汰

真正需要关注的，从来不是 DOCTYPE 本身多复杂，而是它前面有没有“看不见的东西”。检查方式永远就一条：document.compatMode，别信编辑器高亮，也别靠肉眼扫。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！