section是语义化的主题分组容器，需配标题构成可识别节段；其直接子元素header和footer分别服务本节引导与收尾信息，不可嵌套或隔层，且嵌套层级应简洁清晰。
section 是一个语义化的「主题分组容器」，它本身不自带独立内容意义，但一旦配上标题（<h1></h1>–<h6></h6>），就构成一个可被大纲识别的节段。当它内部嵌套 header 和 footer 时，这两个标签就自动绑定到这个 <section></section> 上——不是为了视觉排版，而是明确告诉浏览器和搜索引擎：“这些头部/尾部信息，只服务于本节内容”。
header 和 footer 必须是 section 的直接子元素
它们不能隔着一层 <div> 或其他非节元素出现。否则语义断裂，屏幕阅读器无法正确归属。
<ul>
<li>✅ 正确：<code><section><header><h3>技术参数</h3></header><p>CPU：8核...</p>
<footer><p>数据更新于<time datetime="2026-06-20">6月20日</time></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/ai/3690" title="小绿鲸"><img
src="https://img.php.cn/upload/ai_manual/001/246/273/178599565087136.png" alt="小绿鲸" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/ai/3690" title="小绿鲸" class="overflowclass">小绿鲸</a>
<p class="overflowclass">小绿鲸是一款AI论文写作工具，AI英文文献阅读工具。</p>
</div>
<a rel="nofollow" href="/ai/3690" title="小绿鲸" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div></footer></section>
<section><div><header>...</header></div></section>（<header></header> 被降级为普通容器）<section><header><footer>...</footer></header></section>（<header></header> 与 <footer></footer> 平级，禁止嵌套）header 内容要体现本节引导性
放在 <section></section> 里的 <header></header>，不是放全站 logo 或主导航的地方，而是服务该节主题的简短说明。
- 适合内容：节标题（
<h3></h3>或更小字号标题）、副标题、时间标记（<time></time>）、简短导语 - 不适合内容：主菜单（应放
<nav></nav>）、搜索框（应放<form></form>）、广告位、正文段落 - 注意：一个
<section></section>只需一个<header></header>；连续两个会干扰大纲解析
footer 表达本节收尾信息，不是版权栏
这里的 <footer></footer> 不是整页底部的 © 版权声明，而是对当前 <section></section> 的补充说明，比如参考资料、操作按钮、更新时间等。
- 常见合法用法：引用来源、关联文档链接、编辑说明、“展开/收起”按钮、数据更新时间
- 避免塞入：全站导航链接（应归
<nav></nav>）、客服电话（更适合<aside></aside>）、广告 banner - 若需放链接，且属于导航性质（如“查看全部参数”），建议用
<nav aria-label="参数区导航"></nav>包裹，增强语义
嵌套层级不宜过深，保持可读性
一个 <section></section> 内嵌 <header></header> 和 <footer></footer> 是标准用法，但不要层层套娃：
- ✅ 合理：
<section><header>...</header><article>...</article><footer>...</footer></section> - ⚠️ 警惕：
<section><section><header>...</header></section></section>（两层<section></section>均无标题，语义弱化） - ❌ 避免：
<section><header><section><header>...</header></section></header></section>（逻辑混乱，辅助技术难识别）
