绝对路径与相对路径

在

HTML

里只要涉及文件的地方

(

如超级链接、图片等

)

就会涉及绝对路径与相对路径

的概念。

1.

绝对路径

绝对路径是指文件在硬盘上真正存在的路径。例如“

bg.jpg

”这个图片是存放在硬盘

的“

E:\book\

网页布局代码

\

第

2

章”目录下，那么“

bg.jpg

”这个图片的绝对路径就是

“

E:\book\

网页布

\

代码

\

第

2

章

\bg.jpg"

。

那么如果要使用绝对路径指定网页的背景图片就

应该使用以下语句：

2.

使用绝对路径的缺点

事实上，在网页编程时，很少会使用绝对路径，如果使用“

E:\book\

网页布

\

代码

\

第

2

章

\bg.jpg

”来指定背景图片的位置，在自己的计算机上浏览可能会一切正常，但是上传

到

Web

服务器上浏览就很有可能不会显示图片了。因为上传到

Web

服务器上时，可能

整个网站并没有放在

Web

服务器的

E

盘，有可能是

D

盘或

H

盘。即使放在

Web

服务器

的

E

盘里，

Web

服务器的

E

盘里也不一定会存在

“

E:\book\

网页布局

\

代码

\

第

2

章”

这个

目录，因此在浏览网页时是不会显示图片的。

3.

相对路径

为了避免这种隋况发生，通常在网页里指定文件时，都会选择使用相对路径。所谓

相对路径，就是相对于自己的目标文件位置。例如上面的例子，

“

s1.htm

”文件里引用了

“

bg.jpg

”图片，由于“

bg.jpg

”图片相对于“

s1.htm

”来说，是在同一个目录的，那么

要在“

s1.htm

”文件里使用以下代码后，只要这两个文件的相对位置没有变

(

也就是说还

是在同一个目录内

)

，

那么无论上传到

Web

服务器的哪个位置，

在浏览器里都能正确地显

示图片。

再举一个例子，假设“

s1.htm

”文件所在目录为“

E:\book\

网页布局

\

代码

\

第

2

章”

，

而“

bg.jpg

”图片所在目录为“

E:\book\

网页布局

\

代码

\

第

2

章

\img

”

，那么“

bg.jpg

”图

片相对于“

s1.htm

”文件来说，是在其所在目录的“

img

”子目录里，则引用图片的语句

应该为：

注意：

相对路径使用

“

/

”

字符作为目录的分隔字符，

而绝对路径可以使用

“

\

”

或

“

/

”

字符作为目录的分隔字符。

由于

“

img

”

目录是

“第

2

章”

目录下的子目录，

因此在

“

img

”

前不用再加上“

/

”字符。

在相对路径里常使用“

../

”来表示上一级目录。如果有多个上一级目录，可以使用多

个“

../

”

，例如“

../../

”代表上上级目录。假设“

s1.htm

”文件所在目录为“

E:\book\

网页