绝对路径和相对路径是什么？浏览器如何补全资源地址
讲清绝对路径、相对路径、协议相对路径和根路径的区别，并结合浏览器解析规则说明资源地址是怎么被补全成完整 URL 的。
先记住一个前提
只有完整 URL 才能真正发起网络请求。
浏览器看到的路径写法可以很多，但真正发给服务器的，必须是它自己补全后的完整地址。
所以你在页面里看到的 ./css/main.css、/css/main.css、//example.com/main.css，只是写法不同。
浏览器最终都会把它们整理成完整 URL，再去请求资源。
什么是绝对路径
绝对路径的特点是：它本身就能定位资源。
常见写法有三种：
https://tc.xfei.tech/web/css/styles.css
//tc.xfei.tech/web/css/styles.css
/web/css/styles.css
这三种写法的共同点是：浏览器都有办法把它们补成完整 URL。
1）完整 URL
最完整的写法就是协议、域名、路径都齐全。
https://tc.xfei.tech/web/css/styles.css
这类地址可以直接请求，几乎不会产生歧义。
2）协议相对写法
//tc.xfei.tech/web/css/styles.css
这种写法省略了协议，浏览器会自动继承当前页面使用的协议。 如果当前页面是 HTTPS，最终就会补成 HTTPS。
3）根路径写法
/web/css/styles.css
这种写法从站点根目录开始找资源，和当前页面所在的子目录无关。
什么是相对路径
相对路径的特点是：它必须依赖当前页面地址来补全。
常见写法有：
css/styles.css
./css/styles.css
js/app.js
./logo.svg
它们本身不是完整地址，单独拿出来不能直接请求。 浏览器必须先知道“当前页面在哪个目录下”，然后才能把它补成完整 URL。
浏览器到底是相对谁
相对路径相对的不是“整个网站”，而是当前页面的 URL 所在目录。
例如当前页面是：
https://tc.xfei.tech/web/index.html
那么：
css/styles.css
./css/styles.css
最终都会被补成：
https://tc.xfei.tech/web/css/styles.css
这也是为什么很多人第一次写路径会出错。 他以为路径是相对网站根目录，实际上它是相对当前页面目录。
浏览器如何补全路径
浏览器补全路径时，通常会按这几个步骤理解：
- 先拿到当前页面的完整地址。
- 找到当前页面所在目录。
- 把相对路径拼到这个目录后面。
- 得到最终可请求的完整 URL。
如果你把这个机制想明白了，很多“资源 404”问题就会立刻变得清晰。
在页面里最常见的几种资源引用
CSS
<link rel="stylesheet" href="./css/main.css" />
图片
<img src="./images/logo.svg" />
JavaScript
<script src="js/app.js"></script>
这些写法都很常见，而且都依赖浏览器补全。
如果路径写错了，最直接的结果就是资源加载失败。 所以分析页面时，除了看标签本身，还要看它引用资源的路径是否正确。
为什么绝对路径在分析页面时很省心
绝对路径最大的优点是稳定。
不管当前页面在哪个目录，只要路径是绝对的，浏览器请求的目标都不会变。 这对于静态站点、后台管理页、以及很多爬虫脚本里的资源定位都很有帮助。
相对路径虽然写起来短，但当页面目录结构变化时，出错概率更高。
路径分析时最容易混淆的点
1）/ 开头不等于相对路径
很多初学者会把 /css/main.css 看成“相对当前文件”的路径，其实不是。
它是从站点根目录开始的绝对路径。
2）./ 和不写 ./ 很接近
css/styles.css
./css/styles.css
这两种在多数场景下效果几乎一样，都是相对路径。
3）协议相对写法会继承当前协议
//tc.xfei.tech/web/css/styles.css
这个写法会直接继承页面协议，所以调试时要特别注意它最终是 http 还是 https。
一个很实用的排查方法
当你发现资源加载失败，可以按这个顺序排查：
- 先看路径是不是完整 URL。
- 如果不是，判断它是绝对路径还是相对路径。
- 如果是相对路径，确认当前页面目录是什么。
- 把路径手动补成完整 URL。
- 直接在浏览器里打开，看资源是否真的存在。
这套方法不仅适用于网页资源，也适用于你后面做爬虫时分析接口路径。
一句话总结
你可以这样记：
绝对路径自己就能指路，相对路径要靠当前页面补全。
只要你能把这个规则记牢，浏览器为什么能加载 CSS、图片和脚本，基本就能讲通了。
这篇内容和 浏览器输入 URL 后发生了什么？页面加载流程全解析 是一组，建议顺着一起看。
Practice