figure 与 img 是协作关系而非上下级：img 负责呈现图像，figure 定义图像所在内容单元的语义边界；figcaption 提供面向所有用户的完整上下文，alt 仅描述图像内容本身以支持技术 fallback。
figure 和 img 不是上下级关系，而是协作关系：img 负责“呈现图像”，figure 负责“定义图像所在内容单元的语义边界”。两者分工明确，不可互相替代。
figure 是语义容器，img 是内容载体
figure 本身不渲染图像、不加载资源、不处理尺寸——它只是告诉浏览器：“这里面的内容（不管是不是图）是一个可独立存在、可被引用、可跨页移动的单元”。而 img 才真正把像素画出来。一个 figure 可以包含 img、video、code、pre，甚至一段引用；但没有 img（或其他有效子元素），figure 就失去实际内容，语义也失效。
语义层级上，figure 包裹 img，但不“隶属”于 img
就像 section 包裹 p，但 p 并不“属于”section 的功能——section 定义区块意图，p 定义段落内容。同理：
– img 表达“此处有一张图”；
– figure 表达“这张图（连同它的说明）构成一个自包含、可抽离的语义单元”。
它们在 DOM 中是父子关系，但在语义职责上是平行协作：一个管“是什么”，一个管“为什么这样组织”。
figcaption 与 alt 的分工，体现语义分层
figcaption 是 figure 的一部分，面向所有用户，提供完整上下文（如“图3：JWT 刷新机制流程，含 refresh_token 7 天有效期”）；
alt 是 img 的属性，面向技术 fallback 场景，仅描述图像内容本身（如“流程图：客户端发起刷新请求 → 验证 token → 返回新 access_token”）。
二者必须共存，不能省略或互换——这正说明 figure 和 img 各自承担不可替代的语义职责：
- 删掉 img，figure 空壳无意义；
- 删掉 figure，img 仍能显示，但丧失“可编号、可引用、可脱离正文理解”的语义能力；
- 只写 alt 不写 figcaption，图元缺乏正式说明；只写 figcaption 不写 alt，图像失败时无文字替代。
什么时候该用 figure + img，而不是单独用 img
关键判断标准是「可抽离性」：删掉这张图及其说明后，正文逻辑是否依然自洽？
- 适用 figure：技术文档中的架构图、论文里的实验结果截图、API 响应示例——它们可放进附录、单独编号、被正文直接引用（如“参见图2.1”）；
- 不适用 figure：段落中一句“点击按钮弹出确认框”，配一张 UI 局部截图——图是句子的视觉延伸，抽走就断句；
- 禁用 figure：banner 图、头像、装饰性 icon——它们不是内容图元，而是界面元素或样式组件。
