figure标签用于标识可抽离、可编号、可独立理解的语义单元，必须配合直接子元素figcaption使用；alt与figcaption各司其职，不可互换或省略，且figcaption须自包含、不依赖上下文位置。
figure 标签不是“给配图加标题”的样式工具，而是明确告诉浏览器和读屏器：“这部分图文是一个可抽离、可编号、可独立理解的语义单元”——用错就等于把图注从上下文中剥离，辅助技术可能直接跳过说明文字。
什么时候必须用 figure + figcaption？
只在图片（或代码块、图表、引用）满足「可抽离性」时才用：删掉它，正文主干逻辑依然完整；挪到附录、侧栏或打印页，figcaption仍能准确描述它。
- ✅ 适用：
fetch()
截图 +figcaption注明“图5:错误响应结构(HTTP 401)” - ✅ 适用：系统架构 SVG 图 +
figcaption写“图2.1:微服务间 gRPC 调用链路” - ❌ 不适用：段落中一句“如图所示，点击按钮后弹出确认框”，配一张局部 UI 截图——图是句子的一部分，删掉句子就断了
- ❌ 不适用：文章顶部 banner 图、侧边栏产品 logo、代码块旁的小图标——它们是装饰或交互元素，不是可引用图元
figcaption 必须是 figure 的直接子元素且仅有一个
DOM 顺序决定读屏器播报流。写在中间、或包在 <div> 里，都会导致语义断裂。
<ul>
<li>✅ 正确：<code><figure><figcaption>图3:Redis 缓存穿透防护流程</figcaption><img src="flow.png" alt="流程图:布隆过滤器+空值缓存"></figure>
<figure><img src="flow.png" alt="流程图:布隆过滤器+空值缓存"><figcaption>图3:Redis 缓存穿透防护流程</figcaption></figure>
<figure><img><p class="caption">图3</p></figure> —— <p></p> 不是 figcaption，读屏器无法关联<figure><img><div><figcaption></figcaption></div></figure> —— figcaption 必须是 figure 的**直接子元素**
alt 和 figcaption 各司其职，不能互换或省略
两者共存是硬性要求，且分工清晰：
- ❌ 不要写：
<img alt="后台管理界面"><figcaption>图1:后台管理界面布局</figcaption>——alt太笼统，figcaption没补充新信息 - ✅ 对：
<img alt="左侧导航栏含‘用户管理’‘角色配置’等菜单项，主区域显示带搜索框的用户列表表格"><figcaption>图1:权限管理模块界面布局</figcaption>——alt讲清内容，figcaption点明模块归属与用途 - ⚠️ 注意：
alt=""表示图纯装饰，此时绝不能加figcaption—— 否则语义矛盾
最容易被忽略的是：figcaption 中写“上图”“左侧示意图”这类上下文依赖词。figure 内容可能被 CSS 移到侧边栏或附录，标题必须自包含、不依赖位置。
