内容摘要： 就这一行，你往HTML文件里一放，图片就出来了。我第一次试的时候，盯着浏览器里那只猫愣了半天——原来网上那些花花绿绿的图，底子里就是这么个简单动作。 但别急着高兴。你很快会碰到第一个坑：图片不显示。

就这一行，网页你往HTML文件里一放，代码图片就出来了。插入我第一次试的图片时候，盯着浏览器里那只猫愣了半天——原来网上那些花花绿绿的网页图，底子里就是代码这么个简单动作。 但别急着高兴。插入你很快会碰到第一个坑：图片不显示。图片检查路径，网页检查文件名，代码检查大小写。插入最常见的图片是把图片和网页放在不同文件夹，路径写错了。网页比如图在`images`文件夹里，代码代码就得是插入``。这就像你去朋友家敲门，得先知道他在哪个小区哪栋楼，路径就是那个地址。 光有图片还不够，你得给它个“替补队员”。`alt`属性就是干这个的——图片加载失败时，浏览器会显示这段文字。别小看它，盲人用户靠读屏软件听网页，听到的就是`alt`里的内容。我见过有人把`alt`写成一大段抒情散文，没必要，就简单描述图片内容，比如“一只橘猫趴在窗台上”。 图片尺寸也得管。不加`width`和`height`，浏览器得等图片完全下载完才知道占多大地方，页面会跳来跳去，烦人。直接写死尺寸，比如`width="400" height="300"`，页面就稳了。但别把大图硬缩成小尺寸——图片文件本身还是那么大，加载照样慢。真要缩图，用图片处理软件先压一遍，别指望HTML帮你减肥。 说到加载速度，这有个专业点的招：`loading="lazy"`。加上这个属性，浏览器会等用户滚动到图片附近才开始加载。长页面里图片多，这招能省不少流量。但首屏的图别加，那得立刻显示。 还有个土办法，我挺爱用：先放一张模糊的占位图，等高清图加载完再替换。技术上也不难，用`onload`事件检测高清图是否加载完成，完成了就换掉占位图。效果就是图片从模糊变清晰，像对焦一样，挺有意思。 最后提醒一句：图片别乱用别人的。网上随便扒的图可能有版权问题。我一般用自家拍的，或者去免费图库找。真要商用，更得小心。这不是技术问题，但比技术问题麻烦多了。