html链接中的相对路径和绝对路径

zwq 2018-07-03

【前言】

    今天下午讲下a链接跳转

【主体】

相对路径和绝对路径的概念和应用是web开发者必须要熟练掌握,下面介绍一下相对路径和绝对路径的用法。

一.绝对路径:

从名称入手理解,既然称得上“绝对”二字,那么路径的表现形式就比较直观,能完整描述文件在磁盘上的位置。

绝对路径一般来说主要有两种形式:

1.完整的磁盘路径:

D:\mytest\web\images\pic.jpg是一个绝对路径,看到它就能够明确的找到图片在磁盘中的位置,不过在web中很少使用此种形式的绝对路径。

2.完整的url路径:

http://www.softwhy.com/images/pic.jpg也是一个绝对路径。它虽然看没有描述文件的完整路径,其实不然,域名会指向磁盘的一个目录,那么一个带有域名的url地址也是一个绝对路径。

二.相对路径:

相对路径与绝对路径相比要复杂一些,同样可以从名称入手,之所以叫做相对路径,那么首先就要确定一个路径参考点;其他文件的路径都是相对于当前文件位置来确定的,下面先看一个路径的拓扑图:

html链接中的相对路径和绝对路径

在文件路径拓扑图中,root表示根目录;列举实例之前先要明确以下几个作用:

1)../:代表当前文件所在目录的上一级目录。

2)../../:代表当前文件所在目录的上上级目录。

3)../.../../:可以依次类推。

4)/:代表根目录。

5)./:表示当前目录,HTML中,可以省略。

相对路径实例(html代码中编写的链接路径与实际物理路径的关系):

1.同级目录下的文件,例如从ah-1.html文件链接到ah-2.html文件,代码如下:

[HTML] 纯文本查看 复制代码运行代码
1
<a href="ah-2.html">蚂蚁部落欢迎您</a>

2.下级目录下的文件,例如从bh-1.html文件链接到bh-1-1.html文件,代码如下:

[HTML] 纯文本查看 复制代码运行代码
1
<a href="b-1/bh-1-1.html">蚂蚁部落欢迎您</a>

3.上级目录下的文件,例如从bh-1-1.html文件连接到bh-1.html文件,代码如下:

[HTML] 纯文本查看 复制代码运行代码
1
<a href="../bh-1.html">蚂蚁部落欢迎您</a>

4.上上级目录下的文件,例如从ah-1-1-1.html文件链接到ah-1.html文件,代码如下:

[HTML] 纯文本查看 复制代码运行代码
1
<a href="../../ah-1.html">蚂蚁部落欢迎您</a>

5.ah-1-1-1.html文件链接到bh-1-1.html文件的代码如下:

[HTML] 纯文本查看 复制代码运行代码
1
<a href="../../../b/b-1/ah-1.html">蚂蚁部落欢迎您</a>

关于根目录:使用/可以直接回到根目录下,例如上面第五个例子的代码可以修改如下:

[HTML] 纯文本查看 复制代码运行代码
1
<a href="/b/b-1/ah-1.html">蚂蚁部落欢迎您</a>

使用根目录虽然有便利之处,当然也有弊端,如果把网站移动到另一个目录中去就可能会导致错误,所以尽可能的少使用根目录。

相关推荐