PHP小码农

Appearance

figure 与 figcaption ​

<figure> 和 <figcaption> 是 HTML5 中用于封装独立内容块及其说明的语义化标签组合。虽然最常用于图片说明，但 <figure> 可以包裹任何独立内容。本节将详细介绍这个标签组合的使用方法。

前置知识

阅读本节前，建议先了解：picture 与 source

基础概念 ​

<figure> 是一个独立内容块的语义化容器，用于包裹与其周围内容相关但可以独立存在的元素。<figcaption> 则是 <figure> 的可选子元素，用于为内容块提供标题或说明。

虽然最常用于图文组合，但 <figure> 的内容可以远不止图片——它可以是代码块、引用、图表、音频、视频，甚至多段文字的任意组合。

语法 ​

基本语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>figure 与 figcaption</title>
</head>
<body>
  <h1>figure 与 figcaption</h1>

  <!-- 基本用法：图片 + 说明 -->
  <figure>
    <img src="photo.jpg" alt="风景照片" width="600" height="400">
    <figcaption>图 1：山间溪流，拍摄于 2024 年春天</figcaption>
  </figure>

  <hr>

  <!-- figcaption 可以在 img 前面或后面 -->
  <figure>
    <figcaption>图 2：公司总部大楼</figcaption>
    <img src="office.jpg" alt="公司总部大楼" width="600" height="400">
  </figure>
</body>
</html>

详细说明 ​

figure 可以包含多种内容类型 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>figure 内容类型</title>
  <style>
    figure {
      margin: 20px 0;
      padding: 16px;
      border: 1px solid #ddd;
      border-radius: 8px;
    }
    figcaption {
      font-style: italic;
      color: #666;
      margin-top: 8px;
    }
  </style>
</head>
<body>
  <h1>figure 包含多种内容</h1>

  <!-- 1. 多张图片 -->
  <figure>
    <img src="product-front.jpg" alt="产品正面" width="280" height="280">
    <img src="product-side.jpg" alt="产品侧面" width="280" height="280">
    <img src="product-back.jpg" alt="产品背面" width="280" height="280">
    <figcaption>图 1：产品多角度视图</figcaption>
  </figure>

  <!-- 2. 代码块 -->
  <figure>
    <pre><code>const greeting = 'Hello, World!';
console.log(greeting);</code></pre>
    <figcaption>代码示例：JavaScript 变量声明与输出</figcaption>
  </figure>

  <!-- 3. 引用 -->
  <figure>
    <blockquote>
      <p>"学而不思则罔，思而不学则殆。"</p>
      <cite>——孔子《论语·为政》</cite>
    </blockquote>
    <figcaption>图 2：论语经典名句</figcaption>
  </figure>

  <!-- 4. 图片 + 多行说明 -->
  <figure>
    <img src="landscape.jpg" alt="湖畔风景" width="600" height="400">
    <figcaption>
      <strong>图 3：九寨沟五花海</strong><br>
      拍摄时间：2024 年 10 月<br>
      相机：Canon EOS R5 + RF 24-105mm
    </figcaption>
  </figure>
</body>
</html>

figure 的语义意义 ​

html
<!--
  figure 表示"独立的内容块"：
  - 从文中移除后不影响文章理解
  - 可以被单独引用（如"见图 3"）
  - 可以被移动到附录或侧边栏
-->

<!-- 好：图片是独立内容 -->
<figure>
  <img src="chart.png" alt="销售趋势" width="600" height="400">
  <figcaption>图 1：2024 年各月销售额趋势</figcaption>
</figure>

<!-- 不推荐：图片是文章内容不可分割的一部分 -->
<!-- 这种情况直接用 img 即可，不需要 figure -->
<p>
  如图所示，我们的解决方案
  <img src="step1.png" alt="第一步" width="200">
  非常简单易用。
</p>

figure 的默认样式与自定义 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>figure 样式</title>
  <style>
    /* figure 默认有 margin，根据需要重置 */
    figure {
      margin: 0;
      padding: 0;
      border: none;
    }

    /* 为 figure 添加统一样式 */
    .styled-figure {
      margin: 24px auto;
      max-width: 700px;
    }

    .styled-figure img {
      width: 100%;
      height: auto;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .styled-figure figcaption {
      text-align: center;
      margin-top: 12px;
      font-size: 14px;
      color: #888;
    }

    /* 左浮动图片 */
    .figure-float-left {
      float: left;
      width: 300px;
      margin: 0 20px 10px 0;
    }
    .figure-float-left img {
      width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <!-- 居中展示 -->
  <figure class="styled-figure">
    <img src="landscape.jpg" alt="风景照片" width="700" height="467">
    <figcaption>图 1：自定义样式的图文组合</figcaption>
  </figure>

  <!-- 浮动图文 -->
  <figure class="figure-float-left">
    <img src="portrait.jpg" alt="人物肖像" width="300" height="400">
    <figcaption>图 2：左浮动的图文</figcaption>
  </figure>

  <p>这段文字会环绕在左浮动的 figure 旁边。</p>
  <div style="clear: both;"></div>
</body>
</html>

实战示例 ​

学术论文风格图文 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>学术论文图文</title>
  <style>
    body {
      font-family: "Noto Serif SC", serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 40px 20px;
      line-height: 1.8;
    }
    .academic-figure {
      margin: 32px 0;
      text-align: center;
    }
    .academic-figure img {
      max-width: 100%;
      height: auto;
      border: 1px solid #ccc;
    }
    .academic-figure figcaption {
      margin-top: 8px;
      font-size: 14px;
      color: #333;
    }
  </style>
</head>
<body>
  <article>
    <h1>基于深度学习的图像识别研究</h1>
    <p>本文提出了一种基于卷积神经网络的新型图像识别方法。</p>

    <figure class="academic-figure">
      <img src="model-architecture.png"
           alt="神经网络模型架构图"
           width="600" height="400">
      <figcaption>图 1：所提出的卷积神经网络模型架构</figcaption>
    </figure>

    <p>如图 1 所示，该模型采用三层卷积结构，在 ImageNet 数据集上达到了 96.5% 的准确率。</p>

    <figure class="academic-figure">
      <img src="accuracy-comparison.png"
           alt="不同方法的准确率对比柱状图"
           width="600" height="400">
      <figcaption>图 2：不同方法在测试集上的准确率对比</figcaption>
    </figure>
  </article>
</body>
</html>

注意事项 ​

  • <figure> 不应仅用于装饰，它语义上表示"可独立引用的内容块"
  • <figcaption> 只能作为 <figure> 的第一个或最后一个子元素
  • 一个 <figure> 只能包含一个 <figcaption>
  • <figure> 默认有浏览器预设的 margin，通常需要重置
  • <figure> 是块级元素，可以包含块级和行内元素
  • 不要用 <figure> 包裹仅作为装饰的图片

最佳实践 ​

  • 为每张有意义的图片使用 <figure> + <figcaption>
  • <figcaption> 中提供有意义的编号和说明文字
  • 使用 CSS 重置 <figure> 的默认 margin
  • 根据内容类型选择合适的布局方式（居中、浮动、网格等）
  • <figcaption> 可以包含 <strong>、<br> 等子元素以丰富说明内容

下一节

继续学习：image-map 图像映射

参考链接 ​