数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学在 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> 元素添加标题的示例：
<!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>
示例
以下是另一个示例：
<!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>
示例
<!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
广告