<figcaption>-媒体内容标题

<figcaption>标签的基本概念

<figcaption>是HTML5中专门为<figure>元素设计的标题容器。它通常出现在<figure>内部，作为第一个或最后一个子元素，用来描述媒体内容。这个标签的出现让语义化标注媒体内容变得更加规范。

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

语法结构与位置

<figcaption>的放置位置具有灵活性，但必须作为<figure>的直接子元素。W3C规范允许它出现在两种位置：

1. 前置标题（推荐用于表格和图表）：

<figure>
  <figcaption>年度销售趋势</figcaption>
  <img src="chart.png" alt="折线图">
</figure>

2. 后置说明（常见于图片和插图）：

<figure>
  <video controls src="demo.mp4"></video>
  <figcaption>视频演示：产品使用流程</figcaption>
</figure>

与替代方案的对比

相比传统的标题实现方式，<figcaption>具有明显优势：

传统方式：

<div class="image-container">
  <img src="old-way.jpg">
  <p class="caption">使用p标签模拟的标题</p>
</div>

语义化方式：

<figure>
  <img src="semantic-way.jpg">
  <figcaption>正确的语义化标注</figcaption>
</figure>

主要区别体现在：

• 屏幕阅读器能准确识别元素类型
• 搜索引擎更好理解内容关系
• 无需额外CSS类名维护

实际应用场景

复杂媒体组合

当需要为多个媒体元素添加统一说明时：

<figure>
  <img src="view1.jpg" alt="视角1">
  <img src="view2.jpg" alt="视角2">
  <figcaption>建筑设计方案的多角度展示（点击查看大图）</figcaption>
</figure>

带注释的代码示例

<figure>
  <pre><code>
function calculate(a, b) {
  return a * b + 100;
}
  </code></pre>
  <figcaption>
    代码片段1：带固定偏移量的计算函数
    <span class="code-notes">（偏移量将在v2.3版本改为可配置参数）</span>
  </figcaption>
</figure>

响应式媒体组

结合CSS Grid布局时：

<figure class="media-grid">
  <figcaption>团队成员合影（2018-2023）</figcaption>
  <img src="team1.jpg" class="grid-item">
  <img src="team2.jpg" class="grid-item">
  <img src="team3.jpg" class="grid-item">
</figure>

<style>
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
</style>

可访问性增强技巧

ARIA属性扩展

<figure aria-labelledby="fig1-desc">
  <img src="infographic.png" alt="">
  <figcaption id="fig1-desc">
    图3：2023年用户增长数据
    <button aria-expanded="false" data-toggle="details">显示详细数据</button>
  </figcaption>
  <div hidden id="details">...详细数据表格...</div>
</figure>

多语言支持

<figure>
  <svg width="400" height="100">...</svg>
  <figcaption>
    <span lang="en">Figure4: Quarterly Report</span>
    <span lang="zh">图4：季度报表</span>
  </figcaption>
</figure>

样式定制方案

基础样式增强

figcaption {
  font-family: 'Segoe UI', sans-serif;
  padding: 0.8em 1.2em;
  background: linear-gradient(to right, #f8f9fa, #e9ecef);
  border-left: 4px solid #6c757d;
}

/* 黑暗模式适配 */
@media (prefers-color-scheme: dark) {
  figcaption {
    background: linear-gradient(to right, #343a40, #212529);
  }
}

创意布局实现

<figure class="polaroid">
  <img src="memory.jpg">
  <figcaption>2023年团队建设活动</figcaption>
</figure>

<style>
.polaroid {
  position: relative;
  width: 300px;
  padding: 15px 15px 60px;
  background: white;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

.polaroid figcaption {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  font-style: italic;
}
</style>

与JavaScript的交互

动态标题更新

document.querySelectorAll('figure').forEach(fig => {
  const caption = fig.querySelector('figcaption');
  if (caption) {
    fig.addEventListener('mouseenter', () => {
      caption.style.transform = 'translateY(0)';
      caption.dataset.originalText = caption.textContent;
      caption.textContent = '点击查看详情 →';
    });
    
    fig.addEventListener('mouseleave', () => {
      caption.style.transform = '';
      caption.textContent = caption.dataset.originalText;
    });
  }
});

图片画廊集成

<figure class="gallery-item" data-index="3">
  <img src="gallery3-thumb.jpg" data-fullsize="gallery3-full.jpg">
  <figcaption>
    作品#3 <span class="resolution">(3840×2160)</span>
    <button class="download-btn">下载原图</button>
  </figcaption>
</figure>

<script>
document.querySelector('.download-btn').addEventListener('click', (e) => {
  const figure = e.target.closest('figure');
  const fullSizeUrl = figure.querySelector('img').dataset.fullsize;
  // 下载逻辑...
});
</script>

在CMS系统中的实践

WordPress主题集成示例：

add_filter( 'render_block', function( $block_content, $block ) {
  if ( 'core/image' === $block['blockName'] && !empty($block['attrs']['caption']) ) {
    return sprintf(
      '<figure class="wp-block-image">%s<figcaption>%s</figcaption></figure>',
      $block['innerHTML'],
      esc_html($block['attrs']['caption'])
    );
  }
  return $block_content;
}, 10, 2 );

浏览器兼容性备忘

虽然现代浏览器都支持<figcaption>，但需要注意：

• IE9需要polyfill支持
• 某些旧版Android浏览器需要显式设置display: block
• 打印样式表中建议添加：

@media print {
  figcaption {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

高级用法：嵌套结构

对于复杂的说明系统，可以嵌套其他语义元素：

<figure>
  <canvas id="weather-chart"></canvas>
  <figcaption>
    <h3>气象数据可视化</h3>
    <p>图5：2023年1-6月气温/降水对比</p>
    <details>
      <summary>数据来源</summary>
      <p>国家气象局公开数据集，采样间隔1小时...</p>
    </details>
  </figcaption>
</figure>

与Web组件的结合

自定义元素中的使用示例：

class MediaCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        figure { border: 1px solid #ddd; padding: 10px; }
        ::slotted(figcaption) { color: var(--caption-color, #666); }
      </style>
      <figure>
        <slot name="media"></slot>
        <slot name="caption"></slot>
      </figure>
    `;
  }
}
customElements.define('media-card', MediaCard);

使用方式：

<media-card>
  <img slot="media" src="custom-element-demo.jpg">
  <figcaption slot="caption">自定义元素中的figcaption</figcaption>
</media-card>