figcaption必须作为figure的第一个或最后一个子元素，否则读屏器跳过说明、SEO丢失图文关联；alt描述图像内容，figcaption说明上下文；仅“可抽离+可独立引用”的图适用figure。
figcaption 不能单独存在，必须嵌在 figure 内且只能是第一个或最后一个子元素；写错位置、漏 alt、或把图注当装饰用，都会让读屏器跳过说明、SEO 丢失图文关联。
figcaption 必须紧贴 figure 开头或结尾
浏览器和读屏器靠 DOM 顺序判断归属关系，不是靠 CSS 渲染位置。中间插一个 <p></p>、<div> 或空格节点，语义就断了。
<ul>
<li>✅ 正确：<code><figure><figcaption>图2:API 响应结构</figcaption><img src="x.png" alt="..."></figure>
<figure><img src="x.png" alt="..."><figcaption>图2:API 响应结构</figcaption></figure>
<figure><img alt="HTML图片说明figcaption怎么写_HTML图像描述定义" ><div class="meta">来源：BI 系统</div>
<figcaption>...</figcaption></figure>（<div> 插在中间）
<li>别用 <code>flex-direction: column-reverse 或 order 强行视觉翻转——DOM 顺序没变，但读屏器会先读图再读标题，逻辑混乱figcaption 和 img 的 alt 属性不能互换
alt 是图像缺失时的替代文本，面向盲人和搜索引擎；figcaption 是整张图的上下文说明，面向所有用户。两者信息维度不同，照抄或省略任一都破坏可访问性。
-
alt要描述“图里有什么”：比如alt="折线图：横轴为月份，纵轴为日活用户数，2月到4月持续上升" -
figcaption要说明“为什么放这里”：比如<figcaption>图3:Q1 用户增长加速与新渠道投放时间高度重合</figcaption> -
alt=""表示图纯装饰 → 此时不该加figcaption，否则语义矛盾 - 轮播图单帧、头像旁昵称、按钮图标这类内容，直接用
<img alt="...">即可，不进figure
哪些图真该用 figure + figcaption？
不是所有配图都适合。只有满足「可抽离 + 可独立引用」才用——删掉它，正文照样通顺；挪到附录里，标题依然准确。
立即学习“前端免费学习笔记（深入）”；
- 适用：
<figure></figure>包裹代码截图（<pre class="brush:php;toolbar:false;"></pre>）、SVG 架构图、带编号的数据图表、论文插图 - 不适用：banner 图、文章内辅助某句话的示意图（如“点击右上角保存按钮”，配个箭头图）、产品列表里的小图标
- 轮播图每张图要各自套一个
figure，不能一个figure包一堆img - 如果图注需 JS 动态插入，确保插入后
figcaption仍在figure的首或尾，且不打乱原有子元素顺序
默认样式坑和基础修复
figure 几乎没有默认边距或边框，figcaption 默认居中、字体略小，但图片下方常有空白——那是 <img alt="HTML图片说明figcaption怎么写_HTML图像描述定义" > 默认内联对齐基线导致的。
- 必加样式：
figure img { display: block; }消除底部间隙 - 居中图注建议：
figure { text-align: center; }，而非依赖text-align对figcaption本身（它是块级） - 响应式下别给
figcaption设固定宽，文字可能撑破容器；用max-width控制figure更稳妥 - 不要用
position: absolute把figcaption移出文档流——读屏器很可能忽略它
最常被忽略的是：figcaption 的位置不是“怎么好看怎么来”，而是“读屏器怎么读才合理”。DOM 顺序决定播报流，视觉样式只是表层——结构错了，再好看的 CSS 也救不回语义断裂。
