article内的header必须作为第一个子元素且含标题等引导信息，footer必须紧贴结尾且仅含补充元信息，二者平级不可嵌套，归属错误将影响机器解析。
article 内部的 header 和 footer，语义上只属于这个 <article></article> 元素本身，不向外延伸，也不受外层容器干扰。
header 必须紧贴 article 开头，且含引导性内容
它不是装饰性横幅，而是该篇文章的“引子”。必须直接作为 <article></article> 的第一个子元素，且至少包含一个标题（<h1></h1>～<h6></h6>）、作者、时间等能说明“这是什么内容”的信息。
- ✅ 正确：
<article><header><h2>夏日防蚊指南</h2> <p>作者：王医生</p> <time datetime="2026-06-15">2026年6月15日</time></header><p>蚊子活跃期已至……</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/ai/2858" title="ZERO浏览器"><img src="https://img.php.cn/upload/ai_manual/001/246/273/6a1502c3b285a229.png" alt="ZERO浏览器" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/ai/2858" title="ZERO浏览器" class="overflowclass">ZERO浏览器</a> <p class="overflowclass">一款AI开发辅助工具，主要用于一款PC端AI智能浏览器，适合需要提升相关任务效率的用户。</p> </div> <a rel="nofollow" href="/ai/2858" title="ZERO浏览器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></article> - ❌ 错误：把
<header></header>套在<div class="banner"> 里再放进 <code><article></article>—— 语义归属变成那个<div>，而 <code><div> 不是节元素，header 失效 <li>❌ 错误：在 <code><article></article>中间或结尾放<header></header>—— 违反“开头引导”语义，结构混乱 - ✅ 正确：
<article>...正文内容...<footer><p>本文首发于健康科普网</p> <small>转载需注明来源</small></footer></article> - ❌ 错误：用
<section></section>或<div> 包裹 <code><footer></footer>再塞进<article></article>—— footer 归属被“劫持”，解析器可能将其挂到外层 - ❌ 错误：在
<footer></footer>里放主导航、广告位或全站友情链接 —— 这些不属于单篇文章的补充信息，语义越界 - 禁止
<header><footer></footer></header>或反过来 —— 逻辑冲突，验证器报错，辅助技术可能跳过 - 不能把全局页眉/页脚的内容（如网站 logo、主菜单、全站版权声明）塞进 article 的 header/footer 里 —— 那属于
或<main></main>的语义范围 - 一个
<article></article>只能有一个<header></header>和一个<footer></footer>；重复出现会破坏大纲层级
footer 必须紧贴 article 结尾，仅含补充性元信息
它不是视觉底部栏，而是这篇独立内容的“收尾说明”。必须直接写在 <article></article> 的内容之后、闭合标签之前，子元素限于版权归属、编辑记录、标签、相关链接等与本文直接相关的补充信息。
二者不可嵌套，也不可跨作用域复用
<header></header> 和 <footer></footer> 在 <article></article> 内是平级的语义搭档，一个管开头，一个管结尾，彼此无从属关系。
为什么归属准确这么关键？
屏幕阅读器靠这些标签判断内容边界；搜索引擎靠它们识别独立内容单元；自动化工具靠它们生成摘要或提取元数据。header 和 footer 写对位置，等于给机器一张清晰的地图——告诉它：“这篇文章从哪开始，到哪结束，哪些信息真正属于它。”
