最新更新 sitemap 网站制作设计本站搜索
网页设计
国外网站 韩国网站 个人主页 手提袋设计 CSS 网页特效 平面设计 网站设计 Flash CMS技巧 服装网站 php教程 photoshop 画册 服务器选用 数据库 Office
虚拟主机 域名注册 云主机 网页设计 客服QQ:8208442

html5新标签figure、figcaption应用实例

日期:04-17    来源:中国设计秀    作者:cnwebshow.com

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

 vxZ中国设计秀

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

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

<li>vxZ中国设计秀
<img src="" /><p>title</P>vxZ中国设计秀
</li>vxZ中国设计秀

而在html5中有了新标签更能语义化的定义出这中图片列表,那就是figure标签。vxZ中国设计秀
vxZ中国设计秀
w3c赋予的定义:figure标签规定独立的流内容(图像、图表、照片、代码等等)。figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。vxZ中国设计秀

实例代码:vxZ中国设计秀
 vxZ中国设计秀

<figure>vxZ中国设计秀
<p>黄浦江上的的卢浦大桥</p>vxZ中国设计秀
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />vxZ中国设计秀
</figure>
 vxZ中国设计秀

figure用来代替原来li标签,P标签谁来取代呢?答案就是:figcaptionvxZ中国设计秀

vxZ中国设计秀
w3c赋予的定义:figcaption 标签定义 figure 元素的标题(caption)。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。vxZ中国设计秀
vxZ中国设计秀
那么上面的代码就变成了:vxZ中国设计秀
 vxZ中国设计秀

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

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