[HTML] 正确使用 Figure 和 Figcaption 标签（译）_html/css

[HTML] 正确使用 Figure 和 Figcaption 标签（译）_html/css_WEB-ITnose

php中文网

发布： 2016-06-21 08:49:42

原创

2176人浏览过

原文： quick tip: the right way to use figure & figcaption elements

figure和 figcaption元素通常作为两个语义化的标签并一起使用。如果你没看过这个细则，没有机会在项目中使用他们，或者不知道如何使用他们，那么这里提供一些提示以便你们正确使用。

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

<figure>  @@##@@</figure>

登录后复制

figure标签是一种独立于上下文的单元。这意味着无论你要把它移到什么地方，都不会影响他在文档的含义。

立即学习“前端免费学习笔记（深入）”；

因此，我们也要记得，并不是所有的图像都是 figure。

figure里的多张图片

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

<figure>  @@##@@  @@##@@  @@##@@</figure>

登录后复制

figure中放入其他元素

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

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

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

<figure>  <pre class="brush:php;toolbar:false">          p {          color: #333;          font-family: Helvetica, sans-serif;          font-size: 1rem;      }

登录后复制

figure中嵌套 figure

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

<figurerole="group">  <figcaption>Dogbreeds</figcaption>  <figure>    @@##@@    <figcaption>AdorableMalteseTerrier</figcaption>  </figure>  <figure>    @@##@@    <figcaption>Cuteblacklabrador</figcaption>  </figure></figure>

登录后复制

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

正确使用 figcaption

figcaption标签用于说明 figure的标题或者内容。

并不是每个 figure都需要 figcaption。

但是，当使用 figcaption的时候，它应该成为 figure的开头或者最后一个 block：

<figure>  <figcaption>Threedifferentbreedsofdog.</figcaption>  @@##@@  @@##@@  @@##@@</figure>

登录后复制

或者

<figure>  @@##@@  @@##@@  @@##@@  <figcaption>Threedifferentbreedsofdog.</figcaption></figure>

登录后复制

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

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

<figure>  @@##@@  <figcaption>    <h2>PuppySchool</h2>    <p>ChampionshipClass of 2016</p>  </figcaption></figure>

登录后复制

你有一些其他的关于 figure或者 figcaption的小提示么？