什么是相对路径？就是相对于当前页面的路径对吗？

“相对路径就是相对于当前页面的路径”，这个说法基本正确，但不够精确，要理解它，我们需要拆解“相对”二字背后的实际含义。

核心概念：相对谁的路径？

相对路径，指的是相对于当前文件所在的位置的路径，当我们在HTML页面中使用相对路径引用图片、CSS文件或链接时，电脑会以“当前HTML文件所在的文件夹”为起点,去查找目标文件。

举个例子：

• 当前页面是：网站/文章/index.html
• 你想引用一张图片：网站/文章/images/pic.jpg

在 index.html里写相对路径，images/pic.jpg，因为起点就是 index.html所在的 文章文件夹，所以不需要写 文章/。

为什么说“当前页面”不够精确？

虽然日常使用中“当前页面”和“当前文件所在位置”几乎等同,但在某些场景下会有细微差别：

• 服务器环境：当页面通过域名访问时，“当前页面”的物理路径可能被URL重写规则隐藏，此时相对路径依据的是服务器解析后的真实文件夹结构,而非浏览器地址栏显示的虚拟路径。
• CSS文件内部：CSS文件中写的相对路径（如 background-image: url(../icons/logo.png)）是相对于CSS文件自身的位置，而不是引用该CSS的HTML页面，如果混淆了这点,图片就会加载失败。

两个关键符号

相对路径只有两种表达方式：

• 同目录：直接写文件名（如 picture.jpg）
• 上级目录：用 表示返回上一级文件夹（如 ../images/picture.jpg）

与绝对路径的对比

“相对路径就是相对于当前页面的路径”——这句话作为入门理解是没问题的，它指的是“相对于当前文件所在文件夹的路径”，只要记住这个“所在文件夹”的概念，再加上 的使用技巧,你在任何项目中都能准确使用相对路径。