必须是根元素，因它是DOM树唯一合法顶层容器，浏览器解析时将其作为document.documentElement；若嵌套或缺失，将导致DOM错乱、CSS/JS失效、可访问性问题。
HTML 不是“呈现逻辑”，它是声明结构的标记语言；浏览器渲染效果靠的是 DOM 解析 + CSS 样式 + 渲染引擎，HTML 本身不执行逻辑、不计算、不响应事件。
为什么
浏览器解析 HTML 时，会从 开始构建 DOM 树，<code> 是唯一被允许作为直接子节点的元素。如果出现两个 ，或把 写在 里，Chrome/Firefox 会自动修复（比如丢弃第二个），但 DOM 结构已错乱，可能导致 document.documentElement 指向异常、CSS 选择器失效、JS 获取根节点出错。
-
必须紧接在后，中间不能有注释或空格（极少数旧版 IE 会误判） -
lang属性不是可选装饰：它影响屏幕阅读器发音、搜索引擎语义识别、部分 CSS 伪类（如:lang(zh)） - 不要用
<div id="root"> 替代 <code>—— 后者是规范强制的宿主容器，前者只是普通节点里哪些标签真会影响页面是否能正常显示多数内容不渲染，但以下几项一旦写错，页面可能白屏、乱码、跳转失败或 SEO 归零：-
<meta charset="UTF-8">缺失或写成GBK：中文变æç，表单提交后端收不到正确字符 -
<meta name="viewport" content="width=device-width">缺失：移动端页面被缩放成小字，用户必须双指放大才能阅读 -
<title></title>空或含非法字符（如未转义的）：浏览器标签页显示异常，部分爬虫拒绝收录 -
<link rel="stylesheet">路径 404：CSS 加载失败，页面裸奔（但 HTML 结构仍在）；而 JS 的<script src></script>404 不会阻塞 HTML 解析，除非加了defer或type="module"
以外的内容为什么不能写进页面主体所有用户可见内容必须放在
内。写在里的文本（比如不小心漏写）、或外的字符串，会被浏览器当作“解析错误”自动移到开头——但顺序错乱、样式丢失、JS 绑定失效。更隐蔽的问题是：- 服务端渲染（SSR）或静态生成工具（如 Hugo、Jekyll）可能直接报错退出，不生成文件
- Lighthouse 等审计工具会标记 “Document doesn’t have a
” 为严重可访问性问题 - 使用
innerHTML = 'xxx'动态插入时，若字符串含片段，浏览器会忽略其中的<style></style>和<script></script>，只保留文本节点
真正容易被忽略的点是：HTML 骨架不是“写完就能跑”，而是浏览器和开发者之间的一份契约——
、、这三者的层级、位置、必填属性，共同决定了后续所有 CSS、JS、SEO、无障碍功能能否成立。少一个charset，中文就不可读；错一个lang，视障用户就听不准；多一个游离标签，DOM 就可能被重排。骨架稳，其余才谈得上装修和交互。 -
