在 HTML5 中为 <figure> 元素添加标题

HTML5 中的 <figure> 元素用于添加文档中自包含的信息，例如图表、照片或代码。

通常，figure 元素附加到主程序，我们可以在文档的任何位置使用它，也可以在不影响文档流程的情况下删除 <figure> 标签。

  • <figcaption> 元素用于为 <figure> 标签元素添加标题。这是一个可选标签，可以放在标签内容之前或之后。

  • <figure> 元素用于图表、标记照片等。

  • <figcaption> 元素用于为 <figure> 元素提供标题。

  • <figcaption> 元素可以是 <figure> 元素的第一个或最后一个子元素。

语法

以下是 <figure> 元素的语法：

<figure>
   <img src="....">
   <figcaption>.......</figcaption>
</figure>

<figure> 标题中使用的参数是 img src 和 figcaption。要包含图像源，我们使用 img src 标签；figcaption 用于指定图像的标题。浏览器使用默认的 CSS 设置显示 <figure> 元素。

figure {
   display: block;
   margin-top: 1em;
   margin-bottom: 1em;
   margin-left: 40px;
   margin-right: 40px;
}

示例

以下是如何在 HTML5 中为 <figure> 元素添加标题的示例：

Open Compiler
<!DOCTYPE html>
<html>
<body>
   <h1>Usage of figure and figcaption element</h1>
   <figure>
      <img src="https://tutorialspoint.com/images/cbse_syllabus_icon.svg" alt="Rose" width="150" height="150">
      <figcaption>Fig.1 - Rose, Hyderabad, India.</figcaption>
   </figure>
</body>
</html>

示例

以下是另一个示例：

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <title>TutorialsPoint</title>
</head>
<body>
   <figure>
      <img src="https://tutorialspoint.com/images/computer_concepts_icon.svg" width="150" height="100">
      <figcaption> TutorialsPoint | Simply Easy Learning </figcaption>
   </figure>
</body>
</html>

示例

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <title>HTML figcaption Tag</title>
</head>
<body>
   <figure>
      <img src="https://tutorialspoint.com/images/library-sub-banner1.png" />
      <figcaption>Tutorials Point Library of Tutorials</figcaption>
   </figure>
</body>
</html>

更新于：2023年10月6日

浏览量：110

开启你的 职业生涯

完成课程获得认证

开始学习
广告