首页 > 网页制作 > 心得技巧 > 正文

网页制作绝对路径与相对路径的区别_心得技巧_网页制作

2018-10-10 20:34:43

1.绝对路径

先说在本地计算机上,文件的绝对路径当然是指:文件在硬盘上真正存在的路径。

例如这个路径:D:/wamp/www/img/icon.jpg告诉我们icon.jpg文件是在D盘的wamp目录下的img子目录中。我们不需要知道其他任何信息就可以根据绝对路径判断出文件的位置。

还有超链接文件位置,也属于绝对路径,例如http://www.img.net/img/icon.jpg 。

注意:有时候编好的页面,在自己的计算机上浏览一切正常,但是上传到Web服务器上浏览就很有可能不会显示图片了。因为静态HTML页面需要上传到网站,而在网站的应用中,通常我们使用"/"来表示根目录,/img/icon.jpg就表示photo.jpg文件在这个网站的根目录上的img目录里。但是要知道,这里所指的根目录并不是你的网站的根目录,而是你的网站所在的Web服务器的根目录。因为上传到Web服务器上时,可能整个网站并没有放在Web服务器的D盘, 有可能是F盘或H盘。即使放在Web服务器的D盘里,Web服务器的E盘里也不一定会存在“D:/wamp/www/img”这个目录,因此在浏览网页时是不会显示图片的。这也是应用绝对路径的风险。

2.相对路径

相对路径,顾名思义就是自己相对与目标位置。

假设 你要引入文件的页面名称为test.htm,它存在叫www的文件夹里(绝对路径D:/wamp/www/test.htm),那么引用同时存在www文件夹里的“icon.jpg”文件(绝对路径D:/wamp/www/icon.jpg),同一目录下相对路径icon.jpg;如果文件“icon.jpg”存在img文文件夹中(绝对路径D:/wamp/www/img/icon.jpg),那么相对路径img/icon.jpg。

相对路径可以避免上述根目录不同的问题。只要将网页文件及引用文件的相对位置与web服务器上文件相对位置保存一致,那么他们的相对路径也会一致。例如上面的例子,“test.htm” 文件里引用了“icon.jpg”图片,由于“icon.jpg”图片相对于“test.htm”来说,是在同一个目录的,那么只要这两个文件还是在同一个目录内,那么无论上传到Web服务器的哪个位置,在浏览器里都能正确地显示图片。

注意:相对路径使用“/”字符作为目录的分隔字符,而绝对路径可以使用“/”或“/”字符作为目录的分隔字符。由于“img”目录是“www”目录下的子目录,因此在“img”前不用再加上“/”字符。
在 相对路径里常使用“../”来表示上一级目录。如果有多个上一级目录,可以使用多个“../”。假设 “test.htm”文件所在目录为“D:/wamp/www/test.htm”,而“icon.jpg”图片所在目录为“D:/wamp/www”,那 么“icon.jpg”图片相对于“test.htm”文件来说,是在其所在目录的上级目录里,则引用图片的语句应该为:
<img src="../icon.jpg" />
假设 “test.htm”文件所在目录为“D:/wamp/www/test.htm”,而“icon.jpg”图片所在目录为“D:/wamp/www”,那 么“icon.jpg”图片相对于“test.htm”文件来说,是在其所在目录的上级目录里的子目录——“img”中,则引用图片的语句应该为:
<img src="../img/icon.jpg" />

3.虚拟路径

将文件上传到远程服务器后,这些文件驻留在服务器本地目录树中的某一个文件夹中。例如,在运行MicrosoftIIS的服务器上,主页的路径可能如下所示:c:/Inetpub/wwwroot/accounts/users/jsmith/index2.htm此路径通常称为文件的物理路径。但是,用来打开文件的URL并不使用物理路径。它使用服务器名称或域名,后接虚拟路径( 这里说一下虚拟目录:虚拟目录,是对Http访问而言的,用户在浏览网站或FPT时显示的目录结构。例如你设置了E:/Website为访问目录,那么E:/Website为虚拟目录的根目录;E:/Website/Image,就变成了/Image. )。所以接上面的例子,虚拟路径可以写成
<img src="/img/icon.jpg" />
 

整理一下

“./” 代表当前目录 <img src="./img/icon.jpg" />等同于<img src="img/icon.jpg" />
“../” 代表上一级目录
“/” 当前根目录,是相对目录;<img src="/img/icon.jpg" />
“~/” Web 应用程序根目录。ASP.NET 启用了 Web 应用程序根目录运算符 (~),在服务器控件中指定路径时,可以使用该运算符。ASP.NET 会将 ~ 运算符解析为当前应用程序的根目录。可以结合使用 ~ 运算符和文件夹来指定基于当前根目录的路径。<asp:image runat="server" id="Image1" ImageUrl="~/Images/SampleImage.jpg" />在该示例中,图像文件将从 Web 应用程序根目录下的 Images 文件夹中直接读取,无论该页面位于网站的什么位置。
 

  • 相关标签:心得技巧
  • 本文发布HTML5中文学习网 ,转载请注明出处,感谢您!
  • 相关文章


  • 曝网友假装外国人写投诉信 ofo秒退押金并回函致歉
  • 苹果市值缩水逾2000亿美元 遭多家投行下调目标价
  • Asp.net Core与类库读取配置文件信息的方法_实用技巧
  • asp.net在Repeater嵌套的Repeater中使用复选框详解_实用技巧
  • 利用IIS调试ASP.NET网站程序的完整步骤_实用技巧
  • Asp.Net Core轻松学习系列之配置文件_实用技巧
  • ASP.NET 页生命周期概述(小结)_实用技巧
  • 详解ASP.NET Core WebApi 返回统一格式参数_实用技巧
  • 2018年网络流行语有哪些?2018年十大网络流行语盘点
  • 华为首席财务官孟晚舟被暂扣 深圳市政府要求加方立即放人!
  • 独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    作者信息

    kevin

    永远在学习的路上!

    相关教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 热门教程