HTML - figure 标签

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

打印本页