网页开发中的文件相对路径

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

        在网页中书写相对路径:使用被引用文档或素材相对于当前页面的相对路径,例如,在网 页“/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”。
发布了79 篇原创文章 · 获赞 16 · 访问量 59万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章