[翻译]小提示:使用figure和figcaption元素的正确方式
2016-05-18 10:06
567 查看
figure和figcaption是一对经常被一起使用的语义化标签。如果你还没有看过规范中的定义,现在有机会在你的项目中使用它们了。如果你不知道怎么用,下面是关于如何正确使用它们的一些提示。
figure元素经常用于image:
figure元素表示内容的自包含单元。这个含义是,如果你把元素无论是移出文档或移动到文档的底部,它都不会影响文档的意思。
尽管如此,还是需要记住一点,并不是所有的image都是一个figure.
代码块
视频
音频剪辑
广告
下面是一个使用figure来表示代码块的例子
有关如何在figure和figcaption元素上使用ARIA的详细,可以看之前的文章《如何在HTML5中有效使用ARIA》
并不是所有的figure都需要figcaption
然而,当使用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元素经常用于image:
<figure> <img src="dog.jpg" alt="Maltese Terrier"> </figure>
figure元素表示内容的自包含单元。这个含义是,如果你把元素无论是移出文档或移动到文档的底部,它都不会影响文档的意思。
尽管如此,还是需要记住一点,并不是所有的image都是一个figure.
figure元素包含多个image
如果文档中多个img标签是相互关联的,可以把它们放到一个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元素并不局限于在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="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》
使用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元素时,还有其它哪些方面,在这里没有提到的,可以在评论中写出来。
原文: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/
相关文章推荐
- resin linux启动脚本
- Android中OnScrollListener的详解(Listview分批加载用到)
- objective-c内存管理的实现机制,并简述什么时候由你负责释放对象,什么时候不由你释放?
- java的遍历数组效率测试源码
- Android Touch系统简介(二):实例详解onInterceptTouchEvent与onTouchEvent的调用过程
- JAXB - Hello World
- 找水王
- 美亚退保
- coreData初步认识
- elasticsearch安装
- Linux基础(FTP服务搭建)
- iOS推送:本地通知UILocalNotification
- DP-Max sum
- UI进度条相关
- Android的Touch系统简介(一
- Java_关于App class loader的总结
- Oracle Dump 分析学习总结
- JSP和JavaBean测试
- 本页不但包含安全的内容,也包含不安全的内容
- 关于android studio使用Google map报错的整理