判断是否使用 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><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5030" title="Html To Pdf"><img src="https://img.php.cn/upload/skill/000/000/081/179031962213835.jpg" alt="Html To Pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5030" title="Html To Pdf" class="overflowclass">Html To Pdf</a> <p class="overflowclass">使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。</p> </div> <a rel="nofollow" href="/xiazai/skill5030" title="Html To Pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></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。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
