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

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

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有