Web学习网站

Appearance

<figcaption> 标签 ​

<figcaption> 标签用于定义 <figure> 元素的标题或说明文字。它应该作为 <figure> 元素的第一个或最后一个子元素。

概述 ​

<figcaption> 标签是 HTML5 中引入的语义化标签，专门用于为 <figure> 元素提供标题或说明文字。它增强了媒体内容的语义性，有助于无障碍访问和 SEO。

语法 ​

html
<figure>
  <!-- 媒体内容 -->
  <figcaption>标题或说明文字</figcaption>
</figure>

基本用法 ​

图片标题 ​

html
<figure>
  <img src="mountain.jpg" alt="山景">
  <figcaption>雄伟的山脉风景</figcaption>
</figure>

图片说明 ​

html
<figure>
  <img src="diagram.png" alt="流程图">
  <figcaption>图1: 用户注册流程图</figcaption>
</figure>

实际示例 ​

图片画廊 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>figcaption 标签示例</title>
  <style>
    .gallery {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      padding: 2rem;
    }
    
    figure {
      margin: 0;
      flex: 1;
      min-width: 300px;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      overflow: hidden;
    }
    
    figure img {
      width: 100%;
      height: auto;
      display: block;
    }
    
    figcaption {
      padding: 1rem;
      text-align: center;
      font-style: italic;
      color: #555;
      background-color: #f8f9fa;
    }
    
    figcaption strong {
      display: block;
      font-style: normal;
      font-size: 1.1em;
      color: #333;
      margin-bottom: 0.5rem;
    }
  </style>
</head>
<body>
  <h1>自然风光图片集</h1>
  
  <div class="gallery">
    <figure>
      <img src="https://via.placeholder.com/400x300/FF6B6B/FFFFFF?text=日出" alt="日出">
      <figcaption>
        <strong>海上日出</strong>
        拍摄于2023年6月15日清晨，地点：三亚湾
      </figcaption>
    </figure>
    
    <figure>
      <img src="https://via.placeholder.com/400x300/4ECDC4/FFFFFF?text=森林" alt="森林">
      <figcaption>
        <strong>原始森林</strong>
        亚马逊雨林深处的原始生态环境
      </figcaption>
    </figure>
    
    <figure>
      <img src="https://via.placeholder.com/400x300/45B7D1/FFFFFF?text=瀑布" alt="瀑布">
      <figcaption>
        <strong>尼亚加拉瀑布</strong>
        世界著名的跨国瀑布景观
      </figcaption>
    </figure>
  </div>
</body>
</html>

技术文档中的代码示例 ​

html
<article>
  <h1>Python 编程教程</h1>
  
  <p>在 Python 中，列表是一种非常常用的数据结构：</p>
  
  <figure>
    <pre><code># 创建列表
fruits = ['苹果', '香蕉', '橙子']

# 访问列表元素
print(fruits[0])  # 输出: 苹果

# 添加元素
fruits.append('葡萄')
print(fruits)  # 输出: ['苹果', '香蕉', '橙子', '葡萄']</code></pre>
    <figcaption>Python 列表的基本操作示例</figcaption>
  </figure>
  
  <p>字典是另一种重要的数据结构，用于存储键值对：</p>
  
  <figure>
    <pre><code># 创建字典
student = {
    'name': '张三',
    'age': 20,
    'major': '计算机科学'
}

# 访问字典值
print(student['name'])  # 输出: 张三

# 添加新的键值对
student['grade'] = '大二'
print(student)</code></pre>
    <figcaption>Python 字典的基本操作示例</figcaption>
  </figure>
</article>

表格说明 ​

