<head>和<body>必须是<html>的直接子元素，否则浏览器会静默修正结构，导致DOM异常、脚本报错、hydration失败、viewport失效及SEO问题。
head 和 body 必须是 html 的直接子元素，不能嵌套在彼此内部
浏览器不会报错，但 <head><body>...</body></head> 这类写法会让 <body> 被移出 <head> 并提升到 <html> 下层，实际 DOM 变成 <html><head></head><body></body></html>。后果包括：
-
<head>里写的<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 自身标签
<body><body>xxx</body></body> 是非法嵌套。浏览器会静默丢弃内层 <body> 的开标签，把内容移到外层 <body> 中，再补一个空的 </body>。常见现象：
- CSS 中
body > body选择器永远不匹配 - JS 执行
document.querySelectorAll('body')得到 2 个节点，但第二个是浏览器自动补的空节点 - 页面底部突然多出一段空白，往往就是这个静默补全的空
</body>导致布局错位
head 里禁止放 visible 内容，但浏览器不会阻止你写
W3C 明确规定 <head> 只能包含元信息（<meta>、<title>、<link>、<script> 等），不能放 <div>、<p>、<img> 等渲染内容。虽然浏览器不会报错，但：
- 这些元素会被自动移到
<body>开头，破坏你预期的 DOM 顺序 - 如果用了 CSS 重置（如
* { margin: 0 }），<p>移到<body>后可能因缺少父容器约束而撑满全宽，视觉上“跳”到顶部 - SEO 工具可能将
<head>中误写的文本识别为无效元数据，影响关键词提取
DOCTYPE 和 html 标签的位置不可交换或嵌套
<!DOCTYPE html> 必须是文档第一行，且 <html> 必须紧跟其后，二者都不能被任何标签包裹。写成 <div><!DOCTYPE html></div> 或 <html><html>...</html></html> 会导致：
立即学习“前端免费学习笔记（深入）”；
- 浏览器降级为怪异模式（Quirks Mode），
box-sizing、flex行为回归旧标准，CSS 布局大面积失效 - DevTools Elements 面板中看不到
<html>根节点，所有节点挂载在隐式<body>下，document.documentElement返回null - 部分 polyfill（如
webcomponents.js）依赖标准<html>结构，初始化失败
实际 DOM 结构是否合规，不能靠肉眼检查。打开 Chrome DevTools → Elements 面板，右键 <html> → “Reveal in Elements panel”，确认 <head> 和 <body> 是否并列出现在第一层子节点里——这是唯一可靠的验证方式。
