html5新标签figure和figcaption

<figure> 标签是 HTML 5 中的新标签。figure 和 figcaption 元素通常作为两个语义化的标签并一起使用。

figure 标签通常用于图片元素：

<figure>

    <img src="/i/shanghai_lupu_bridge.jpg" width="350" height="234" />

</figure>

figure 标签是一种独立于上下文的单元。这意味着无论你要把它移到什么地方，都不会影响他在文档的含义。因此，我们也要记得，并不是所有的图像都是 figure 。

 

figure 里的多张图片

你可以在 figure 中放入许多 img 标记如果它们和你的内容相关。

<figure>

    <img src="bridge00.jpg" width="350" height="234" />

   <img src="bridge01.jpg" width="350" height="234" />

   <img src="bridge02.jpg" width="350" height="234" />

</figure>

 

figure 中放入其他元素

figure 元素中不仅仅只能放入图片，你也可以放入以下内容：

• 代码块，
• 视频，
• 音频片段，或者
• 广告。

这里是一个 figure 中放入代码块的例子：

<figure>
  <pre>
    <code>
      p {
          color: #333;
          font-family: Helvetica, sans-serif;
          font-size: 1rem;
      }
    </code>
  </pre>
</figure>

figure 中嵌套 figure

如果合理的话，你可以在 figure 中嵌套 figure 。在这里，ARIA 和 role 属性的使用可以提高语义化。

<figurerole="group">
  <figcaption>Dogbreeds</figcaption>
  <figure>
    <img src="dog1.jpg" alt="Maltese Terrier">
    <figcaption>AdorableMalteseTerrier</figcaption>
  </figure>
  <figure>
    <imgsrc="dog2.jpg" alt="Black Labrador">
    <figcaption>Cuteblacklabrador</figcaption>
  </figure>
</figure>
 

想要更多的了解如何搭配 ARIA 使用 figure 和 figcaption ，请看我之前写的文章 how to use ARIA effectively with HTML5 。

正确使用 figcaption

<figcaption> 元素应该被置于 <figure> 元素的第一个或最后一个子元素的位置。

figcaption 标签用于说明 figure 的标题或者内容。并不是每个 figure 都需要 figcaption 。但是，当使用 figcaption 的时候，它应该成为 figure 的开头或者最后一个 block：

<figure>
  <figcaption>Threedifferentbreedsofdog.</figcaption>
  <imgsrc="dog1.jpg" alt="Maltese Terrier">
  <imgsrc="dog2.jpg" alt="Black Labrador">
  <imgsrc="dog3.jpg" alt="Golden Retriever">
</figure>
 

或者

<figure>
  <imgsrc="dog1.jpg" alt="Maltese Terrier">
  <imgsrc="dog2.jpg" alt="Black Labrador">
  <imgsrc="dog3.jpg" alt="Golden Retriever">
  <figcaption>Threedifferentbreedsofdog.</figcaption>
</figure>
 

你也可以在 figcaption 中使用流元素

如果你希望给你的图像增加更多语义，你可以使用一些元素，比如 h1 和 p 。

<figure>
  <imgsrc="dogs.jpg" alt="Group photo of dogs">
  <figcaption>
    <h2>PuppySchool</h2>
    <p>ChampionshipClass of 2016</p>
  </figcaption>
</figure>