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