现在的位置: 首页 > 综合 > 正文

网页、JS、CSS和Flash中的相对路径

2013年08月21日 ⁄ 综合 ⁄ 共 3633字 ⁄ 字号 评论关闭

网页、JS、CSS和Flash中的相对路径

超链接是互联网的魅力所在。为了把互联网上众多分散的网站和网页联系起来,构成一个有机的整体,就要在网页上加入链接。通过点击网页上的链接,我们才能在信息海洋中尽情遨游。

超链接有以下几类:
  • 内部链接:同一网站内文档之间的链接
  • 外部链接:不同网站文档之间的链接
  • 锚点链接:同一网页或不同网页指定位置的链接
  • 电子邮件链接:电子邮件的链接

在制作内部链接或外部链接时,为了引用文档和素材,需要描述被引用的文档或素材的位置,这种描述通常有两种写法,分别是“相对路径”和“绝对路径”。而“相对路径”又分为“根相对路径”和“文档相对路径”两种。下面我们分别加以说明。

物理路径:在说明绝对路径和相对路径的概念和区别之前,我们需要先了解物理路径,所谓物理路径,是指文档或素材在服务器上的绝对存储位置,这种位置实际上就是服务器操作系统下的文件系统中对文档位置的描述,例如,在Windows系统中,一个文档的绝对位置是“d:/doc/1.htm”,而在Linux系统中,一个文档的绝对位置可能是“/home/www/1.htm”。

绝对路径是包含服务器协议(在本例中为http协议)的完整的路径,例如,一个指向信息快车首页的完全路径是“http://www.china-yantai.net/index.htm”。如果需要在网页中链接当前站点之外的文档或素材,应该采用绝对路径。

与绝对路径不同,相对路径自身并不包含完整的路径信息(例如,不包含服务器协议),相对路径描述的是被引用文档和当前文档之间的相对位置关系(文档相对路径)或被引用文档和网站根目录之间的相对位置关系(根相对路径)。当在浏览器中点击某个使用相对路径的链接时,浏览器会自动获取当前文档的服务器协议、地址和端口等信息,并将该信息和相对路径发送到服务器上,而服务器则根据当前文档位置和相对路径,计算出被引用文档的绝对位置并获取文档,最终将结果返回给浏览器。

根相对路径以“/”开头(请注意,不能是“/”),是从当前站点的根目录到被引用文档的完整路径。例如,某个网站的根目录为/home/www,其下有一个文档/home/www/a/b/1.htm,则该文档的根相对路径为“/a/b/1.htm”。

文档相对路径是指从当前文档所在目录访问被引用文档的路径。也就是说,相对路径描述的是当前文档所在目录和被引用文档所在目录的相对位置关系。例如,当前文档的物理路径是/home/www/a/1.htm,而被引用文档的物理路径是/home/www/b/2.htm,第二个文档相对于第一个文档的相对路径就是“../b/2.htm”。

在使用相对路径时,我们需要知道如何描述当前文档所在目录以及如何描述当前文档的上一级目录(父目录)。通常我们使用“./”或空描述当前文档所在目录,例如,当前文档为/home/www/a/1.htm,则“./2.htm”和“2.htm”都是一个指向“/home/www/a/2.htm”的相对路径。 在描述当前文档所在目录的上一级目录时,我们使用前缀“../”,如果你用过Dos系统,请回忆我们经常使用的一个命令“cd ..”,这就是将当前目录跳转到上一级目录的命令。还是上面的例子,如果相对路径为“../b/2.htm”,则我们请求的是物理路径为“/home/www/b/2.htm”的文档。 “../”和“./”可以任意组合,例如,“../../”代表当前目录的上一级目录的上一级目录。

