必须用 figure + figcaption 仅当内容自包含且 figcaption 是独立准确的说明；figcaption 必须首尾位置、不可居中插入；alt 描述图像内容，figcaption 解释上下文；figure 默认无 padding/border，img 需 display: block。
什么时候必须用 figure + figcaption？
只在内容同时满足两个条件时才用：
• 内容本身是「自包含」的——比如一张折线图、一段 fetch() 返回结构的截图、一个后台界面截图，删掉它不影响正文主干逻辑
• figcaption 文字是「它自己的说明」——必须能独立存在，例如“图2:Q1 API 响应结构（数据来源:v2.3 接口文档）”，而不是“上图展示了返回格式”
• 这张图如果被挪到附录、侧边栏或打印版里，figcaption 依然准确、不依赖上下文
• 纯装饰图、轮播图单帧、头像旁昵称、按钮图标，都不该塞进 figure
figcaption 必须放在 figure 的第一个或最后一个子元素位置
这是 W3C 强制规范，不是建议。浏览器和读屏器靠这个位置判断归属关系。
• 正确写法只有两种：
<figure><figcaption>图2:API 响应结构示例</figcaption><img src="api-response.png" alt="JSON 格式响应体截图"></figure>
<figure><img src="api-response.png" alt="JSON 格式响应体截图"><figcaption>图2:API 响应结构示例</figcaption></figure>
• 中间插一个 <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> 或 <div>，语义就断了<br>• 别为了视觉顺序硬改 HTML 结构；设计要求标题在上、图在下，用 CSS 的 <code>flex-direction: column-reverse 控制渲染流，保持 HTML 合规
alt 和 figcaption 分工明确，不能互替也不能照抄
alt 描述图像「内容本身」，供盲人理解图里有什么；figcaption 解释图像「为什么在这里」，面向文档上下文。
• 常见错误：
错：<img alt="后台管理界面"><figcaption>图1:后台管理界面布局</figcaption>（alt 没讲清内容，figcaption 又没提供额外上下文）
对：<img alt="左侧导航栏含‘用户管理’‘角色配置’等菜单项，主区域显示表格与搜索框"><figcaption>图1:后台管理界面布局</figcaption>
• figcaption 不能为空（只含空格或 会被忽略）
• 如果 alt=""（纯装饰图），就不该加 figcaption——否则语义矛盾
样式和兼容性最容易被忽略的硬限制
figure 默认只有上下 margin，没有 padding 或 border；重置时别漏掉 margin: 0
• figure img 要加 display: block，否则图片下方会有空白间隙（内联元素基线对齐导致）
• figcaption 默认是块级、居中、字体略小，但 text-align 只影响内联内容；Flex/Grid 布局下需用 justify-content 或 align-items
• IE8 及更早版本完全不识别 figure/figcaption；若需兼容，得降级为 <p class="fig-caption"></p> 并手动关联 aria-labelledby，但 2026 年绝大多数项目已无需考虑
• 真正难的不是怎么写，而是每次插入图之前先问一句：它算不算一个能被单独引用、带明确上下文说明的独立单元？
