html5标签figure、figcaption

figure、figcaption，这俩个标签都是定义图文的

常常用到一种图片列表，图片+标题或者图片+标题+简单描述。以前的常规写法：

<li>
　　<img src="test.jpg" /><p>title</P>
</li>

而在html5中有了新标签更能语义化的定义出这中图片列表，那就是figure标签。

figure标签规定独立的流内容（图像、图表、照片、代码）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

figcaption 标签定义 figure 元素的标题。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

那么上面的代码就变成了：

<figure>
<figcaption>title</figcaption>
<img src="test.jpg" />
</figure>

转载于:https://www.cnblogs.com/baby123/p/4904440.html

html5标签figure、figcaption相关推荐

HTML5 之 Figure Figcaption 标签
概述 figure 用于定义一个可附加标题的内容元素,figcaption 用于为figure元素添加标题和描述信息. 页面中的插图卡片比较常见,卡片中包含有图片的描述信息.标题或者按钮等. ...
html5中figure怎么用,HTML5中figure和figcaption标签用法
HTML5中figure和figcaption标签一般都是配套使用的,先了解下两者的基本定义,然后结合实例来说明两者的用法. 标签规定独立的流内容(图像.图表.照片.代码等等). figure元素的内 ...
H5新标签 figcaption 定义图文并茂的html5新标签-figure、figcaption
本来想分两篇文章来解释说明figure.figcaption的,但是这俩个标签都是定义图文的,所以我们合起来讲解,大家更能容易接受. 大家在写xhtml.html中常常用到一种图片列表,图片+标题或者 ...
html5新标签 figure 和 figcaption
html5新标签 figure 和 figcaption <figcaption> 定义 <figure> 元素的标题. <figure> 规定自包含内容,比如图示 ...
html5标签详解,HTML5中figcaption标签用法详解
HTML5中figure和figcaption标签一般都是配套使用的,先了解下两者的基本定义,然后结合实例来说明两者的用法. 标签规定独立的流内容(图像.图表.照片.代码等等). figure元素的内 ...
php识别html5,CSS_在IE6/7/8下识别html5标签(让老式浏览器识别html5)，识别html5标签： html5添加了许 - phpStudy...
在IE6/7/8下识别html5标签(让老式浏览器识别html5) 识别html5标签: html5添加了许多语义化的标签,比如,,什么的,当时看到这些标签的时候心想html5估计很多老式IE浏览器都 ...
IE6,IE7和8浏览器兼容HTML5标签的解决方案
html5大行其道的时代已经到来.如果你还在等待浏览器兼容,说明你已经与web脱节几条街了.当然,这得益于移动客户端的蓬勃发展.如果还在纠结于,是否应该掌握html5和css3技术时,请狠狠的抽自己 ...
html5 Doctor——教你规范使用html5标签
学习地址(英文资料):http://html5doctor.com/ http://www.w3.org/html/wg/drafts/html/master/text-level-semantics ...
Voiceover “眼里” 的HTML5标签
当我们了解了移动设备中盲人辅助工具VoiceOver或Talkback或保益悦听能够帮助盲人朋友使用移动App时,我们或许应该从最基本的工作开始做起. 在大部分网页重构师面试的过程当中,"你 ...

html5标签figure、figcaption

html5标签figure、figcaption相关推荐

最新文章

热门文章