在了解绝对路径和相对路径的概念和区别之后,我们还需要掌握使用它们的时机。一般来说,如果需要引用当前网站外部的文档和素材,我们应该使用绝对路径;而在引用当前网站内部的文档和素材时,我们应该使用相对路径。由于相对路径中不包含网站地址等信息,从而使得网站更容易移植(例如,更换网站域名),因此,虽然也可以使用绝对路径链接同一网站内的文档,但应该尽量使用相对路径。 一般来说,在制作内部链接时,我们应该尽量使用文档相对路径,而不是根相对路径,这样做的原因是在本地预览网站时,浏览器并不承认当前站点的根目录为服务器,因此会导致链接错误的情况,使用文档相对路径则没有这样的问题。 但在某些情况下,使用根相对路径是更好的选择,比较典型的是“农村信息化自助建网生成器”中的“版权信息”的编辑,如果在版权信息中引用了一个站内素材(例如自定义文件下的一张图片),由于版权信息的代码同时为多个不同目录下的网页所使用(例如,同时被首页和一级页面所使用),由于这些网页的所在目录不同,无法使用文档相对路径,此时,使用根相对路径则可以得到正确的结果(当然,这个“正确”是指在上传后的网站内是正确的)。

在“农村信息化自助建网生成器”中生成链接时,软件已经自动帮我们计算了文档之间的相对路径(通常是使用文档相对路径),用户无需考虑路径的写法。

最后,我们来讨论一下如何在网页、JS文件、CSS文件和Flash中正确地书写相对路径。
  • 在网页中书写相对路径:使用被引用文档或素材相对于当前页面的相对路径,例如,在网页“/home/www/a/index.htm”引用素材“/home/www/a/images/a.jpg”,其相对路径应该是“./images/a.jpg”或“images/a.jpg”。
  • 在JS文件中书写相对路径:JS文件是指在页面中引用的外部JavaScript文件,其中可能采用JavaScript代码生成html代码,由于生成的html代码是嵌入在引用该JS文件的页面中,因此,在描述相对路径时,应该使用被引用的文档或素材相对于引用JS文件的页面之间的相对路径。例如,文档“/home/www/a/index.htm”中引用了JS文件“/home/www/a/js/hello.js”,而在该js中生成一段引用素材“/home/www/a/images/1.jpg”的html代码,则在这段代码中,其相对路径应该是“./images/1.jpg”或“images/1.jpg”,而不能是“../images/1.jpg”。
  • 在CSS文件中书写相对路径:CSS文件是指在页面中引用的外部样式定义文件,该文件通常用于定义页面中各种html标记的显示效果(例如文本的字体名称、字体大小、缩进、边距等),CSS文件中同样可以引用外部的素材或文档(例如设置某个DIV对象的背景图片)。和JS文件不同,浏览器认为CSS文件也是一个独立的文档,因此,在CSS中对素材的引用可以通过计算素材文件和该CSS文件之间的相对路径来实现,而与引用该CSS文件的页面所在的位置无关。例如,文档“/home/www/a/index.htm”中引用了CSS文件“/home/www/a/css/main.css”,而在该CSS中引用了素材“/home/www/a/images/1.jpg”,则在CSS中对于该素材引用的相对路径应该是“../images/1.jpg”,而不能是“./images/1.jpg”或“images/1.jpg”。
  • 在Flash中书写相对路径:Flash用于表现网页中的某些动态效果,使用Flash的网页往往更美观,交互性更强。在Flash文件中,同样可以引用外部的素材(例如,使用Flash制作一个精美的相册),那么,应该如何在Flash中使用相对路径引用外部素材呢?与JS文件类似,浏览器也不认为Flash文件是一个独立的文档,而是认为其是一个嵌入在页面内的素材,因此,在Flash文件中引用素材时,同样应该使用被引用的素材和嵌入Flash的html页面之间的相对路径。例如,文档“/home/www/a/index.htm”中引用了Flash文件“/home/www/a/swf/main.swf”,而该Flash中引用了素材“/home/www/a/images/1.jpg”,则正确的相对路径是“./images/1.jpg”或“images/1.jpg”,而不是“../images/1.jpg”。
  • 我补充一下自己的见解:如果是在jsp上请求比如:http://localhost:8888/test1/agencies/agencies_search.do跳转到/test1/module/agencies/agenciesSearch.jsp这个页面。在这个页面中有张图片名为1.jpg,那么在jsp中该如何确定这张图片的位置呢?在本地开发的时候相对的是本地文件系统的路径,而在服务器上运行的时候是相对于 URL的访问路径。根据上面这句话来分析,如果写成如下形式:images/left.jpg则说明图片应该在/test1/agencies/images/left.jpg.因为这个路径就是相对于url的相对路径。如果写成:../images/left.jpg,则图片应该在/test1/images/left.jpg.

抱歉!评论已关闭.