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

学习要点

  2. 了解figure/figcaption元素的语义和用法
  3. 通过实例理解figure/figcaption元素的用法
  2. figure元素
  • figure/figcaption都是HTML5中新增的元素
  • figure元素是一个媒体组合元素，也就是对其他的媒体元素进行组合，比如：图像、图表等等

 

  2. figcaption元素
  • 用来给figure元素定义标题。

实例

html5--2.9新的布局元素(6)-figure/figcaption_微信

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


html5--2.9新的布局元素(6)-figure/figcaption_大数据_03html5--2.9新的布局元素(6)-figure/figcaption_html_04


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

 


我的旨在学过的东西不再忘记（主要使用艾宾浩斯遗忘曲线算法及其它智能学习复习算法）的偏公益性质的完全免费的编程视频学习网站： ​​fanrenyi.com​​；有各种前端、后端、算法、大数据、人工智能等课程。

​​版权申明：欢迎转载，但请注明出处​​

一些博文中有一些参考内容因时间久远找不到来源了没有注明，如果侵权请联系我删除。​