解释HTML5中figure标签的用法

HTML5中的 < figure>元素表示自包含内容（如图像、图表、代码清单、插图等），以及可选的标题，标题使用 < figcaption>元素指定。figure元素、其标题和其内容被视为单个单位。

通常，<figure>元素在文档的主要流中被引用。即使我们将其删除或移动到文档的其他部分，figure也不会影响文档的流。主要流保持不间断。

`<figure>`标签的用法

在HTML5之前，通过HTML在图片上没有一种语义化地添加标题的方法。如果我们想要添加标题或描述，我们必须添加一个带有类或类似内容的段落。现在，在HTML5中，添加了<figure>标签。

在HTML5中，<figure>标签在处理媒体内容（如图像、视频、音频等）时常用。它还与<figcaption>标签配对，为我们的内容提供标题或描述。它提供了一种语义化地组织文档内容的方式。

语法

以下是HTML5中<figure>和<figcaption>元素的语法−

<figure>
   <img src="path or link of an image">
   <figcaption>caption or description</figcaption>
</figure>

在上面的语法中，

使用<img>标签在文档中嵌入图像。
使用<figcaption>标签指定特定图像的标题。

示例

在下面的示例中，我们使用<figure>元素在文档中插入图像。此外，我们使用<figcaption>元素为图像定义标题 –

<!DOCTYPE html>
<html>
<head>
   <title>Use of figure tag in HTML5</title>
   <style>
      body {
         text-align: center;
      }
   </style>
</head>
<body>
   <figure>
      <img src="https://www.tutorialspoint.com/assets/questions/media/14304-1693310967.jpg" height="500px" width="500px" alt="This is Basilica of Bom Jesus">
      <figcaption>Fig.1 - Basilica of Bom Jesus, Goa</figcaption>
   </figure>
</body>
</html>

当我们执行上述程序时，我们可以在容器中看到一张图像和它的标题。

示例

在下面的示例中，我们使用CSS来为和元素设置样式-

<!DOCTYPE html>
<html>
<head>
   <title>Use of figure tag in HTML5</title>
   <style>
      figure {
         border: 1px black solid;
         padding: 1em;
         margin: auto;
      }
      figcaption {
         background-color: seagreen;
         color: white;
         font-style: italic;
         padding: 5px;
         text-align: center;
      }
   </style>
</head>
<body>
   <figure>
      <img src="https://www.tutorialspoint.com/assets/questions/media/14304-1693310967.jpg" width="100%" alt="This is Basilica of Bom Jesus">
      <figcaption>Fig.1 - Basilica of Bom Jesus, Goa</figcaption>
   </figure>
</body>
</html>