<body>标签只能有一个，多写会被浏览器忽略；HTML规范强制要求唯一性，重复的<body>标签及其内容将被丢弃，仅保留第一个。
body 标签只能有一个，多写会被浏览器忽略
HTML 规范明确要求一个文档中只能有一个 <body> 元素。现实中，如果误写两个（比如模板拼接出错、CMS 生成重复结构），浏览器不会报错，但会直接丢弃第二个及之后的所有 <body> 开始标签和内容——只保留第一个里面的 DOM 节点。
常见触发场景：
- 服务端模板（如 PHP/Thymeleaf）中条件判断没闭合，导致
<body>被重复输出 - 前端框架（如 Vue SSR）组件意外渲染了完整 HTML 片段，包含冗余
<body> - 手动复制粘贴 HTML 时没删干净旧的
<body>块
验证方法：打开 DevTools → Elements 面板，搜索 <body，确认只出现一次高亮匹配；也可运行 document.querySelectorAll('body').length，结果必须为 1。
body 内不能放 script 或 link 标签？不，可以但有讲究
<script> 和 <link> 理论上允许出现在 <body> 内，但行为差异很大：
立即学习“前端免费学习笔记（深入）”；
-
<script>放在<body>底部是常见做法，确保 DOM 已加载；若放在顶部且未加defer或async，会阻塞渲染 -
<link rel="stylesheet">放在<body>内属于非标准用法，多数浏览器仍会解析，但 CSSOM 构建可能延迟，导致 FOUC（闪白）；W3C 明确建议只放在<head> -
<link rel="preload">是少数被允许且推荐放在<body>的例外，用于按需预加载资源
真正不能放的是 <title>、<meta>（除 http-equiv 类）、<base> —— 这些必须在 <head> 内，否则被浏览器忽略或移入 <head>。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
body 默认 margin 8px 会影响布局，别靠重置猜
所有主流浏览器对 <body> 都有默认样式：margin: 8px。这个值不是“设计缺陷”，而是历史兼容性残留。很多人用 * { margin: 0; padding: 0; } 一刀切重置，但会破坏 <button>、<input> 等原生控件的默认外边距表现。
更稳妥的做法：
- 只重置
body：body { margin: 0; } - 或使用现代 reset（如
modern-normalize），它保留合理默认间距，仅归一化跨浏览器差异 - 若用 CSS-in-JS 或组件库，检查其是否已内置 body 重置（如 Next.js 默认带
margin: 0）
注意：CSS 中 body 选择器权重低，容易被后续规则覆盖；建议在 CSS 文件最顶部声明，或用 !important（仅限紧急兜底）。
document.body 可能为 null，别在 DOM 加载前读取
在 <script> 标签中直接访问 document.body，如果脚本位于 <head> 且没加 defer，大概率得到 null —— 因为此时 <body> 标签还没被解析。
安全写法只有三种：
- 脚本放在
<body>底部（紧挨 </body>前） - 监听
DOMContentLoaded事件：document.addEventListener('DOMContentLoaded', () => { /* 此时 document.body 确保存在 */ }) - 用
document.readyState判断：if (document.readyState === 'loading') { /* 还没开始解析 body */ }
特别注意：SSR 渲染的页面，document.body 在 hydrate 阶段才可用；React/Vue 的 mounted 或 useEffect 才是等价时机。
