李涛自留地
回到顶部
首页 > 前端 > Html5新元素figure标签如何使用？Html5新元素figure标签用法实例

Html5新元素figure标签如何使用？Html5新元素figure标签用法实例

  • 2022年5月16日
  • 1,086 次
  • 标签：

Figure标签是Html5中的新标签新元素之一，新增这个新标签也过去很久了，我是在去年一次偶然的看到别人的网站上用的这个标签，但是也了解了一下，但是实际上也没有在前端模板制作中使用过这个标签。今天主要记载和学习一下Html5新元素figure标签如何使用？Html5新元素figure标签用法实例。感觉Figure标签在模板制作过程中用在显示网站文章的缩略图中应该是一个不错的选择。

Html官网对于Figure的详细定义及介绍：

<figure> 元素标识与主要内容相关的自包含内容，例如图像、表格或图表。<figcaption> 元素通常嵌套在 <figure> 元素中，以便为 <figure> 标签标识的内容添加标题。

Figure自包含内容：

Figure 元素表示一个内容单元，可以选择带有标题，它是自包含的，通常作为单个单元从文档的主要流程中引用，并且可以从文档的主要流程中移开而无需影响文档的意义。

此外，它指定元素的内容<figure>应该是流内容，在内容之前或之后带有可选的标题。从理论上讲，这可以用于几种类型的东西：侧边栏、拉引号、旁白、图表、图像、辅助媒体。在实践中，最常见的用途是用于带字幕的图像和图表。这是有道理的，因为“图形”在学术和技术写作中具有意义——插图、图像、图表或其他视觉内容，通常带有标题，与主要内容相关，但经常与主要内容分开。但是，没有理由不能将它用于某些其他目的。

<figure>对比<aside>的用途
根据规范， <figure>and<aside>元素似乎有类似的用途。有些人使用<aside>拉引号和与内容相关的侧边栏，所以有一些重叠。但也存在一些差异。当然，主要区别在于<aside>它没有内置的标题元素。因此，如果您的侧内容需要标题，则可能表明它确实是一个<figure>。不过，更重要的<figure>是它用于与主要内容直接相关的内容，而<aside>用于“切向相关”的内容。这表明特定于特定内容文章的引文、信息图表、图表和其他内容应放在<figure>。<aside>元素应该用于侧边栏部分和（也许）评论。

根据以上Html官网关于Figure的介绍，也大致上知道了Figure用法，主要是用作侧边栏、图像、图表中，在实际运用中，应该是用作图像中比较常见，此外现在大部分主流浏览器都已经支持Figure标签。Figure必须Figcaption来使用，在官方的使用案例中，就是把Figure标签用在了图像信息展示方面，以下是我用Figure新标签做的一个缩略图展示的小Demo： 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html5新标签新元素Figure用作图像方面的Demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            font-size: 14px;
            background-color: #f8f8f8;
            color: #333;
        }

        .content {
            margin: 0 auto;
        }

        .thumbnail {
            margin: 15px;
        }

        .thumbnail figure {
            position: relative;
            display: flex;
            flex-flow: column;
            max-width: 320px;
            margin: auto;
            padding: 3px;
            border: 1px dashed #000;
        }

        .thumbnail figure img {
            max-width: 320px;
        }

        .thumbnail figure figcaption {
            position: absolute;
            left: 0;
            bottom: 3px;
            width: 100%;
            background-color: rgba(255, 255, 255, 0.3);
            color: #fff;
            text-align: center;
        }
    </style>
</head>

<body>
    <main class="content">
        <section class="thumbnail">
            <figure>
                <img src="ss06.jpg" alt="好看的雪山图片" title="好看的雪山图片">
                <figcaption>好看的雪山图片</figcaption>
            </figure>
        </section>
    </main>
</body>

</html>

感觉Figure这个新标签用上之后，感觉Html页面看上去代码更加的规范标准，不像还没有新增Figure这个标签的时候，大家想咋定义就咋定义展现出这种效果。以下是以上Demo展示出来的Html的页面效果图：

Html5新元素figure标签如何使用？Html5新元素figure标签用法实例

以上就是《Html5新元素figure标签如何使用？Html5新元素figure标签用法实例》全文内容，希望本文能帮助到你。

若非作者标注皆为李涛自留地原创文章，转载或复制请以超链接形式并注明出处。