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

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

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

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

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

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

实例代码:

<figure>
定义图文并茂的html5新标签-figure、figcaption figure figcaption
<p>黄浦江上的的卢浦大桥</p>
<img src="shanghai_lupu_bridge.jpg" width="350"height="234" />
</figure>

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


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

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

<figure>
<figcaption>黄浦江上的的卢浦大桥</figcaption>
<img src="shanghai_lupu_bridge.jpg" width="350"height="234" />
</figure>

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

  

爱华网本文地址 » http://www.aihuau.com/a/25101012/105076.html

更多阅读

360浏览器如何设置新标签页 精 360浏览器标签

360浏览器如何设置新标签页 精——简介360浏览器是我平时上网常用的一款浏览器,但是我们在上网的时候往往只专注于使用浏览器的上网快慢,对于浏览器的一些便捷功能的设置却不善于发现。磨刀不误砍柴工,我们要是稍花时间掌握了一些便捷

360浏览器设置新标签页为主页 360浏览器 标签页主页

一直使用的是360浏览器,最近不知道怎么搞的,浏览器升级以后,不能选择把新标签页和空白页设置为主页了,一打开浏览器后就只能是360搜索或者官网之类的,因为个人的习惯所限,所以一直感觉很不舒服,后来这个我研究了好久,最后终于研究出来了!

转载 经典折子的赋新--谈谈王耀文曹莉茵的《关亡》 折子

名家代表作,涵盖说噱弹唱演,念及台风气质掌声:张:《盘夫》、《塞赃》、《照镜》杨:《别兄》、《回柬》、《絮阁》蒋:《夺子》、《认母》、《关亡》严:《钉板告状》、《载美回苏》、《激怒醇亲王》姚:《什刹海》、《暖锅为媒》、《炼印》原

声明:《定义图文并茂的html5新标签-figure、figcaption figure figcaption》为网友奋斗的小青年分享!如侵犯到您的合法权益请联系我们删除