首页 技术设计 前端 html

在 HTML 中， <figure> 和 <figcaption> 是用于包含视觉内容和相关说明的元素。该元素通常用于图像、图表、插图或其他媒体内容的语义标记。通过使用这些标签，我们可以更好地将内容和结构信息分离，提升网页的可读性和可访问性。在创建一个复杂和内容丰富的网页时，合理地使用这些标签不仅能增强网页的语义，也有助于搜索引擎优化（seo）。

# 作用

首先，让我们深入了解一下 <figure> 元素的作用。 <figure> 用于封装自包含的内容，通常是媒体元素及其说明，使它们与正文内容分开。例如，一个常见的用例是文章中的图像。我们可以将图像和它的标题或描述一起放在 <figure> 和 <figcaption> 标签中。

<figure>
  <img src="path/to/image.jpg" alt="Description of the image">
  <figcaption>这是一张关于主题的图像的描述。</figcaption>
</figure>

在上述示例中， <img> 标签用于包含图像文件，而 <figcaption> 提供了图像的说明。通过这种方式，即使图像无法加载，用户仍然能够通过 <figcaption> 或 <img> 的 alt 属性了解该图像内容。

# 优点

1、使用 <figure> 标签的一个显著优点是，它能使内容的可搬运性更好。

即使将 <figure> 中的内容从文档中移动到另一个位置，或者即使当相关文本内容被修改， <figure> 中的内容依旧能自描述。这对于长篇文章或者是需要插入多个图片、图表的报告来说，极其有用。

2、在打印样式或用于生成文档的场景中， <figure> 以及配合使用的 <figcaption> 能够帮助明确哪些内容应当被视为整体。

通过对比那些单纯使用 <img> 标签加上文本说明的做法， <figure> 更加具有优越性，因为通常浏览器会将图像和说明视作一个整体块元素，从而在显示和打印时保持其结构。

3、扩展使用 <figure> 不仅局限于图片。

许多其他类型的自包含内容都可以使用 <figure> 进行包裹，比如视频、音频、图表乃至代码块。下面是一个将 <figure> 用于视频的例子：

<figure>
  <video controls src="video/nature.mp4">
    浏览器不支持视频播放。
  </video>
  <figcaption>一段展示自然风光的视频。</figcaption>
</figure>

4、通过 CSS 对 <figure> 和 <figcaption> 进行样式化，可以进一步使内容在视觉上更加分明。

例如，你可以给 <figcaption> 添加一些样式，使得说明文字与正文区分开来，达到更好的界面设计效果：

figure {
  margin: 20px; 
  border: 1px solid #000;
  padding: 20px;
}
figcaption {
  font-style: italic;
  text-align: center;
  color: gray;
}
通过上面的 CSS 代码， <figure> 元素被设置了一些外边距及内边距，并加上了边框，使其与其他内容区分开；而 <figcaption> 被设置为斜体字居中显示，并使用了灰色字体颜色，这样说明文字显得更优雅，用户能更清晰地理解配图的信息。
5、合理使用 <figure> 和 <figcaption> 标签还能提升网页的无障碍性。
比如，屏幕阅读器可以依据这些标签提供更多的背景信息，从而帮助视障用户更好地理解网页内容。
如果一个网页中包含数据图表或者大型图示，为了确保每个用户都能获取到相关的信息描述，用 <figure> 来封装这些媒体内容就显得尤为重要。这里是一个使用 <figure> 为数据图表添加说明的例子：
<figure>
  <img src="chart.png" alt="年度销售增长图">
  <figcaption>图1：显示公司过去五年的年度销售增长率。</figcaption>
</figure>
在这个例子中， <figcaption> 为用户提供了清晰的信息，以便即使在没有查看图像的情况下，也可以了解其所表现的数据的意义。通过这种方式，我们使内容不仅包装得更漂亮，也确保信息更具可达性。
# 总结
综上所述，使用 <figure> 和 <figcaption> 是增强 HTML 文档语义的一种简便而有效的方法。它们能集合自成一体的内容并使其与主流文本相互独立，提升网页的视觉效果、可阅读性和无障碍性。希望通过这个详细的解释，您能够在自己的网页开发中有效地应用这些标签，使内容传达更加丰富和专业。