HTML 绝对路径和相对路径

Posted 2021-04-04 妙威建站自学

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