必须用 figure 的唯一标准是删掉该块后主文档逻辑仍完整；它专用于可独立引用的实体，如编号架构图、JSON 截图、显微照片组，而非段落配图或 banner 图。
figure 不是给图片加个标题框的快捷方式，它只在内容真正独立、可抽离时才该用；乱套会导致读屏器误读、SEO 丢失图文关联、CSS 布局意外偏移。
什么时候必须用 figure 而不是 <div> 或直接 <code><img alt="HTML资源组合figure怎么用_HTML图片与标题关联结构" >
核心判断标准只有一个：删掉这个块，主文档逻辑是否依然完整？
- ✅ 适用：
<figure></figure>包裹一张带编号的架构图（“图3.2: 用户认证流程”）、一段 JSON 响应截图（配说明“成功响应的 HTTP 200 结构”）、论文附录里的三张显微照片组（统一标注“图A1–A3”） - ❌ 不适用：段落中解释某句话的配图（如“点击按钮即可提交”，配一张界面截图）、首页 banner 轮播图的单张图、用户头像旁的昵称标签
- ⚠️ 注意：
<figure></figure>表达的是“一个可被单独引用的实体”，不是“一组视觉上挨着的图”。轮播组件本身要用<div class="carousel"> 包，内部每张图仍各自配自己的 <code><figure><img alt="HTML资源组合figure怎么用_HTML图片与标题关联结构" ><figcaption></figcaption></figure>figcaption必须是figure的直接子元素且只能有一个W3C 规范强制要求：
<figcaption></figcaption>必须紧邻<figure></figure>开头或结尾，不能嵌套在<div> 里，也不能出现两次。 <ul> <li>正确写法只有两种：<code><figure><figcaption>...</figcaption><img alt="HTML资源组合figure怎么用_HTML图片与标题关联结构" ></figure>（标题前置），或<figure><img alt="HTML资源组合figure怎么用_HTML图片与标题关联结构" ><figcaption>...</figcaption></figure>（说明后置） - 错误示例：
<figure><img alt="HTML资源组合figure怎么用_HTML图片与标题关联结构" ><div><figcaption>...</figcaption></div></figure>—— 浏览器会忽略该<figcaption></figcaption>，读屏器可能跳过或误读 - 错误示例：
<figure><img alt="HTML资源组合figure怎么用_HTML图片与标题关联结构" ><figcaption>图1</figcaption><p>补充说明</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a> <p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p> </div> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <figcaption>图2</figcaption></figure>—— 第二个<figcaption></figcaption>被完全忽略
alt 和 figcaption 分工明确，不能互相替代
alt 是图像缺失时的替代文本，供屏幕阅读器朗读、搜索引擎理解图像“是什么”；figcaption 是语义化标题或上下文说明，告诉用户这张图“为什么重要”或“在文档中扮演什么角色”。
- 混用相同内容（比如都写“后台管理界面截图”）会让无障碍体验变差，也浪费 SEO 价值
- 推荐搭配：
<img src="admin.png" alt="后台管理界面：左侧导航栏含用户、订单、日志模块，右侧主区域显示订单列表">+<figcaption>图1: v2.3.0 版本后台核心功能布局（2025年Q2上线）</figcaption> - 如果图只是装饰性（如分隔线小图标），
alt=""即可，别硬塞<figure></figure>
多图共用一个 figure 和 figcaption 的边界在哪
可以，但必须满足两个硬条件：这些图共同构成一个不可拆分的信息单元，且 <figcaption></figcaption> 文字能准确概括全部内容。
- 正例：
<figure><img src="step1.png" alt="HTML资源组合figure怎么用_HTML图片与标题关联结构" ><img src="step2.png" alt="HTML资源组合figure怎么用_HTML图片与标题关联结构" ><img src="step3.png" alt="HTML资源组合figure怎么用_HTML图片与标题关联结构" ><figcaption>图4: 用户登录全流程界面截图（v2.3.0）</figcaption></figure>—— 三步操作缺一不可，标题覆盖整体 - 反例：把首页 5 张商品 banner 全塞进一个
<figure></figure>，配一句“推荐商品”——每张图语义独立，应各自用<figure></figure> - ⚠️ 注意：统一标题（如“图1–4: 系统架构演进”）应放在外层
<section></section>或<h2></h2>里，而不是让一个<figcaption></figcaption>覆盖多个<figure></figure>
最容易被忽略的点是 DOM 顺序与语义优先级的冲突：哪怕设计稿要求标题在上、说明在下，只要语义上说明更重要（比如学术排版习惯先读注释再看图），就该把 <figcaption></figcaption> 放在 <figure></figure> 开头，用 flex-direction: column-reverse 控制视觉流——HTML 结构合规比视觉对齐更关键。
