浅谈网页中的相对路径和绝对路径

经常听到网友苦述自己的网页中有许多图片不能正常显示，究竟为什么不能正常显示呢？总结其原因绝大部分都是因为使用了错误路径所致。网页中的图像、动画等素材都有自己固定的存放位置，网页只是通过路径使用HTML语言来调用它们，然后把它们显示在网页中。在网页中的路径大体可分为相对路径和绝对路径，大家(尤其是初学网页设计的朋友)往往对它们不够认识，在应该使用相对路径的地方使用了绝对路径，从而导致浏览器无法在指定的位置打开指定的文件，使素材不能正常显示。

那什么是相对路径？什么是绝对路径呢？为什么使用了绝对路径有时就不能显示呢？让我们一起来认识一下它们吧。

比如C盘的My Pictures目录下有一个tp.jpg图像，那么它的路径就是c:My pictures p.jpg，其实这种完整地描述文件位置的路径就是绝对路径。如网页index.htm中有一张图片tp.jpg，它们的绝对路径是：

c:My picturesindex.htm

c:My pictures p.jpg

如果你使用了绝对路径c:My pictures p.jpg进行图片链接，那么在本地电脑中将一切正常，因为在c:My pictures下的确存在tp.jpg这个图片。但你将它们上传到网站服务器上后，就不会正常了，因为服务器给你划分的存放空间可能在C盘其他目录中，也可能在D盘其他目录中，总之不会那么巧的就是c:My pictures。那么图片路径应该如何设置呢？这里就必须使用相对路径了，所谓相对路径，顾名思义就是自己相对与目标位置。在上例中index.htm中连接的tp.jpg就可以使用My pictures p.jpg来定位文件，这样不论将这些文件放到哪里，只要它们的相对关系没有变，就不会出错。具体的链接方式是这样的：“..My picturesimg.jpg”，其中使用“..”来表示上一级目录，“....”表示上上级的目录，以此类推。

我们一起来看看初学的朋友可能犯的几个路径错误：

例1

c:mywedwedindex．htm

c:mywedimg p．jpg

在此例中，index.htm网页中有tp.jpg这个图片，因为两个文件同在Mywed目录下，所以初学者可能把图片链接写为img p.jpg，那么这样实际的链接就变为了C:mywedwedimg p.jpg，显然这是不正确的。正确的路径应该是相对路径..img p.jpg。

例2

c:mywedwedwed1index．htm

c:mywedimgimg1 p．jpg

在此例中，index.htm网页中有tp.jpg这个图片,初学者可能错误的把图片链接写为..imgimg1 p.jpg，那么这样转为绝对路径就是C:mywedwedimgimg1

tp.jpg了，因为在该目录下并没有此文件，所以显然这种链接是错误的。正确的应该是....imgimg1 p.jpg。

例3

c:mywedwedwedindex．htm

c:mywedwedimg p．jpg

在此例中，index.htm网页中有tp.jpg这个图片，初学者可能错误地把图片链接写为....img p.jpg，那么这样转为绝对路径就是C:mywedimg p.jpg了，因为在该目录下并没有此文件，所以显然这种链接是错误的。正确的应该是..img p.jpg。

通过上面三个例子，我们可以看到网页与图片所在目录相同的部分都可以使用“..”进行代替。

有的读者可能会有这样的疑惑：一个网站有许多的链接，我怎么能保证它们的连接都正确，如果我调整了一下图片或网页的存储路径，那不是全乱了么？为了提高工作效率，我们推荐大家使用Dreamweaver进行网站编辑，因为它有个站点管理功能，使用该功能绝对路径可以自动地转化为相对路径，并且当你在站点中改动文件路径时，与这些文件关联的连接路径都会自动更改，实在是方便极了！

赞 (0)

