figure 和 figcaption 元素的正确使用方式_html/css

figure 和 figcaption 元素的正确使用方式_html/css_WEB-ITnose

WBOY

发布： 2016-06-21 08:51:00

原创

2308 人浏览过

figure 和 figcaption 是两个经常在一起使用的语义化元素。如果你还没有在规范中了解过他们，没有机会在项目中使用过他们，或者说现在对他们还是一无所知，这里就给大家讲一些如何正确使用他们的小技巧。

figure 元素经常用于图片,如下所示:

<figure>    <img src="dog.jpg" alt="Maltese Terrier"></figure>

登录后复制

figure 元素表示内容的一个自包含单元。这就意味着你要么可以在文档中向下移动该元素，要么使其处于文档的底部，它都不会影响文档的含义。

因此，我们需要记住，不是每一个图片都是一个 figure .

figure 中有多张图片

你可以在一个 figure 中放置多张图片，如果这些图片在你的文档中存在上下文关系。

<figure>    <img src="dog1.jpg" alt="Maltese Terrier">    <img src="dog2.jpg" alt="Black Labrador">    <img src="dog3.jpg" alt="Golden Retriever"></figure>

登录后复制

figure 中也可以使用其它元素

figure 元素不仅仅只限于图片的使用，也适用于其他元素，如下:

代码块
视频
音频剪辑
广告

这里有一个 code 在 figure 元素中的应用:

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

登录后复制

figure 中嵌套 figure

如果有意义，你可以在一个 figure 中嵌套另一个 figure 元素。这里一个ARIA role 属性被添加以改变语义。

<figure role="group">    <figcaption>Dog breeds</figcaption>    <figure>        <img src="dog1.jpg" alt="Maltese Terrier">        <figcaption>Adorable Maltese Terrier</figcaption>    </figure>    <figure>        <img src="dog2.jpg" alt="Black Labrador">        <figcaption>Cute black labrador</figcaption>    </figure></figure>

登录后复制

有关于如何正确处理 figure 与 figcaption 元素与ARIA的使用关系，你可以看我之前写过的一篇文章-- 如何在HTML5中正确使用ARIA？

有关于WAI-ARIA更多的教程，可以阅读《 WAI-ARIA 无障碍Web规范》一文。

正确使用 figcaption

figcaption 元素代表了 figure 元素的一个标题或者说是其相关解释。

并不是每一个 figure 元素都需要一个 figcaption 。

但是在使用 figcaption 时，它最好是 figure 块的第一个或者最后一个元素。

<figure>    <figcaption>Three different breeds of dog.</figcaption>    <img src="dog1.jpg" alt="Maltese Terrier">    <img src="dog2.jpg" alt="Black Labrador">    <img src="dog3.jpg" alt="Golden Retriever"></figure>

登录后复制

或者:

<figure>    <img src="dog1.jpg" alt="Maltese Terrier">    <img src="dog2.jpg" alt="Black Labrador">    <img src="dog3.jpg" alt="Golden Retriever">    <figcaption>Three different breeds of dog.</figcaption></figure>

登录后复制

你也可以在 figcaption 中使用其它元素

你需要对一张图片添加更多的语义，这时你可以使用多个元素，如: h1 和 p .

<figure>    <img src="dogs.jpg" alt="Group photo of dogs">    <figcaption>        <h2>Puppy School</h2>        <p>Championship Class of 2016</p>    </figcaption></figure>

登录后复制

你有使用 figure 和 figcaption 元素的其他技巧吗？如果有的话，欢迎在评论中与我们一起分享。

扩展阅读

HTML5 Accessibility Chops: the figure and figcaption elements
Quick Tip: Consider Wrapping Your Code With a “figure” Element

本文根据 @Georgie Luhur 的《 Quick Tip: The Right Way to Use Figure & Figcaption Elements 》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处： http://www.sitepoint.com/quick-tip-the-right-way-to-use-figure-and-figcaption-elements/ 。

静子

在校学生，本科计算机专业。一个积极进取、爱笑的女生，热爱前端，喜欢与人交流分享。想要通过自己的努力做到心中的那个自己。微博：@静-如秋叶