html文档结构由不可省略的核心标签定义：1. 必须首行全大写；2. 需指定语言；3. 内须为首项；4. 所有可见内容必须在内。
HTML文档结构不是靠视觉对齐或CSS堆砌出来的，而是由几个不可省略、不可嵌套错位的核心标签共同定义的。跳过它们直接写内容，浏览器可能勉强渲染，但SEO、可访问性、DOM操作都会出问题。
为什么 必须放在第一行
它不是HTML标签，但决定了浏览器用哪种模式解析后续所有代码。漏掉、写错位置、或者写成（小写）在某些旧环境里会触发怪异模式（Quirks Mode），导致盒模型、<code>display行为、甚至getBoundingClientRect()返回值都和标准不一致。
- 必须全大写
，且独占第一行，前面不能有任何空格或注释 - 只支持这一种写法，
..>是XHTML遗留，现代项目不用 - 没有它，
document.compatMode会返回"BackCompat"，这是个明确的危险信号
lang 属性不是可选装饰
它直接影响屏幕阅读器发音、搜索引擎语言识别、甚至某些CSS伪类（如:lang(zh)）的行为。设成lang="zh-CN"和lang="en"，连quotes属性的引号样式都会不同。
-
是中文站点的合理取值，不要写成lang="zh"或留空 - 如果页面含多语言区块，可在子元素上覆盖，比如
<blockquote lang="en"></blockquote> - JavaScript中可通过
document.documentElement.lang读取，用于动态切换文案或字体回退逻辑
<meta charset="UTF-8">必须是内第一个有实际作用的标签。它告诉浏览器用什么编码解码后续所有文本——包括后面的<title></title>和<meta name="description">。放晚了，标题里的中文可能变成乱码。
-
<meta charset="UTF-8">应紧随之后，早于<title></title>、<meta name="viewport"> -
<meta name="viewport">虽然常被忽略，但它控制移动端缩放，没它，响应式布局大概率失效 -
<title></title>必须存在，且每个页面唯一；重复或为空会影响浏览器标签页显示和SEO抓取
所有用户能看到的文字、图片、表单，都必须包裹在内。写在里，或者和之间，浏览器会自动把它们“纠正”进，但这个修复过程不可控：可能拆分节点、丢失事件绑定、甚至引发React/Vue等框架的hydration mismatch。
- 检查方法：打开DevTools，看Elements面板里是否所有内容都在
下 - 常见错误：把
<script></script>写在外，或误把<header></header>当使用 - 注意：
本身可以为空，但一旦有内容，就必须在里面
真正容易被忽略的，是和之间的隐式父子关系——它们不是并列容器，是的子元素，而又是整个DOM树的根。任何脱离这个层级的操作，表面看不出来，调试时却总在奇怪的地方卡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
