'<figure>'与'<figcaption>'标签的使用

<figure>与<figcaption>标签的基本概念

HTML5引入的<figure>和<figcaption>标签专门用于处理与文档内容相关的图像、图表、照片、代码片段等媒体内容及其标题。<figure>是一个语义化容器，而<figcaption>则为其包含的内容提供标题或说明。这两个标签通常配合使用，但<figcaption>并非强制要求。

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

<figure>标签的详细用法

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

• 图像（<img>）
• 代码片段（<pre><code>）
• 图表（SVG或Canvas）
• 视频（<video>）
• 音频（<audio>）
• 表格（<table>）

多图组合示例：

<figure class="gallery">
  <img src="photo1.jpg" alt="建筑外观">
  <img src="photo2.jpg" alt="室内设计">
  <img src="photo3.jpg" alt="景观布局">
  <figcaption>项目设计方案的三视图展示</figcaption>
</figure>

代码片段示例：

<figure>
  <pre><code>
function calculateArea(radius) {
  return Math.PI * radius * radius;
}
  </code></pre>
  <figcaption>清单1：计算圆面积的JavaScript函数</figcaption>
</figure>

<figcaption>的定位与样式控制

<figcaption>可以放置在<figure>内的任意位置，但通常出现在开头或结尾。通过CSS可以灵活控制其样式和位置：

<figure class="captioned-image">
  <figcaption style="text-align: center; font-style: italic;">
    图2：CSS定位示例
  </figcaption>
  <img src="demo.png" alt="样式演示">
</figure>

<style>
  figure.captioned-image {
    position: relative;
    border: 1px solid #ddd;
    padding: 10px;
  }
  figure.captioned-image figcaption {
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 5px;
  }
</style>

复杂内容组合示例

<figure>可以嵌套其他HTML元素创建复杂布局：

<figure class="data-visualization">
  <svg width="400" height="200">
    <!-- SVG图表内容 -->
    <rect x="50" y="50" width="300" height="100" fill="#4CAF50"/>
  </svg>
  <div class="chart-legend">
    <span class="color-swatch" style="background:#4CAF50"></span>
    <span>2023年销售额</span>
  </div>
  <figcaption>图3：年度销售数据可视化（单位：万元）</figcaption>
</figure>

可访问性注意事项

1. 当<figure>包含图像时，仍需保留alt属性
2. <figcaption>不应重复alt文本内容
3. 屏幕阅读器会识别这两个标签的关系

错误示例：

<figure>
  <img src="chart.png" alt="图4：2023年季度销售趋势">
  <figcaption>图4：2023年季度销售趋势</figcaption>
</figure>

正确示例：

<figure>
  <img src="chart.png" alt="折线图显示四个季度的销售数据">
  <figcaption>图4：2023年季度销售趋势</figcaption>
</figure>

响应式设计中的应用

结合CSS Grid或Flexbox实现响应式布局：

<div class="figure-grid">
  <figure>
    <img src="product1.jpg" alt="产品A">
    <figcaption>旗舰产品A</figcaption>
  </figure>
  <figure>
    <img src="product2.jpg" alt="产品B">
    <figcaption>入门产品B</figcaption>
  </figure>
  <!-- 更多产品 -->
</div>

<style>
  .figure-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
  }
  figure {
    margin: 0;
    transition: transform 0.3s;
  }
  figure:hover {
    transform: scale(1.03);
  }
</style>

与<picture>元素的配合使用

实现响应式图像与语义化标题的组合：

<figure>
  <picture>
    <source media="(min-width: 1200px)" srcset="large.jpg">
    <source media="(min-width: 768px)" srcset="medium.jpg">
    <img src="small.jpg" alt="响应式图像示例">
  </picture>
  <figcaption>
    图5：根据视口大小自动加载不同尺寸的图像
    <small>(尝试调整浏览器窗口查看效果)</small>
  </figcaption>
</figure>

在技术文档中的实际案例

展示API响应示例：

<figure>
  <figcaption>清单2：用户数据的JSON响应结构</figcaption>
  <pre><code class="language-json">
{
  "id": 12345,
  "username": "example_user",
  "email": "user@example.com",
  "created_at": "2023-01-15T08:30:00Z"
}
  </code></pre>
</figure>

与表格数据的结合

为数据表格添加说明性标题：

<figure>
  <table>
    <thead>
      <tr>
        <th>月份</th>
        <th>销售额</th>
        <th>增长率</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1月</td>
        <td>¥120,000</td>
        <td>+8%</td>
      </tr>
      <!-- 更多数据行 -->
    </tbody>
  </table>
  <figcaption>表1：2023年上半年销售业绩统计</figcaption>
</figure>

动态内容交互示例

通过JavaScript动态更新图表和标题：

<figure id="dynamic-chart">
  <canvas id="salesChart" width="600" height="400"></canvas>
  <figcaption id="chart-caption">图6：当前季度销售趋势</figcaption>
</figure>

<script>
  function updateChart(quarter) {
    const caption = document.getElementById('chart-caption');
    caption.textContent = `图6：${quarter}季度销售趋势`;
    
    // 实际项目中这里会有图表更新逻辑
    console.log(`更新为${quarter}季度数据`);
  }
  
  // 模拟季度切换
  setTimeout(() => updateChart('Q2'), 2000);
  setTimeout(() => updateChart('Q3'), 4000);
</script>