<figure> 用于可独立引用的自包含内容单元，如带编号的架构图、注明数据来源的图表等；删去后主文逻辑仍完整即适用，且 <figcaption> 必须为直接子元素、唯一、位于首或尾。
figure不是“给图片加标题”的div替代品
它表达的是一个可独立引用、可脱离主文存在的内容单元。如果你只是在段落里插一张解释性配图（比如“如上图所示，点击按钮即可提交”），直接用 <img> 加合适的 alt 就够了；硬套 <figure> 反而造成语义污染。
真正该用 <figure> 的场景有这些：
- 技术文档里的架构图，带编号“图3.2：用户认证流程”
- 博客中嵌入的 SVG 图表，需注明“数据来源：Statista 2025”
- API 响应示例截图，配合说明“成功响应的 JSON 结构（HTTP 200）”
- 论文附录中的实验照片组，统一标注“图A1–A3：显微镜下细胞形态对比”
关键判断标准：删掉这个块，主文逻辑是否依然完整？如果答案是肯定的，那它大概率适合 <figure>。
figcaption必须是figure的直接子元素，且只能有一个
W3C 规范明确限定 <figcaption> 必须是 <figure> 的**首个或最后一个子元素**，不能嵌套在 <div> 里，也不能出现两次。浏览器会忽略第二个 <figcaption>，但屏幕阅读器可能因此误读结构。
立即学习“前端免费学习笔记（深入）”；
常见错误写法：
<figure>
<div>
<img src="chart.png" alt="销售额图表">
<figcaption>图1：Q1销售趋势</figcaption>
</div>
</figure>
正确写法（figcaption 在末尾，最常用）：
<figure> <img src="chart.png" alt="2025年第一季度销售额柱状图"> <figcaption>图1：2025年Q1各渠道销售额（单位：万元）</figcaption> </figure>
如果想让说明文字显示在图上方（比如学术排版习惯），<figcaption> 放前面更合理——DOM 顺序优先，屏幕阅读器先读说明再读图，理解成本更低。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
多图共用一个figcaption？可以，但有条件
一组强关联图像（比如分步操作截图、同一实验的多角度照片）可以用一个 <figure> 包裹，配一个统一 <figcaption>。但必须满足两个前提：
- 这些图共同构成一个不可拆分的信息单元（不是简单堆砌）
- figcaption 文字能准确概括全部内容，而不是“见下图”“如下几张图”这类空泛表述
反例：把首页轮播图的 5 张 banner 全塞进一个 <figure>，配一句“推荐商品”，这就违背了“自包含”原则——每张图语义独立，应各自用 <figure>。
正例：
<figure> <img src="step1.png" alt="登录页面输入用户名"> <img src="step2.png" alt="输入密码并点击登录"> <img src="step3.png" alt="进入后台仪表盘"> <figcaption>图4：用户登录全流程界面截图（v2.3.0）</figcaption> </figure>
figcaption和alt属性分工明确，不能互相替代
alt 是图像缺失时的简短替代文本（建议 ≤125 字符），用于无障碍兜底；<figcaption> 是完整上下文说明，可含编号、来源、条件、版本等信息，二者必须共存，不是二选一。
典型错误是只写 alt="系统界面"，figcaption 却空着，或者反过来只靠 figcaption 忽略 alt——前者让视障用户失去图像基本含义，后者让无图环境（如终端渲染、爬虫抓取）丢失关键信息。
推荐搭配方式：
-
alt描述图像“是什么”：alt="Python requests 库发起 GET 请求的代码截图" -
<figcaption>补充“为什么”和“上下文”：<figcaption>清单 2：使用 requests.get() 获取用户列表（Python 3.11, requests 2.31）</figcaption>
最容易被忽略的一点：figcaption 里不要放链接或按钮。它语义上是说明文字，不是交互容器；加了交互反而会让辅助技术混淆角色，也破坏“静态参考内容”的本意。
