您好,欢迎来到化拓教育网。
搜索
您的当前位置:首页figcaption标签css,[HTML]正确使用Figure和Figcaption标签(译)_html/css_WEB-ITnose

figcaption标签css,[HTML]正确使用Figure和Figcaption标签(译)_html/css_WEB-ITnose

来源:化拓教育网

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

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

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

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

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

figure里的多张图片

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

figure中放入其他元素

figure元素中不仅仅只能放入图片,你也可以放入以下内容: 代码块,

视频,

音频片段,或者

广告。

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

p { color: #333; font-family: Helvetica, sans-serif; font-size: 1rem; }

figure中嵌套 figure

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

Dogbreeds AdorableMalteseTerrier Cuteblacklabrador

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

正确使用 figcaption

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

并不是每个 figure都需要 figcaption。

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

Threedifferentbreedsofdog.

或者

Threedifferentbreedsofdog.

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

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

PuppySchool

ChampionshipClass of 2016

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

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- huatuo9.cn 版权所有 赣ICP备2023008801号-1

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务