資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 HTML 為圖片設定標題？
HTML，或超文字標記語言，用於建立網頁並定義其結構和內容。HTML 有各種元素來建立網頁。圖片元素是網頁內容的重要元素之一。圖片是展示想法和感受以及增強網頁視覺吸引力的強大工具。此外，圖片標題使之更加強大，因為圖片本身不足以傳達資訊或提供上下文。標題是簡短的描述，為檢視者提供了圖片之外的附加資訊。
語法
以下是圖片標題的語法：
<figcaption> Write image caption here... </figcaption>
HTML 圖片標題簡介
圖片標題是網頁設計圖片的重要組成部分，因為它為檢視者提供了附加資訊。在 HTML 中，這是一種非常簡單有效的方式，可以在網頁上為圖片新增標題。
HTML 允許使用 <figure> 和 <figcaption> 元素為圖片設定標題。<figure> 元素將圖片及其標題組合在一起，而 <figcaption> 元素用於定義標題文字。
以下是如何使用 HTML 為圖片新增標題的示例：
<figure> <img src="https://tutorialspoint.tw/dip/images/16-bit.jpg" alt="16-Bit Image"> <figcaption>16-Bit RGB Image</figcaption> </figure>
在上面的示例中，圖片與標題一起新增到 figure 元素中，標題使用 figcaption 元素。
示例
以下是使用 HTML 為圖片設定標題的完整程式碼示例。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Caption for an image using HTML</h2>
<figure>
<img src="https://tutorialspoint.tw/dip/images/16-bit.jpg" alt="16-Bit Image">
<figcaption>Fig: 16-Bit RGB Image</figcaption>
</figure>
</body>
</html>
在 HTML 中建立響應式圖片標題
重要的是，新增的圖片應該是響應式的，並適應不同的螢幕尺寸，以獲得更好的使用者體驗。CSS 允許開發人員建立響應式圖片標題。我們可以透過設定 <figure> 和 <figcaption> 元素的樣式來建立響應式圖片標題。例如，要為圖片建立響應式標題，我們可以使用以下 CSS 程式碼：
<style>
body {
text-align: center;
}
figure {
display: block;
margin: 0;
padding: 0;
}
figcaption {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: bold;
color: white;
margin-top: 10px;
background-color: #f1f;
padding: 5px;
}
</style>
在上面的 CSS 程式碼中，我們為整個主體設定了居中對齊，然後將 display 屬性設定為 block，並將 margin 和 padding 屬性設定為 0。
之後，我們透過設定字體系列、大小和粗細，以及文字的顏色和對齊方式，為 figcaption 元素設定了樣式。最後，我們添加了一個 margin-top 屬性，以便在圖片和標題之間建立一些空間。
示例
以下是設定響應式圖片標題的完整程式碼示例。
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
figure {
display: block;
margin: 0;
padding: 0;
}
figcaption {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: bold;
color: white;
margin-top: 10px;
background-color: #f1f;
padding: 5px;
}
</style>
</head>
<body>
<h2>Responsive Caption for an image using HTML</h2>
<figure>
<img src="https://images.all-free-download.com/images/graphicwebp/stunning_sunset_6_209866.webp" alt="A beautiful image">
<figcaption>This is a beautiful image of a sunset</figcaption>
</figure>
</body>
</html>
結論
在本文中，我們討論了使用 HTML 為圖片新增標題。為圖片新增標題是一種簡單有效的方式，可以為檢視者提供附加資訊。我們可以使用 figure 和 figcaption 元素將標題與圖片一起新增。
13K+ 瀏覽量
