html文档中必须有且只能有一个body标签，它是浏览器渲染和脚本执行的强制起点；缺则内容不显示，多则dom错乱、样式失效、document.body返回null；常见null原因是脚本置于head中未监听domcontentloaded或加defer；bgcolor等旧属性已废弃，须用css控制；多个body会导致内容被错误归入head等严重结构异常。
HTML 文档中必须有且只能有一个 body 标签，它不是可选容器，而是浏览器渲染和脚本执行的强制起点——缺了它，页面内容不显示；多了它，DOM 结构错乱、样式失效、document.body 可能返回 null。
为什么 document.body 有时是 null？
常见于脚本放在 中且未加 defer 或未监听 DOMContentLoaded。此时 HTML 解析尚未到达 ，document.body 还不存在。
- 稳妥写法：用
addEventListener('DOMContentLoaded', () => { /* 操作 body */ }) - 更简单但有局限：把
<script></script>放在之前（注意不是内部） - 不要依赖
window.onload，它等资源加载完才触发，延迟更高
body 上还能用 bgcolor、onload 这些属性吗？
不能。HTML5 已完全移除 bgcolor、text、background、alink 等呈现属性；onload 虽仍能运行，但语义和时机都不对。
- 背景色/文字色 → 改用 CSS：
body { background-color: #fff; color: #333; } - 初始化逻辑 → 改用
DOMContentLoaded或现代框架的生命周期钩子 - 动态换肤 → 操作
document.body.className或document.body.style.backgroundColor，别试图 setAttribute('bgcolor', ...)
多个 body 标签会导致什么实际问题？
浏览器不会报错，但会静默“修复”：第二个及之后的 被忽略或被合并进第一个，内容可能意外塞进 ，造成不可见却仍存在于 DOM 的诡异状态。
- CSS 选择器如
body > .header失效，因为目标元素实际在head下 -
document.querySelector('body').children返回的内容与 DOM 查看器看到的不一致 - SEO 工具可能抓取不到主体内容，因结构不符合规范
- 某些 SSR 框架（如 Next.js）在 hydrate 阶段直接报错或跳过渲染
真正关键的不是“能不能写两个 body”，而是它定义了浏览器渲染树的根边界和 JS 操作的可信锚点——一旦这里出偏，后续所有样式、交互、可访问性都跟着失准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
