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