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”>