您的位置：首页 > Web前端 > HTML5

html5--2.9新的布局元素(6)-figure/figcaption

2017-11-28 23:49 369 查看

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>

View Code

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航