figure 和 figcaption 是 html5 中定义独立图元及其说明的语义组合，须满足“脱离正文仍自解释”前提，figcaption 必为 figure 直接子元素且仅能位于首或尾，alt 与 figcaption 各司其职不可互换。
figure 和 figcaption 不是“给图片加标题”的快捷写法，而是 HTML5 中定义独立图元及其说明的语义组合。用对了，能提升可访问性、SEO 和内容结构清晰度；用错了，反而割裂图文关系，让屏幕阅读器跳过关键信息。
必须满足“独立可引用”前提
只有当内容脱离正文仍能自解释、可被编号引用（如“见图2”）、移除后不影响主文逻辑时，才适用 figure+figcaption：
- 图表、信息图、架构图、代码截图、流程图、引文块
- 说明文字需含编号（“图3-1”）、核心结论或数据来源，而非“如图所示”这类空泛表述
- 纯装饰头图、轮播单帧、列表小图标、产品主图、头像旁昵称——都不属于独立图元，不应套用
figcaption 位置与结构硬约束
figcaption 必须是 figure 的**直接子元素**，且只能出现在第一个或最后一个位置：
- ✅ 正确：
图1：用户增长趋势 - ✅ 正确：
数据来源：2024年Q1埋点 - ❌ 错误：figcaption 被 div 包裹后再塞进 figure
- ❌ 错误：figcaption 夹在 img 和其他元素（如
、
- 一个 figure 只能有一个 figcaption；多段说明请拆成多个 figure
alt 与 figcaption 各司其职，不可互换
两者面向不同场景，信息维度互补：
- alt 是图像的替代文本：描述“图里有什么”，用于加载失败、纯文本环境或读屏器快速播报，建议 ≤125 字符，例如：
alt="柱状图：iOS 与 Android 次日留存率对比" - figcaption 是图元的上下文说明：解释“为什么放在这里”，可含编号、结论、背景、来源等，例如：
<figcaption>图4：Android 留存率持续领先 iOS，差距达 7.2%～9.8%（数据截止2024-03-31）</figcaption> - alt="" 表示该图纯装饰——此时就不该用 figure
- 把 figcaption 内容复制进 alt，或反过来，都会削弱语义价值和无障碍支持
响应式与样式注意事项
语义结构稳定，但样式处理不当容易破坏可访问性：
- figure 默认仅有上下 margin，无 padding/border；重置时注意保留或显式清除 margin
- figcaption 默认块级、居中、字号略小；若用 Flex/Grid 布局控制对齐，请用
justify-content或align-items，而非text-align - 避免用
position: absolute或float将 figcaption 移出文档流——读屏器可能完全忽略 - 小屏切换布局时，可用
flex-direction: column-reverse视觉翻转顺序，但 DOM 中 figcaption 仍须保持首或尾位置，确保语义流一致
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
