figure 和 figcaption 的核心作用是声明内容可独立抽离与理解，figcaption 必须为 figure 的首个或末个直接子元素，DOM 顺序决定读屏器播报逻辑，错误嵌套或替代元素将导致语义失效。
figure 和 figcaption 不是“给图加标题”的快捷写法，而是向浏览器、读屏器和搜索引擎明确声明：“这一块内容可被独立抽离、引用和理解”——用错位置，语义就断了，辅助技术可能直接跳过说明文字。
figcaption 必须是 figure 的第一个或最后一个直接子元素
DOM 顺序决定读屏器播报逻辑：先读 figcaption，再读图/代码/媒体。中间插一个 <p>、<div> 或按钮，语义即失效。
- ✅ 正确：
<figure><figcaption>图2:API 响应结构示例</figcaption><img src="api.png" alt="JSON 格式响应体截图"></figure> - ✅ 也正确（但不推荐）：
<figure><img src="api.png" alt="..."><figcaption>图2:...</figcaption></figure>（播报顺序反了） - ❌ 错误：
<figure><img><div><figcaption></figcaption></div></figure>（figcaption不是直接子元素） - ❌ 错误：
<figure><img><p>说明文字</p></figure>（p不是figcaption，无法被识别为图注）
figure 的“可抽离性”判断比有没有图更重要
别只看页面上有没有图片——关键问题是：这张图（或代码块、图表、SVG）拿掉后，正文是否依然逻辑自洽、无需补漏？
- ✅ 该用：
<pre><code>{ "data": [] }</code></pre>加figcaption标“清单1:空数据响应结构”——它能独立存在、编号可被交叉引用 - ✅ 该用：学术论文里的“图3.2:微服务调用关系”——可放进附录，不影响主文阅读
- ❌ 不该用：段落中一句“点击按钮后界面变化如图所示”，配一张局部截图——删图，句子就残缺
- ❌ 不该用：轮播图单帧、产品主图、banner、头像旁昵称——它们属于交互容器或装饰元素，用
<div role="region">或纯<img>更准确
alt 与 figcaption 职责分明，不能互换也不能省略
alt 描述图像“是什么”，面向无图环境和读屏器；figcaption 解释“为什么放这张图”，面向上下文、编号、数据来源或结论。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错：
<img alt="后台管理界面"><figcaption>图1:后台管理界面布局</figcaption>（alt没描述内容，figcaption没提供额外上下文） - ✅ 对：
<img alt="左侧导航栏含‘用户管理’‘角色配置’等菜单项,主区域显示表格与搜索框"><figcaption>图1:后台管理界面布局</figcaption> - ⚠️ 注意：
alt=""表示纯装饰图——此时就不该用figure，否则语义矛盾 - ⚠️ 注意：
figcaption不能为空（仅空格也会被忽略），一个figure只能有一个
复杂布局中 CSS 控制的底线与陷阱
figure 默认只有上下 margin，无 padding/border，也不设 display；figcaption 默认块级、居中、字体略小。想实现左图右文或响应式堆叠，得靠 Flex/Grid，但必须守住语义底线：
- ✅ 推荐左图右文：
figure { display: flex; align-items: flex-start; }，再控制img宽高 +figcaption最小宽度 - ✅ 响应式切换：
@media (max-width: 768px) { figure { flex-direction: column; } } - ❌ 禁止用
position: absolute把figcaption移出文档流——辅助技术可能完全跳过它 - ❌ 禁止用
flex-direction: column-reverse或order强行视觉翻转顺序——DOM 结构没变，但语义流与视觉不一致，读屏器会混乱
最常被忽略的一点：figcaption 放在 DOM 开头不是为了“看起来像标题”，而是为了让读屏器用户带着上下文去理解图像——这个顺序一旦被 CSS 视觉欺骗覆盖，可访问性就实质降级了。
