圖片
img 把圖片嵌進文件。它是空元素，沒有結束標籤。兩個屬性幾乎每次都要寫：src（檔案在哪）與 alt（替代文字）。
最簡寫法
src
可以是相對路徑或完整網址。
- 與 HTML 同一層：
photo.jpg - 子資料夾：
images/photo.jpg - 上一層：
../shared/logo.svg
檔名與資料夾區分大小寫時（Linux 伺服器常見），Photo.JPG 與 photo.jpg 不是同一個檔。本機 Windows 能開、上線卻破圖，常常是這個原因。
alt
alt 不是選填的裝飾。圖片載入失敗、或不顯示圖片的使用者（含螢幕閱讀器），靠這段文字理解內容。
寫法依圖片角色而定：
| 情況 | alt |
|---|---|
| 傳達資訊（示意圖、照片內容） | 簡短描述你希望讀者「看見」的重點 |
| 純裝飾（分隔線圖、空白佔位） | alt=""，讓輔助科技跳過 |
| 圖片本身就是文字（按鈕圖示） | alt 寫按鈕名稱，例如「送出」 |
| 圖片是連結的唯一內容 | alt 寫連結目的，不要只寫「圖片」 |
不要把 alt 寫成 image.jpg 或「圖片」。那等於沒寫。也不必開頭加「圖片：」，螢幕閱讀器已經知道這是圖。
搭配說明文字
圖與圖說是一組時，用 figure 與 figcaption：
<figure>
<img src="images/form-label.png" alt="文字標籤放在輸入框上方，並以 for 與 id 對應">
<figcaption>圖 1：label 與 input 的正確對應。</figcaption>
</figure>
figcaption 是給所有人看的說明；alt 仍要能獨立成立，不要假設使用者一定看得到圖說。
寬高與版面跳動
可以寫 width、height（像素）讓瀏覽器先留空位，減少圖片載入後把後面文字推下去。實際顯示大小仍可用 CSS 控制。
回應式圖片（依螢幕提供不同解析度）會用到 srcset 與 sizes，屬進階主題。入門先把單一 src 與正確 alt 做好。細節見 MDN：HTML 圖片。
推薦影音
插入圖片與資源整理
簡述：Dave Gray 示範 img 必要屬性、圖檔類型、資料夾整理與常用圖庫。看完請立刻替練習頁的每張圖寫 alt。