判断是否使用 figure 的核心标准是：删掉整个 figure 块后，正文主干逻辑是否依然完整；必须用 figure 的情况是图可独立存在并被引用，否则应嵌入段落或用 div。
figure 和 figcaption 不是“给图加个标题”的快捷写法，用错地方会让读屏器跳过说明、SEO 丢失图文关联、响应式布局意外断裂——关键不在会不会写，而在每次插入前是否真确认它是个可抽离的独立单元。
怎么判断该不该用 figure 而不是 div
核心就一条：删掉整个 figure 块，正文主干逻辑是否依然完整？
- ✅ 必须用：
figure包裹一张后台界面截图 +figcaption标注“图2:权限配置模块（v3.1）”，这张图挪到附录里仍能独立理解 - ❌ 不该用：文章中解释“点击按钮后状态变化”，配一张无编号、无来源的小流程图，删了图，那句话就读不懂——说明它本质是正文延伸，该写进段落里
- ⚠️ 容易误用：轮播图单帧、产品页主图+“点击查看大图”按钮、头像旁昵称——这些都不是可被引用的语义单元，
figure反而制造语义噪音
figcaption 必须在 figure 的第一个或最后一个子元素位置
这不是样式建议，是 W3C 强制规范。浏览器和读屏器靠这个结构识别“哪段文字属于哪张图”。中间插一个 p、div 或按钮，归属关系就断了。
- 正确：
<figure><figcaption>图3:API 响应结构</figcaption><img src="a.png" alt="..."></figure> - 正确：
<figure><img src="a.png" alt="..."><figcaption>图3:API 响应结构</figcaption></figure> - 错误：
<figure><img src="a.png" alt="..."><p>说明文字</p></figure>（p不是figcaption） - 错误：
<figure><img src="a.png" alt="..."><figcaption>标题1</figcaption><img src="b.png"><figcaption>标题2</figcaption></figure>（一个figure只能有一个figcaption）
alt 和 figcaption 分工必须明确
两者不能互替，也不能照抄。缺一不可，但职责完全不同。
立即学习“前端免费学习笔记（深入）”；
-
alt描述图像「内容本身」：供盲人理解图里有什么，比如alt="左侧导航含‘用户管理’‘角色配置’菜单，主区为带搜索框的表格" -
figcaption解释图像「为什么在这里」：面向文档上下文，比如<figcaption>图1:后台管理界面布局（v3.1）</figcaption> - 常见错误：
<img alt="后台管理界面"><figcaption>图1:后台管理界面布局</figcaption>——alt没讲清内容，figcaption又没提供额外上下文，等于双失效 - 特别注意：
figcaption不能为空，只含空格也会被忽略；如果img是纯装饰图（alt=""），就不该加figcaption——语义矛盾
响应式与 CSS 控制视觉顺序时的硬限制
设计要求标题在上、图在下？别改 HTML 结构去“凑视觉”，用 CSS 控制渲染流更安全。
- 推荐始终把
figcaption放在figure第一个子元素位置——读屏器先听说明再看图，认知更连贯 - 若需视觉上标题在下，可用
display: flex; flex-direction: column-reverse;，而非position: absolute或float——后者容易让figcaption脱离文档流，读屏器跳过 -
figure默认只有上下 margin，无 padding/border；重置样式时漏掉margin: 0会导致意外空白 - IE8 及更早版本完全不识别
figure/figcaption，如需兼容，得用div+ ARIA 属性降级
真正难的从来不是语法怎么写，而是每次插入图之前，静默三秒问自己：它算不算一个能被单独引用、带明确上下文说明、删掉也不影响主干逻辑的独立单元？答案为否，就别碰 figure。
