导航: 好喜爱学习网 >> 网站制作 >> 网页制作技巧 >> 相对路径和绝对路径在网页中的用途
相关文章
最新文章
文章内容
相对路径和绝对路径在网页中的用途
作者:未知 来源:网络收集 录入:管理员

    经常听到网友苦述自己的网页中有许多图片不能正常显示,究竟为什么不能正常显示呢?总结其原因绝大部分都是因为使用了错误路径所致。网页中的图像、动画等素材都有自己固定的存放位置,网页只是通过路径使用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。

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

    

[1] [2] 

E-MAIL:309076721@163.com
本站为非营利性质个人网站,建站只为个人爱好与学习,内容大多为电脑技术教程;
网站内容来源于互联网收集整理,禁止用于非法途径,如发现本网站上有侵权的文章请联系我们,我们会尽快删除;
本站不对站点内容准确性、完整性和真实性作任何承诺,由此产生的后果本站不承担任何责任,对以上引起的一切法律纠纷本站无权利承担。