必须是<!DOCTYPE html>且独占首行，前面不能有任何字符（包括空格、注释、BOM），否则IE9及更早版本会进入怪异模式，导致布局、盒模型和API行为异常；它是HTML5的开关型声明，不依赖DTD，仅用于激活标准模式。
首行必须是 <!DOCTYPE html>，不能有空格、注释或 BOM
浏览器靠这一行判断是否启用标准模式；只要前面多一个空格、一行注释、甚至 UTF-8 BOM 字节（EF BB BF），IE9 及更早版本就会退回到怪异模式——页面布局、盒模型、getBoundingClientRect() 行为全都不一样。
常见错误现象：
-
<!-- 注释 --><!DOCTYPE html>→ 怪异模式 -
<!DOCTYPE html>（开头带 BOM）→ 部分旧版 Edge / IE 触发兼容模式 -
<!doctype html>或<!DOCTYPE HTML>→ 虽然大小写不敏感，但小写易被误删或混淆，建议统一用大写DOCTYPE
<!DOCTYPE html> 不是 HTML 标签，也不需要闭合
它本质是 SGML 的文档类型声明（DTD），不是标签，所以不能加 </>，也不能写成 <!DOCTYPE html />。写错会导致解析失败，部分工具链（如某些模板引擎或构建脚本）会直接报错或静默忽略。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 在 Vue / JSX 模板里误把它当普通节点写进
<template>—— 实际应放在整个文件最顶行，不在组件结构内 - 用 Node.js 生成 HTML 时用
fs.writeFileSync写入前没 trim() 开头空白，导致实际内容以空格开头 - 从剪贴板粘贴时带隐藏控制字符（比如 Zero Width Space
U+200B），肉眼不可见但破坏声明有效性
HTML5 的 <!DOCTYPE html> 为什么足够，不需要 DTD URL？
因为 HTML5 不基于 SGML，不再依赖外部 DTD 文件校验语法。以前 HTML4/XHTML1.0 需要完整引用，比如：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">。这类写法现在仅用于遗留系统兼容，现代项目用了反而可能触发旧式解析逻辑或网络请求阻塞渲染。
关键差异点：
- HTML5 的
<!DOCTYPE html>是“开关型”声明：只负责激活标准模式，不参与语法校验 - 任何其他字符串（如
<!DOCTYPE html5>、<!DOCTYPE>）都会被浏览器当作“未知类型”，同样触发标准模式 —— 但不符合规范，CI 工具或 Linter（如 HTMLHint）会警告 - 服务端渲染（SSR）场景下，若框架自动注入了额外头部（如 HTTP header 中的
X-UA-Compatible），它无法覆盖 DOCTYPE 的模式决定权，最终仍以首行 DOCTYPE 为准
验证 DOCTYPE 是否生效的最快方法
打开开发者工具控制台，执行：document.compatMode。返回 "CSS1Compat" 表示标准模式已启用；如果是 "BackCompat"，说明 DOCTYPE 无效或缺失。
实操建议：
- 新建 HTML 文件时，第一件事就是敲
<!DOCTYPE html>，然后立刻保存并刷新，再查document.compatMode - 用 VS Code 时安装插件 “Auto Rename Tag” 没用，但可配文件关联 + 代码片段（snippets），让新建
.html文件自动插入该行 - CI 流程中加一条 shell 检查：
head -n1 index.html | grep -q "^<!DOCTYPE html>$"，避免合并时意外删掉
真正麻烦的不是写错，而是它出错时没有任何明显报错——页面只是“看起来有点不对劲”，而你得花半天时间排查盒模型、Flex 布局塌陷或 offsetWidth 计算偏差，最后发现是开头多了个看不见的字节。
