在 HTML 中, <img>
元素用於將圖像嵌入到網頁中。以下是如何使用<img>
標籤的基本範例:
html <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Example</title>
</head>
<body>
<h1>My Web Page</h1>
<img src="example.jpg" alt="A descriptive text about the image">
</body>
</html>
在這個例子中:
<img>
標籤用於嵌入圖像。src
屬性指定圖像的來源(URL 或檔案路徑)。在本例中,它是“example.jpg”。alt
屬性為圖像提供替代文字。如果無法載入圖像或出於輔助目的,則會顯示此文字。始終包含alt
屬性非常重要,以便為可訪問性和 SEO 提供有意義的替代文字。
您也可以使用width
和height
屬性來設定圖像的寬度和高度:
html <img src="example.jpg" alt="A descriptive text about the image" width="300" height="200">
此外,您可以使用style
屬性將內聯樣式套用至影像:
html <img src="example.jpg" alt="A descriptive text about the image" style="border: 1px solid #ccc; padding: 10px;">
請記住將“example.jpg”替換為圖像的實際路徑或 URL。