HTML 影像

影像可以改善網頁的設計和外觀。

HTML 影像語法

HTML <img> 標籤用於在網頁中嵌入影像。

影像實際上並未插入到網頁中；而是連結到網頁。 <img> 標籤建立了一個用於引用影像的佔位符。

<img> 標籤是空的，它只包含屬性，並且沒有結束標籤。

<img> 標籤有兩個必需的屬性：

• src - 指定影像的路徑
• alt - 指定影像的替代文字

src 屬性

必需的 src 屬性指定影像的路徑（URL）。

注意：當網頁載入時，它是在那一刻由瀏覽器從 Web 伺服器獲取影像並將其插入到頁面中的。因此，請確保影像與網頁保持在同一位置，否則您的訪問者將看到一個損壞的連結圖示。如果瀏覽器找不到影像，則會顯示損壞的連結圖示和 alt 文字。

alt 屬性

必需的 alt 屬性為影像提供了一個替代文字，如果使用者因任何原因無法檢視影像（例如，由於連線緩慢、src 屬性錯誤或使用者使用螢幕閱讀器）。

alt 屬性的值應描述影像。

如果瀏覽器找不到影像，它將顯示 alt 屬性的值。

影像尺寸 - 寬度和高度

您可以使用 style 屬性來指定影像的寬度和高度。

或者，您可以使用 width 和 height 屬性：

width 和 height 屬性始終以畫素為單位定義影像的寬度和高度。

寬度和高度，還是 Style？

width、height 和 style 屬性在 HTML 中都是有效的。

但是，我們建議使用 style 屬性。它可以防止樣式表更改影像的大小。

另一個資料夾中的影像

如果您的影像在子資料夾中，則必須在 src 屬性中包含資料夾名稱。

另一個伺服器/網站上的影像

一些網站指向另一個伺服器上的影像。

要指向另一個伺服器上的影像，您必須在 src 屬性中指定絕對（完整）URL。

關於外部影像的注意事項：外部影像可能受版權保護。如果您沒有獲得使用許可，您可能侵犯了版權法。此外，您無法控制外部影像；它們可能會突然被刪除或更改。

動畫影像

HTML 支援動畫 GIF。

將影像用作連結

要將影像用作連結，請將 <img> 標籤放在 <a> 標籤內。

影像浮動

使用 CSS float 屬性可以讓影像向右或向左浮動於文字。

常用影像格式

以下是最常見的影像檔案型別，所有瀏覽器（Chrome、Edge、Firefox、Safari、Opera）都支援這些型別：

Chapter Summary

• 使用 HTML <img> 元素定義影像。
• 使用 HTML src 屬性定義影像的 URL。
• 使用 HTML alt 屬性為影像定義備用文字，以防其無法顯示。
• 使用 HTML width 和 height 屬性或 CSS width 和 height 屬性來定義影像的大小。
• 使用 CSS float 屬性讓影像向左或向右浮動。

HTML 影像標籤

影片：HTML 影像