html
<section>
  <h2>财务报表</h2>
  
  <figure>
    <table>
      <thead>
        <tr>
          <th>项目</th>
          <th>2022年 (万元)</th>
          <th>2023年 (万元)</th>
          <th>增长率</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>营业收入</td>
          <td>1,200</td>
          <td>1,500</td>
          <td>25%</td>
        </tr>
        <tr>
          <td>净利润</td>
          <td>120</td>
          <td>180</td>
          <td>50%</td>
        </tr>
        <tr>
          <td>总资产</td>
          <td>2,000</td>
          <td>2,500</td>
          <td>25%</td>
        </tr>
      </tbody>
    </table>
    <figcaption>表1: 公司2022-2023年度主要财务数据</figcaption>
  </figure>
</section>

位置灵活性 ​

标题在前 ​

html
<figure>
  <figcaption>网站架构图</figcaption>
  <img src="architecture.png" alt="网站架构图">
</figure>

标题在后 ​

html
<figure>
  <img src="architecture.png" alt="网站架构图">
  <figcaption>网站架构图</figcaption>
</figure>

样式化标题 ​

html
<!DOCTYPE html>
<html>
<head>
  <style>
    .styled-figure {
      margin: 2rem 0;
      text-align: center;
    }
    
    .styled-figure img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
    }
    
    .styled-figcaption {
      margin-top: 1rem;
      padding: 1rem;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border-radius: 8px;
      font-size: 1.1em;
    }
    
    .styled-figcaption .title {
      font-weight: bold;
      font-size: 1.2em;
      display: block;
      margin-bottom: 0.5rem;
    }
  </style>
</head>
<body>
  <figure class="styled-figure">
    <img src="https://via.placeholder.com/500x300/667eea/ffffff?text=示例图片" alt="示例">
    <figcaption class="styled-figcaption">
      <span class="title">示例图片标题</span>
      <span class="description">这是图片的详细描述信息</span>
    </figcaption>
  </figure>
</body>
</html>

与相关标签的区别 ​

与普通段落的区别 ​

html
<!-- 不推荐：使用普通段落作为图片说明 -->
<img src="image.jpg" alt="图片描述">
<p>图片说明文字</p>

<!-- 推荐：使用语义化的 figcaption 标签 -->
<figure>
  <img src="image.jpg" alt="图片描述">
  <figcaption>图片说明文字</figcaption>
</figure>

与标题标签的区别 ​

html
<!-- 不推荐：使用标题标签作为图片说明 -->
<img src="chart.png" alt="图表">
<h3>图表说明</h3>

<!-- 推荐：使用 figcaption 标签 -->
<figure>
  <img src="chart.png" alt="图表">
  <figcaption>图表说明</figcaption>
</figure>

无障碍访问 ​

屏幕阅读器支持 ​

html
<figure>
  <img src="infographic.png" alt="2023年市场分析信息图，显示了各季度销售数据和趋势">
  <figcaption>
    <strong>图1: 2023年市场分析信息图</strong>
    本图展示了公司在2023年四个季度的销售数据和市场趋势分析。
    第一季度销售额为120万元，第二季度增长至150万元，第三季度达到180万元，
    第四季度略有下降至160万元。整体呈现先增长后稳定的趋势。
  </figcaption>
</figure>

最佳实践 ​

  1. 配合使用：始终与 <figure> 标签配合使用
  2. 语义化：只在为媒体内容提供标题或说明时使用
  3. 位置选择：可以选择放在 <figure> 的开头或结尾
  4. 内容描述：提供有意义的标题或说明文字
  5. 简洁明了：保持标题文字简洁但具有描述性

浏览器兼容性 ​

<figcaption> 标签在所有现代浏览器中都得到支持：

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Internet Explorer 9+

对于不支持的旧浏览器，可以通过 CSS 显示声明为块级元素：

css
figcaption {
  display: block;
}

注意事项 ​

  1. <figcaption> 标签是块级元素
  2. <figcaption> 必须作为 <figure> 元素的直接子元素
  3. 每个 <figure> 元素最多只能有一个 <figcaption> 子元素
  4. <figcaption> 标签没有默认样式，需要通过 CSS 设置
  5. 不要单独使用 <figcaption> 标签

相关标签 ​