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