HTML5教程之figure元素与figcaption元素详解
大家在写xhtml、html中常常用到一种图片列表,图片+标题或者图片+标题+简单描述。以前的常规写法:
<li>
<img src="" /><p>title</P>
</li>
而在html5中有了新标签更能语义化的定义出这中图片列表,那就是figure标签。
w3c赋予的定义:figure标签规定独立的流内容(图像、图表、照片、代码等等)。figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。
实例代码:
<figure>
<p>黄浦江上的的卢浦大桥</p>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
figure用来代替原来li标签,P标签谁来取代呢?答案就是:figcaption
w3c赋予的定义:figcaption
那么上面的代码就变成了:
<figure>
<figcaption>黄浦江上的的卢浦大桥</figcaption>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
这是个特别易于理解的标签,其用法也特别清楚。即便是简单,这里也建议大家亲自动手写下。