<figure>-媒体内容组合

<figure> 是 HTML5 新增的语义化标签，用于包裹独立的媒体内容（如图片、图表、代码块等）及其关联的标题（<figcaption>）。它通过结构化方式增强内容的可读性和可访问性。

<figure> 的基本用法

<figure> 是一个容器元素，内部通常包含媒体内容（如 <img>、<video>、<code> 等）和可选的 <figcaption> 标题。以下是一个典型示例：

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

浏览器会默认将 <figcaption> 显示在媒体内容的下方。通过 CSS 可以调整标题位置：

figure {
  border: 1px solid #ddd;
  padding: 10px;
  max-width: 500px;
}
figcaption {
  font-style: italic;
  text-align: center;
}

支持的内容类型

图像组合

最常见的用法是包裹图片和标题：

<figure>
  <img src="architecture.jpg" alt="现代建筑">
  <figcaption>上海中心大厦外观设计</figcaption>
</figure>

代码示例

适合展示代码片段：

<figure>
  <pre><code>
function greet() {
  console.log("Hello World!");
}
  </code></pre>
  <figcaption>清单1：JavaScript基础函数</figcaption>
</figure>

多媒体内容

可以组合视频、音频等元素：

<figure>
  <video controls width="400">
    <source src="demo.mp4" type="video/mp4">
  </video>
  <figcaption>视频演示：产品使用教程</figcaption>
</figure>

图表数据

与 SVG 或 Canvas 结合展示可视化数据：

<figure>
  <svg width="200" height="100">
    <rect width="200" height="100" fill="#4CAF50" />
  </svg>
  <figcaption>图2：绿色矩形（SVG示例）</figcaption>
</figure>

高级应用场景

多内容组合

一个 <figure> 可以包含多个媒体对象：

<figure>
  <img src="view1.jpg" alt="景观1">
  <img src="view2.jpg" alt="景观2">
  <figcaption>图3：双视角对比图</figcaption>
</figure>

响应式设计

结合 CSS Grid 实现复杂布局：

<figure class="gallery">
  <img src="photo1.jpg" alt="">
  <img src="photo2.jpg" alt="">
  <img src="photo3.jpg" alt="">
  <figcaption>图4：照片墙展示</figcaption>
</figure>

<style>
  .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
</style>

交互增强

通过 JavaScript 添加交互功能：

<figure id="zoom-figure">
  <img src="product.jpg" alt="产品特写">
  <figcaption>点击图片放大查看</figcaption>
</figure>

<script>
  document.getElementById('zoom-figure').addEventListener('click', function() {
    this.classList.toggle('zoomed');
  });
</script>

<style>
  #zoom-figure { cursor: zoom-in; }
  #zoom-figure.zoomed { 
    transform: scale(1.5);
    cursor: zoom-out;
  }
</style>

无障碍访问要点

1. alt 文本：确保内嵌的 <img> 具有描述性 alt 属性
2. 标题关联：<figcaption> 应清晰描述内容
3. 键盘导航：交互式内容需支持键盘操作

<figure>
  <img src="chart.png" alt="2023年季度销售趋势：Q1 20%, Q2 35%, Q3 25%, Q4 20%">
  <figcaption>图5：年度销售数据可视化</figcaption>
</figure>

与其他标签的对比

实际项目中的应用

博客文章插图

<article>
  <h2>摄影技巧分享</h2>
  <figure>
    <img src="long-exposure.jpg" alt="长曝光夜景">
    <figcaption>使用30秒长曝光拍摄的城市夜景</figcaption>
  </figure>
  <p>正文内容...</p>
</article>

产品展示页

<div class="product">
  <figure>
    <img src="product-360.gif" alt="产品360度展示">
    <figcaption>图6：鼠标悬停查看产品细节</figcaption>
  </figure>
  <button>加入购物车</button>
</div>

浏览器兼容性提示

所有现代浏览器均支持 <figure>，包括：

• Chrome 8+
• Firefox 4+
• Safari 5.1+
• Edge 12+
• Opera 11+

对于 IE9 及以下版本，需在 CSS 中添加显示声明：

figure { 
  display: block;
  margin: 1em 40px;
}

语义化优势

1. SEO优化：帮助搜索引擎理解内容结构
2. 阅读模式：被阅读器识别为独立内容单元
3. 样式隔离：方便针对媒体内容应用特定样式

<figure class="highlight">
  <img src="infographic.png" alt="信息图">
  <figcaption>图7：年度数据统计信息图</figcaption>
</figure>

<style>
  .highlight {
    background: #f8f9fa;
    padding: 20px;
    border-left: 4px solid #4285f4;
  }
</style>