HTML 绝对路径与相对路径概念详细

路径指文件存放的位置，在网页中利用路径可以引用文件，插入图像、视频等。表示路径的方法有两种：相对路径，绝对路径。以下讨论均是在HTML环境下进行。

相对路径

相对路径，顾名思义，指的是目标文件相对于当前文件的位置。这在网页设计中相当常见，因为它让文件间的引用变得灵活。不过，它的几种写法各有讲究，意义也不同。常见的表示方法有以下几种：

./：代表文件所在的当前目录。这个前缀其实常常可以省略，直接写子目录或文件名就行。

../：代表文件所在的父级目录，也就是向上一层。

../../：代表文件所在的父级目录的父级目录，即向上回溯两层。

/：代表文件所在的根目录。这个符号其实可以理解为项目内部的“绝对路径”起点。

图1：项目目录结构

我们结合图1的项目目录结构来看个具体例子。假设要在test.html文件中引入000.css样式表，常见的写法有这么几种：

1. （这里的./可以省略）

绝对路径

说完了相对路径，再来看看绝对路径。它指的是一个完整的网址，从协议头一直到具体文件。再以图1的项目为例，如果这个网站的域名是www.test.com，那么000.css的绝对路径就是：

https://www.test.com/HelloHBuilder/html/css/css1/000.css。

相对路径与绝对路径的优缺点

表1：相对路径与绝对路径的优缺点