必须全大写、无空格、无属性、位于文档最开头(无bom/注释/空格),是唯一符合html5标准且防怪异模式的写法,大小写混用或前置内容会导致验证失败或document.compatmode === "backcompat"。

HTML5 的 必须全小写、无空格、无属性
这是唯一被现代浏览器广泛支持且语义明确的文档类型声明。大小写混用(比如 )或加空格(<code>)虽多数情况下能“凑合过”,但不符合规范,某些 XML 解析器或严格校验工具会直接报错。
常见错误现象:Validation failed: DOCTYPE expected 或 W3C 验证器提示 “Bad DOCTYPE”。
是唯一推荐写法,不区分环境(开发/生产/模板引擎)- 不要写成
(小写 doctype)——HTML 标准中 <code>DOCTYPE是关键字,必须全大写 - 不要加引号、版本号、URL 或系统标识符(如旧式
) - 它必须是文档最开头的字符,前面不能有任何内容(包括空格、BOM、注释)
在模板引擎或构建工具里插入 要防自动转义和前置输出
很多框架(如 Django、EJS、Vue SFC 的 <template></template>)默认对内容做 HTML 转义,或者允许在模板顶部写 JS 逻辑,一不小心就把 推到了第二行。
使用场景:服务端渲染、静态站点生成、IDE 模板片段自动补全。
立即学习“前端免费学习笔记(深入)”;
- Django 模板里直接写
即可,但确保它不在 <code>{% block %}内,也不被{% autoescape %}包裹 - EJS 中避免写成
—— 条件判断会导致它可能缺失或错位 - Vite / Webpack 的 HTML 插件(如
html-webpack-plugin)通常自动生成,但若配置了template,需确认该文件首行就是 - 用 VS Code 新建文件时,别依赖“HTML5 Boilerplate”扩展的 snippet,先检查它是否在第一行、是否含不可见 BOM
缺失或错误会导致怪异模式(Quirks Mode)
浏览器一旦没看到合法的 DOCTYPE,就会退回到怪异模式,此时 CSS 盒模型、getBoundingClientRect() 行为、甚至 document.body.scrollTop 都可能和标准模式不一致——不是报错,而是静默出错,极难定位。
性能影响:怪异模式下,浏览器需额外维护两套渲染逻辑,解析和重排开销略增;兼容性影响更大,尤其在老版 Safari 和 IE 兼容层中。
- 用
document.compatMode检查:返回"CSS1Compat"是标准模式,"BackCompat"就是掉进怪异模式了 - Chrome DevTools 的 Elements 面板右上角会显示 “Rendered in Quirks Mode” 提示(小字,容易忽略)
- 即使页面看起来“正常”,只要
document.compatMode === "BackCompat",就说明 DOM API 行为已不可靠
最容易被忽略的是:有些构建流程会在 HTML 文件开头注入注释、环境变量或 license 声明,哪怕只多一个换行或空格, 就失效了。检查时别只看编辑器视图,要用 <code>xxd 或二进制查看器确认首字节是 3C 21 44 4F 43 54 59 50 45(即 /code> 的 ASCII)。











