相对路径和绝对路径在网页中的用途

    经常听到网友苦述自己的网页中有许多图片不能正常显示,究竟为什么不能正常显示呢?总结其原因绝大部分都是因为使用了错误路径所致。网页中的图像、动画等素材都有自己固定的存放位置,网页只是通过路径使用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进行网站编辑,因为它有个站点管理功能,使用该功能绝对路径可以自动地转化为相对路径,并且当你在站点中改动文件路径时,与这些文件关联的连接路径都会自动更改,实在是方便极了!

时间: 2024-10-27 10:02:38

相对路径和绝对路径在网页中的用途的相关文章

网页中调用本地应用程序时的路径问题

由于一些原因,需要网页中调用本地应用程序,在网上查了一下,有好几种方法,有的是用javascript实现的,这种方法有安全限制,并且只能用IE浏览器,还有一种方法比较好,就是添加自定义URL协议,这种方法必须先在客户端将应用程序添加成为URL协议,上面两种方法的具体操作步骤网上都有. 下面说一下"添加自定义URL协议"这种方法的一个问题,配置完成后,可以正常调用本地应用程序,但是,这个应用程序在登录时又调用了另外一个本地应用,这时,就会弹出"系统找不到文件"之类的错

Java中使用正则表达式获取网页中所有图片的路径_java

/** * 从HTML源码中提取图片路径,最后以一个 String 类型的 List 返回,如果不包含任何图片,则返回一个 size=0 的List * 需要注意的是,此方法只会提取以下格式的图片:.jpg|.bmp|.eps|.gif|.mif|.miff|.png|.tif|.tiff|.svg|.wmf|.jpe|.jpeg|.dib|.ico|.tga|.cut|.pic * @param htmlCode HTML源码 * @return <img>标签 src 属性指向的图片地址的

html网页-如何在HTML文件中通过javascript获得当前网页的绝对路径和相对路径

问题描述 如何在HTML文件中通过javascript获得当前网页的绝对路径和相对路径 各位大神,我希望在html文件,(注意:不是jsp文件或asp文件)中通过javascript获得当前网页的地址(磁盘地址).换句话说,比如我正在打开的网页文件是index.htm,该网页文件放在了d:webconfightml路径下,我如何在index.htm文件中获得它自己的磁盘路径?即:如何获得路径"d:webconfightml"? 注意:不能有服务器端的支持,也就是我的网页不是运行在服务器

Java怎么获取网页中相对路径的绝对路径

问题描述 今天看一份报纸的网页:http://ctdsb.cnhubei.com/HTML/ctdsb/20101029/ctdsb1211884.html,想到一个问题.网页源码中图片的路径是相对路径<img src=......ctdsb20101029m_20100f01a29c_7.jpg border=0>,它的绝对路径就是这样的:<img src=http://ctdsb.cnhubei.com/ctdsb/20101029/m_20100f01a29c_7.jpg bord

如何将网页源码中../等相对路径转换为绝对路径??

问题描述 获取一个网页的代码后,,里面的文件路径都是相对路径,,有没有专门的类来将这些路径转换为绝对路径呢??如,177ks.com首页,/index.aspx转换为http://www.177ks.com/index.aspx 解决方案 解决方案二:.net有专门的类解决方案三:字符串操作replace解决方案四:不会,顶下,期待结果解决方案五:Server.mappath("path")解决方案六:URL重写解决方案七:绝对路径不利于部署...为什么要转换呢?

JSP、Servlet中的相对路径和绝对路径

js|servlet JSP.Servlet中的相对路径和绝对路径 JSP和Servlet中的绝对路径和相对路径问题困扰了我好几天,经过努力之后将其部分心得和大家共享. 前提:假设你的Http地址为http://192.168.0.1/你的web应用为webapp,那么你的web应用URL为http://192.168.0.1/webapp/ web应用的目录结构: webapp/ web-inf/ classes/ lib/ web.xml <servlet-mapping> <ser

ps中怎么把图像中的路径复制到另一个图像中?

  photoshop中将图像中的路径复制到另一个图像中 要在路径选择工具下操作 1.点击文件 新建命令. 2.点击确定. 3.点击确定后 界面会切换到新建的图像文件. 4.鼠标左键点击原来的图像文件标签. 5.点击路径选择工具. 6.鼠标左键在路径内部按下并向上拖动至新建图像标签处停留一秒钟. 7.在按住鼠标停留一秒后会切换到新建图像文件 然后向新建图像文件内部拖动鼠标. 8.将鼠标拖动到新建文件中心位置处松开鼠标 路径复制完毕. 9.切换到原来的图像文件 路径还在. 分类: PS入门教程

java web-Java web中相对路径和绝对路径。

问题描述 Java web中相对路径和绝对路径. 有点知识混淆了.再来问问,以往的认识是如从盘符开始d:/text.txt,这样的路径才是绝对路径.学习web这一部分时,经常看到说 路径 以""/""的 开始的就是web应用的绝对路径.所以我的认为是 ,相对当前目录的路径才是相对路径.今天学习又看到说,以""/"" 开始,是相对根目录的绝对路径.倒也是相对路径.有点乱七八糟了,求梳理.现在我的认为.在web应用里不以"

ThinkPHP中公共函数路径和配置项路径的映射分析_php技巧

本文实例分析了ThinkPHP中公共函数路径和配置项路径的映射.分享给大家供大家参考.具体分析如下: ThinkPHP中在使用公共函数时(单一入口文件对应独立的项目),在Common文件夹中可以写公共的函数文件,写成文件名为common.php的文件会被系统自动加载,如果写成其他的函数名,则不会自动加载,但是有两种处理机制 1.在使用的时候手动加载 load('@.function');这样就会手动加载这个文件.@代表是在这个项目下的Common文件夹下的. 2.在配置文件中配置 复制代码 代码