相对路径与绝对路径的差异

在HTML里只要涉及文件的地方(如超级链接、图片等)就会涉及绝对路径与相对路径的概念。

1.绝对路径

绝对路径是指文件在硬盘上真正存在的路径。例如“bg.jpg”这个图片是存放在硬盘的“E:\book\网页布局代码\第2章”目录下,那么 “bg.jpg”这个图片的绝对路径就是“E:\book\网页布局代码\第2章\bg.jpg"。那么如果要使用绝对路径指定网页的背景图片就应该使用 以下语句:

<body backround="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服务器的哪个位置,在浏览器里都能正确地显示图片。

<body background="bg.jpg">

再 举一个例子,假设“s1.htm”文件所在目录为“E:\book\网页布局\代码\第2章”,而“bg.jpg”图片所在目录为“E:\book\网页 布局\代码\第2章\img”,那么“bg.jpg”图片相对于“s1.htm”文件来说,是在其所在目录的“img”子目录里,则引用图片的语句应该 为:

<body background="img/bg.jpg">

注意:相对路径使用“/”字符作为目录的分隔字符,而绝对路径可以使用“\”或“/”字符作为目录的分隔字符。由于“img”目录是“第2章”目录下的子目录,因此在“img”前不用再加上“/”字符。

在 相对路径里常使用“../”来表示上一级目录。如果有多个上一级目录,可以使用多个“../”,例如“http://www.cnblogs.com/”代表上上级目录。假设 “s1.htm”文件所在目录为“E:\book\网页布局代码\第2章”,而“bg.jpg”图片所在目录为“E:\book\网页布局代码”,那 么“bg.jpg”图片相对于“s1.htm”文件来说,是在其所在目录的上级目录里,则引用图片的语句应该为:

<body background="../bg.jpg">

再举一个例子,假设“s1.htm”文件所在目录为“E:\book\网页布局代码\第2章”,而“bg.jpg”图片所在目录为“E:\book\网 页布局代码\img”,那么“bg.jpg”图片相对于“s1.htm”文件来说,是在其所在目录的上级目录里的“img”子目录里,则引用图片的语句 应该为:

<body background="../img/bg.jpg">

4.相对虚拟目录

有关相对路径还有一个比较特殊的表示:“相对虚拟目录”。请看下面的例子:

<body background="/img/bg.jpg">

在这个例子里,background属性的值为“/img/bg.jpg”,注意在“img”前有一个“/”字符。这个“/”代表的是虚拟目录的根目录. 假设把“E:\book\网页布局代码”设为虚拟目录,那么“/img/bg.jpg”的真实路径为“E:\book\网页布局代码\img \bg.jpg”;如果把“E:\book\网页布局代码\第2章”设为虚拟目录,那么“/img/bg.jpg”的真实路径为“E:\book\网页布局代码\第2章\img\bg.jpg”

时间: 2024-11-12 07:03:51

相对路径与绝对路径的差异的相关文章

eclipse部署tomcat修改项目访问路径(虚拟路径)

原文参考: http://www.educity.cn/wenda/147993.html http://blog.163.com/java_zf/blog/static/19926038420129240314546/ tomcat部署web项目(eclipse自动部署项目到tomcat,访问URL中不包含部署名) 最近项目中需要把项目部署到tomcat中,并且访问路径中不包含不署名,且想实现Eclipse中的自动部署,扒了好久资料,最终实现了自己的需求,呵呵,如下: 1. 把项目contex

绝对路径和相对路径

HTML初学者会经常遇到这样一个问题,如何正确引用一个文件. 比如,怎样在一个HTML网页中引用另外一个HTML网页作为超链接(hyperlink)?怎样在一个网页中插入一张图片? 如果你在引用文件时(如加入超链接,或者插入图片等),使用了错误的文件路径,就会导致引用失效(无法浏览链接文件,或无法显示插入的图片等). 为了避免这些错误,正确地引用文件,我们需要学习一下HTML路径. 在我们平时使用计算机时要找到需要的文件就必须知道文件的位置,而表示文件的位置的方式就是路径 1.绝对路径:是从盘符

网站中图片的相对路径与绝对路径

1.相对路径 网站中加载图片所用到的相对路径,相对路径是以网页所在位置为参考的. ../代表上一级目录 src="../../photo/1.png"; src="images/1.jpg"; 2.绝对路径

浅谈 qmake 之 shadow build(就是将源码路径和构建路径分开)

shadow build shadow build 是什么东西?就是将源码路径和构建路径分开(也就是生成的makefile文件和其他产物都不放到源码路径),以此来保证源码路径的清洁. 这不是qmake独创的东西,cmake中早就使用这个东西了   cmake qmake 备注 in-source cmake . qmake project.pro 在源码路径下执行 out-of-source(shadow-build) mkdir build cd buildcmake ../project m

[原创]java WEB学习笔记35:java WEB 中关于绝对路径 和相对路径问题

本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱好者,互联网技术发烧友 微博:伊直都在0221 QQ:951226918 ---------------------------------

java(web)相对路径,绝对路径

1.定义 绝对路径:绝对路径就是你的主页上的文件或目录在硬盘上真正的路径,(URL和物理路径)例如:C:/xyz/test.txt 代表了test.txt文件的绝对路径.http://www.baidu.com/index.htm也代表了一个URL绝对路径. 相对路径:相对与某个基准目录的路径.包含Web的相对路径(HTML中的相对目录),例如:在Servlet中,"/"代表Web应用的根目录.和物理路径的相对表示.例如:"./" 代表当前目录,"../&

关于相对路径和绝对路径

相对路径:以引用文件之网页所在位置为参考基础,而建立出的目录路径.因此,当保存于不同目录的网页引用同一个文件时,所使用的路径将不相同,故称之为相对. 绝对路径:以Web 站点根目录为参考基础的目录路径.之所以称为绝对,意指当所有网页引用同一个文件时,所使用的路径都是一样的. 其实绝对路径与相对路径的不同处,只在于描述目录路径时,所采用的参考点不同.由于对网站上所有文件而言,根目录这个参考点对所有文件都是一样的,因此,运用以根目录为参考点的路径描述方式才会被称之为绝对路径 二.路径特殊符号   -

相对路径和绝对路径

路径是指文件在服务器中的存储位置.我们在使用计算机时要找到所需的文件时就必须知道文件的绝对路径,例如,只要看到这个路径d:/web/logo.gif,我们就知道logo.gif文件是在d盘的web目录下.类似于这样完整的描述文件位置的路径就是绝对路径.绝对路径还有一种表示方法就是以服务器命名开始(如在本机中http://localhost)的完整描述文件位置的路径,如通过IIS简历一个站点,站点下面有个文件叫test.htm,那么用绝对路径来显示这个文件就是http://localhost//t

[Asp.net]绝对路径和相对路径

目录 绝对路径 相对路径 总结 绝对路径 绝对路径就是你的主页上的文件或目录在硬盘上真正的路径.比如:E:\新概念英语\新版新概念英语第二册课文PDF.pdf.以Web 站点根目录为参考基础的目录路径.之所以称为绝对,意指当所有网页引用同一个文件时,所使用的路径都是一样的. 1 "/" -- 代表根目录,绝对路径. 2 如:<a href="/abc">文本</a> 或 <img src="/abc" /> 3