媒体内容容器标签 - <figure>

什么是 <figure> 标签？

<figure> 标签用于表示独立的内容单元，通常是与文档主要内容相关的图像、图表、照片、代码片段等媒体内容。它可以包含一个或多个媒体元素，并且可以与 <figcaption> 标签一起使用来提供标题或说明。

基本语法

html 
<figure>
  <img src="image.jpg" alt="图片描述">
</figure>

与 <figcaption> 一起使用

<figure> 标签通常与 <figcaption> 标签一起使用，后者用于提供媒体内容的标题或说明：

html 
<figure>
  <img src="chart.jpg" alt="年度销售图表">
  <figcaption>2025年产品销售图表</figcaption>
</figure>

包含多种媒体内容

<figure> 标签可以包含多种媒体内容，例如图像、视频、音频或代码片段：

html 
<!-- 包含图片和标题 -->
<figure>
  <img src="painting.jpg" alt="蒙娜丽莎">
  <figcaption>达·芬奇的《蒙娜丽莎》</figcaption>
</figure>

<!-- 包含视频和标题 -->
<figure>
  <video src="interview.mp4" controls width="640" height="360"></video>
  <figcaption>产品经理访谈视频</figcaption>
</figure>

<!-- 包含代码片段和标题 -->
<figure>
  <pre><code>function hello() {
  console.log("Hello World");
}</code></pre>
  <figcaption>JavaScript的Hello World示例</figcaption>
</figure>

全局属性

<figure> 标签支持所有HTML全局属性，包括 class、id、style 等。

示例：

html 
<!-- 使用class样式的figure -->
<figure class="gallery-item">
  <img src="photo.jpg" alt="风景照片">
  <figcaption>山间小溪</figcaption>
</figure>

语义化意义

<figure> 标签具有明确的语义化意义：

  1. 独立性：内容本身是完整的，可以独立于文档的主要内容存在

  2. 关联性：虽然独立，但与文档的主要内容相关

  3. 完整性：通常包含媒体内容及其说明（如果提供）

  4. 可移动性：可以被移动到文档的其他位置（如附录）而不影响文档的整体理解

最佳实践

  1. 用于相关的媒体内容：使用 <figure> 标签组织与文档内容相关的媒体元素

  2. 提供标题或说明：当需要为媒体内容提供上下文时，使用 <figcaption> 标签

  3. 保持语义一致性：确保 <figure> 内的内容确实是独立的内容单元

  4. 使用合适的CSS样式：可以为 <figure> 添加样式以控制其显示方式

示例

html 
<!-- 基础figure -->
<figure>
  <img src="flower.jpg" alt="一朵红色的花">
</figure>

<!-- 带标题的figure -->
<figure>
  <img src="sunset.jpg" alt="海滩日落">
  <figcaption>加利福尼亚州马里布海滩的日落美景</figcaption>
</figure>

<!-- 包含多个图像的figure -->
<figure>
  <img src="city1.jpg" alt="城市景观1" width="300">
  <img src="city2.jpg" alt="城市景观2" width="300">
  <img src="city3.jpg" alt="城市景观3" width="300">
  <figcaption>不同角度的城市天际线</figcaption>
</figure>

<!-- 包含音频的figure -->
<figure>
  <audio src="podcast-clip.mp3" controls></audio>
  <figcaption>播客剪辑：如何提高工作效率</figcaption>
</figure>

<!-- 包含表格的figure -->
<figure>
  <table>
    <caption>产品价格表</caption>
    <tr>
      <th>产品名称</th>
      <th>价格</th>
    </tr>
    <tr>
      <td>产品A</td>
      <td>$99</td>
    </tr>
    <tr>
      <td>产品B</td>
      <td>$149</td>
    </tr>
  </table>
  <figcaption>2025年产品价格表</figcaption>
</figure>

浏览器兼容性

<figure> 标签在所有现代浏览器中都得到支持，包括Chrome、Firefox、Safari、Edge和Opera。对于旧版本的Internet Explorer（IE8及以下），不支持该标签，但可以使用HTML5 Shiv等工具进行兼容处理。

总结

<figure> 标签是HTML5中引入的语义化标签，用于表示独立的媒体内容单元。它可以包含图像、视频、音频、代码片段等多种媒体内容，并可以与 <figcaption> 标签一起使用来提供标题或说明。正确使用 <figure> 标签可以提高文档的语义化程度和可访问性。

最后更新：2026-02-07