<body>不能嵌套在<head>里，因HTML语法强制规定二者必须为<html>的并列直系子元素；<head>仅接受元数据标签，遇<body>会终止解析并静默修正，导致渲染异常、JS执行失败及SEO失效。
<body> 是唯一承载用户可见内容的容器，所有文本、图片、表单、脚本输出都必须放在它里面，否则浏览器不会渲染。
为什么 <body> 不能嵌套在 <head> 里
这是 HTML 语法硬性约束：<head> 只接受元数据类标签（如 <title>、<meta>、<link>），遇到 <body> 或任何内容型标签会立即终止 <head> 解析，并把后续内容自动归入隐式 <body> —— 这会导致样式失效、JS 执行异常、SEO 元素丢失。
- 常见错误现象：
<body>出现在<head>内部，浏览器控制台不报错但页面布局错乱，document.body可能为null或指向意外节点 - 真实场景：复制粘贴时误把整段 HTML 块拖进
<head>区域；模板引擎变量渲染错位 - 验证方式：用浏览器开发者工具检查 Elements 面板，确认
<body>是否为<html>的直接子元素，且与<head>并列
<body> 里哪些标签能直接放，哪些必须嵌套
<body> 允许直接子元素是“流内容”（flow content），但不是所有标签都能平级摆放。比如 <div>、<p>、<header> 没问题；而 <li>、<dt>、<dd> 必须包裹在父容器（<ul>、<dl>）内，否则语义断裂、屏幕阅读器无法识别。
- 可直接子元素示例：
<main>、<section>、<article>、<aside>、<footer>、<script>（无defer或async时）、<noscript> - 禁止直接子元素：
<li>、<option>、<tbody>、<tr>—— 它们依赖上下文语义，脱离父容器后会被浏览器静默修正（如自动补<ul>），但 DOM 结构不可靠 - 性能影响：滥用无语义的
<div>作直接子元素虽不报错，但增加 CSS 选择器匹配开销，也削弱可访问性
<body> 的全局属性和实际限制
<body> 支持全部 HTML 全局属性（如 class、id、data-* ），但部分旧属性已被废弃（如 bgcolor、text、leftmargin），现代项目中应通过 CSS 控制样式。
立即学习“前端免费学习笔记（深入）”；
- 兼容性陷阱：
onload仍被支持，但绑定多个处理函数时只执行最后一个；推荐改用addEventListener('load', ...) - 移动端注意：
<body>默认有margin（各浏览器不同，通常 8px），未重置会导致内容离边框有空隙，常被误认为“页面留白” - 容易忽略的点：
<body>不允许包含<html>、<head>、<body>自身 —— 即使是动态插入也会被浏览器丢弃
真正关键的不是“能不能放”，而是“放了之后浏览器怎么理解它”。<body> 的结构松散但语义敏感，一个没闭合的 <div> 或错位的 <script> 标签，可能让整个页面的可访问性和 SEO 效果断崖下跌，而错误本身却完全不报错。
