1. 常用圖像格式

格式	特點	適用場景
JPEG	有損壓縮，文件小，不支持透明	適合照片、復雜圖像
PNG	無損壓縮，支持透明（Alpha通道）	適合圖標、需要透明背景的圖片
GIF	支持動畫，最多256色	簡單動畫、低色彩圖標
WebP	谷歌開發，高壓縮率，支持透明和動畫	現代網頁，替代JPEG/PNG
SVG	矢量格式，無損縮放	圖標、LOGO、響應式設計

---

2. 圖像標簽及其屬性

標簽：<img>

• 核心屬性：

  • src：指定圖片路徑（必填）。

  • alt：替代文本，圖片無法顯示時展示（必填，SEO和可訪問性關鍵）。

• 可選屬性：

  • width/height：設置顯示尺寸（單位像素或百分比）。

  • loading="lazy"：延遲加載（提升頁面性能）。

  • title：鼠標懸停時的提示文本（非必填，與alt不同）。

示例代碼：

<img src="logo.png" alt="網站LOGO" width="200" height="100" loading="lazy">

---

3. 絕對路徑 vs. 相對路徑

類型	定義	示例	優缺點
絕對路徑	完整URL或系統根目錄開始的路徑	https://example.com/images/pic.jpg?或?/var/www/images/pic.jpg	精準定位，依賴外部服務器穩定性
相對路徑	相對于當前文件的路徑	images/pic.jpg（同級目錄下images文件夾）或?../assets/pic.jpg（上級目錄）	靈活，但需注意文件結構一致性

在HTML中，相對路徑用于指定當前文件與其他文件或資源之間的相對位置。相對路徑的設置方法如下：

1. 同一目錄下的文件

如果目標文件與當前HTML文件位于同一目錄下，可以直接使用文件名作為相對路徑。

<!-- 引用同一目錄下的圖片 -->
<img src="image.jpg" alt="描述文本"><!-- 鏈接到同一目錄下的另一個HTML文件 -->
<a href="page.html">訪問頁面</a>

2. 子目錄中的文件

如果目標文件位于當前目錄的子目錄中，需要在文件名前加上子目錄的名稱和斜杠 /。

<!-- 引用子目錄中的圖片 -->
<img src="images/image.jpg" alt="描述文本"><!-- 鏈接到子目錄中的HTML文件 -->
<a href="subdirectory/page.html">訪問子目錄中的頁面</a>

3. 父目錄中的文件

如果目標文件位于當前目錄的父目錄中，需要使用 .. 表示返回上一級目錄，然后再加上目標文件的路徑。

<!-- 引用父目錄中的圖片 -->
<img src="../image.jpg" alt="描述文本"><!-- 鏈接到父目錄中的HTML文件 -->
<a href="../page.html">訪問父目錄中的頁面</a>

4. 多級目錄

如果需要訪問更復雜的目錄結構，可以結合以上方法。

<!-- 訪問當前目錄的父目錄的子目錄中的文件 -->
<img src="../images/logo.jpg" alt="描述文本"><!-- 訪問當前目錄的子目錄的子目錄中的文件 -->
<a href="subdir/subsubdir/page.html">訪問多級子目錄中的頁面</a>

總結

• 同一目錄：直接使用文件名。

• 子目錄：使用 子目錄名/文件名。

• 父目錄：使用 ../文件名。

• 多級目錄：結合以上方法，如 ../子目錄名/文件名 或 子目錄名/子子目錄名/文件名。

通過正確設置相對路徑，可以確保HTML文件正確引用所需的資源。

---

4. 使用圖像標簽的注意事項

1. 必填alt屬性：提升無障礙訪問和SEO，避免留空（除非純裝飾圖片，可設為alt=""）。

2. 尺寸優化：優先用width/height定義占位尺寸，避免布局偏移，但實際調整大小應通過圖像編輯工具。

3. 路徑正確性：相對路徑需確保文件層級正確，絕對路徑需確認URL有效。

4. 圖片壓縮：大圖需壓縮（如TinyPNG工具），減少加載時間。

5. 響應式設計：使用srcset屬性適配不同屏幕分辨率。

6. 版權問題：避免使用未授權圖片。

---

總結表格

分類	要點
常用格式	JPEG（照片）、PNG（透明）、GIF（動畫）、WebP（高效）、SVG（矢量）
標簽與屬性	<img src="..." alt="..." width="..." height="..." loading="lazy">
路徑類型	絕對路徑（完整URL）、相對路徑（images/pic.jpg或../assets/pic.jpg）
注意事項	必填alt、壓縮圖片、路徑驗證、響應式適配、版權合規

?