本文詳解HTML圖片插入方法：1）通過<img>標簽實現，必須含src和alt屬性；2）路徑支持絕對/相對引用；3）建議設置width/height保持比例；4）響應式方案用srcset適配不同設備；5）性能優化推薦懶加載和WebP格式；6）語義化推薦結合<figure>標簽。注意事項包括保持寬高比、移動端適配和CDN加速等，需根據場景選擇JPEG/PNG/SVG等合適格式。
在HTML中添加圖片主要通過<img>標簽實現，以下是核心要點：
一、基礎語法
<img src="圖片路徑" alt="替代文本">
二、屬性詳解
- src（必需）
- 絕對路徑：
<img src="https://example.com/images/photo.jpg" alt="示例圖片"> - 相對路徑：
<!-- 同級目錄 --> <img src="photo.jpg" alt="本地圖片"><!-- 子目錄 --> <img src="images/photo.jpg" alt="子文件夾圖片">
- alt（必需）
<img src="logo.png" alt="公司標志 - 紅色圓形圖案">
- 尺寸控制
<img src="banner.jpg" alt="活動橫幅" width="800" height="400">
三、進階用法
- 響應式圖片
<img srcset="small.jpg 480w,medium.jpg 768w,large.jpg 1200w"sizes="(max-width: 600px) 480px,800px"src="fallback.jpg"alt="自適應圖片">
- CSS樣式整合
<img src="avatar.jpg" alt="用戶頭像"style="border-radius: 50%; box-shadow: 2px 2px 5px rgba(0,0,0,0.3);">
四、最佳實踐
-
文件格式選擇：
- JPEG：照片類圖像
- PNG：需要透明背景
- WebP：現代瀏覽器優先
- SVG：矢量圖標
-
性能優化：
<img src="optimized.jpg" alt="優化圖片"loading="lazy"decoding="async">
- 語義化組合
<figure><img src="chart.png" alt="銷售趨勢圖"><figcaption>2023年季度銷售數據可視化</figcaption>
</figure>
注意事項：
- 始終保持寬高比比例
- 移動端優先考慮圖片尺寸
- 使用CDN加速圖片加載
- 為裝飾性圖片設置空alt值：
alt=""
