HTML Academy · 课时

重新认识 figure 和 figcaption

Q: 「重新认识 figure 和 figcaption」这节课中我会学到什么？

将 figure 应用于图像之外的代码、图表和引文 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

将 figure 应用于图像之外的代码、图表和引文

重新认识 figure 和 figcaption 是 CoddyKit 上的免费 HTML Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

超越图像的 figure

<figure> 元素不只是用于图像——它可以标记主文本中引用的任何自包含内容：

代码示例
数学公式
图表和示意图
引文
带字幕的音频和视频

figure 中的代码示例

将代码示例标记为图示：

<figure id="code-1">
  <figcaption>Listing 1: A simple JavaScript greeting function.</figcaption>
  <pre><code>function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet('World'));</code></pre>
</figure>

<p>As shown in <a href="#code-1">Listing 1</a>, the function...</p>

figure 中的音频

带有描述性图注的音频：

<figure>
  <audio controls src="podcast-episode-42.mp3">
    Your browser does not support audio.
  </audio>
  <figcaption>Episode 42: HTML5 Deep Dive — 48 minutes.</figcaption>
</figure>

figure 中的视频

带有内容说明图注的视频：

<figure>
  <video controls width="800" height="450">
    <source src="tutorial.mp4" type="video/mp4">
    <source src="tutorial.webm" type="video/webm">
  </video>
  <figcaption>Tutorial: Building a responsive navigation menu in 10 minutes.</figcaption>
</figure>

figure 中的图表

将数据来源作为图注的图表图像：

<figure>
  <img
    src="revenue-chart.png"
    alt="Line chart showing revenue growth from $2M in 2020 to $8M in 2024"
    width="800"
    height="400"
  >
  <figcaption>
    Figure 3: Annual revenue growth 2020-2024.
    Source: Finance Department Annual Report.
  </figcaption>
</figure>

figure 中的 SVG 示意图

带有图注的 SVG 示意图：

<figure>
  <svg role="img" aria-labelledby="diagram-title" width="400" height="300">
    <title id="diagram-title">Three-tier architecture diagram</title>
    <!-- SVG content -->
  </svg>
  <figcaption>Figure 4: Client-server-database three-tier architecture.</figcaption>
</figure>

figure 中的引文

作为图示的扩展引文：

<figure>
  <blockquote cite="https://www.w3.org/TR/html52/">
    <p>The main element represents the main content of the body of a document
       or application.</p>
  </blockquote>
  <figcaption>— W3C HTML5.2 Specification</figcaption>
</figure>

替代文本与图注再探

再次明确两者的区别：

替代文本 —— 不可见；为屏幕阅读器替代图像；描述图像显示的内容
图注 —— 可见；提供上下文、出处或编号；描述图示所表达的含义

<figure>
  <img src="volcano.jpg" alt="Ash plume rising 2km above Mount St. Helens">
  <figcaption>Figure 7: The 1980 eruption. Source: USGS.</figcaption>
</figure>

图注的位置

图注可以是图示的第一个或最后一个子元素：

<!-- Caption above the content (common for code listings) -->
<figure>
  <figcaption>Listing 1: Hello World</figcaption>
  <pre>...</pre>
</figure>

<!-- Caption below the content (common for images) -->
<figure>
  <img src="photo.jpg" alt="...">
  <figcaption>Caption below the image</figcaption>
</figure>

使用 CSS 计数器为图示编号

使用 CSS 计数器自动为图示编号：

/* In CSS: */
main {
  counter-reset: figure-counter;
}
figure {
  counter-increment: figure-counter;
}
figcaption::before {
  content: 'Figure ' counter(figure-counter) ': ';
  font-weight: bold;
}

何时不使用 figure

不要将每张图像都包在 figure 中：

装饰性图像（空的替代文本）→ 直接使用 <img alt="">
纯粹用于呈现的图像 → 使用 CSS 背景图像
用户列表中的头像照片 → 直接使用 <img>
页眉中的徽标 → 直接使用 <img>

快速检查

figure 的哪个子元素会向所有用户提供可见的图注？

回顾：figure 再探

figure 的要点回顾：

<figure> —— 自包含的引用内容（图像、代码、图表、音频和引文）
<figcaption> —— 可见图注，可以是第一个或最后一个子元素
替代文本 = 不可见的描述；图注 = 可见的上下文
使用 CSS 计数器自动编号
不是每张图像都需要 figure

常见问题解答

「重新认识 figure 和 figcaption」课时是免费的吗？

是的 — 「重新认识 figure 和 figcaption」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「重新认识 figure 和 figcaption」这节课中我会学到什么？

将 figure 应用于图像之外的代码、图表和引文你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「重新认识 figure 和 figcaption」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 HTML Academy