html5--2.9新的布局元素(6)-figure/figcaption
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>