学习前提

理解 HTML 属性和链接；准备一张自己有权使用的图片。

本课完成后你能做什么

从当前文档位置推导相对路径，减少图片加载后的布局跳动，并按用途写替代文本。

先理解机制

相对路径的起点是文档地址所处的目录，不是你在电脑文件管理器里看到的项目根目录。如果页面位于 /lessons/start.html，images/a.jpg 指向 /lessons/images/a.jpg，而 /images/a.jpg 指向站点根目录。路径大小写在本地和服务器上的容忍程度可能不同，统一使用一致文件名比依赖系统猜测可靠。

alt 应传达图片在当前上下文中的作用。同一张照片作为人物介绍时需要描述人物，作为纯装饰时可以使用空 alt。width 和 height 给浏览器一个提前计算比例的依据，图片还没下载完也能预留空间。它们不意味着图片必须在所有屏幕以固定像素宽度显示，CSS 仍能让它缩放。

可运行示例

<figure>
  <img src="images/workspace.jpg"
       alt="A desk with a laptop and notebook"
       width="640" height="420">
  <figcaption>My workspace</figcaption>
</figure>

推演与验证

按示例创建 images/workspace.jpg 后打开页面。在 Network 面板刷新并按图片过滤，检查请求地址和状态。把文件名改错，观察失败请求和替代文字；再恢复。随后把页面移入 lessons 子目录，先预测原相对路径会指向哪里，再修改为 ../images/workspace.jpg 验证推导。

常见错误与边界

不要将本机绝对路径如 C:\photos 写进线上页面。不要把 alt 写成“图片”而没有内容，也不要把长段正文全部塞进 alt。只有真正低于首屏、非关键的图片才适合懒加载；首屏重要内容不应无差别推迟。

动手练习

把页面放在 pages/about.html，图片放在 assets/portrait.jpg。写出正确的相对路径；再给纯装饰背景图和人物头像分别选择 alt。

参考解法与理由

路径是 ../assets/portrait.jpg：先回到父目录再进入 assets。纯装饰图片使用 alt=""；头像可以描述“Alex，本站作者”，无需重复紧邻文字已经完整表达的信息。用实际宽高比例，不要随意把所有图片都标成正方形。

进一步阅读