HTML相对路径与绝对路径

转载 2012年03月27日 10:12:37
在网页制作的过程中,少不了跟路径打交道,比如,包含一个文件,插入一个图片等,与路径都有关系,如果使用了错误的文件路径,就会导致引用失效(无法浏览链接文件,或无法显示插入的图片等)。初学者可能会感到困惑,下面我就详细的介绍一下相对路径与绝对路径。

HTML有2种路径的写法:相对路径和绝对路径。

1.HTML相对路径(Relative Path)
同一个目录的文件引用
如果源文件和引用文件在同一个目录里,直接写引用文件名即可,这时引用文件的方式就是使用相对路径。

我们现在建一个源文件info.html,在info.html里要引用index.html文件作为超链接。

假设info.html路径是:c:/Inetpub/wwwroot/sites/blabla/info.html
假设index.html路径是:c:/Inetpub/wwwroot/sites/blabla/index.html
在info.html加入index.html超链接的代码应该这样写:

<a href = "index.html">这是超连接</a>
如何表示上级目录
../表示源文件所在目录的上一级目录,../../表示源文件所在目录的上上级目录,以此类推。

假设info.html路径是:c:/Inetpub/wwwroot/sites/blabla/info.html
假设index.html路径是:c:/Inetpub/wwwroot/sites/index.html
在info.html加入index.html超链接的代码应该这样写:

<a href = "../index.html">这是超连接</a>

假设info.html路径是:c:/Inetpub/wwwroot/sites/blabla/info.html
假设index.html路径是:c:/Inetpub/wwwroot/index.html
在info.html加入index.html超链接的代码应该这样写:


<a href = "../../index.html">index.html</a>
假设info.html路径是:c:/Inetpub/wwwroot/sites/blabla/info.html
假设index.html路径是:c:/Inetpub/wwwroot/sites/wowstory/index.html
在info.html加入index.html超链接的代码应该这样写:


<a href = "../wowstory/index.html">index.html</a>
如何表示下级目录
引用下级目录的文件,直接写下级目录文件的路径即可。

假设info.html路径是:c:/Inetpub/wwwroot/sites/blabla/info.html
假设index.html路径是:c:/Inetpub/wwwroot/sites/blabla/html/index.html
在info.html加入index.html超链接的代码应该这样写:


<a href = "html/index.html">这是超连接</a>
假设info.html路径是:c:/Inetpub/wwwroot/sites/blabla/info.html
假设index.html路径是:c:/Inetpub/wwwroot/sites/blabla/html/tutorials/index.html
在info.html加入index.html超链接的代码应该这样写:


<a href = "html/tutorials/index.html">这是超连接</a>
2.HTML绝对路径(Absolute Path)
大 家都知道,在我们平时使用计算机时要找到需要的文件就必须知道文件的位置,而表示文件的位置的方式就是路径,例如只要看到这个路径:c:/website /img/photo.jpg我们就知道photo.jpg文件是在c盘的website目录下的img子目录中。类似于这样完整的描述文件位置的路径就 是绝对路径。我们不需要知道其他任何信息就可以根据绝对路径判断出文件的位置。而在网站中类似以http://www.ajaxstu.com/img/photo.jpg来确定文件位置的方式也是绝对路径。


HTML绝对路径(absolute path)在网页制作中指带域名的文件的完整路径。

假设你注册了域名http://www.ajaxstu.com,并申请了虚拟主机,你的虚拟主机提供商会给你一个目录,比如www,这个www就是你网站的根目录。

假设你在www根目录下放了一个文件default.asp,这个文件的绝对路径就是: font color="#0058db">http://www.ajaxstu.com/default.asp。

假设你在www根目录下建了一个目录叫archives,然后在该目录下放了一个文件2886.html,这个文件的绝对路径就是http://www.ajaxstu.com/archives/2886.html

HTML中的相对路径与绝对路径

HTML初学者会经常遇到这样一个问题,如何正确引用一个文件。比如,怎样在一个HTML网页中引用另外一个HTML网页作为超链接(hyperlink)?怎样在一个网页中插入一张图片?......(相关教程...

[HTML] 图片标签、绝对路径 和 相对路径

< img >标签 代表 图片,img标签的作用是向网页中插入一张图片,并不是将图片绘制到网页中。 src 属性:“插入”图片到网页中去。 alt 属性:值可以是一段文字,当图片由于各种原因无法显示时...

学习笔记2--基础 HTML之目录问题(相对路径和绝对路径区别)

1.相对路径--以需要引用文件的网页所在位置为参考基础,而建立出的目录路径。(当保存于不同目录的网页引用同一个文件时,所使用的路径将不相同,故称之为相对); 2.绝对路径--以Web站点的根目录为参...

基础 HTML之目录问题(相对路径和绝对路径区别)

相对路径-以引用文件之网页所在位置为参考基础,而建立出的目录路径。因此,当保存于不同目录的网页引用同一个文件时,所使用的路径将不相同,故称之为相对。   绝对路径-以Web站点根目录为参考基础的目...

HTML的a标签href属性指定相对路径与绝对路径的用法讲解

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

html的相对路径和绝对路径

相对路径相对路径:相对于本网页文件所在地址的路径, 在访问时可以访问该网页文件所在根目录、子目录、上一级目录的文件。例(利用相对路径在一个html文件中引用另一个html文件):1、在同一个目录的文件...

有关Html中<a>、<link>和<script>标签中相对路径与绝对路径的问题总结

一、HTML 相对路径和绝对路径区别分析HTML初学者会经常遇到这样一个问题,如何正确引用一个文件。比如,怎样在一个HTML网页中引用另外一个HTML网页作为超链接(hyperlink)?怎样在一个网...
  • jtdsh
  • jtdsh
  • 2017年04月19日 10:36
  • 245

基础 HTML之目录问题(相对路径和绝对路径区别)

导读   复习HTML知识的时候,URL的路径的写法是我们经常会用到的一块内容。相对路径和绝对路径的问题不难,只要明白各自的道理,同时清楚“.\”、“..\”这些字符的含义就可以了。   原...

HTML:img标签--src属性:相对路径和绝对路径

HTML相对路径与绝对路径     在网页制作的过程中,少不了跟路径打交道,比如,包含一个文件,插入一个图片等,与路径都有关系,如果使用了错误的文件路径,就会导致引用失效(无法浏览链接文件,或无...

有关Html中<a>、<link>和<script>标签中相对路径与绝对路径的问题总结

一、HTML 相对路径和绝对路径区别分析 HTML初学者会经常遇到这样一个问题,如何正确引用一个文件。比如,怎样在一个HTML网页中引用另外一个HTML网页作为超链接(hyperlink)?怎样在一...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML相对路径与绝对路径
举报原因:
原因补充:

(最多只允许输入30个字)