figure 和 figcaption 仅用于语义上自包含且带独立说明的图文单元；figcaption 必须为 figure 的首或尾子元素，与 alt 分工明确：alt 描述图像内容，figcaption 解释其上下文作用。
figure 和 figcaption 不是用来“加标题”的样式工具，而是告诉浏览器：这段图文是一个能被单独引用、脱离上下文也成立的语义单元。用错位置，读屏器会跳过说明，SEO 会丢失关联，布局也可能意外断裂。
什么时候必须用 figure + figcaption？
只在内容同时满足两个条件时才用：
- 内容本身是「自包含」的——比如一张折线图、一段 JSON 截图、一个后台界面截图，删掉它不影响正文主干逻辑
- figcaption 文字是「它自己的说明」——必须能独立存在，例如“图2:Q1 API 响应结构（数据来源：v2.3 接口文档）”，而不是“上图展示了返回格式”
- 这张图如果被挪到附录、侧边栏或打印版里，figcaption 依然准确、不依赖上下文
- 纯装饰图、轮播图单帧、头像旁昵称、按钮图标，都不该塞进
figure
figcaption 必须是 figure 的第一个或最后一个子元素
这是 W3C 强制规范，不是建议。浏览器和读屏器靠这个位置判断归属关系。中间插一个 <div> 或 <p>，语义就断了。
正确写法只有两种：
立即学习“前端免费学习笔记（深入）”；
<figure> <figcaption>图2:API 响应结构示例</figcaption> <img src="api-response.png" alt="JSON 格式响应体截图"> </figure>
或
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<figure> <img src="api-response.png" alt="JSON 格式响应体截图"> <figcaption>图2:API 响应结构示例</figcaption> </figure>
别为了视觉顺序硬改 HTML 结构。如果设计要求标题在上、图在下，但语义上图更重要，用 CSS 的 flex-direction: column-reverse 控制渲染流，保持 HTML 合规。
alt 和 figcaption 分工明确，不能互替
alt 描述图像「内容本身」，供盲人理解图里有什么；figcaption 解释图像「为什么在这里」，面向文档上下文。
常见错误：
- 错：
<img alt="后台管理界面"><figcaption>图1:后台管理界面布局</figcaption>（alt没讲清内容，figcaption又没提供额外上下文） - 对：
<img alt="左侧导航栏含‘用户管理’‘角色配置’等菜单项，主区域显示表格与搜索框"><figcaption>图1:后台管理界面布局</figcaption> - 空
figcaption（只含空格或
默认样式简单，但改起来容易踩坑
figure 默认只有上下 margin，没有 padding 或 border；figcaption 默认块级、居中、字体略小。但要注意：
- 用 Flex/Grid 布局时，
text-align: center对figcaption无效，得用justify-content或align-items - 响应式切换布局（比如小屏切为上下结构）时，别用
float或position: absolute把figcaption挤出文档流，否则读屏器可能跳过它 - IE8 及更早版本完全不识别
figure/figcaption，需降级处理（如用<div role="figure">+ ARIA）
真正难的不是怎么写，而是每次插入图之前先问一句：它算不算一个能被单独引用、带明确上下文说明的独立单元？这个问题答不准，后面所有样式和兼容性努力都白搭。
