相对路径与绝对路径的区别_CSS/HTML

绝对路径:

  在我们平时使用计算机时要找到需要的文件就必须知道文件的位置,而表示文件的位置的方式就是路径,例如只要看到这个路径:c:/website/img/photo.jpg我们就知道photo.jpg文件是在c盘的website目录下的img子目录中。类似于这样完整的描述文件位置的路径就是绝对路径。我们不需要知道其他任何信息就可以根据绝对路径判断出文件的位置。而在网站中类似以yun_qi_img/photo.jpg来确定文件位置的方式也是绝对路径。

  在网站的应用中,通常我们使用"/"来表示根目录,/img/photo.jpg就表示photo.jpg文件在这个网站的根目录上的img目录里。但是这样使用对于初学者来说是具有风险性的,因为要知道这里所指的根目录并不是你的网站的根目录,而是你的网站所在的服务器的根目录,因此当网站的根目录与服务器根目录不同时,就会发生错误。 
  相对路径:

  分析一下为什么会发生图片不能正常显示的情况。举一个例子,现在有一个页面index.htm,在这个页面中联接有一张图片photo.jpg。他们的绝对路径如下:
  c:/website/index.htm
  c:/website/img/photo.jpg

  如果你使用绝对路径c:/website/img/photo.jpg,那么在自己的计算机上将一切正常,因为确实可以在指定的位置即c:/website/img/photo.jpg上找到photo.jpg文件,但是当你将页面上传到网站的时候就很可能会出错了,因为你的网站可能在服务器的c盘,可能在d盘,也可能在aa目录下,更可能在bb目录下,总之没有理由会有c:/website/img/photo.jpg这样一个路径。那么,在index.htm文件中要使用什么样的路径来定位photo.jpg文件呢?对,应该是用相对路径,所谓相对路径,顾名思义就是自己相对与目标位置。在上例中index.htm中联接的photo.jpg可以使用img/photo.jpg来定位文件,那么不论将这些文件放到哪里,只要他们的相对关系没有变,就不会出错。

  另外我们使用“../”来表示上一级目录,“../../”表示上上级的目录,以此类推。(学习过dos的朋友可能更容易理解)

  再看几个例子,注意所有例子中都是index.htm文件中联接有一张图片photo.jpg。

  例:
  c:/website/web/index.htm
  c:/website/img/photo.jpg
  在此例中index.htm中联接的photo.jpg应该怎样表示呢?
  错误写法:img/photo.jpg
  这种写法是不正确的,在此例中,对于index.htm文件来说img/photo.jpg所代表的绝对路径是:c:/website/web/img/photo.jpg,显然不符合要求。
  正确写法:使用../img/photo.jpg的相对路径来定位文件

  例:
  c:/website/web/xz/index.htm
  c:/website/img/images/photo.jpg
  在此例中index.htm中联接的photo.jpg应该怎样表示呢?
  错误写法:../img/images/photo.jpg
  这种写法是不正确的,在此例中对于index.htm文件来说../img/images/photo.jpg所代表的绝对路径是:c:/website/web/img/images/photo.jpg。  
  正确写法:可以使用../../img/images/photo.jpg的相对路径来定位文件

  例:
  c:/website/web/xz/index.htm
  c:/website/web/img/photo.jpg
  在此例中index.htm中联接的photo.jpg应该怎样表示呢?
  错误写法:../../img/photo.jpg
  这种写法是不正确的,在此例中对于index.htm文件来说../../img/photo.jpg所代表的绝对路径是:c:/website/img/photo.jpg。
  正确写法:可以使用../img/photo.jpg的相对路径来定位文件

  总结:通过以上的例子可以发现,在把绝对路径转化为相对路径的时候,两个文件绝对路径中相同的部分都可以忽略,不做考虑。只要考虑他们不同之处就可以了。

时间: 2024-09-02 06:59:14

相对路径与绝对路径的区别_CSS/HTML的相关文章

HTML相对路径和绝对路径区别

初拟这个题目的时候,感觉太过简单,没有什么值得讲的.会一点HTML语言的人应该都知道相对路径和绝对路径的区别.不过后来想了想,觉得还是有必要写出来的.因为,毕竟还是有部分HTML的初学者和一些特定的环境下,会因为文件路径设置不当导致网站内容加载不全.比如说,当我们在本地写好了一个网站后,当把这个网站搬到其他地方上线后发现有些图片,模块加载不出来.几经检查代码逻辑性,都没有发现问题,但最后经过旁人的小小的指点,哦,原来是代码中文件的路径设置成了本地的了,而非新环境下的路径. 通常情况下,建议大家在

