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

所属分类: 网页制作 / 应用技巧 阅读数: 1111
收藏 0 赞 0 分享

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

更多精彩内容其他人还在看

移动端开发教程之像素的显示问题汇总

最近在开发中,发现了移动端像素的一些问题,是之前一直没注意过的,这篇文章主要给大家介绍了关于移动端开发教程之像素显示问题的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
收藏 0 赞 0 分享

关于移动端小图标模糊问题的解决方法

由于移动端的屏幕大小不一,所以我们在做移动端页面的时候,在不同分辨率的手机屏幕下,手机端的图片会显示模糊不清,严重影响了用户体验,所以这篇文章主要给大家介绍了关于移动端小图标模糊问题的解决方法,需要的朋友可以参考借鉴,下面来一起看看吧。
收藏 0 赞 0 分享

web开发教程之跨域的解决方案详解

相信每一个前端er对于跨域这两个字都不会陌生,在实际项目中应用也是比较多的,下面这篇文章主要给大家介绍了关于web开发教程之跨域的解决方案,文中通过示例代码介绍的非常详细,对大家的学习或工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
收藏 0 赞 0 分享

网页制作时可以拿起就用的小技巧总结

这篇文章主要给大家分享了一些在网页制作的时候,可以拿起就用的小技巧,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友可以参考借鉴,下面跟着小编来一起学习学习吧。
收藏 0 赞 0 分享

chrome开发者工具-timeline的详细介绍

这篇文章主要给大家介绍了chrome开发者工具-timeline的相关资料,文中介绍的非常详细,对大家的学习或者工作具有一定的参考价值,需要的朋友们下面来一起学习学习吧。
收藏 0 赞 0 分享

web前端开发课程 web前端开发工具有哪些

随着互联网技术的发展,用户对于web网页的依赖性越来越重,这对于web前端开发工程师的要求也在不断提高,作为开发者来说,开发工作需要依赖很多开发工具的协助。才能更高效的完美的呈现出炫酷的页面。下面小编给大家带来了8个好用的web前端开发常用工具,一起学习吧
收藏 0 赞 0 分享

网站网页设计的一些小知识

这篇文章主要介绍了网站网页设计的一些小知识,非常不错,具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

详解移动端实现内滚动的四种解决方案

这篇文章主要介绍了关于移动端实现内滚动的四种解决方案,实现的效果就是在一个区域内只允许部分区域产生滚动的效果,而其余部分则不能移动,需要的朋友可以参考借鉴,下面来一起看看吧。
收藏 0 赞 0 分享

网站制作入门常识 新手看过来

现在好多人都加入到网站这一行列中来,那么,如何才能制作网站呢?接下来给大家带来网站制作入门常识,需要的的朋友参考下
收藏 0 赞 0 分享

教你如何优雅的实现垂直居中(推荐)

这篇文章主要给大家介绍了关于如何优雅的实现垂直居中的相关资料,文中分别给大家介绍了已知宽高的元素、未知宽高的元素以及基于 Flexbox 的解决方案,都分别给出了示例代码供大家参考学习,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享
查看更多