星空网 > 软件开发 > 网页设计

[翻译]小提示:使用figure和figcaption元素的正确方式

figure和figcaption是一对经常被一起使用的语义化标签。如果你还没有看过规范中的定义,现在有机会在你的项目中使用它们了。如果你不知道怎么用,下面是关于如何正确使用它们的一些提示。

figure元素经常用于image:

<figure> <img src='/images/loading.gif' data-original="dog.jpg" ></figure>

figure元素表示内容的自包含单元。这个含义是,如果你把元素无论是移出文档或移动到文档的底部,它都不会影响文档的意思。

尽管如此,还是需要记住一点,并不是所有的image都是一个figure.

figure元素包含多个image

如果文档中多个img标签是相互关联的,可以把它们放到一个figure中。

<figure> <img src='/images/loading.gif' data-original="dog1.jpg" > <img src='/images/loading.gif' data-original="dog2.jpg" > <img src='/images/loading.gif' data-original="dog3.jpg" ></figure>

其它元素也可以应用figure标签

figure元素并不局限于在image上使用,你也可以做类似这些事:

  • 代码块
  • 视频
  • 音频剪辑
  • 广告

下面是一个使用figure来表示代码块的例子

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

可以嵌套使用figure

在有需要的时候,可以对figure进行嵌套使用,这里为了增加语义化,添加了ARIA role属性。

<figure role="group"> <figcaption>Dog breeds</figcaption> <figure>  <img src='/images/loading.gif' data-original="dog1.jpg" >  <figcaption>Adorable Maltese Terrier</figcaption> </figure> <figure>  <img src='/images/loading.gif' data-original="dog2.jpg" >  <figcaption>Cute black labrador</figcaption> </figure></figure>

有关如何在figure和figcaption元素上使用ARIA的详细,可以看之前的文章《如何在HTML5中有效使用ARIA》

使用figcaption的正确方式

figcaption元素表示figure的一个图例或标题。

并不是所有的figure都需要figcaption

然而,当使用figcaption时,它最好在figure块中,作为第一个或最后一个元素。

<figure> <figcaption>Three different breeds of dog.</figcaption> <img src='/images/loading.gif' data-original="dog1.jpg" > <img src='/images/loading.gif' data-original="dog2.jpg" > <img src='/images/loading.gif' data-original="dog3.jpg" ></figure>

<figure> <img src='/images/loading.gif' data-original="dog1.jpg" > <img src='/images/loading.gif' data-original="dog2.jpg" > <img src='/images/loading.gif' data-original="dog3.jpg" > <figcaption>Three different breeds of dog.</figcaption></figure>

在figcaption中包含其它标签元素

如果希望给图像添加更多语义,你可以使用其它元素,如h1,p

<figure> <img src='/images/loading.gif' data-original="dogs.jpg" > <figcaption>  <h2>Puppy School</h2>  <p>Championship Class of 2016</p> </figcaption></figure>

你在使用figure和figcaption元素时,还有其它哪些方面,在这里没有提到的,可以在评论中写出来。

原文:Quick Tip: The Right Way to Use Figure & Figcaption Elements

作者:Georgie Luhur

原文链接:https://www.sitepoint.com/quick-tip-the-right-way-to-use-figure-and-figcaption-elements/




原标题:[翻译]小提示:使用figure和figcaption元素的正确方式

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

文鼎 海外仓:https://www.goluckyvip.com/tag/94938.html
美国海外仓超大件:https://www.goluckyvip.com/tag/94939.html
店铺运营模式:https://www.goluckyvip.com/tag/9494.html
本土仓和海外仓:https://www.goluckyvip.com/tag/94941.html
海外分拨仓:https://www.goluckyvip.com/tag/94942.html
寻找英国海外仓:https://www.goluckyvip.com/tag/94943.html
从园岭新村到大梅沙海滨总站坐什么车:https://www.vstour.cn/a/363191.html
七月份适合去日本旅游吗 7月份去日本哪里好玩:https://www.vstour.cn/a/363192.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流