是浏览器渲染引擎的“启动开关”，必须位于文档最开头且无前置内容，否则触发怪异模式；它不是语法糖，而是强制启用html5标准解析规则（盒模型、flex、sticky等）的唯一指令，与lang属性无关，且因html5不基于sgml而无需dtd。
为什么浏览器一看到 就切换成标准模式
这不是语法糖，而是浏览器渲染引擎的“启动开关”。当解析器读到 （注意：必须是这串字符，且无前置内容），它立即丢弃所有旧式兼容逻辑，启用 HTML5 的解析规则集——包括盒模型计算、浮动清除、<code>width: 100% 的基准、CSS 伪类行为等。旧版 IE（如 IE6–8）甚至会因缺失或错写这个声明直接降级到怪异模式，导致 margin 叠加异常、height 计算失效。现代浏览器虽宽容些，但标准模式仍是唯一能保证跨浏览器一致性的前提。
写错的常见形式和对应后果
它看着简单，但错一个字符就可能让整个页面渲染失常：
（全小写）✅ —— 合法，HTML5 规范明确允许大小写不敏感（大写 HTML）✅ —— 能工作，但不推荐，易与旧习惯混淆（漏空格）❌ —— 触发怪异模式，IE 和部分 Edge 旧版本直接失效-
<!-- <!DOCTYPE html> -->（包在注释里）❌ —— 完全被忽略，等同于没写 （硬套 XHTML 写法）❌ —— 浏览器不认识，回退到怪异模式- 文件开头有 BOM 字符或零宽空格（U+FEFF / U+200B）❌ —— 即使肉眼看不见，也会让声明失效
它和
完全无关。一个是解析模式开关，一个是语义化语言标记。漏掉 lang 属性，语音朗读可能读错、字体 fallback 可能不准、:lang() 伪类无法生效；但页面不会崩。而漏掉或写错 ，连 <code>box-sizing: border-box 都可能被忽略，flex 布局错位，position: sticky 彻底不工作。两者都要写，但优先级完全不同：先确保 DOCTYPE 正确，再补 lang。
为什么 HTML5 不再需要 DTD 引用
因为 HTML5 不再基于 SGML。旧版 HTML4/XHTML 的 DOCTYPE 实际是告诉浏览器：“去下载并校验这个 DTD 文件”，而 DTD 是一套 XML 语法约束规则。HTML5 放弃了这种外部依赖，把规范内建进浏览器引擎。所以 本质不是“引用”，而是“指令”——它不验证标签是否合法，只说：“用最新标准模式跑”。这也解释了为什么你删掉它，<code><dialog></dialog> 或 <main></main> 这些语义标签仍能渲染，但它们的默认样式、焦点行为、可访问性支持会打折扣。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
