HTML <figure> 标签用于创建自包含的内容。自包含的内容包括图表、图像、代码示例等。
<figure> 标签的内容与主流的内容相连。它被视为一个独立的单元。<figcaption> 标签可用于为 <figure> 标签的内容提供标题或解释。
语法
<figure>
...
</figure>
属性
<figure> 标签支持 HTML 的 全局属性 和 事件属性。
<figure> 标签示例
下面的例子将说明<figure> 标签的用法。在哪里、何时以及如何使用<figure> 标签，以及如何使用 CSS 设置<figure> 标签的样式。
使用<figure> 标签创建 figure 元素
在下文中，我们将使用 HTML <figure> 标签 。
<!DOCTYPE html>
<html>
<body>
<figure>
<img src="/cg/images/logo.png" alt="LOGO" />
</figure>
</body>
</html>
<figure> 标签的设置
在此示例中，我们将设置一个圆角边框，框住图形，并在<figure> 标签上设置填充和边距。
<!DOCTYPE html>
<html>
<head>
<style>
figure {
margin: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 10px;
background-color: #fff;
display: inline-block;
}
</style>
</head>
<body>
<figure>
<img src="/cg/images/logo.png" alt="LOGO" />
</figure>
</body>
</html>
<figure> 标签的标题
让我们看一下以下示例，我们将在其中观察 <div> 标签和 <figure> 标签之间的区别。
<!DOCTYPE html>
<html>
<head>
<style>
.child {
display: inline-block;
}
.child, img{
border: 1px solid black;
}
</style>
</head>
<body>
<div>
<div class="child">
<p>Using div Tag:</p>
<div>
<img src="/cg/images/logo.png" alt="logo">
<p>QikepuCom Logo</p>
</div>
</div>
<div class="child">
<p>Using figure Tag:</p>
<figure>
<img src="/cg/images/logo.png" alt="Logo">
<figcaption>QikepuCom Logo</figcaption>
</figure>
</div>
</div>
</body>
</html>
支持的浏览器
| 浏览器 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| <figure> | 8.0 | 9.0 | 4.0 | 5.1 | 11.0 |
