当前位置:知识文库 ❯ 图文

语义结构：HTML figure与figcaption标签详解 - 图片说明语义化

教程简介

<figure> 和 <figcaption> 是HTML5引入的一对语义化标签，用于将图片、图表、代码示例等自包含内容与其标题/说明关联起来。<figure> 作为容器包裹自包含的内容，<figcaption> 作为其标题或说明文字，两者配合使用能够清晰地表达"这是一段有说明的引用内容"的语义。本教程将详细介绍这对标签的使用方法、适用场景及最佳实践。

核心概念

figure标签的定义

<figure> 标签表示一段自包含的内容，通常带有标题（<figcaption>），内容可以是一张图片、一个图表、一段代码、一首诗等。<figure> 的内容与主内容相关，但即使移到文档其他位置也不影响主内容的理解。

figcaption标签的定义

<figcaption> 标签是 <figure> 的标题或说明文字，用于描述 <figure> 内的内容。一个 <figure> 中最多只能有一个 <figcaption>，可以放在 <figure> 的开头或结尾。

figure与img的区别

特性	<img>	<figure> + <img>
语义	仅表示图片	表示带有说明的自包含内容
标题	无内置标题机制	通过 `<figcaption>` 提供标题
关联性	图片与说明文字无语义关联	图片与说明有明确的语义关联
移动性	位置固定	可以移到文档其他位置
内容类型	仅图片	图片、图表、代码、视频等

figure的典型内容

类型	示例
图片	带有说明的照片、插图
图表	数据可视化图表
代码块	带有说明的代码示例
引用	带有出处的名人名言
视频	带有说明的视频内容
音频	带有说明的音频内容
诗歌	带有标题的诗歌作品

语法与用法

基本语法

代码示例

<figure>
  <figcaption>标题或说明文字</figcaption>
  <!-- 自包含内容：图片、图表、代码等 -->
</figure>

figure属性

属性	类型	说明	示例
`class`	String	指定CSS类名	`class="photo"`
`id`	String	指定唯一标识符	`id="fig-1"`
`role`	String	ARIA角色	`role="figure"`
`aria-label`	String	无障碍标签	`aria-label="数据图表"`
`aria-labelledby`	String	指向figcaption的ID	`aria-labelledby="caption-1"`

figcaption属性

属性	类型	说明	示例
`class`	String	指定CSS类名	`class="caption"`
`id`	String	指定唯一标识符	`id="caption-1"`

嵌套规则

规则	说明
figure的父元素	任何流内容元素
figure的子元素	`<figcaption>` 和流内容元素
figcaption的父元素	只能是 `<figure>`
figcaption的位置	`<figure>` 的第一个或最后一个子元素
figcaption的数量	每个 `<figure>` 最多一个

代码示例

