前端面试题（10）—— figure标签和figcaption标签

figure 用于定义一个可附加标题的内容元素，figcaption 用于为figure元素添加标题和描述信息。

figure表示一个独立的模块，figure中最多有一个figcaption，figcaption表示标题，必须在figure内部任意位置都可以，他们一般用于图，代码，视频，音频等。

以下HTML结构则非常清晰，figure表明一个插图卡片整体，img为插图，figcaption内部为图片的描述信息和标题。

<figure>
  <img src="image.png" alt="">
  <figcaption>caption and descriptions</figcaption>
</figure>

特性：

• figure / figcaption为块级双标签，于HTML5中新增，浏览器支持程度比较高，IE8及以下不支持
• figure含有默认外边距，浏览器不同值大小不同。figure默认的宽度是100%，高度依赖于其内容高度
• figure可以有多个子元素，但是figcaption最好最多只有一个
• figure元素的其他内容应与主内容相关，同时其他内容的位置相对于主内容又是独立的。例如插图卡片中，描述信息和标题与图片相关，而描述信息和标题的位置和图片又是相互独立的，删除figcaption元素也不会影响整体

实例：

<figure>
  <img src="image.png" alt="">
  <figcaption>caption and descriptions</figcaption>
</figure>

————————————————
版权声明：本文为CSDN博主「Don_GW」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Don_GW/article/details/109066719