HTML <figure> 标签 - 蝴蝶教程

<figure>标签定义和用法

<figure>标签指定自包含的内容，如插图，图表，照片，代码清单等。
虽然<figure>元素的内容与主流相关，但其位置与主流无关，如果删除，则不应影响文档流。

<figure>浏览器支持

Internet Explorer/Edge	Chrome	FireFox	Safari	Opera

9.0（含）以上	6.0（含）以上	4.0（含）以上	5.0（含）以上	11.1（含）以上

<figure>标签实例

<!DOCTYPE html>
<html>
<body>
<h2>参观的地方</h2>
<p>长城（Great Wall），又称万里长城，是中国古代的军事防御工程，是一道高大、坚固而连绵不断的长垣，用以限隔敌骑的行动。</p>

<figure>
  <img src="/images/greatwall.jpg" alt="GreatWall" style="width:100%">
</figure>

</body>
</html>

尝试一下

HTML4.01和HTML5之间的差异

<figure>标记是HTML5中的新标记。

<figure>全局属性

<figure>标签还支持全局属性。

查看有关全局属性的更多知识。

<figure>事件属性

<figure>标签还支持事件属性。

查看有关事件属性的更多知识。

<figure>默认CSS设置

figure { 
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 40px;
    margin-right: 40px;
}