WithCoderWithCoderWithCoder

HTML的绝对路径和相对路径

在开发html时,经常会在网页中引用其他文件,如引用JavaScript文件,css文件,在网页中插入超链接、图像、视频等。这就会使用到路径引用。在html中,表示路径的方法有两种:相对路径和绝对路径。

相对路径:

是以当前编辑的html文件位置为参考的基础起点,通过层级关系描述目标对象的位置,而建立出的目录路径。这种相对于文件自身出发,就是是相对路径。

绝对路径:

是以Web站点根目录为参考基础的目录路径。之所以称为绝对,就是当所有网页引用同一个文件时,所使用的路径都是一样的。
其实绝对路径与相对路径的不同处,只在于描述目录路径时,所采用的参考点不同。由于对网站上所有文件而言,根目录这个参考点对所有文件都是一样的,因此,运用以根目录为参考点的路径描述方式才会被称之为绝对路径。 
下面是建立路径所使用的几个特殊符号,及其所代表的意义: 
“.”–代表目前所在的目录(个人理解为不跳出文件所在目录)。 
“..”–代表上一层目录(个人理解为跳出文件所在目录)。 
“/”–代表根目录。    
接下来,我们假设所建立的Web站点拥有如下图所示目录路径。 

1-2003212106303S.png

1. 假若要在 c1.html 文件中引用 c2.html 文件时,其相对路径如下:

./c2.html

上面的引用路径中,“.”代表当前的目录(dir1),所以”./c2.html”代表当前目录下的 c2.html。其实,也可以省略”./”直接用下这个方式引用(省略 ./,默认为当前目录):

c2.html

若使用绝对路径以根目录为参考点引用该文件时,引用路径如下:

/dir1/c2.html

2. 如果在 c1.html 文件中想引用dir2目录中的 c3.html,其相对路径路径如下:

../dir2/c3.html  

而引用 c3.html 文件的绝对路径如下:

/dir2/c3.html

相对路径和绝对路径的优缺点:

相对路径只与文件相对位置有关,便于项目移植。不过每次都要计算相对位置,容易出错。

绝对路径简单明了,不随运行环境变化而变化,不过缺点是不容易移植,如果在本地开发时,移植到新的文件夹,所设置的路径都会失效。

欢迎分享交流,转载请注明出处:WithCoder » HTML的绝对路径和相对路径