相关推荐

  • C#绝对路径拼接相对路径的实例代码

    C#绝对路径拼接相对路径的实例代码

    做项目时发现Path.Combine方法只能支持傻瓜式的目录拼接 复制代码 代码如下: //绝对路径string absolutePath = @"C:\Program Files\Internet Explorer";//相对路径string relativePath = @"..\TestPath\";//预计拼接结果string splicingResult = string.Empty;Console.WriteLine(string.Format(&quo

  • 相对路径转化成绝对路径

    提取 Gregarius中的一个函数.可以把网页中的相对路径自动转化成绝对路径. <?  function relative_to_absolute($content, $feed_url) {      preg_match('/(http|https|ftp):\/\//', $feed_url, $protocol);      $server_url = preg_replace("/(http|https|ftp|news):\/\//", "", 

  • 相对路径和绝对路径的写法总结

    在C#中 "\"是特殊字符,要表示它的话需要使用"\\".由于这种写法不方便,C#语言提供了@对其简化. 只要在字符串前加上@即可直接使用"\".所以上面的路径在C#中应该表示为"Book",@"\Tmp\Book",@"C:\Tmp\Book". 相对路径使用"/"字符作为目录的分隔字符,而绝对路径可以使用"\"或"/"字符作

  • 相对路径与绝对路径的区别

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

  • PowerShell中把相对路径转换为绝对路径的2个方法

    在PowerShell中,有时候,我们需要把当前的相对路径解析为绝对路径,比如".\test.txt",我们想知道它的绝对路径的话,我们有两种方法可以实现. 1.有一个cmd-let,它叫Resolve-Path. 语法如下: 复制代码 代码如下: Resolve-Path <相对路径> 如果指定的相对路径的文件或文件夹,不存在,则将提示如下: 复制代码 代码如下: PS C:\Users\zhanghong> Resolve-Path .\test.txt Reso

  • javascript将相对路径转绝对路径示例

    这里介绍的其实本质上是两种方法,通过创建DOM或通过JavaScript计算: 1)通过新创建的Image, 经测试会发送一个Aborted的请求,并且IE6不支持, 将new Image改成document.createElement('IMG')也是一样的;测试应该不喜欢这个方案: 复制代码 代码如下: function getAbsoluteUrl(url){    var img = new Image();    img.src = url;  // 设置相对路径给Image, 此时会

  • asp中将相对路径转换为绝对路径的函数代码

    复制代码 代码如下: '================================================ ' 函数名:ChkMapPath ' 作 用:相对路径转换为绝对路径 ' 参 数:strPath ----原路径 ' 返回值:绝对路径 '================================================ Function ChkMapPath(ByVal strPath) Dim fullPath strPath = Replace(Repla

  • 谈谈PHP中相对路径的问题与绝对路径的使用

    谈谈PHP中相对路径的问题与绝对路径的使用

    问题描述 首先我们先来看一下我们这个例子的目录结构以及这三个文件的内容 a.php <?php include './c/d.php' b.php <?php define('__B', 'this is a test'); c/d.php <?php include '../b.php'; var_dump(__B); 在c目录下面的d.php文件引用了它的上级目录下的 b.php 文件 单独运行 c/d.php 的时候不会出问题 但是,如果在和b同级目录下的a.php引用c/d.ph

  • php绝对路径与相对路径之间关系的的分析

    php绝对路径与相对路径之间关系的的分析

    php中好像不能像asp那样用"/"表示根目录,代之以$_SERVER['DOCUMENT_ROOT'],其它则相同:../表示向上一层../表示当前层.假如现在a/b/c/s.php要调用根目录下的 /bb/s2.txt,则: $RootDir = $_SERVER['DOCUMENT_ROOT']; $fireDir = "$RootDir/bb/s2.txt"; 或者:"../../../bb/s2.txt"表示向上返回到b再向上到a再向上

  • java区分绝对路径和相对路径的方法

    本文实例讲述了java区分绝对路径和相对路径的方法.分享给大家供大家参考.具体分析如下: 这里要区分的是目录路径 如: /opt/deve/tomcat/bin c:\deve\tomcat\bin 都是绝对目录路径 bin bin/data bin\data 都是相对目录路径 通过观察,发现规律 以/开始 或者 包含\或//的都是绝对路径 或者 以/开始 或者 包含:的都是绝对路径 反之就是相对路径 介绍几个方法: startsWith public class Stringutil { pu

随机推荐