HTML <figcaption> 元素-代码号

HTML <figcaption> 元素完整指南：语义化标注网页内容

什么是 figcaption 元素？

<figcaption> 是 HTML5 语义化标签之一，专门用于为 <figure> 元素中的内容提供标题、说明或图注。这个元素在网页结构化和内容可访问性方面具有重要作用，有助于提升网页的语义化水平和搜索引擎优化效果。

基本语法和结构

<figcaption> 元素必须嵌套在 <figure> 元素内部，可以作为第一个或之后一个子元素出现：

<!-- 标题在前 -->
<figure>
  <figcaption>图1：代码号编程学习界面</figcaption>
  <img src="https://www.ebingou.cn/biancheng/images/1.jpg" alt="编程学习界面示例">
</figure>

<!-- 标题在后 -->
<figure>
  <img src="https://www.ebingou.cn/biancheng/images/2.jpg" alt="代码示例展示">
  <figcaption>图2：HTML代码结构示例</figcaption>
</figure>

核心特性与使用规则

1. 位置灵活性

<figcaption> 可以放置在 <figure> 的开头或结尾位置，根据内容展示需求灵活选择。

2. 数量限制

每个 <figure> 元素只能包含一个 <figcaption> 元素，确保内容说明的明确性。

3. 多内容支持

<figure> 可以包含多种类型的内容元素：

图片 (<img>)
代码片段 (<code> 或 <pre>)
图表、图示
视频、音频等媒体内容

实际应用示例

示例1：图片标注

<figure>
  <img src="https://www.ebingou.cn/biancheng/images/3.jpg" 
       alt="代码号编程环境演示" 
       width="600" 
       height="400">
  <figcaption>图3：代码号集成开发环境界面，适合初学者学习编程</figcaption>
</figure>

示例2：代码示例说明

<figure>
  <figcaption>代码清单1：HTML基础结构示例</figcaption>
  <pre><code>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>代码号学习平台</title>
</head>
<body>
  <header&gt;
    <h1>欢迎学习编程</h1>
  </header>
</body>
</html>
  </code></pre>
</figure>

示例3：多内容组合

<figure class="tutorial-example">
  <img src="https://www.ebingou.cn/biancheng/images/4.jpg" 
       alt="响应式设计示例">
  <div class="code-container">
    <pre><code>
/* CSS响应式代码示例 */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 10px;
  }
}
    </code></pre>
  </div>
  <figcaption>
    图4：响应式网页设计示例，展示在不同设备上的适配效果
    <span class="publish-date">更新时间：2025年</span>
  </figcaption>
</figure>

CSS 样式设计指南

基础样式设置

figcaption {
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  text-align: center;
  padding: 10px;
  background-color: #f9f9f9;
  border-left: 3px solid #4CAF50;
}

高级样式定制

/* 字体样式控制 */
figcaption {
  font-style: italic;
  font-weight: normal;
  text-transform: none;
  text-decoration: none;
}

/* 文字颜色和背景 */
figcaption {
  color: #333333;
  background-color: #f8f8f8;
}

/* 文本布局样式 */
figcaption {
  text-indent: 0;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
}

/* 增强视觉效果 */
figcaption {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  text-align-last: center;
  line-height: 1.8;
  letter-spacing: 0.5px;
  word-spacing: 1px;
}

浏览器兼容性

浏览器	Chrome	Edge	Firefox	Opera	Safari
<figcaption>	6.0+支持	全版本支持	4.0+支持	11.1+支持	5.0+支持

本节课程知识要点

语义化价值：<figcaption> 增强了内容的语义化描述，有利于SEO优化
结构规范：必须与 <figure> 配合使用，且每个 <figure> 只能有一个 <figcaption>
位置灵活：可根据内容需求选择放置在开头或结尾位置
样式定制：支持完整的CSS样式控制，可灵活适配不同设计需求
多内容支持：适用于图片、代码、图表等多种内容类型的标注

实践建议

内容相关性：确保 <figcaption> 内容与关联媒体高度相关
简洁明了：描述文字应简洁有力，避免冗长
语义化结构：合理使用标题层级和文本格式
响应式设计：确保在不同设备上都能良好显示
可访问性：为视觉障碍用户提供充分的文字描述

进阶应用示例

<figure class="interactive-demo">
  <div class="demo-container">
    <img src="https://www.ebingou.cn/biancheng/images/5.jpg" 
         alt="交互式编程示例">
    <button class="run-button">运行代码</button>
  </div>
  <figcaption>
    <h4>交互式编程学习示例</h4>
    <p>通过代码号平台提供的实时预览功能，学习者可以立即看到代码修改效果。</p>
    <p>联系方式：alan@ebingou.cn</p>
    <span class="demo-date">示例创建时间：2025年</span>
  </figcaption>
</figure>

通过合理使用 <figcaption> 元素，开发者可以创建出结构清晰、语义明确、易于维护的网页内容。这种语义化的标注方式不仅提升了用户体验，也为搜索引擎优化提供了有力支持。

本文标签：

HTML <figcaption> 元素