示例1：图片与说明

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Figure与Figcaption图片示例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      line-height: 1.6;
      color: #333;
      background: #f5f5f5;
      padding: 2rem;
    }

    main {
      max-width: 800px;
      margin: 0 auto;
    }

    h1 {
      font-size: 2rem;
      color: #2c3e50;
      margin-bottom: 1.5rem;
    }

    p {
      margin-bottom: 1rem;
    }

    /* figure样式 */
    figure {
      margin: 2rem 0;
      background: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    figure img {
      width: 100%;
      height: 300px;
      object-fit: cover;
      display: block;
    }

    /* 使用CSS渐变模拟图片 */
    .landscape-img {
      background: linear-gradient(135deg, #74b9ff 0%, #0984e3 30%, #00b894 60%, #55a630 100%);
      width: 100%;
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 3rem;
    }

    .city-img {
      background: linear-gradient(135deg, #2c3e50 0%, #3498db 50%, #e74c3c 100%);
      width: 100%;
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 3rem;
    }

    figcaption {
      padding: 1rem 1.5rem;
      color: #555;
      font-size: 0.9rem;
      background: #fafafa;
      border-top: 1px solid #eee;
    }

    figcaption strong {
      color: #2c3e50;
    }

    /* 多图并排 */
    .gallery {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
      margin: 2rem 0;
    }

    .gallery figure {
      margin: 0;
    }

    .gallery figcaption {
      font-size: 0.85rem;
    }

    @media (max-width: 600px) {
      .gallery {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <main>
    <h1>旅行摄影集</h1>
    <p>以下是一些精选的旅行摄影作品，每张照片都配有详细的说明文字。</p>

    <!-- 单张图片figure -->
    <figure>
      <div class="landscape-img">&#127956;</div>
      <figcaption>
        <strong>图1：</strong>山间日出 - 摄于黄山光明顶，清晨6点30分，云海翻涌，霞光万丈。
      </figcaption>
    </figure>

    <p>黄山的日出是许多摄影爱好者梦寐以求的拍摄场景，每年吸引数以万计的游客前来观赏。</p>

    <!-- 多图并排 -->
    <div class="gallery">
      <figure>
        <div class="landscape-img" style="height: 200px;">&#127795;</div>
        <figcaption><strong>图2：</strong>原始森林 - 西双版纳热带雨林</figcaption>
      </figure>
      <figure>
        <div class="city-img" style="height: 200px;">&#127961;</div>
        <figcaption><strong>图3：</strong>城市天际线 - 上海陆家嘴夜景</figcaption>
      </figure>
    </div>
  </main>
</body>
</html>

示例2：代码示例与图表

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Figure代码与图表示例</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: sans-serif; line-height: 1.6; color: #333; background: #fafafa; padding: 2rem; }

    main { max-width: 800px; margin: 0 auto; }

    h1 { font-size: 1.8rem; color: #2c3e50; margin-bottom: 1.5rem; }
    p { margin-bottom: 1rem; }

    figure {
      margin: 2rem 0;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    /* 代码figure */
    .code-figure pre {
      background: #2d2d2d;
      color: #ccc;
      padding: 1.5rem;
      font-family: "Consolas", "Monaco", monospace;
      font-size: 0.9rem;
      line-height: 1.6;
      overflow-x: auto;
    }

    .code-figure .keyword { color: #c678dd; }
    .code-figure .string { color: #98c379; }
    .code-figure .function { color: #61afef; }
    .code-figure .comment { color: #5c6370; }

    /* 图表figure */
    .chart-figure .chart-container {
      background: white;
      padding: 2rem;
    }

    .bar-chart {
      display: flex;
      align-items: flex-end;
      gap: 1.5rem;
      height: 200px;
      padding: 0 1rem;
      border-bottom: 2px solid #ddd;
      border-left: 2px solid #ddd;
    }

    .bar {
      flex: 1;
      background: linear-gradient(to top, #3498db, #2ecc71);
      border-radius: 4px 4px 0 0;
      position: relative;
      min-width: 40px;
      transition: height 0.5s;
    }

    .bar-label {
      position: absolute;
      bottom: -25px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 0.75rem;
      color: #666;
      white-space: nowrap;
    }

    .bar-value {
      position: absolute;
      top: -22px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 0.75rem;
      color: #2c3e50;
      font-weight: 600;
    }

    figcaption {
      padding: 0.8rem 1.5rem;
      color: #555;
      font-size: 0.9rem;
      background: #f8f9fa;
      border-top: 1px solid #eee;
    }

    /* 引用figure */
    .quote-figure {
      background: white;
      padding: 2rem;
      border-left: 4px solid #3498db;
    }

    .quote-figure blockquote {
      font-style: italic;
      font-size: 1.1rem;
      color: #2c3e50;
      margin-bottom: 0.5rem;
    }
  </style>
</head>
<body>
  <main>
    <h1>技术文档中的Figure应用</h1>
    <p>figure标签不仅可以用于图片，还可以用于代码示例、数据图表和引用内容。</p>

    <!-- 代码示例figure -->
    <figure class="code-figure">
      <pre><code><span class="keyword">function</span> <span class="function">greet</span>(name) {
  <span class="comment">// 返回问候语</span>
  <span class="keyword">return</span> <span class="string">`你好，${name}！`</span>;
}

<span class="function">console</span>.<span class="function">log</span>(<span class="function">greet</span>(<span class="string">'世界'</span>));</code></pre>
      <figcaption>代码1：JavaScript箭头函数的基本用法示例</figcaption>
    </figure>

    <!-- 数据图表figure -->
    <figure class="chart-figure">
      <div class="chart-container">
        <div class="bar-chart">
          <div class="bar" style="height: 60%;">
            <span class="bar-value">60</span>
            <span class="bar-label">HTML</span>
          </div>
          <div class="bar" style="height: 80%;">
            <span class="bar-value">80</span>
            <span class="bar-label">CSS</span>
          </div>
          <div class="bar" style="height: 90%;">
            <span class="bar-value">90</span>
            <span class="bar-label">JS</span>
          </div>
          <div class="bar" style="height: 70%;">
            <span class="bar-value">70</span>
            <span class="bar-label">React</span>
          </div>
          <div class="bar" style="height: 75%;">
            <span class="bar-value">75</span>
            <span class="bar-label">Vue</span>
          </div>
        </div>
      </div>
      <figcaption>图1：2025年前端技术熟练度调查结果（百分比）</figcaption>
    </figure>

    <!-- 引用figure -->
    <figure class="quote-figure">
      <blockquote>
        "任何足够先进的技术，都与魔法无异。"
      </blockquote>
      <figcaption>—— 亚瑟·C·克拉克，《未来的轮廓》（1962年）</figcaption>
    </figure>
  </main>
</body>
</html>

示例3：figcaption在figure开头

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Figcaption位置示例</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: sans-serif; line-height: 1.6; color: #333; padding: 2rem; }
    main { max-width: 700px; margin: 0 auto; }

    figure {
      margin: 2rem 0;
      background: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .img-placeholder {
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 2.5rem;
    }

    figcaption {
      padding: 0.8rem 1.2rem;
      font-size: 0.9rem;
      color: #555;
    }

    /* 标题在上 */
    .caption-top figcaption {
      background: #f8f9fa;
      border-bottom: 1px solid #eee;
      font-weight: 600;
      color: #2c3e50;
    }

    /* 标题在下 */
    .caption-bottom figcaption {
      background: #f8f9fa;
      border-top: 1px solid #eee;
    }
  </style>
</head>
<body>
  <main>
    <h1>Figcaption的位置</h1>

    <!-- figcaption在figure开头 -->
    <figure class="caption-top">
      <figcaption>图1：日出时分的山景</figcaption>
      <div class="img-placeholder" style="background: linear-gradient(135deg, #f39c12, #e74c3c);">&#127749;</div>
    </figure>

    <!-- figcaption在figure结尾 -->
    <figure class="caption-bottom">
      <div class="img-placeholder" style="background: linear-gradient(135deg, #2c3e50, #3498db);">&#127752;</div>
      <figcaption>图2：雨后的彩虹</figcaption>
    </figure>
  </main>
</body>
</html>

浏览器兼容性

浏览器	<figure>	<figcaption>	备注
Chrome	8+	8+	完全支持
Firefox	4+	4+	完全支持
Safari	5.1+	5.1+	完全支持
Edge	12+	12+	完全支持
IE	9+	9+	需要HTML5 Shiv
Opera	11.1+	11.1+	完全支持
移动端	基本支持	基本支持	iOS Safari 5.1+

注意事项与最佳实践

1. figure内最多一个figcaption

代码示例

<!-- 错误：多个figcaption -->
<figure>
  <figcaption>标题一</figcaption>
  <img src="photo.jpg" alt="照片">
  <figcaption>标题二</figcaption>
</figure>

<!-- 正确：只有一个figcaption -->
<figure>
  <figcaption>照片说明</figcaption>
  <img src="photo.jpg" alt="照片">
</figure>

2. figcaption必须在figure内

代码示例

<!-- 错误：figcaption不在figure内 -->
<div>
  <figcaption>图片说明</figcaption>
  <img src="photo.jpg" alt="照片">
</div>

<!-- 正确：figcaption在figure内 -->
<figure>
  <figcaption>图片说明</figcaption>
  <img src="photo.jpg" alt="照片">
</figure>

3. 不是所有图片都需要figure

代码示例

<!-- 不需要figure：图片是内容的内联部分 -->
<p>请点击<img src="icon.png" alt="设置图标">图标进行设置。</p>

<!-- 需要figure：图片是独立的、需要说明的 -->
<figure>
  <img src="chart.png" alt="销售数据图表">
  <figcaption>图1：2025年季度销售数据</figcaption>
</figure>

4. img的alt和figcaption不要重复

代码示例

<!-- 不推荐：alt和figcaption内容重复 -->
<figure>
  <img src="chart.png" alt="2025年季度销售数据图表">
  <figcaption>图1：2025年季度销售数据图表</figcaption>
</figure>

<!-- 推荐：alt简洁描述，figcaption提供详细说明 -->
<figure>
  <img src="chart.png" alt="季度销售数据柱状图">
  <figcaption>图1：2025年各季度销售额对比，Q3达到峰值1200万元</figcaption>
</figure>

5. figure的内容应该是自包含的

代码示例

<!-- 正确：内容自包含，可以独立理解 -->
<figure>
  <img src="architecture.png" alt="系统架构图">
  <figcaption>图1：微服务架构设计图，展示了各服务之间的调用关系</figcaption>
</figure>

代码规范示例

规范的figure使用

代码示例

<!-- 图片figure -->
<figure class="article-image" aria-labelledby="fig1-caption">
  <img src="chart.png"
       alt="季度销售数据柱状图"
       width="800"
       height="400"
       loading="lazy">
  <figcaption id="fig1-caption">
    <strong>图1：</strong>2025年各季度销售额对比
  </figcaption>
</figure>

<!-- 代码figure -->
<figure class="code-example" aria-labelledby="code1-caption">
  <pre><code>const greeting = 'Hello, World!';
console.log(greeting);</code></pre>
  <figcaption id="code1-caption">
    代码1：JavaScript基本输出示例
  </figcaption>
</figure>

<!-- 引用figure -->
<figure class="pull-quote" aria-labelledby="quote1-caption">
  <blockquote>
    <p>"Web是属于所有人的。"</p>
  </blockquote>
  <figcaption id="quote1-caption">—— Tim Berners-Lee</figcaption>
</figure>

常见问题与解决方案

常见问题

figure内可以放多张图片吗？

可以。<figure> 内可以包含多张图片，它们共享同一个 <figcaption>。

figure可以没有figcaption吗？

可以。<figcaption> 不是必须的。但如果内容需要说明文字，建议添加 <figcaption> 以提供完整的语义。

figure可以嵌套吗？

不推荐。<figure> 不应嵌套在另一个 <figure> 内。如果需要展示多组图片，应并列使用多个 <figure>。

figcaption应该放在figure的开头还是结尾？

两种都可以。通常图片说明放在结尾（更常见），而代码示例的标题放在开头更自然。根据内容类型和设计需求选择即可。

figure对SEO有什么影响？

<figure> 和 <figcaption> 能帮助搜索引擎理解图片与说明文字的关联，有助于图片搜索的索引和排名。

总结

<figure> 和 <figcaption> 标签是HTML语义化体系中的重要组合，关键要点如下：

自包含性：<figure> 包裹自包含的内容，可以独立于主内容理解
标题关联：<figcaption> 与 <figure> 内的内容有明确的语义关联
内容多样：不仅限于图片，还可以用于代码、图表、引用等
唯一标题：每个 <figure> 最多一个 <figcaption>
位置灵活：<figcaption> 可以放在 <figure> 的开头或结尾

正确使用 <figure> 和 <figcaption> 标签，能让内容与说明的关联更加清晰，提升SEO效果和可访问性，是构建内容丰富型网页的重要技能。

小贴士

在使用 <figure> 包裹图片时，建议为 <img> 标签添加 loading="lazy" 属性以实现懒加载，同时使用 width 和 height 属性来避免页面布局偏移（CLS）。这些优化手段与语义化标签结合使用，能显著提升页面的加载性能和用户体验。

标签： HTML figure标签 figcaption HTML5 语义化图片说明

本文涉及AI创作

内容由AI创作，请仔细甄别

list快速访问

poll相关推荐

框架集成：01 HTML与前端框架概述 - 详细教程与实战指南

实战项目：项目10：个人作品集网站 - 详细教程与实战指南

实战项目：项目09：任务管理应用 - 详细教程与实战指南

实战项目：项目08：天气应用界面 - 详细教程与实战指南

快速访问

相关推荐