<img>用来在网页插入图片，image 的缩写。<img>是单标签，没有结束标签</img>。 注意：img 标签写在<body>里面，不要写到 head。
基础语法：
<img src="图片地址" alt="图片描述文字">img 核心属性
| 属性 | 作用 | 是否必须 |
|---|---|---|
src | source，图片的地址路径，告诉浏览器图片在哪里 | ✅必须 |
alt | alternative，图片替代文本。图片加载失败时，页面显示这段文字；给读屏软件识别图片含义 | ✅建议必写 |
width | 设置图片宽度，可以写像素 px，只写宽度高度会自动等比例缩放 | 可选 |
height | 设置图片高度，像素 px；尽量不要同时乱改宽高，图片会拉伸变形 | 可选 |
title | 鼠标悬浮在图片上，弹出提示文字（全局属性） | 可选 |
1、src 图片路径（最重要）
src 填写图片的地址，分绝对路径（网络图片）和相对路径（本地电脑图片）。
① 网络图片（互联网上的图片地址）
直接复制图片完整 url 地址，https 开头，直接可以使用，不需要本地存图片。 示例：
<!DOCTYPE html> <html lang="zh‑CN"> <head> <meta charset="UTF‑8"> <title>图片演示</title> </head> <body> <!-- 网络图片，直接写完整网址 --> <img src="https://picsum.photos/id/10/400/250" alt="风景照片"> </body> </html>解释：
src="https://picsum.photos/id/10/400/250"网上图片完整地址。alt="风景照片"：万一网络不好图片打不开，页面位置显示文字 “风景照片”。
② 本地图片（自己电脑上的图片）相对路径
项目文件夹结构举例：
网页文件夹 ├─ index.html └─ images └─ cat.jpghtml 文件和 images 文件夹同级。 在 index.html 里面引用图片：
<img src="images/cat.jpg" alt="小猫图片">
images/cat.jpg：images 文件夹里面的 cat.jpg。
情况 1：图片和 html 放在同一个文件夹
网页文件夹 ├─ index.html └─ dog.jpg写法：
<img src="dog.jpg" alt="小狗">⚠新手最常见坑：路径写错，图片显示不出来，出现破碎小图标。
- 大小写注意：
Cat.jpg和cat.jpg在部分服务器是两张不一样图片。 - 路径不要带中文！图片文件名、文件夹名全部用英文、数字，中文路径容易图片加载失败。 ❌错误：
src="图片/猫咪.jpg"✅推荐：src="img/cat.jpg"
2、alt 属性 替代文本
<img src="cat.jpg" alt="一只白色小猫趴在草地上">两种作用：
- 图片加载失败、链接失效的时候，原来图片位置显示 alt 的文字。
- 盲人读屏软件，会朗读 alt 文字，告诉用户这张图片是什么内容，利于无障碍和搜索引擎。
alt 不要空写无意义文字，如实描述图片内容。
对比演示：src 故意写错地址模拟图片失效
<img src="cat‑wrong.jpg" alt="白色小猫">图片打不开，页面会显示文字：白色小猫。
3、width 和 height 设置图片大小
单位：px 像素。
✔技巧：只写 width，不写 height，图片会自动等比例缩放，不会拉伸变形。
示例：设置宽度 300px，高度自动计算
<img src="https://picsum.photos/id/10/400/250" alt="风景" width="300">❌不推荐同时随便写宽高，容易图片压扁拉伸变形
<!-- 错误，图片会被强行拉伸变形 --> <img src="xxx.jpg" alt="风景" width="300" height="100">后期开发，图片尺寸更推荐写在 CSS 里面，width、height HTML 属性仅做简单测试。
4、title 属性，鼠标悬浮提示
鼠标放到图片上面，弹出小提示文字，alt 是图片失效显示，title 是悬浮提示，两者不一样。
<img src="https://picsum.photos/id/10/400/250" alt="海边风景" title="美丽的海边日落">鼠标放在图片上，弹出文字：美丽的海边日落。
5、图片放在超链接里面：点击图片跳转网页
<a>包裹<img>，实现点击图片跳转。
<a href="https://www.baidu.com" target="_blank"> <img src="https://picsum.photos/id/10/300/200" alt="跳转百度"> </a>解释：点击整张图片，新标签页打开百度。
完整综合示例，复制直接运行
<!DOCTYPE html> <html lang="zh‑CN"> <head> <meta charset="UTF‑8"> <meta name="viewport" content="width=device‑width, initial‑scale=1.0"> <title>图像img完整练习</title> </head> <body> <h2>网页图片演示</h2> <p>1、网络图片，设置宽度300px：</p> <img src="https://picsum.photos/id/10/400/250" alt="海边风景照片" width="300" title="海边日落"> <p>2、图片作为链接，点图片跳转到百度：</p> <a href="https://www.baidu.com" target="_blank"> <img src="https://picsum.photos/id/24/300/180" alt="森林图片"> </a> <p>3、模拟图片路径错误，看alt效果：</p> <img src="error‑pic.jpg" alt="这张图片加载失败，这里显示alt文字" width="200"> </body> </html>新手高频错误汇总
错误 1：img 写成双标签，写</img>
<img src="cat.jpg"></img> <!-- 错误，img是单标签，不要闭合标签 --> ✅ <img src="cat.jpg" alt="小猫">错误 2：src 路径写错，图片显示破碎小图标
排查顺序：
- 文件名有没有写错，大小写；
- 文件夹路径是否正确；
- 图片、文件夹不要中文名字。
错误 3：忘记写 alt 属性
虽然浏览器能显示图片，但是不符合规范，不利于无障碍，尽量都加上 alt。
错误 4：把 img 写到 head 标签中
img 是页面内容，必须写在 body。
错误 5：同时设置 width 和 height，图片拉伸变形
尽量只设置宽度，高度自动适配。
错误 6：网络图片地址缺少 https://
❌src="www.xxx.com/a.jpg"✅src="https://www.xxx.com/a.jpg"
CSS 设置图片样式（拓展）
实际开发中，图片样式更多交给 CSS 控制，比如边框、圆角。
<!DOCTYPE html> <html lang="zh‑CN"> <head> <meta charset="UTF‑8"> <style> .pic { width:280px; border:3px solid #666; /*灰色边框*/ border‑radius:8px; /*圆角*/ } </style> </head> <body> <img class="pic" src="https://picsum.photos/id/10/400/250" alt="风景"> </body> </html>本篇知识点总结
<img>插入图片，单标签，无结束标签，写在 body 内。src图片地址，分网络绝对路径、本地相对路径；文件名避免中文。alt：图片加载失败的替代文字，读屏软件识别，建议必写。width宽度、height高度；建议只写宽度，高度自动，防止图片拉伸。title鼠标悬浮弹出提示文字。- img 可以放在
<a>内部，实现点击图片跳转链接。 - 网页图片显示破碎图标，优先检查 src 路径。
✍小练习：写页面，插入一张网络图片；设置宽度 350px；写 alt 描述；套上 a 标签，点击图片新窗口跳转百度。
