掌握相对路径与绝对路径的使用是HTML资源引用的关键。绝对路径以/开头或包含完整URL，如/css/style.css或https://example.com/images/logo.png，适用于跨页面统一访问；相对路径基于当前文件位置，如img/photo.jpg或../js/app.js，灵活但依赖目录结构。常见应用包括引入CSS、插入图片、页面跳转和调用JS。大型项目推荐绝对路径避免错乱，本地测试可用相对路径便于迁移。注意文件名大小写及部署时根路径调整，合理选择路径类型可有效防止资源加载失败。
在HTML中正确引用文件路径是网页开发的基础技能。无论是引入CSS、JavaScript，还是插入图片、链接页面，都离不开路径的使用。理解相对路径和绝对路径的区别与用法，能有效避免资源加载失败的问题。
绝对路径：从根目录或完整网址开始定位
绝对路径是指从域名根目录或完整的URL来定位资源，具有明确性和稳定性。
- 以/开头的路径，表示从网站根目录开始查找。例如：
/css/style.css表示根目录下的css文件夹中的style.css文件。 - 包含完整协议和域名的URL也属于绝对路径，如：
https://example.com/images/logo.png，常用于引用外部资源。 - 适用于多层级页面统一访问同一资源的场景，不会因当前页面位置变化而失效。
相对路径：相对于当前文件位置定位
相对路径是根据当前HTML文件所在目录来查找目标资源，灵活但依赖位置关系。
- 不以斜杠开头的路径，如：
img/photo.jpg，表示在当前目录下的img文件夹中查找photo.jpg。 - 使用../可返回上级目录，例如：
../js/app.js表示上一级目录中的js文件夹下的app.js。 - 若当前文件位于
/pages/about.html，想引用根目录的favicon.ico，可用../favicon.ico。
常见引用场景与写法示例
掌握实际应用中的路径写法，有助于快速定位问题。
立即学习“前端免费学习笔记（深入）”；
- 引入CSS：
<link rel="stylesheet" href="../css/main.css"> - 插入图片：
<img src="images/banner.jpg" alt="Banner"> - 页面跳转：
<a href="/contact.html">联系我们</a>（跳转到根目录下的contact.html） - 调用JS：
<script src="/js/utils.js"></script>
选择建议与注意事项
根据项目结构和部署方式合理选择路径类型。
- 大型项目推荐使用以/开头的绝对路径，减少因页面嵌套导致的路径错乱。
- 本地测试或静态站点可多用相对路径，便于文件迁移和离线运行。
- 注意大小写和拼写错误，尤其是图片和CSS文件名。
- 部署到子目录时，根目录路径（/）可能需要调整，可考虑使用相对路径或配置基路径（base标签）。
基本上就这些。搞清当前文件与目标资源的位置关系，再决定用哪种路径，问题就不难解决。
