37. 图像 figure 与 figcaption

图片加说明文字是个常见需求。但说明文字和图片之间如果没有语义关联，屏幕阅读器就不知道它们是一组的。

基本结构

<figure>
  <img src="sunset.jpg" alt="日落时分的海滩" />
  <figcaption>图 1：日落时分的海滩，摄于三亚</figcaption>
</figure>

<figure> 是容器，<figcaption> 是说明文字。它们形成了一组语义关联的内容。

为什么不用 div + p

你可能会想，用 <div> 和 <p> 不也能实现同样的效果吗？

<!-- 视觉上一样，但语义上不关联 -->
<div class="figure">
  <img src="sunset.jpg" alt="日落时分的海滩" />
  <p>图 1：日落时分的海滩，摄于三亚</p>
</div>

区别在于语义层面：

• <figure> 告诉浏览器和辅助技术：这是一个独立的内容单元
• <figcaption> 告诉浏览器：这段文字是前面图片的标题/说明
• 屏幕阅读器会朗读：“图片：日落时分的海滩。图 1：日落时分的海滩，摄于三亚”

figure 里可以放什么

<figure> 不局限于图片。任何独立的内容单元都可以用它包裹：

<!-- 图片 -->
<figure>
  <img src="chart.png" alt="销售趋势图" />
  <figcaption>图 2：季度销售趋势</figcaption>
</figure>

<!-- 代码块 -->
<figure>
  <pre><code>console.log("Hello");</code></pre>
  <figcaption>代码示例 1：打印 Hello</figcaption>
</figure>

<!-- 引用 -->
<figure>
  <blockquote>
    <p>Stay hungry, stay foolish.</p>
  </blockquote>
  <figcaption>—— 史蒂夫·乔布斯</figcaption>
</figure>

<!-- 视频 -->
<figure>
  <video src="demo.mp4" controls></video>
  <figcaption>产品演示视频</figcaption>
</figure>

figcaption 的位置

<figcaption> 可以放在 <figure> 的开头或结尾：

<!-- 说明在前 -->
<figure>
  <figcaption>图 3：系统架构</figcaption>
  <img src="architecture.png" alt="系统架构图" />
</figure>

<!-- 说明在后（更常见） -->
<figure>
  <img src="architecture.png" alt="系统架构图" />
  <figcaption>图 3：系统架构</figcaption>
</figure>

多个图片共享一个 figcaption

如果一组图片共享一个说明：

<figure>
  <img src="photo1.jpg" alt="产品正面" />
  <img src="photo2.jpg" alt="产品侧面" />
  <img src="photo3.jpg" alt="产品背面" />
  <figcaption>图 4：产品多角度展示</figcaption>
</figure>

和 alt 的关系

alt 和 <figcaption> 承担不同的角色：

• alt：图片无法显示时的替代文本，描述图片内容
• <figcaption>：图片的标题/说明，对所有用户可见

它们的内容不应该重复。如果图片已经在正文中详细描述了，alt 可以简短些，<figcaption> 写编号和标题。

<figure>
  <img src="team.jpg" alt="研发团队在办公室" />
  <figcaption>图 5：研发团队在办公室讨论方案</figcaption>
</figure>

实际应用场景

文章配图

<article>
  <h2>产品发布</h2>
  <p>我们很高兴地宣布...</p>

  <figure>
    <img src="product-launch.jpg" alt="发布会现场" width="800" height="450" />
    <figcaption>图 1：产品发布会现场</figcaption>
  </figure>

  <p>现场气氛热烈...</p>
</article>

图片画廊

<div class="gallery">
  <figure>
    <img src="nature-1.jpg" alt="山间小溪" />
    <figcaption>山间小溪</figcaption>
  </figure>

  <figure>
    <img src="nature-2.jpg" alt="秋日森林" />
    <figcaption>秋日森林</figcaption>
  </figure>

  <figure>
    <img src="nature-3.jpg" alt="雪山日出" />
    <figcaption>雪山日出</figcaption>
  </figure>
</div>

数据图表

<figure>
  <img src="sales-chart.png"
       alt="2026年Q1-Q4销售额柱状图，详细数据见正文表格" />
  <figcaption>图 6：2026年季度销售额对比</figcaption>
</figure>

样式控制

<figure> 和 <figcaption> 可以用 CSS 自由样式化：

figure {
  margin: 1.5em 0;
  border: 1px solid #eee;
  padding: 10px;
  border-radius: 8px;
}

figcaption {
  text-align: center;
  color: #666;
  font-size: 0.9em;
  margin-top: 8px;
}

小结

标签	作用
<figure>	包裹独立内容单元（图片、代码、视频等）
<figcaption>	为 figure 内容提供标题/说明

<figure> + <figcaption> 是 HTML 中给内容加说明的标准方式。语义清晰、可访问性好、SEO 友好。

模块四到此结束。第 38 章是回顾测验，由后续流程处理。