定义图文并茂的html5新标签-figure、figcaption

本来想分两篇文章来解释说明figure、figcaption的,但是这俩个标签都是定义图文的,所以我们合起来讲解,大家更能容易接受。

大家在写xhtml、html中常常用到一种图片列表,图片+标题或者图片+标题+简单描述。

以前的常规写法:

<li>
    <img src="" />
    <p>title</p>
</li>

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

w3c赋予的定义:figure标签规定独立的流内容(图像、图表、照片、代码等等)。figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。

实例代码:

<figure>
    <p>黄浦江上的的卢浦大桥</p>
    <img src="helloweb.jpg"/>
</figure>

figure用来代替原来li标签,P标签谁来取代呢?答案就是:figcaption

w3c赋予的定义:figcaption 标签定义 figure 元素的标题(caption)。'figcaption' 元素应该被置于 'figure' 元素的第一个或最后一个子元素的位置。

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

<figure>
    <figcaption>黄浦江上的的卢浦大桥</figcaption>
    <img src="helloweb.jpg" />
</figure>

这是个非常易于理解的标签,其用法也非常清楚。即便是简单,这里也建议大家亲自动手写下。       


原文链接:HelloWeb前端网 » 定义图文并茂的html5新标签-figure、figcaption » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享