和必须是的直接子元素，否则浏览器会静默修正结构，导致dom异常、脚本报错、hydration失败、viewport失效及seo问题。
head 和 body 必须是 html 的直接子元素，不能嵌套在彼此内部
浏览器不会报错，但 ... 这类写法会让 被移出 并提升到 下层，实际 DOM 变成 。后果包括：
-
里写的<script></script>若依赖document.body，会因body尚未解析而报Cannot read property 'appendChild' of null - 某些 CMS 或 SSR 框架（如 Next.js）在 hydration 阶段比对 DOM 时，发现服务端生成的结构与客户端实际结构不一致，触发
Hydration failed -
<meta name="viewport">等关键标签若被包裹在非法位置，可能被浏览器忽略，导致移动端缩放异常
body 内不能出现 html、head、body 自身标签
xxx 是非法嵌套。浏览器会静默丢弃内层 的开标签，把内容移到外层 中，再补一个空的 。常见现象：
- CSS 中
body > body选择器永远不匹配 - JS 执行
document.querySelectorAll('body')得到 2 个节点，但第二个是浏览器自动补的空节点 - 页面底部突然多出一段空白，往往就是这个静默补全的空
导致布局错位
head 里禁止放 visible 内容，但浏览器不会阻止你写
W3C 明确规定 只能包含元信息（<meta>、<title></title>、<link>、<script></script> 等），不能放 <div>、<code><p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>、<img> 等渲染内容。虽然浏览器不会报错，但：
- 这些元素会被自动移到
开头，破坏你预期的 DOM 顺序 - 如果用了 CSS 重置（如
* { margin: 0 }），<p></p>移到后可能因缺少父容器约束而撑满全宽，视觉上“跳”到顶部 - SEO 工具可能将
中误写的文本识别为无效元数据，影响关键词提取
DOCTYPE 和 html 标签的位置不可交换或嵌套
必须是文档第一行，且 <code> 必须紧跟其后，二者都不能被任何标签包裹。写成 <div> 或 <code>... 会导致：
- 浏览器降级为怪异模式（Quirks Mode），
box-sizing、flex行为回归旧标准，CSS 布局大面积失效 - DevTools Elements 面板中看不到
根节点，所有节点挂载在隐式下，document.documentElement返回null - 部分 polyfill（如
webcomponents.js）依赖标准结构，初始化失败
实际 DOM 结构是否合规，不能靠肉眼检查。打开 Chrome DevTools → Elements 面板，右键 → “Reveal in Elements panel”，确认 和 是否并列出现在第一层子节点里——这是唯一可靠的验证方式。
