怎样为图片或图表添加说明文字？<figure>和<figcaption>的用法

在网页开发中，为图片、图表、代码示例这类可视化内容添加清晰的说明文字是非常常见的需求。过去我们可能会用普通的<div>或者<p>标签来放说明文字，但这种方式无法在语义上明确说明文字和对应内容的关联关系。HTML5引入了<figure>和<figcaption>两个标签，专门用来解决这个问题，既提升了页面的语义化程度，也方便屏幕阅读器等辅助工具识别内容和说明的对应关系。

标签基本说明

<figure>是一个语义化容器标签，用来包裹独立的、可引用的内容单元，比如图片、图表、代码片段、视频等。这些内容即使从文档流中单独拿出来，也能独立表达完整的含义。

<figcaption>是<figure>的子标签，用来为<figure>内部的内容添加说明文字，一个<figure>元素内最多可以包含一个<figcaption>标签，它可以放在<figure>的开头或者结尾位置。

基础用法示例

最常见的场景是为图片添加说明文字，下面是一段完整的示例代码：

<!-- 为图片添加说明的示例 -->
<figure>
  <img src="product-show.jpg" alt="2024款智能手表实物展示" width="600" height="400">
  <figcaption>图1：2024款智能手表正反面实物图，支持心率监测和睡眠跟踪功能</figcaption>
</figure>

这段代码中，<figure>包裹了图片<img>和说明文字<figcaption>，浏览器会默认知道<figcaption>的内容是对前面图片的说明，辅助工具读取时会先把<figure>的内容整体识别，再关联说明文字，比用普通标签区分更清晰。

图表场景的用法

当我们需要展示图表并添加说明时，同样可以用这两个标签，比如下面是一个柱状图的示例：

<!-- 为图表添加说明的示例 -->
<figure>
  <figcaption>图2：2023年各季度产品销量统计</figcaption>
  <div class="chart-container">
    <!-- 这里是用CSS绘制的柱状图，实际开发中也可以用canvas或者图表库生成 -->
    <div class="bar q1" style="height: 120px;">Q1: 1200件</div>
    <div class="bar q2" style="height: 180px;">Q2: 1800件</div>
    <div class="bar q3" style="height: 150px;">Q3: 1500件</div>
    <div class="bar q4" style="height: 210px;">Q4: 2100件</div>
  </div>
</figure>

这里我们把<figcaption>放在了<figure>的开头，说明文字在图表上方，同样能正确关联说明和图表内容，你可以根据实际排版需求调整<figcaption>的位置。

注意事项

• <figcaption>必须是<figure>的直接子元素，不能嵌套在其他标签内部，否则无法正确建立关联。
• 如果<figure>内部有多个同类内容，比如一组相关的图片，说明文字可以概括整个组的内容，不需要为每个内容单独加说明。
• 不要滥用<figure>标签，只有那些独立、可引用的内容才适合用这个标签包裹，普通的内联图片如果没有独立的说明需求，直接用<img>标签即可。

样式定制示例

默认的<figure>和<figcaption>样式比较简单，我们可以通过CSS自定义它们的外观，比如让说明文字居中、调整颜色：

/* 自定义figure和figcaption的样式 */
figure {
  margin: 20px auto;
  max-width: 650px;
  text-align: center;
}

figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

上面的CSS让<figure>在页面中居中显示，最大宽度不超过650px，同时给<figcaption>设置了灰色文字和小字号，让说明文字和正文区分开，视觉效果更清晰。

figure标签figcaption用法图片说明文字HTML5语义化网页开发