資料結構
網路
關係型資料庫管理系統 (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.tw/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.tw/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.tw/images/library-sub-banner1.png" />
<figcaption>Tutorials Point Library of Tutorials</figcaption>
</figure>
</body>
</html>
更新於：2023年10月6日
瀏覽量：110
廣告