figure与figcaption是html5中专为图文关联设计的语义化标签，用于明确表达图与其说明文字的逻辑关系；figcaption必须是figure的直接子元素且仅能有一个，用于提供独立内容的标题、来源或注释。
Figure 与 figcaption 是 HTML5 中专为图文关联设计的语义化标签组合，核心价值在于明确表达“图与其说明文字”的逻辑关系，而非仅实现视觉排版。
语义优先：什么时候必须用 figure/figcaption？
当图片、图表、代码块、引用等内容具有独立意义，且需要配一段说明性文字（标题、来源、注释等）时，就该用 figure 包裹内容，再用 figcaption 作为其首个或最后一个子元素。例如：
- 文章中插入一张产品截图，并附带“图1：后台管理界面布局”
- 技术文档里展示一段 JSON 示例，并标注“清单 2：用户配置示例”
- 博客中嵌入一张信息图，并注明“数据来源：2024 年公开调研报告”
注意：figcaption 必须是 figure 的直接子元素，且最多只能有一个（W3C 规范限定）。
默认样式与基础布局控制
浏览器对 figure 默认仅设上下外边距，figcaption 默认显示为块级、居中、字体略小。若需常规图文左图右文或上图下文，推荐用 CSS Flex 或 Grid 控制：
- 上图下文（默认流式）：无需额外样式，
figcaption放在figure底部最自然 - 左图右文：给
figure设display: flex; align-items: flex-start;，再控制图片宽高和文字区域最小宽度 - 响应式处理：可用
@media在小屏下切回上下结构，避免文字被压缩
可访问性与 SEO 隐含收益
屏幕阅读器会将 figcaption 自动识别为 figure 内容的描述，显著提升残障用户理解效率；搜索引擎也更倾向把 figure + figcaption 组合视为高质量图文单元，有助于图片内容被准确索引。务必确保 figcaption 文字简洁准确，避免“如图所示”这类无信息量表述。
常见误区提醒
- 不要只为“加个标题”而滥用：纯装饰性图标、背景图、按钮图标等无需
figure - 不要嵌套多个
figcaption：一个figure只能有一个说明，多说明请拆分为多个figure - 图片本身已有
alt属性，figcaption不重复替代它：前者面向无障碍，后者面向上下文解释
用对了，既干净又专业；用错了，反而破坏语义结构。不复杂但容易忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
