資料結構
網路
關係資料庫管理系統 (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.tw/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.tw/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.tw/images/cbse-class-6-maths-notes_icon.svg" />
</figure>
</body>
</html>
更新於：2023年10月6日
504 次瀏覽
廣告