HTML figure、figcaption 标签：组合内容与设置图注位置

HTML <figure> 将插图、图表或代码等自包含内容分组成一个单元，<figcaption> 提供其图注。将单个 figcaption 放在 figure 的第一个或最后一个子元素；如果不需要图注，则省略它。

figure 只能用于图片吗？

您可以使用 figure 来表示照片、插图、图表、代码示例或文本中提到为一个项目的引用。仅当您只需要一个样式容器时使用 div，并避免将整个相关部分包裹在 figure 中。使用此元素不会自动验证材料的版权或来源。

figcaption 描述其直接父元素 figure 中的其余内容。它必须放在 figure 内，每个 figure 最多只能有一个 figcaption。如果上下两部分都需要说明，请将必要的说明集中在一个 figcaption 中。

完整示例：将图注放在最前面或最后面

将以下代码保存为 figures.html 并在浏览器中打开。该示例使用 SVG（可缩放矢量图形）绘制简单形状，因此无需单独的图像文件即可运行。第一个项目的图注在图形之前；第二个项目的图注在图形之后。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>比较 figure 图注的位置</title>
  <style>
    figure { margin: 1rem 0; max-width: 20rem; }
    svg { display: block; width: 100%; height: auto; }
    figcaption { padding: 0.5rem 0; }
  </style>
</head>
<body>
  <h1>比较两种图形</h1>
  <figure>
    <figcaption>图A. 蓝色圆形</figcaption>
    <svg viewBox="0 0 240 120" role="img" aria-label="浅色背景中央的蓝色圆形">
      <rect width="240" height="120" fill="#f0f3f5" />
      <circle cx="120" cy="60" r="36" fill="#176e96" />
    </svg>
  </figure>
  <figure>
    <svg viewBox="0 0 240 120" role="img" aria-label="浅色背景中央的橙色正方形">
      <rect width="240" height="120" fill="#f0f3f5" />
      <rect x="84" y="24" width="72" height="72" fill="#b35a12" />
    </svg>
    <figcaption>图B. 橙色正方形</figcaption>
  </figure>
</body>
</html>

圆形上方显示“图A. 蓝色圆形”，正方形下方显示“图B. 橙色正方形”。缩窄窗口时，SVG 会随 figure 的宽度缩小。比较图注位置时，应将 figcaption 移到 figure 内的开头或末尾，不能移到 figure 外部。

图注和图片替代文本有不同的作用

一个 figcaption 可以包含标题、说明或对所有读者可见的来源。图像的 alt 为无法看到图像的读者提供替代内容。不要仅仅因为存在图注就自动将重要图像的 alt 留空，也不要在两个地方逐字重复每个说明。

示例使用 SVG 而不是 img，因此它通过 role 和 aria-label 提供图形的描述。对于使用 img 插入的照片，请指定 src 和 alt 以及必要的尺寸。如果图表传达数字比较，请考虑简短图注是否足够，并在正文或表格中提供其关键数据。

figure 元素不会自动生成图注或图编号，其默认边距取决于浏览器和 CSS。如果需要编号，请与文档中的引用保持一致。MDN 的 figure 元素参考 和 MDN 的 figcaption 元素参考 解释了详细的元素规则。