figure 和 figcaption 不是图片说明的快捷写法，figcaption 必须作为 figure 的首个或末个直接子元素，否则读屏器和搜索引擎无法识别图文关联；alt 描述图像内容，figcaption 解释上下文，二者不可替代。

figure 和 figcaption 不是“给图片加个说明”的快捷写法，用错位置或结构，读屏器会跳过说明，搜索引擎也收不到图文关联信号。

figcaption 必须是 figure 的第一个或最后一个直接子元素

浏览器和屏幕阅读器靠 DOM 位置判断图与说明的归属关系，不是靠 CSS 渲染顺序。中间插一个 <p>、<div> 或按钮，语义就断了。

• ✅ 正确：<figure><figcaption>图2:用户登录流程</figcaption><img src="login.png" alt="..."></figure>
• ✅ 正确：<figure><img src="login.png" alt="..."><figcaption>图2:用户登录流程</figcaption></figure>
• ❌ 错误：<figure><img><div class="meta"><figcaption></figcaption></div></figure>（figcaption 不是直接子元素）
• ❌ 错误：<figure><img><p>说明文字</p></figure>（p 不是 figcaption，无法被识别为图注）

alt 和 figcaption 分工不同，不能互相替代

alt 是图像缺失时的替代文本，面向无图环境与无障碍；figcaption 是上下文说明，面向文档逻辑与 SEO。二者信息维度不同，重复写等于放弃一半语义价值。

• alt 描述“是什么”：alt="左侧导航栏含‘用户管理’‘角色配置’等菜单项，主区域显示表格与搜索框"
• figcaption 解释“为什么放这里”：<figcaption>图1:后台管理界面布局</figcaption>
• 如果 alt=""（纯装饰图），就不该加 figcaption——否则语义矛盾
• 错例：<img alt="后台管理界面"><figcaption>图1:后台管理界面布局</figcaption>（alt 没讲清内容，figcaption 又没提供额外上下文）

哪些图真该用 figure + figcaption？

figure 不是通用容器，它只适用于「可抽离 + 可独立引用」的内容：删掉它，正文依然通顺；挪到附录里，标题仍准确。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

• ✅ 适用：<figure><img><figcaption>图3:Q1 用户增长加速与新渠道投放时间高度重合</figcaption></figure>（图表有编号、来源、结论）
• ✅ 适用：代码截图、SVG 架构图、论文插图、带出处的历史照片
• ❌ 不适用：轮播图单帧（每帧应各自套一个 figure）、banner 图、按钮图标、正文内配图解释某句话（如“点击右上角保存按钮”，直接用 <img alt=""> 即可）
• ⚠️ 轮播图不能共用一个 figcaption，必须拆成多个 figure，外层用 <section> 或 <h2> 统一编号

默认样式坑和基础修复

figure 几乎没有默认边距或边框，figcaption 默认块级居中、字体略小，但图片下方常有空白间隙——那是 img 默认内联对齐基线导致的。

• 给 <img> 加 display: block，立刻消除底部空白
• 横向布局（如左图右文）别用 float，改用 display: flex 控制，保持 DOM 合规
• 视觉上想标题在上、图在下？用 CSS flex-direction: column-reverse，但 HTML 中仍保持 figcaption 在前或后，不破坏语义流
• figcaption 不能为空（只含空格也会被忽略），多段说明请拆成多个 figure

最容易被忽略的是 DOM 顺序和语义分工：figcaption 写在哪儿，决定了读屏器先读什么；alt 写成什么样，决定了盲人能不能理解图里有什么。这两件事没做对，其他所有样式和交互都白搭。