前言： 大家好，我是[小奇腾]。欢迎来到 “幼儿园前端” 第 8 集！ 俗话说“一图胜千言”。一个全是文字的网页就像一本枯燥的教科书，谁也看不下去。 今天我们来学习 HTML 里颜值最高的标签：
<img>。 别看它简单，这里面藏着两个大坑：路径不对图片会裂，不写alt会被搜索引擎扣分。今天带你完美避坑！
本期详细的视频教程bilibili：幼儿园前端 #08：图片标签 img —— 为什么你的图片裂了？（含懒加载秘籍）
一、 特立独行的“单标签”
我们之前学的标签大多是成双成对的（比如 <div>...</div>），但图片标签是独行侠。 它不需要“结束标签”，因为它肚子里不需要包文字，它自己就是一个完整的个体。
- 语法：
<img src="..." /> - 注意：在 HTML5 标准里，最后那个
/可以不写，但我建议新手养成习惯写上，显得严谨。
二、核心属性：src (Source)
这是图片的生命线。 src 告诉浏览器： “去哪里找这张图？”
1. 网络图片（借别人的图）
<img src="https://img.alicdn.com/bao/upload/O1CN015FKtzh1bi8SB2Hkp5_!!6000000003498-0-yinhe.jpg_360x360q90.jpg" alt="蓝牙耳机">
-
优点：不用存电脑里，省事。
-
缺点：如果别人的网站挂了，你的图也就裂了。
2. 本地图片（用自己的图）
把图片存在你的项目文件夹里。 假设你的文件夹结构是这样的：
📂 demo-08
├── index.html
└── logo.png <-- 图片就在旁边
<img src="./logo.png" />
./的意思是： “就在当前目录下找” 。
新手巨坑警告 🚫： 千万不要用你电脑的绝对路径！ ❌
<img src="C:/Users/Administrator/Desktop/logo.png" />这种代码发给别人或者传到服务器上，图片百分之百会裂开（因为别人的电脑里没有 C 盘的这个文件夹）。请一定要用相对路径（./）！
三、 被忽视的神级属性：alt
很多新手写代码也是“外貌协会”，觉得图片显示出来就行了，alt 属性经常空着。 大错特错！ alt (Alternative text) 是 “替代文本” 的意思。
<img src="cat.jpg" alt="一只橘色的猫在晒太阳" />
它的三大作用：
- 图片挂了时：如果网速慢或图片路径错了，浏览器会显示这行字，告诉用户“这里原本是一只猫”。
- 给盲人听的：盲人看不见图片，屏幕阅读器会读出“一只橘色的猫在晒太阳”。如果你不写，盲人只能听到冷冰冰的“图像”二字。
- 给百度看的：搜索引擎不知道图片里画的是猫还是狗，它全靠
alt来判断。想让你的图在百度图片里搜到？写好alt！
四、 尺寸控制：width / height
你可以直接在标签里限制图片大小：
<img src="./downloaded-image.jpeg" width="200" height="200" />
- 单位：默认是像素 (px)，不用写单位。
- 小技巧：通常只写一个（比如只写
width），高度会自动按比例缩放。如果两个都写死，图片可能会被压扁或拉长，变得很丑。
五、 性能大招：loading="lazy" (懒加载)
如果你的网页有 100 张大图，用户还没往下划，浏览器就把 100 张全加载了，这会让网页打开巨慢，还浪费用户流量。
HTML5 现代神器：
<img src="big-photo.jpg" loading="lazy" />
- 作用：告诉浏览器“别急着加载”。只有当用户快滚动到这张图的时候，才开始加载它。
- 好处：秒开网页，用户体验极佳！(Chrome/Edge 原生支持)
六、 总结：标准的图片写法
以后写图片，请直接复制这套**“黄金标准”**：
<img
src="./images/avatar.jpg"
alt="用户的头像"
width="100"
loading="lazy"
/>
七、懒加载秘籍
- 打开检查工具(F12)
- 找到 Network (网络)
- 切记勾选清除缓存
- 刷新页面
- 往下滚轮，会看到需要滑动到一定距离才会加载图片。这样可以大幅度提供性能。因为一个网页一般会包含非常多的图片。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>懒加载测试</title>
<style>
/* 搞一个很高的方块，把图片顶下去 */
.spacer {
/* 原来是 2000px 如果不生效，改成 5000px！给浏览器一点震撼 */
height: 5000px;
background-color: #f0f0f0;
text-align: center;
padding-top: 50px;
}
</style>
</head>
<body>
<div class="spacer">
<h1>往下滚动，下面有一张大图 👇</h1>
<p>（这里全是空白，用来占位的）</p>
</div>
<!-- 引入图片 -->
<img
src="https://img.alicdn.com/bao/upload/O1CN015FKtzh1bi8SB2Hkp5_!!6000000003498-0-yinhe.jpg_360x360q90.jpg"
loading="lazy"
width="600"
alt="测试图片"
/>
<!-- 本地图片 -->
<img src="./imgs/downloaded-image.jpeg"
loading="lazy" width="600" alt="测试图片" />
<p>图片终于出来啦！</p>
</body>
</html>
