<figure>-媒体内容组合

<figure> 是 HTML5 引入的一个语义化标签，用于包裹独立的媒体内容（如图片、图表、代码块等）及其关联的标题（<figcaption>）。它不仅能提升代码的可读性，还能为辅助技术提供更好的上下文信息。

<figure> 的基本用法

<figure> 通常与 <figcaption> 配合使用，后者用于为内容添加标题或说明。以下是一个典型示例：

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

这段代码会在页面中显示一张图片，并在其下方添加说明文字。<figure> 的默认样式是块级元素，但可以通过 CSS 修改。

适用场景分析

图片与说明组合

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

<figure class="artwork">
  <img src="mona-lisa.jpg" alt="蒙娜丽莎">
  <figcaption>达芬奇名作《蒙娜丽莎》（1503-1506）</figcaption>
</figure>

代码示例展示

对于技术文档，可以用它包裹代码片段：

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

数据可视化内容

图表类内容也适合使用：

<figure>
  <svg width="200" height="100">
    <rect x="50" y="20" width="100" height="60" fill="blue"/>
  </svg>
  <figcaption>图表1：矩形面积示意图</figcaption>
</figure>

高级应用技巧

多内容组合

一个 <figure> 可以包含多个媒体元素：

<figure>
  <img src="view-1.jpg" alt="景观视角1">
  <img src="view-2.jpg" alt="景观视角2">
  <figcaption>建筑的两个不同观察角度（摄影：张三）</figcaption>
</figure>

响应式设计集成

结合 CSS Grid 实现复杂布局：

<figure class="gallery">
  <div class="grid">
    <img src="photo1.jpg" alt="">
    <img src="photo2.jpg" alt="">
    <img src="photo3.jpg" alt="">
  </div>
  <figcaption>2023年度最佳摄影作品集</figcaption>
</figure>

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

无障碍访问注意事项

alt文本与figcaption的关系

当同时使用 alt 属性和 <figcaption> 时：

<figure>
  <img src="chart.png" 
       alt="2023年销售趋势图：Q1 20%, Q2 35%, Q3 25%, Q4 40%">
  <figcaption>图2：2023年度季度销售占比</figcaption>
</figure>

最佳实践：

• alt 提供简明的关键信息
• <figcaption> 提供更详细的描述或数据来源

ARIA 角色补充

虽然 <figure> 默认有 role="figure"，但在复杂情况下可以显式声明：

<figure role="group" aria-labelledby="fig1">
  <img src="diagram.png" alt="系统架构图">
  <figcaption id="fig1">图3：微服务架构示意图</figcaption>
</figure>

浏览器兼容性与样式重置

默认样式覆盖

不同浏览器的默认样式可能有差异，建议重置：

figure {
  margin: 1em 0;
  padding: 0;
  border: none;
}

figcaption {
  font-style: italic;
  text-align: center;
  padding: 0.5em;
}

旧版浏览器回退方案

对于不支持 HTML5 的浏览器（如 IE8）：

<!--[if lt IE 9]>
<style>
  figure { display: block; }
  figcaption { display: block; }
</style>
<![endif]-->

实际项目中的应用示例

新闻网站图片报道

<article>
  <h2>城市马拉松比赛</h2>
  <figure>
    <img src="marathon.jpg" alt="选手冲过终点线">
    <figcaption>
      图4：李四以2小时15分成绩夺冠（摄影：王五）
    </figcaption>
  </figure>
  <p>正文内容...</p>
</article>

电子商务产品展示

<div class="product">
  <figure>
    <img src="product-123.jpg" alt="无线蓝牙耳机">
    <figcaption>
      <h3>XYZ Pro 耳机</h3>
      <p>360°环绕音效 | 30小时续航</p>
    </figcaption>
  </figure>
</div>

与其它HTML元素的协作

结合 <details> 实现可折叠内容

<details>
  <summary>查看设计草图</summary>
  <figure>
    <img src="sketch.png" alt="产品设计草图">
    <figcaption>初版设计概念图（点击可收起）</figcaption>
  </figure>
</details>

在 <blockquote> 中的使用

<figure>
  <blockquote>
    <p>我们最重要的决定不是做什么，而是不做什么。</p>
  </blockquote>
  <figcaption>— 史蒂夫·乔布斯，<cite>苹果公司会议</cite></figcaption>
</figure>

语义化价值与SEO优势

搜索引擎会特别处理 <figure> 内的内容：

• 将图片与 <figcaption> 文本关联
• 提升媒体内容的上下文相关性
• 可能影响图片搜索结果的排名

示例结构：

<article>
  <h1>如何拍摄夜景</h1>
  <figure>
    <img src="night-photo.jpg" alt="三脚架上的相机拍摄城市夜景">
    <figcaption>图5：使用三脚架长时间曝光拍摄（ISO 100, 30s）</figcaption>
  </figure>
  <p>正文内容...</p>
</article>