zoukankan      html  css  js  c++  java
  • 相对路径与绝对路径的区别

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

    在HTML里只要涉及文件的地方(如超级链接、图片等)就会涉及绝对路径与相对路径的概念。
     
     1.绝对路径
        绝对路径是指文件在硬盘上真正存在的路径。例如“bg.jpg”这个图片是存放在硬盘的“E:ook网页布局代码第2章”目录下,那么 “bg.jpg”这个图片的绝对路径就是“E:ook网页布代码第2章g.jpg"。那么如果要使用绝对路径指定网页的背景图片就应该使用 以下语句:
    <body backround="E:ook网页布局代码第2章g.jpg" >
     
      2.使用绝对路径的缺点
       事实上,在网页编程时,很少会使用绝对路径,如果使用“E:ook网页布代码第2章g.jpg”来指定背景图片的位置,在自己的计算机上 浏览可能会一切正常,但是上传到Web服务器上浏览就很有可能不会显示图片了。因为上传到Web服务器上时,可能整个网站并没有放在Web服务器的E盘, 有可能是D盘或H盘。即使放在Web服务器的E盘里,Web服务器的E盘里也不一定会存在“E:ook网页布局代码第2章”这个目录,因此在浏 览网页时是不会显示图片的。
     
      3.相对路径
        为了避免这种隋况发生,通常在网页里指定文件时,都会选择使用相对路径。所谓相对路径,就是相对于自己的目标文件位置。例如上面的例子,“s1.htm” 文件里引用了“bg.jpg”图片,由于“bg.jpg”图片相对于“s1.htm”来说,是在同一个目录的,那么要在“s1.htm”文件里使用以下代 码后,只要这两个文件的相对位置没有变(也就是说还是在同一个目录内),那么无论上传到Web服务器的哪个位置,在浏览器里都能正确地显示图片。
          <body background="bg.jpg">
    再 举一个例子,假设“s1.htm”文件所在目录为“E:ook网页布局代码第2章”,而“bg.jpg”图片所在目录为“E:ook网页 布局代码第2章img”,那么“bg.jpg”图片相对于“s1.htm”文件来说,是在其所在目录的“img”子目录里,则引用图片的语句应该 为:
          <body background="img/bg.jpg">  
     
        注意:相对路径使用“/”字符作为目录的分隔字符,而绝对路径可以使用“”或“/”字符作为目录的分隔字符。由于“img”目录是“第2章”目录下的子目录,因此在“img”前不用再加上“/”字符。
    在 相对路径里常使用“../”来表示上一级目录。如果有多个上一级目录,可以使用多个“../”,例如“http://www.cnblogs.com/”代表上上级目录。假设 “s1.htm”文件所在目录为“E:ook网页布局代码第2章”,而“bg.jpg”图片所在目录为“E:ook网页布局代码”,那 么“bg.jpg”图片相对于“s1.htm”文件来说,是在其所在目录的上级目录里,则引用图片的语句应该为:
          <body background="../bg.jpg">  
     
      再举一个例子,假设“s1.htm”文件所在目录为“E:ook网页布局代码第2章”,而“bg.jpg”图片所在目录为“E:ook网 页布局代码img”,那么“bg.jpg”图片相对于“s1.htm”文件来说,是在其所在目录的上级目录里的“img”子目录里,则引用图片的语句 应该为:
          <body background="../img/bg.jpg">  
     
    4.相对虚拟目录
    有关相对路径还有一个比较特殊的表示:“相对虚拟目录”。请看下面的例子:
          <body background="/img/bg.jpg">  
     
      在这个例子里,background属性的值为“/img/bg.jpg”,注意在“img”前有一个“/”字符。这个“/”代表的是虚拟目录的根目录. 假设把“E:ook网页布局代码”设为虚拟目录,那么“/img/bg.jpg”的真实路径为“E:ook网页布局代码img g.jpg”;如果把“E:ook网页布局代码第2章”设为虚拟目录,那么“/img/bg.jpg”的真实路径为“E:ook网页 布局代码第2章imgg.jpg”

  • 相关阅读:
    MVC ORM 架构
    Kubernetes 第八章 Pod 控制器
    Kubernetes 第七章 Configure Liveness and Readiness Probes
    Kubernetes 第六章 pod 资源对象
    Kubernetes 第五章 YAML
    Kubernetes 核心组件
    Kubernetes 架构原理
    Kubernetes 第四章 kubectl
    Kubernetes 第三章 kubeadm
    yum 配置及yum 源配置
  • 原文地址:https://www.cnblogs.com/qingtianBKY/p/6573931.html
Copyright © 2011-2022 走看看