数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学创建自包含的HTML5内容
HTML5中的<figure>元素用于显示自包含的内容（图像、视频等）。这可以附加到主程序，并且可以在文档中的任何位置使用，而不会影响文档的流程。此外，如果我们删除<figure>标签，它不会影响文档的结构。
语法
下面显示了在HTML中使用<figure>标签的方法：
<figure> Image content... </figure>
<figure>标题中使用的参数是img、src和figcaption。
<img>标签用于在包含图像及其标题时指定图像源URL。<figure>和<figcaption>元素用于对图像进行分组并为其提供标题。浏览器使用默认CSS设置显示<figure>元素：
figure {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}
现在，让我们看一些示例，这些示例演示了在HTML中使用自包含内容元素。
示例
在下面的示例中，我们使用<figure>标签创建自包含内容：
<!DOCTYPE html>
<html>
<head>
<style>
figure {
border: 1px #cccccc solid;
padding: 4px;
margin: auto;
}
figcaption {
background-color: black;
color: white;
font-style: italic;
padding: 2px;
text-align: center;
}
</style>
</head>
<body>
<h1>Usage of Self-Contained Content Element</h1>
<figure>
<img src="https://tutorialspoint.com/images/forex_trading_icon.svg" alt="Trulli" height="150" width="150">
<figcaption>Fig.1 - flowers,India</figcaption>
</figure>
</body>
</html>
示例
以下是另一个示例，它显示了使用CSS的<figure>标签的用法：
<!DOCTYPE html>
<html>
<head>
<style>
figure {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}
</style>
</head>
<body>
<p>A figure element is displayed like this:</p>
<figure>
<img src="https://tutorialspoint.com/images/statistics_icon.svg" alt="The Pulpit Rock" width="150" height="150">
</figure>
<p>Change the default CSS settings to see the effect.</p>
</body>
</html>
示例
让我们看另一个例子：
<!DOCTYPE html>
<html>
<head>
<title>HTML figure Tag</title>
</head>
<body>
<h2>Tutorialspoint Coding Ground</h2>
<figure>
<img src="https://tutorialspoint.com/images/cbse-class-6-maths-notes_icon.svg" />
</figure>
</body>
</html>
更新于：2023年10月6日
500 次浏览
广告