HTML 教程 / 使用 figure 和 figcaption 关联图片与说明

figure 汇总独立内容，例如图像、图形或代码示例，而 figcaption 为这组内容提供可见的说明。并非所有图像都需要这些元素。当内容及其说明构成一个整体时使用它们。

将图片与说明放在一起

旅行照片与交代拍摄地点或背景的说明，可以组成一个独立的内容单元。将 figcaption 作为 figure 的第一个或最后一个子元素放置。本例使用使用 img 插入图片：替代文本与尺寸中的同一张图片，并沿用其相对路径写法。

<figure>
  <img src="html-image-sample-lake-tree-960-v1.webp"
       alt="一棵树在湖中央的小岛上，背景是群山"
       width="960" height="540">
  <figcaption>图示：本课使用的湖和树</figcaption>
</figure>

如果图片超过内容宽度，请将此 CSS 添加到 head 中的 style 元素中。更改图片说明不会自动更改替代文本，因此需要分别检查每一个。

figure { margin: 1rem 0; }
figure img { max-width: 100%; height: auto; }

下载宽度为960像素的示例图片，并将其保存到HTML文件旁边。在body中插入以下HTML代码，并在head的style元素中插入CSS规则。文件名为html-image-sample-lake-tree-960-v1.webp，实际大小为960×540像素。说明文字出现在下方；将figcaption移动到第一个子元素的位置以将其置于顶部。

替代文本和说明文字具有不同的功能

文本 alt 在图像无法被感知时传递图像的信息或功能。可见的 figcaption 为所有人提供标题、来源或上下文。将两者完全重复可能会导致冗余的阅读体验。在此示例中，alt 属性描述了可见信息，而图片说明则标识其作为课程示例的角色。在使用键盘时，同时检查图像的功能，见 无障碍基本原则：标题、链接、图像和键盘 。

对于纯装饰性的图片，可以考虑使用 alt=""，但首先请确保重要信息在其他地方可获取。图形应该传达其主要趋势或结果，而不仅仅是标注“条形图”。如果其数据需要更长的说明，请在附近的文本或表格中提供，并让替代文本提醒读者注意。 W3C WAI 的决策树 可帮助进行该选择。

何时可以省略 figure？

在段落流中的普通图片，如果没有单独的标题或引用，就不需要 figure。作为“下图”讨论的图表，或带有标题的代码示例，是更合适的候选。一个 figure 可以包含多个图片。关于其内容模型，请参见 MDN 上的 figure 参考。

要在图片说明中链接来源，请按如下方式替换之前的 figcaption。该链接指向提供实际示例文件的课程。对于其他图片，请识别其实际作者/来源并检查使用条款；简单提及并不意味着获得许可。

<figcaption>示例图片来源： <a href="https://www.codingfactory.net/zh/18645">图片基础教程提供的文件</a>.</figcaption>

图片下方显示来源引用和链接，而 alt 属性仍然描述树、湖和山。不需要在 alt 文本中重复所有归属细节。

如果结果显示不正确

浏览器默认可能会在 figure 周围添加边距。在修改 HTML 结构之前，请检查其 CSS margin。如果图片缺失，请检查文件名和相对路径。如果图片说明缺失，请确保 figcaption 位于 figure 内且结束标签存在。图片说明并不会自动提供合适的替代文本；请分别检查两者。