經過前兩篇的學習，你已經可以使用HTML標簽構建基礎網頁。今天我們學習如何用 <img> 標簽插入圖片，讓頁面更豐富！

一、準備圖片文件

1. 在VS Code左側空白區右鍵新建文件夾 

?

命名為 images（??命名按照個人喜好即可）

二、<img>標簽語法詳解

alt= 顯示效果為

基本用法示例：

<!-- 基本用法 --><img   src="sunset.jpg"   alt="海邊日落風景" >

三、關鍵注意事項

1.??必須寫 alt 屬性

 ? 即使留空（alt=""），也是合法的（用于裝飾性圖片）。

 ? 缺失 alt 會導致 HTML 驗證錯誤，影響無障礙訪問。

2.??圖片路徑常見錯誤

? 錯誤：src="images"（缺少文件名）

? 正確：src="images/sunset.jpg"

3. ?? 元素特性說明

圖片在HTML中屬于區塊（ inline-block ）元素，默認情況下，<img>也會占據一整行的空間。

通過合理使用 <img> 標簽，你可以確保圖片在網頁中高效、可訪問且適配各種設備！

閱讀原文：原文鏈接