doctype不是html标签，而是浏览器解析前必须读取的指令，必须严格位于第一行且为，否则触发怪异模式，导致盒模型错乱、rem失效、document.scrollingelement异常等。
DOCTYPE 不是 HTML 标签，它是浏览器解析文档前必须读取的指令——没它，document.documentElement 可能还是 ，但整个页面会进怪异模式，rem、:root、盒模型、甚至 document.scrollingElement 都可能失效。
为什么 DOCTYPE 必须写在第一行且不能少
浏览器一打开 HTML 文件，就靠首行是否为 来决定用标准模式还是怪异模式。一旦错过第一行（比如前面有空格、注释或 BOM），或者写成 <code>（小写没问题）但漏了空格、多了属性，都可能触发怪异模式。
- 怪异模式下：
document.body会被当成滚动根，document.scrollingElement指向body而非html -
box-sizing: border-box在某些旧布局中不生效 -
rem计算仍基于html元素，但字体继承链可能错乱，lang属性不触发屏幕阅读器正确语种切换 - 开发者工具里“Document Mode”显示为 Quirks Mode 或 “IE5 Quirks”，不是 “Standards”
你写 <div id="app"></div> 开头，浏览器也会自动补全为 <div id="app"></div>。所以 document.documentElement 永远是那个 ，不是你手写的任何容器。
-
:root就是的别名，写html { font-size: 16px; }和:root { font-size: 16px; }效果一致，但后者语义更准、优先级略稳 - 想设全局字号影响
rem？只能改的font-size，改没用 -
lang属性必须出现在中才有效；写在里，屏幕阅读器和搜索引擎基本忽略 - Shadow DOM 或 iframe 里也逃不开主文档的
约束——它的:root变量、滚动行为、字体起点，全都继承自外层
DOCTYPE 声明写法与常见错误
HTML5 只需要且只认一种写法：。大小写不敏感，但前后不能有空格或字符，不能加引号、不能带 DTD 路径、不能写成 <code> 或 <code>。
- 错误示例：
<!-- 注释 -->（注释在前 → 怪异模式） - 错误示例：
（HTML4 写法，现代浏览器虽兼容但多余） - 错误示例：
（小写可接受，但若编辑器保存带 BOM，可能隐式破坏首行位置） - 验证方法：打开 DevTools → Console 输入
document.compatMode，返回"CSS1Compat"才是标准模式；"BackCompat"就是怪异模式
真正容易被忽略的是：哪怕你用构建工具生成 HTML，也要确认输出文件的第一行确实是纯 ——Webpack、Vite 或 SSR 模板稍不注意，就可能在开头注入空格、BOM 或注释。这不是语法错误，但会让整页的 CSS 行为和滚动逻辑悄悄偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
