网页制作绝对路径与相对路径的区别

互联网   发布时间:2017-04-19 19:26:16   作者:佚名   我要评论

用DW写HTML的时候,可以直接选择到具体文件的路径,现在改用了webstorm,只能选择到与HTML文件同一目录下的文件。就此整理一下文件的绝对路径与相对路径的区别

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 文件夹中直接读取,无论该页面位于网站的什么位置。
 

相关文章

  • 详解Web前端性能优化详解之资源合并与压缩

    这篇文章主要介绍了详解Web前端性能优化详解之资源合并与压缩,详细的介绍资源合并与压缩的案例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来
    2018-06-19
  • 浅谈网页基本性能优化规则小结

    这篇文章主要介绍了浅谈网页基本性能优化规则小结的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-07
  • Vendor Prefix:为什么需要浏览器引擎前缀

    Vendor prefix—浏览器引擎前缀,是一些放在CSS属性前的小字符串,用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效,,需要的朋友可以参考下
    2018-06-03
  • 浅谈雅虎前端优化的35条军规

    无论是在工作中,还是在面试中,web前端性能的优化都是很重要的,那么我们进行优化需要从哪些方面入手呢,这篇文章主要介绍了浅谈雅虎前端优化的35条军规,感兴趣的小伙伴
    2018-05-22
  • 百度站内搜索不支持https的解决方法(已测试)

    这篇文章主要介绍了百度站内搜索不支持https的解决方法,需要的朋友可以参考下
    2018-02-07
  • Https页面使用百度分享的解决方法

    详情页面使用了百度分享,导致http和https混用,可爱的小绿锁没了。所以我们必须修正它。已经有人处理了这个问题,所以我们直接做伸手党即可
    2018-02-07
  • 用 // 代替 http:// 有什么好处(自适应https)

    随着国内运营商等的大肆劫持导致大家在访问网站的时候插入大量的低俗广告,降低用户体验,所以各大搜索引擎都希望大家尽量将站点转换为https方式
    2018-02-06
  • 引入css的四种方式总结(分享)

    下面小编就为大家分享一篇引入css的四种方式总结,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-04
  • 移动端开发教程之像素的显示问题汇总

    最近在开发中,发现了移动端像素的一些问题,是之前一直没注意过的,这篇文章主要给大家介绍了关于移动端开发教程之像素显示问题的相关资料,文中通过示例代码介绍的非常详
    2017-12-11
  • 浅谈移动端的自适应布局问题(响应式、rem/em、Js动态)

    本篇文章主要介绍了浅谈移动端的自适应问题(响应式、rem/em、Js动态),非常具有实用价值,需要的朋友可以参考下
    2017-11-01

最新评论