html5的figure/figcaption讲解及实例
一、总结
一句话总结：
figure元素：用来包着媒体资源，比如图片图表：是一个【媒体组合元素】，也就是对其他的媒体元素进行组合，比如：图像、图表等等
figcaption元素：figure的标题：用来给figure元素定义标题
<figure> <img src="p1.jpg" alt="" width="100"> <img src="p2.jpg" alt="" width="100"> </figure> <figcaption>我的厨艺作品1</figcaption>
1、figure+figcapture完全可以用div+h标签替代，那么他们存在的意义是什么？
有特殊的语义，让浏览器或者开发者更好的知道这段代码是什么意思
二、html5--2.9新的布局元素(6)-figure/figcaption
学习要点
- 了解figure/figcaption元素的语义和用法
- 通过实例理解figure/figcaption元素的用法
- figure元素
- figure/figcaption都是HTML5中新增的元素
- figure元素是一个媒体组合元素，也就是对其他的媒体元素进行组合，比如：图像、图表等等
- figcaption元素
- 用来给figure元素定义标题。
实例
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 </head> 7 <h2>我是一个厨艺爱好者</h2> 8 <p>我是一个厨艺爱好者............</p> 9 <figure> 10 <img src="p1.jpg" alt="" width="100"> 11 <img src="p2.jpg" alt="" width="100"> 12 </figure> 13 <figcaption>我的厨艺作品1</figcaption> 14 <figure> 15 <img src="p3.jpg" alt="" width="100"> 16 <img src="p4.jpg" alt="" width="100"> 17 </figure> 18 <figcaption>我的厨艺作品2</figcaption> 19 <body> 20 </body> 21 </html>