绝对路径从协议与域名写全，指向另一个站点或固定资源，复制到任何地方都有效；相对路径以当前页面为参照：同级直接写文件名，子目录写目录名加斜杠，上一级用两个点开头。./ 表示当前目录可省略，/ 开头则表示站点根目录（与服务器配置有关）。本地调试时多一层目录就可能整站图片裂开，多半是路径层级算错了；IDE 的路径自动补全偶尔也会自作主张，提交前扫一眼能省排查时间。
选择原则很简单：站外资源、CDN 文件用绝对路径；站内资源用相对路径，方便整站搬目录。打包工具普及后，相对路径的维护成本被构建系统吸收了，webpack 或 Vite 会自动改写。绝对路径把域名写死在代码里，本地和线上域名不同时整站资源集体失踪。还有个隐含考点：两个点表示上一级，写错成同级路径是新手最常翻的车，看到图片 404 先排查这个。
<style> .path-demo { border: 1px solid #4a9eff; border-radius: 8px; padding: 12px; font-size: 13px; } .path-demo code { background: #f0f7ff; padding: 1px 5px; border-radius: 4px; } </style> <div class="path-demo"> <p><code>https://cdn.example.com/lib.js</code> 绝对路径：完整网址</p> <p><code>about.html</code> 相对路径：同级文件</p> <p><code>css/style.css</code> 相对路径：下一级目录</p> <p><code>../images/logo.png</code> 相对路径：上一级目录</p> <p><code>/assets/app.js</code> 站点根目录：与当前层级无关</p> </div>