<figcaption>-媒体内容标题

<figcaption>标签的基本概念

<figcaption>是HTML5新增的语义化标签，专门用于为<figure>元素提供标题或说明文字。这个标签通常与<figure>配合使用，形成"媒体内容+说明"的完整结构。

<figure>
  <img src="sunset.jpg" alt="海滩日落">
  <figcaption>图1：马尔代夫海滩的日落景色</figcaption>
</figure>

<figcaption>的语法规范

<figcaption>是双标签，必须包含开始和结束标签。根据HTML5规范：

1. 必须是<figure>的直接子元素
2. 可以放在<figure>内的第一个或最后一个子元素位置
3. 一个<figure>中只能包含一个<figcaption>

错误示例：

<!-- 错误：不在figure内 -->
<figcaption>独立的说明文字</figcaption>

<!-- 错误：多个figcaption -->
<figure>
  <figcaption>标题1</figcaption>
  <img src="pic.jpg">
  <figcaption>标题2</figcaption>
</figure>

位置对样式的影响

<figcaption>的位置会影响默认样式和布局：

前置位置示例：

<figure>
  <figcaption style="background: #f0f0f0; padding: 10px;">
    图2：前置标题
  </figcaption>
  <img src="chart.png" alt="数据图表">
</figure>

后置位置示例：

<figure style="border: 1px solid #ddd;">
  <img src="diagram.svg" alt="流程图">
  <figcaption style="font-style: italic; text-align: center;">
    图3：后置说明文字
  </figcaption>
</figure>

与不同媒体类型的配合

配合图片使用

<figure class="photo-frame">
  <img src="product.jpg" alt="新产品展示" width="400">
  <figcaption class="photo-caption">
    <strong>2023秋季新款</strong> | 摄影师：张三
  </figcaption>
</figure>

配合代码块使用

<figure>
  <pre><code>
function greet(name) {
  return `Hello, ${name}!`;
}
  </code></pre>
  <figcaption>代码1：JavaScript问候函数</figcaption>
</figure>

配合视频使用

<figure>
  <video controls width="600">
    <source src="tutorial.mp4" type="video/mp4">
  </video>
  <figcaption>
    视频教程：如何使用新功能 | 时长：5分23秒
  </figcaption>
</figure>

样式定制技巧

通过CSS可以灵活控制<figcaption>的呈现效果：

/* 基础样式 */
figcaption {
  font-size: 0.9em;
  color: #666;
  padding: 8px 0;
}

/* 图片标题特殊样式 */
figure.photo figcaption {
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 10px;
  position: absolute;
  bottom: 0;
  width: 100%;
}

/* 代码块标题样式 */
figure.code figcaption {
  background: #f5f5f5;
  border-top: 1px solid #ddd;
  font-family: monospace;
  padding: 5px 10px;
}

响应式设计中的应用

结合媒体查询实现不同屏幕尺寸下的标题优化：

<figure class="responsive-figure">
  <img src="data-visualization.png" alt="数据可视化">
  <figcaption class="responsive-caption">
    <span class="full-caption">图4：2023年季度销售数据趋势分析（单位：万元）</span>
    <span class="short-caption">销售趋势图</span>
  </figcaption>
</figure>

<style>
  .short-caption { display: none; }
  
  @media (max-width: 600px) {
    .full-caption { display: none; }
    .short-caption { display: inline; }
    figcaption { font-size: 0.8rem; }
  }
</style>

无障碍访问考虑

为提升可访问性，应该：

1. 确保<figcaption>与关联内容在DOM顺序上合理
2. 避免仅通过视觉样式传达信息
3. 为复杂说明提供ARIA属性

<figure aria-labelledby="fig1-desc">
  <img src="infographic.png" alt="信息图">
  <figcaption id="fig1-desc">
    图5：用户增长数据
    <span class="sr-only">。2023年1月至6月，新用户增长率为35%</span>
  </figcaption>
</figure>

<style>
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
</style>

与表格的结合使用

<figcaption>也可以用于为数据表格提供说明：

<figure>
  <figcaption>表1：2023年销售数据汇总</figcaption>
  <table>
    <thead>
      <tr>
        <th>季度</th>
        <th>销售额</th>
        <th>增长率</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Q1</td>
        <td>¥1,200,000</td>
        <td>12%</td>
      </tr>
      <!-- 更多数据行 -->
    </tbody>
  </table>
</figure>

动态内容交互示例

通过JavaScript实现交互式标题：

<figure id="interactive-fig">
  <img src="gallery1.jpg" alt="画廊图片" id="gallery-img">
  <figcaption id="img-caption">图片1/5：城市风光</figcaption>
  <button onclick="nextImage()">下一张</button>
</figure>

<script>
  const images = [
    { src: "gallery1.jpg", caption: "图片1/5：城市风光" },
    { src: "gallery2.jpg", caption: "图片2/5：自然景观" },
    // 更多图片数据
  ];
  
  let currentIndex = 0;
  
  function nextImage() {
    currentIndex = (currentIndex + 1) % images.length;
    document.getElementById('gallery-img').src = images[currentIndex].src;
    document.getElementById('img-caption').textContent = 
      images[currentIndex].caption;
  }
</script>

打印样式的特殊处理

针对打印媒体优化<figcaption>显示：

@media print {
  figure {
    page-break-inside: avoid;
  }
  
  figcaption {
    color: black;
    font-weight: bold;
    border-bottom: 1pt solid #999;
  }
  
  figure img {
    max-width: 100% !important;
  }
}