java.io.File中的绝对路径和相对路径.

按照jdk Doc上的说法"绝对路径名是完整的路径名,不需要任何其他信息就可以定位自身表示的文件.相反,相对路径名必须使用来自其他路径名的信息进行解释.默认情况下,java.io 包中的类总是根据当前用户目录来分析相对路径名.此目录由系统属性 "user.dir" 指定,通常是 Java 虚拟机的调用目录." 相对路径顾名思义,相对于某个路径,那么究竟相对于什么路径我们必须弄明白.按照上面jdk文档上讲的这个路径是"当前用户目录"也就是"

ASP.NET教程:绝对路径与相对路径的拼合方法

引言 在做文件路径处理时,经常需要对一个路径的相对路径进行操作,那么如何拼合相对路径以生成新的绝对路径呢? Path.Combine()方法 我们知道System.IO.Path是专门用来处理路径的静态类,它有一个Combine()方法就是用于拼接路径的,我们来测试一下其拼接效果. 我们使用一个命令行程序进行测试,这里要测试相对于文件C:abc123avatar.html的一系列相对路径,测试代码如下: class Program { static string path = @"C:abc12

ASP.NET将Web站点下的绝对路径转换为虚拟路径

asp.net|web|站点|转换 很经常使用到的一个功能,但在在网上却一直没有找到相关的解决方法,今天借着项目应用到的机会写了两个将绝对路径转换为虚拟路径封装好的方法将Web站点下的绝对路径转换为相对于指定页面的虚拟路径/**//// <summary>/// 将Web站点下的绝对路径转换为相对于指定页面的虚拟路径/// </summary>/// <param name="page">当前页面指针,一般为this</param>///

JSP、Servlet中的相对路径和绝对路径

js|servlet JSP.Servlet中的相对路径和绝对路径 JSP和Servlet中的绝对路径和相对路径问题困扰了我好几天,经过努力之后将其部分心得和大家共享. 前提:假设你的Http地址为http://192.168.0.1/你的web应用为webapp,那么你的web应用URL为http://192.168.0.1/webapp/ web应用的目录结构: webapp/ web-inf/ classes/ lib/ web.xml <servlet-mapping> <ser

Dreamweaver绝对路径和相对路径

  在HTML里只要涉及文件的地方(如超级链接.图片等)就会涉及绝对路径与相对路径的概念. 1.绝对路径 绝对路径是指文件在硬盘上真正存在的路径.例如"bg.jpg"这个图片是存放在硬盘的"E:book网页布局代码第2章"目录下,那么"bg.jpg"这个图片的绝对路径就是"E:book网页布代码第2章bg.jpg".那么如果要使用绝对路径指定网页的背景图片就应该使用以下语句: 2.使用绝对路径的缺点 事实上,在网页编程时,很少

什么是绝对路径和相对路径

  在HTML里只要涉及文件的地方(如超级链接.图片等)就会涉及绝对路径与相对路径的概念. 1.绝对路径 绝对路径是指文件在硬盘上真正存在的路径.例如"bg.jpg"这个图片是存放在硬盘的"E:book网页布局代码第2章"目录下,那么"bg.jpg"这个图片的绝对路径就是"E:book网页布代码第2章bg.jpg".那么如果要使用绝对路径指定网页的背景图片就应该使用以下语句: 2.使用绝对路径的缺点 事实上,在网页编程时,很少

HTML相对路径和绝对路径

  如果你在引用文件时(如加入超链接,或者插入图片等),使用了错误的文件路径,就会导致引用失效(无法浏览链接文件,或无法显示插入的图片等). 为了避免这些错误,正确地引用文件,我们需要学习一下HTML路径. HTML有2种路径的写法:相对路径和绝对路径. HTML相对路径(Relative Path) 同一个目录的文件引用 如果源文件和引用文件在同一个目录里,直接写引用文件名即可. 我们现在建一个源文件info.html,在info.html里要引用index.html文件作为超链接. 假设in

Java相对路径与绝对路径的问题

 在写java程序时不可避免要获取文件的路径-总结一下,遗漏的随时补上     1.可以在servlet的init方法里     String path = getServletContext().getRealPath("/"):     这将获取web项目的全路径     例如 :E:eclipseM9workspacetree     tree是我web项目的根目录     2.你也可以随时在任意的class里调用     this.getClass().getClassLoad