在HTML页面开发中，引用外部资源时路径的写法直接影响资源能否正常加载，相对路径和绝对路径是两种最基础的路径引用方式，两者在规则和使用场景上有明显差异，掌握它们的用法是前端开发的基础技能。
什么是绝对路径
绝对路径是指从根目录开始到目标文件的完整路径，不管当前文件位置在哪里，绝对路径的写法都是固定不变的。在HTML中，绝对路径通常分为两种类型，一种是本地文件系统的绝对路径，另一种是网络资源的绝对路径。
本地文件系统的绝对路径以盘符或者根目录符号开头，比如Windows系统下的C:\project\images\logo.png，Linux或者macOS系统下的/home/user/project/images/logo.png。不过这种本地绝对路径在网页开发中很少使用，因为部署到服务器后路径会失效。
网络资源的绝对路径就是完整的URL地址，包含协议、域名和资源完整路径，例如https://ipipp.com/static/images/logo.png，这种路径只要资源地址不变，在任何页面中引用都可以正常加载。
什么是相对路径
相对路径是相对于当前HTML文件所在位置的路径，它的写法会根据当前文件的位置变化而变化，是网页开发中最常用的路径引用方式。相对路径的核心是确定当前文件和目标文件的相对位置关系，常见的相对路径写法有以下几种：
./：表示当前文件所在的目录，通常可以省略不写，比如./images/logo.png和images/logo.png效果一致../：表示返回上一级目录，每多一个../就向上返回一级，比如../images/logo.png表示当前文件的上一级目录下的images文件夹中的logo.png- 直接写子目录或文件名：表示当前目录下的子目录或文件，比如
css/style.css就是当前目录的css文件夹下的style.css文件
两种路径的对比
为了更清晰地看出两种路径的差异，我们可以通过下面的表格进行对比：
| 对比维度 | 绝对路径 | 相对路径 |
|---|---|---|
| 写法是否固定 | 固定，不随当前文件位置变化 | 不固定，随当前文件位置变化 |
| 适用场景 | 引用外部网络资源、固定位置的服务器资源 | 引用项目内部的本地资源 |
| 部署影响 | 网络绝对路径不受部署影响，本地绝对路径部署后失效 | 只要项目内部目录结构不变，部署后依然有效 |
| 灵活性 | 低，项目结构变化后需要修改路径 | 高，项目内部移动文件只需调整相对关系 |
路径引用的代码示例
假设我们的项目目录结构如下：
project/
├── index.html
├── about.html
├── images/
│ └── logo.png
├── css/
│ └── style.css
└── pages/
└── detail.html不同文件引用logo.png和style.css的路径写法如下：
index.html中引用资源
index.html和images、css文件夹在同一级目录，使用相对路径可以直接写子目录：
<!-- 引用logo.png --> <img src="images/logo.png" alt="logo"> <!-- 引用style.css --> <link rel="stylesheet" href="css/style.css"> <!-- 使用绝对路径引用网络图片 --> <img src="https://ipipp.com/static/banner.png" alt="banner">
pages/detail.html中引用资源
detail.html在pages子目录下，需要返回上一级目录才能找到images和css文件夹：
<!-- 引用logo.png，先返回上一级再找images --> <img src="../images/logo.png" alt="logo"> <!-- 引用style.css --> <link rel="stylesheet" href="../css/style.css">
about.html中引用detail.html
about.html和pages文件夹在同一级，需要进入pages目录找detail.html：
<a href="pages/detail.html">查看详情</a>
常见路径引用错误
很多开发者在写路径时容易犯以下错误：
- 本地开发时使用本地绝对路径，比如
src="C:\project\images\logo.png"，部署到服务器后这个路径不存在，资源无法加载 - 相对路径的层级计算错误，比如当前文件在两级子目录下，只写了一个
../，导致找不到目标文件 - 混淆了
/和./的含义，在网页中/通常代表网站的根目录，和本地文件系统的根目录不是一个概念，比如/images/logo.png会去网站根目录找images文件夹，而不是当前文件的上级目录
只要理清当前文件和目标文件的相对位置，按照规则写路径，就可以避免大部分路径引用的问题。如果是项目内部的资源，优先使用相对路径，如果是外部公共资源，再使用绝对路径，这样能提升项目的可维护性。