内容摘要：——这行代码，是很多人的第一堂网页课。但真正把它用明白的人，不多。我见过太多人写``，图片死活不显示，急得满头汗，最后发现是文件名多了个空格，或者路径里混进了中文引号。 先看最基础的写法。一张图片，三

——这行代码，插入是图片很多人的第一堂网页课。但真正把它用明白的代码人，不多。插入我见过太多人写``，图片图片死活不显示，代码急得满头汗，插入最后发现是图片文件名多了个空格，或者路径里混进了中文引号。代码 先看最基础的插入写法。一张图片，图片三个属性打底：`src`告诉浏览器图片在哪，代码`alt`是插入图片加载失败时显示的替代文字，`width`和`height`控制显示尺寸。图片比如： ```html ``` 这里有个容易踩的代码坑——`width`和`height`只写数值，不带单位，默认是像素。你要是写成`width="600px"`，浏览器也能忍，但不符合规范。更关键的是，这两个属性会强制拉伸图片。你本来拍了个竖构图，硬塞进600×400的框里，画面直接变形，人脸拉成马脸。要保比例，只写一个，另一个让它自动算。 图片放不出来的情况，八成是路径问题。相对路径是站在当前网页文件的位置去找图。你的网页在`website/index.html`，图片在`website/images/cat.jpg`，那就写`src="images/cat.jpg"`。要是图片在上级目录，比如`website/images/`和`website/html/`是平级，你的网页在`html`文件夹里，图片在`images`里，得写`src="../images/cat.jpg"`——两个点加斜杠，意思是“往上跳一级”。这个`..`很多人第一次接触会懵，记住它代表上一级文件夹就行。 还有一种情况，图片在别的网站上。直接贴完整网址：`src="https://example.com/pic.png"`。但要注意，这种外链图受对方服务器限制，人家哪天删了或者防盗链，你的图就裂了。我自己的博客就吃过这亏，引用的一个表情包图床挂了，整个页面那一块空白，特别难看。 `alt`这个属性，别敷衍。它不是摆设，屏幕阅读器靠它给视障用户读图，搜索引擎也靠它理解图片内容。写`alt="猫"`太笼统，写`alt="一只橘猫趴在窗台上晒太阳"`才像人话。如果图片纯粹是装饰性的，比如一个分隔线图标，可以写`alt=""`，留空，告诉浏览器这图不重要。 加载性能这块，得提一嘴。一张5MB的高清原图直接怼进页面，手机用户打开要转半天圈。现在正经做法是用`srcset`属性提供多尺寸版本，让浏览器按屏幕宽度自己挑。比如： ```html ``` 这段代码的意思是：小屏手机加载400像素宽的图，大屏显示器拿1200像素的。`sizes`告诉浏览器图片在布局里占多宽。这套东西初看复杂，但用顺手了，页面加载速度能快一大截。我自己的经验是，`src`写最保守的版本，`srcset`给进阶选项，这样老浏览器也兼容。 最后说个偏门但实用的技巧。图片加载失败时，别只留个裂图图标。可以用`onerror`属性塞一段JavaScript，替换成占位图： ```html ``` 这招在项目里应急很好使，但别依赖它——如果`fallback.png`也挂了，会陷入死循环。加个计数器或者用`this.onerror=null`断掉递归就行。 图片这块，说到底是路径、属性、性能三件事。路径搞对，属性写全，性能优化，基本就够用了。剩下的，多写几次，踩几个坑，自然就记住了。