应使用组合实现图文语义关联，而非div+p模拟；figcaption须为figure首个或最后一个子元素，alt与figcaption分工明确，装饰性或内联图片不应滥用figure。
直接说结论：用 <figure></figure> 包裹图片和文字，用 <figcaption></figcaption> 放描述，语义清晰、无障碍友好、SEO 友好——但很多人错在把它当“美化容器”用，结果反而破坏可访问性。
为什么不能只用 div + p 模拟图文组合
常见错误是写成：<div>
<img src="..."><p>这是一只橘猫</p>
</div>。问题在于：
-
<p></p>和<img>之间没有语义关联，屏幕阅读器不会自动把这段文字识别为该图的说明 - 搜索引擎无法明确判断这段文字是否属于图片的替代性描述（而非正文）
- 响应式或打印样式中，
<p></p>容易被单独断行或隐藏，导致图文分离
figure 和 figcaption 的正确嵌套结构
必须严格遵循：一个 <figure></figure> 元素内，最多一个 <figcaption></figcaption>，且它必须是 <figure></figure> 的第一个或最后一个子元素（推荐放最后，符合视觉流）。
<figure><img src="cat.jpg" alt="一只蹲在窗台上的橘猫，耳朵竖立，尾巴卷曲"><figcaption>图1：室内窗台上的家猫，拍摄于2024年春</figcaption></figure>
注意：
-
alt属性仍不可省略，它面向的是图片加载失败或纯文本环境；<figcaption></figcaption>是面向所有用户的补充说明，可以更详细、带上下文 -
<figcaption></figcaption>里可以包含链接、强调标签（如<em></em>），但不宜塞进大段段落或多个标题 - 不要为了“每个图都加 caption”而硬凑文字，空
<figcaption></figcaption>比乱写更伤可访问性
figcaption 放上面还是下面？CSS 怎么微调位置
默认渲染在图片下方，这是最符合阅读习惯的位置。如果设计要求 caption 在上方，不要用 position: absolute 把它提上去——这会破坏 DOM 顺序，影响屏幕阅读器朗读顺序。
稳妥做法是调整 HTML 结构 + Flex：
<figure style="display: flex; flex-direction: column;"><figcaption>图1：窗台上的猫</figcaption><img src="cat.jpg" alt="..."></figure>
这样 DOM 顺序和视觉顺序一致，也兼容打印样式。若需居中对齐 caption，用 text-align: center 即可，别用 margin: auto 配合块级设置，容易在窄屏下溢出。
什么时候不该用 figure/figcaption
不是所有带图的文字都是“图注”。以下情况建议不用：
- 图片是装饰性的（比如背景花纹、分隔线），应使用 CSS
background-image，不进 HTML 流 - 图片是正文内联元素（如公众号里插在段落中间的表情图），用
<img>+alt足够，加<figure></figure>反而割裂语义 - 一组图片共用一个说明（如画廊缩略图墙），此时应由外层容器统一描述，而不是给每张图套独立
<figure></figure>
真正的难点不在写法，而在判断：这段文字是不是这张图的“专属解释”？如果是，<figure></figure> 才成立；否则，老实用 alt 或普通段落。
