相对路径和绝对路径用法详解
| 相对路径和绝对路径的概念和应用是web开发者必须要熟练掌握，下面介绍一下相对路径和绝对路径的用法。 一.绝对路径: 从名称入手理解，既然称得上“绝对”二字，那么路径的表现形式就比较直观，能完整描述文件在磁盘上的位置。 绝对路径一般来说主要有两种形式: 1.完整的磁盘路径: D:\mytest\web\images\pic.jpg是一个绝对路径，看到它就能够明确的找到图片在磁盘中的位置，不过在web中很少使用此种形式的绝对路径。 2.完整的url路径: http://www.softwhy.com/images/pic.jpg也是一个绝对路径。它虽然看没有描述文件的完整路径，其实不然，域名会指向磁盘的一个目录，那么一个带有域名的url地址也是一个绝对路径。 二.相对路径: 相对路径与绝对路径相比要复杂一些，同样可以从名称入手，之所以叫做相对路径，那么首先就要确定一个路径参考点；其他文件的路径都是相对于当前文件位置来确定的，下面先看一个路径的拓扑图: 在文件路径拓扑图中，root表示根目录；列举实例之前先要明确以下几个作用: 1）../：代表当前文件所在目录的上一级目录。 2）../../：代表当前文件所在目录的上上级目录。 3）../.../../：可以依次类推。 4）/：代表根目录。 5）./：表示当前目录，HTML中，可以省略。 相对路径实例: 1.同级目录下的文件，例如从ah-1.html文件链接到ah-2.html文件，代码如下:
[HTML]
纯文本查看
复制代码
运行代码
2.下级目录下的文件，例如从bh-1.html文件链接到bh-1-1.html文件，代码如下:
[HTML]
纯文本查看
复制代码
运行代码
3.上级目录下的文件，例如从bh-1-1.html文件连接到bh-1.html文件，代码如下:
[HTML]
纯文本查看
复制代码
运行代码
4.上上级目录下的文件，例如从ah-1-1-1.html文件链接到ah-1.html文件，代码如下:
[HTML]
纯文本查看
复制代码
运行代码
5.ah-1-1-1.html文件链接到bh-1-1.html文件的代码如下:
[HTML]
纯文本查看
复制代码
运行代码
关于根目录:使用/可以直接回到根目录下，例如上面第五个例子的代码可以修改如下:
[HTML]
纯文本查看
复制代码
运行代码
使用根目录虽然有便利之处，当然也有弊端，如果把网站移动到另一个目录中去就可能会导致错误，所以尽可能的少使用根目录。 |
一.绝对路径:
从名称入手理解，既然称得上“绝对”二字，那么路径的表现形式就比较直观，能完整描述文件在磁盘上的位置。
绝对路径一般来说主要有两种形式:
1.完整的磁盘路径:
D:\mytest\web\images\pic.jpg是一个绝对路径，看到它就能够明确的找到图片在磁盘中的位置，不过在web中很少使用此种形式的绝对路径。
2.完整的url路径:
http://www.softwhy.com/images/pic.jpg也是一个绝对路径。它虽然看没有描述文件的完整路径，其实不然，域名会指向磁盘的一个目录，那么一个带有域名的url地址也是一个绝对路径。
二.相对路径:
相对路径与绝对路径相比要复杂一些，同样可以从名称入手，之所以叫做相对路径，那么首先就要确定一个路径参考点；其他文件的路径都是相对于当前文件位置来确定的，下面先看一个路径的拓扑图:
在文件路径拓扑图中，root表示根目录；列举实例之前先要明确以下几个作用:
1）../：代表当前文件所在目录的上一级目录。
2）../../：代表当前文件所在目录的上上级目录。
3）../.../../：可以依次类推。
4）/：代表根目录。
5）./：表示当前目录，HTML中，可以省略。
相对路径实例:
1.同级目录下的文件，例如从ah-1.html文件链接到ah-2.html文件，代码如下:
|
1
|
<
a
href
=
"ah-2.html"
>蚂蚁部落欢迎您</
a
>
|
2.下级目录下的文件，例如从bh-1.html文件链接到bh-1-1.html文件，代码如下:
|
1
|
<
a
href
=
"b-1/bh-1-1.html"
>蚂蚁部落欢迎您</
a
>
|
3.上级目录下的文件，例如从bh-1-1.html文件连接到bh-1.html文件，代码如下:
|
1
|
<
a
href
=
"../bh-1.html"
>蚂蚁部落欢迎您</
a
>
|
4.上上级目录下的文件，例如从ah-1-1-1.html文件链接到ah-1.html文件，代码如下:
|
1
|
<
a
href
=
"../../ah-1.html"
>蚂蚁部落欢迎您</
a
>
|
5.ah-1-1-1.html文件链接到bh-1-1.html文件的代码如下:
|
1
|
<
a
href
=
"../../../b/b-1/ah-1.html"
>蚂蚁部落欢迎您</
a
>
|
关于根目录:使用/可以直接回到根目录下，例如上面第五个例子的代码可以修改如下:
|
1
|
<
a
href
=
"/b/b-1/ah-1.html"
>蚂蚁部落欢迎您</
a
>
|
使用根目录虽然有便利之处，当然也有弊端，如果把网站移动到另一个目录中去就可能会导致错误，所以尽可能的少使用根目录。