HTML - <figure> 标签

HTML <figure> 标签用于创建自包含的内容。自包含的内容包括图表、图像、代码示例等等。

<figure> 标签的内容与主流程的内容相关联。它被视为一个独立的单元。HTML <figcaption> 标签可以用来为<figure> 标签的内容添加标题或解释。

语法

<figure>
   ...
</figure>

属性

HTML figure 标签支持全局和事件属性。

HTML figure 标签示例

下面的例子将演示 figure 标签的使用方法、使用场景以及如何使用 CSS 样式化 figure 元素。

使用 figure 标签创建 figure 元素

在下面我们将使用 HTML <figure> 标签。

<!DOCTYPE html>
<html>
<body>
   <figure>
      <img src=
"https://tutorialspoint.com/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="https://tutorialspoint.com/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=
"https://tutorialspoint.com/cg/images/logo.png" 
                     alt="logo">
                <p>TutorialsPoint Logo</p>
            </div>
        </div>
        <div class="child">
            <p>Using figure Tag:</p>
            <figure>
                <img src=
"https://tutorialspoint.com/cg/images/logo.png" 
                     alt="Logo">
                <figcaption>TutorialsPoint Logo</figcaption>
            </figure>
        </div>
    </div>
</body>

</html>

支持的浏览器

标签
figure	支持 8.0	支持 9.0	支持 4.0	支持 5.1	支持 11.0

html_tags_reference.htm

打印页面