相对路径 vs 绝对路径

• 概念对比

对比项	相对路径	绝对路径
定义	基于当前文件的路径定位目标资源	从根目录开始的完整路径
适用场景	项目内部资源引用	跨项目/外部资源引用
可移植性	高（路径随文件位置自动适应）	低（依赖固定目录结构）
典型特征	使用 ./ 或 ../ 开头	包含协议（http/https）或盘符（C:\）

---

• 相对路径符号解析

  ./ ：当前目录

<img src="cat.jpg">
<img src="./cat.jpg">

  ../ ：上级目录（每出现一次上跳一级）

<!-- 从当前文件上跳两级目录 -->
<a href="../../index.html">返回首页</a>

案例：

project/
├─ css/
│  └─ style.css
├─ images/
│  ├─ logo.png
│  └─ products/
│     └─ phone.jpg
└─ pages/
   ├─ about.html
   └─ contact/
      └─ index.html

起始文件	目标资源	正确路径写法
pages/about.html	css/style.css	../css/style.css
contact/index.html	images/logo.png	../../images/logo.png
contact/index.html	products/phone.jpg	../../images/products/phone.jpg

• ---

  绝对路径类型

1. 网络绝对路径

   <!-- 带协议的全路径 -->
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. 本地绝对路径

   
   <img src="C:/project/images/banner.jpg">

   ---

• 选择策略

推荐使用相对路径的场景

• 项目内部的图片/CSS/JS文件

• 同域名下的页面跳转

• 需要保持目录结构灵活性的情况

必须使用绝对路径的场景

• 引用CDN上的公共库（jQuery/Bootstrap等）

• 指向其他域名的资源（社交媒体图标）

---

内部资源用相对，外部引用走绝对；上级目录../跳，同级省略./号。