figure 和 figcaption 构成语义契约，figcaption 必须是 figure 的首或尾直接子元素，用于说明图的上下文而非内容；alt 描述图像内容，二者分工明确，不可互换或省略。
figure 和 figcaption 不是“给图加标题”的快捷写法
它俩构成的是一个语义契约，不是样式容器。浏览器、读屏器、搜索引擎靠这个结构识别“这段文字专属于这张图”。用错位置或硬套在轮播图、头像、banner 上，figcaption 很可能被跳过，SEO 也收不到图文关联信号。
figcaption 必须是 figure 的第一个或最后一个直接子元素
这是 W3C 强制规范，不是建议。DOM 顺序决定读屏器播报顺序：先读 figcaption，再读图内容。中间插个 <p></p>、<div> 或按钮，语义就断了。
<ul>
<li>✅ 正确：<code><figure><figcaption>图2:API 响应结构示例</figcaption><img src="api.png" alt="JSON 格式响应体截图"></figure>
<figure><img src="api.png" alt="JSON 格式响应体截图"><figcaption>图2:API 响应结构示例</figcaption></figure>
<figure><img><div><figcaption>...</figcaption></div></figure>（figcaption 不是直接子元素）<figure><img><p>说明文字</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div></figure>（p 不是 figcaption，无法被识别为图注）alt 和 figcaption 分工必须清晰，不能互换或照抄
alt 回答“图里有什么”，面向无图环境和读屏器；figcaption 回答“为什么放这张图”，面向上下文、编号、数据来源或结论。
- ❌ 错：
<img alt="后台管理界面"><figcaption>图1:后台管理界面布局</figcaption>（alt没描述内容，figcaption没提供额外上下文） - ✅ 对：
<img alt="左侧导航栏含‘用户管理’‘角色配置’等菜单项，主区域显示表格与搜索框"><figcaption>图1:后台管理界面布局</figcaption> -
alt=""表示纯装饰图——此时不该加figcaption，否则语义矛盾 - 如果图是代码截图，
alt写“Python 异常堆栈截图”，figcaption注明触发条件和 Python 版本
什么图不该塞进 figure？
不是所有图都配得上 figure。关键判断标准只有一条：删掉它，正文主干逻辑是否依然通顺？
- 不该用：
figure包轮播图单帧、产品主图、头像旁昵称、按钮图标、纯装饰分隔线 - 该用：
figure包可独立引用的图表、代码块截图、信息图、流程图（如“图3:用户登录流程”） - 轮播图每帧要各自独立用一个
figure，不能共用一个figcaption - 多段说明？拆成多个
figure，比如分步操作截图 → 每张图一个figure+ 独立figcaption
figcaption 放前面——这时候别动 DOM 顺序，用 display: flex; flex-direction: column-reverse 控制渲染流。DOM 结构合规，才是无障碍和 SEO 的底线。
