vlambda博客
学习文章列表

HTML 绝对路径和相对路径

在实web开发中,插入图片、包含 CSS 文件等都需要有路径,如果文件路径的添加错误,就会导致引用失效(无法浏览链接文件,或无法显示插入的图片等)。很多初学者感到困惑,相对路径与绝对路径区别用法如下。

HTML相对路径

指由这个文件所在的路径引起的跟其他路径文件(或文件夹)的路径关联。

例如:

文件index.html存放在D盘WWW目录下,它的绝对路径是:d:/www/index.html

文件aboutus.html存放在D盘www目录下,它的绝对路径是:d:/www/aboutus.html

那么:index.html相对于aboutus.html的路径就是:当前目录下的index.html 文件。在超链接中写为:<a href= ” index.html >返回首页</a>

也就是说不加绝对盘符号或者网络上完整路径如:http://www.gzcc.edu.cn/index.html

Httop://url/相对位置写清楚相对于文档的目录路径即可。

相对路径的使用方法

如果链接到同一目录下,则只需输入要链接文档的名称,例如:

<a href= 1 html>网页链接</a>

<img src=images/bg.jpg />

如果链接到下一级目录,则需要输入目录名,然后加 “ ../ ”,再输入文件名,例如:

<a href=html/next.htm>

<img src=images/bg.jpog/>

如果链接到上一级目录,则需要先输入“ ../ ”,然后再输入目录名、文件名:../也称为父路径,例如:

<a href= ../www/index.htm>

HTML 绝对路径

网页文件或者网页上图形、声音、视频等元素在本地或者网络中的完整路径:包括适用的协议或盘符。也就是网页文件在http协议下的url路径或者是硬盘上网页完整的路径。例如:

<a href=../www/index.htm>