在编写网页时，我们经常会用<img>、<link>、<script>等标签引入外部资源。这些资源如果使用相对路径，浏览器到底从哪里开始找文件，是很多初学者容易搞混的地方。相对路径的核心在于“当前文档地址的目录部分”，而不是你代码文件在硬盘上的物理位置。只要当前页面的URL发生变化，哪怕HTML文件本身没动，相对路径解析出来的结果也可能不同。
一、相对路径的底层解析规则
浏览器在解析相对路径时，第一步是提取当前文档的基础URL。假设用户访问的地址是 https://ipipp.com/blog/article/index.html，那么基础目录就是 https://ipipp.com/blog/article/。当我们在代码中写 <img src="photo.jpg"> 时，浏览器会把基础目录和文件名拼接，得到 https://ipipp.com/blog/article/photo.jpg。这种不带任何斜杠前缀的写法，永远相对于当前HTML所在目录。
如果路径以单点斜杠 ./ 开头，例如 ./images/logo.png，含义和上面完全一样，只是显式声明了“当前目录”。而双点斜杠 ../ 表示返回上一级目录。继续上面的例子，写 ../static/css/main.css 会被解析为 https://ipipp.com/blog/static/css/main.css。可以连续使用多个 ../ 向上回溯，但如果超出了站点根目录，浏览器会一直保留这些符号而不会报错，最终可能得到不符合预期的地址。
还有一个特殊写法是根相对路径，以单斜杠 / 开头，例如 /common/footer.html。它不依赖当前页面目录，而是从站点域名根开始计算，被解析为 https://ipipp.com/common/footer.html。在本地用 file 协议直接打开文件时，/ 指向的是磁盘根，这和线上环境差异极大，所以本地调试容易出问题。理解这三种符号的差异，是正确使用相对路径的前提。
二、不同资源引入方式的路径表现对比
在HTML里，不同标签对相对路径的处理逻辑是一致的，都遵循上面说的URL拼接规则，但使用场景会影响我们的写法选择。比如 <img> 标签通常在HTML正文中，和页面文件位置较近，多用 ./ 或纯文件名；而 <link> 引入的CSS文件，如果项目结构规范，常放在 /assets/css/ 下，使用根相对路径更利于维护。
我们也可以通过JavaScript动态获取当前HTML文件的相对路径信息。虽然浏览器出于安全不会直接暴露本地磁盘路径，但可以通过 document 对象拿到URL并做字符串处理。下面代码演示如何从当前页面URL中提取出目录部分，用于拼接其他资源：
// 获取当前页面URL
var currentUrl = window.location.href;
// 找到最后一个斜杠的位置
var lastSlash = currentUrl.lastIndexOf('/');
// 提取当前HTML所在的目录路径
var baseDir = currentUrl.substring(0, lastSlash + 1);
console.log('当前基础目录：' + baseDir);
// 拼接一个相对子目录资源
var imgPath = baseDir + 'uploads/test.png';
console.log('图片地址：' + imgPath);
上面的代码不依赖任何框架，直接利用字符串截取拿到目录。这种方式在单页应用中配合路由使用时要注意，如果路由是 history 模式，页面URL可能不带 .html 后缀，lastIndexOf 逻辑依然成立，但拼接出的路径未必对应真实文件，需要后端配合兜底。
另一种情况是CSS文件内部的相对路径，例如 background-image: url(../img/bg.jpg)。这里的相对基准不是HTML页面，而是CSS文件自身所在目录。很多人误以为背景图相对HTML，结果路径写错。将CSS单独抽离到不同层级目录后，必须按CSS位置重新计算，这是项目结构中容易忽略的坑。
三、file协议与http协议下的路径差异实战
当你直接双击HTML文件，地址栏显示 file:///C:/project/index.html，此时基础目录是 file:///C:/project/。写 <img src="a.jpg"> 会找 C:/project/a.jpg，这很直观。但如果写 /a.jpg，浏览器理解为文件系统的根，即 file:///a.jpg，也就是去C盘根目录找，基本都会失败。而在 http 环境下，/a.jpg 指向域名根，往往能正常返回。
为了直观对比，我们看一段HTML在两种协议下的解析示例。假设文件位于 C:projectdemo.html，内容如下：
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/style.css"> </head> <body> <img src="../images/logo.png"> </body> </html>
在 file 协议里，css/style.css 指向 C:projectcssstyle.css，../images/logo.png 指向 C:imageslogo.png。在 http 服务以 C:project 为根发布时，前者变成 http://localhost/css/style.css，后者变成 http://images/logo.png，明显不在预期位置。因此本地开发建议一律使用小型静态服务器，如基于 Node 的 http-server，保证协议一致。
总结来说，获取HTML文件相对路径的本质，是弄清“谁作为基准”。HTML内标签以页面URL目录为基准，CSS内路径以样式文件目录为基准，根斜杠在两种协议下含义不同。在构建工具流行的今天，很多项目用打包器自动重写路径，但理解原生规则，依然能帮你在调试阶段快速定位资源加载故障，减少无谓的排查时间。
HTMLrelative_pathfile_resolution修改时间：2026-08-18 14:10:19