body标签必须有且只能有一个，因HTML5规范强制规定其为html的第二个子元素；重复会导致DOM错乱、样式失效、JS获取为null；旧属性如bgcolor已废弃，须用CSS或class控制；它是JS操作页面的默认根节点，但需确保脚本执行时document.body已就绪。
body 标签是 HTML 文档中唯一承载用户可见内容的容器，它不是可选的“装饰”，而是浏览器渲染页面的强制起点——没有它，文本、图片、表单、脚本挂载点全都会失效。
为什么必须有且只能有一个 body 标签
HTML 规范（HTML5）明确定义：body 是 html 元素的第二个子元素，且文档中不允许出现第二个。浏览器遇到第二个 body 时，会静默忽略后续所有内容，或将其“吸收”进第一个 body 中，导致 DOM 结构错乱。
常见错误现象包括：
- JavaScript 执行
document.body后返回null（实际是解析失败后 fallback 的空对象） - CSS 中用
body > .header选择器突然不生效，但检查 DOM 发现.header其实被塞进了head里 - 页面底部空白异常，或滚动条消失——本质是浏览器把多余标签当注释跳过，内容未进入渲染树
body 不再支持 bgcolor、text 等旧属性
HTML4 时代用 <body bgcolor="#fff" text="#000"> 控制基础样式，现在这些属性已被完全移除。如果还在写，浏览器不会报错，但也不会生效。
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
正确做法只有两种：
- 用 CSS 的
body { background-color: #fff; color: #000; } - 若需动态切换（如暗色模式），操作
document.body.style.backgroundColor或切换 class，而不是试图设置废弃属性
注意：某些老项目里残留的 onload 属性（如 <body onload="init()">）虽仍能运行，但应改用 addEventListener('DOMContentLoaded', ...)，避免与现代框架的生命周期冲突。
body 是 JavaScript 操作页面的默认锚点
几乎所有前端库和手写脚本都默认把 document.body 当作根节点来挂载内容：
-
document.body.innerHTML = '<div>Hello</div>'—— 直接清空并重写全部内容 -
document.body.appendChild(el)—— 常用于动态插入模态框、提示层等全局 UI - D3.js、Three.js 等可视化库初始化时，通常要求传入一个
body下的容器节点
但容易被忽略的是：document.body 在脚本执行时可能为 null（比如脚本放在 head 里且没加 defer）。稳妥写法是监听 DOMContentLoaded，或确保脚本放在 </body> 之前。
真正关键的不是“body 能放什么”，而是它定义了浏览器渲染的边界和 JavaScript 可信的起点——一旦结构出错，后续所有样式、交互、SEO 都会从根上偏移。
