1. 基本用法
<img> 是自闭合标签（没有结束标签），用于在页面中显示图片。
必须属性：src（图片地址）和 alt（替代文字）。
📝 代码演示
📷 图片占位符
1<!-- 基本写法 -->
2<img src="photo.jpg" alt="风景照片">
3
4<!-- 带尺寸 -->
5<img src="logo.png" alt="网站Logo" width="200" height="100">
2. alt 替代文字
alt 是图片的替代文字，当图片无法显示时会显示这段文字。
作用：
• 图片加载失败时显示替代文字
• 屏幕阅读器会朗读alt文字（无障碍访问）
• 搜索引擎通过alt文字理解图片内容（SEO）
📝 代码演示
<img src="cat.jpg" alt="一只橘猫在沙发上睡觉">
← 好的alt：描述图片内容
<img src="cat.jpg" alt="图片">
← 不好的alt：太笼统，没有意义
1<!-- ✅ 好的alt：描述图片内容 -->
2<img src="cat.jpg" alt="一只橘猫在沙发上睡觉">
3
4<!-- ❌ 不好的alt：太笼统 -->
5<img src="cat.jpg" alt="图片">
6
7<!-- ❌ 不好的alt：关键词堆砌（SEO作弊） -->
8<img src="cat.jpg" alt="猫 橘猫 宠物 可爱 睡觉 沙发">
9
10<!-- 纯装饰图片：alt留空 -->
11<img src="decoration.png" alt="">
3. width/height 尺寸
width 和 height 设置图片的显示尺寸（单位是像素）。
建议：只设置一个，另一个会自动按比例缩放，避免图片变形。
📝 代码演示
<img src="photo.jpg" alt="照片" width="300">
← 只设宽度，高度自动按比例
1<!-- ✅ 推荐：只设一个维度，保持比例 -->
2<img src="photo.jpg" alt="照片" width="300">
3
4<!-- ⚠️ 可以两个都设，但可能导致变形 -->
5<img src="photo.jpg" alt="照片" width="300" height="200">
6
7<!-- 💡 实际开发中，尺寸通常用CSS控制 -->
8<img src="photo.jpg" alt="照片" style="width: 50%;">
4. 图片路径
src 属性的值是图片的路径，有两种写法：
• 相对路径：相对于当前HTML文件的位置
• 绝对路径：完整的URL地址
📝 路径说明
| 写法 | 示例 | 说明 |
|---|---|---|
| 同级目录 | src="photo.jpg" |
图片和HTML在同一文件夹 |
| 子目录 | src="images/photo.jpg" |
图片在images文件夹里 |
| 上级目录 | src="../photo.jpg" |
图片在上一级文件夹 |
| 绝对URL | src="https://example.com/photo.jpg" |
网络上的图片 |
1<!-- 同级目录：图片和HTML在同一文件夹 -->
2<img src="photo.jpg" alt="照片">
3
4<!-- 子目录：图片在images文件夹里 -->
5<img src="images/photo.jpg" alt="照片">
6
7<!-- 上级目录：../ 表示上一级 -->
8<img src="../photo.jpg" alt="照片">
9
10<!-- 绝对URL：网络图片 -->
11<img src="https://via.placeholder.com/300" alt="占位图">
5. loading 懒加载
loading="lazy" 让图片延迟加载：只有滚动到图片附近时才开始加载。
作用：减少页面初始加载时间，节省用户流量。
适合：长页面中 below the fold（屏幕下方）的图片。
📝 代码演示
<img src="photo.jpg" alt="照片" loading="lazy">
← 滚动到附近才加载
<img src="logo.png" alt="Logo" loading="eager">
← 立即加载（默认值）
1<!-- 懒加载：滚动到附近才加载 -->
2<img src="photo.jpg" alt="照片" loading="lazy">
3
4<!-- 立即加载（默认）：首屏重要图片用这个 -->
5<img src="logo.png" alt="Logo" loading="eager">
6
7<!-- 💡 首屏可见的图片不要用lazy，会影响用户体验 -->
6. srcset 响应式图片
srcset 让浏览器根据屏幕大小和分辨率自动选择最合适的图片。
作用：手机加载小图（省流量），电脑加载大图（高清）。
📝 代码演示
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w,
photo-800.jpg 800w,
photo-1200.jpg 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1000px) 800px,
1200px"
alt="风景照片">
← 浏览器自动选最合适的图片
1<!-- srcset: 提供多个图片供浏览器选择 -->
2<!-- w 表示图片实际宽度 -->
3<img
4 src="photo-800.jpg"
5 srcset="photo-400.jpg 400w,
6 photo-800.jpg 800w,
7 photo-1200.jpg 1200w"
8 sizes="(max-width: 600px) 400px,
9 (max-width: 1000px) 800px,
10 1200px"
11 alt="风景照片"
12>
13
14<!-- 简单写法：告诉浏览器图片的像素密度 -->
15<img
16 src="photo.jpg"
17 srcset="photo.jpg 1x, photo@2x.jpg 2x"
18 alt="照片"
19>
20<!-- 1x = 普通屏幕，2x = 高清屏幕（Retina） -->
7. 图片链接
用 <a> 标签包裹 <img>，点击图片就能跳转到指定页面。
📝 代码演示
<a href="https://www.example.com">
<img src="banner.jpg" alt="广告横幅">
</a>
← 点击图片跳转
1<!-- 点击图片跳转到指定页面 -->
2<a href="https://www.example.com" target="_blank">
3 <img src="banner.jpg" alt="广告横幅" width="300">
4</a>
5
6<!-- 点击图片下载文件 -->
7<a href="images/photo.jpg" download="我的照片.jpg">
8 <img src="images/photo.jpg" alt="点击下载" width="200">
9</a>