相对路径和绝对路径的区别以及js和css引入相对路径的区别

1.绝对路径
绝对路径是指文件在硬盘上真正存在的路径。例如“bg.jpg”这个图片是存放在硬盘的“E:\book\网页布局代码\第2章”目录下，那么 “bg.jpg”这个图片的绝对路径就是“E:\book\网页布\代码\第2章\bg.jpg"。那么如果要使用绝对路径指定网页的背景图片就应该使用以下语句：

<body backround="E:\book\网页布局\代码\第2章\bg.jpg" >

2.使用绝对路径的缺点
事实上，在网页编程时，很少会使用绝对路径，如果使用“E:\book\网页布\代码\第2章\bg.jpg”来指定背景图片的位置，在自己的计算机上浏览可能会一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片了。因为上传到Web服务器上时，可能整个网站并没有放在Web服务器的E盘，有可能是D盘或H盘。即使放在Web服务器的E盘里，Web服务器的E盘里也不一定会存在“E:\book\网页布局\代码\第2章”这个目录，因此在浏览网页时是不会显示图片的。

3.相对路径
为了避免这种隋况发生，通常在网页里指定文件时，都会选择使用相对路径。所谓相对路径，就是相对于自己的目标文件位置。例如上面的例子，“s1.htm” 文件里引用了“bg.jpg”图片，由于“bg.jpg”图片相对于“s1.htm”来说，是在同一个目录的，那么要在“s1.htm”文件里使用以下代码后，只要这两个文件的相对位置没有变(也就是说还是在同一个目录内)，那么无论上传到Web服务器的哪个位置，在浏览器里都能正确地显示图片。

   <body background="bg.jpg">

再举一个例子，假设“s1.htm”文件所在目录为“E:\book\网页布局\代码\第2章”，而“bg.jpg”图片所在目录为“E:\book\网页布局\代码\第2章\img”，那么“bg.jpg”图片相对于“s1.htm”文件来说，是在其所在目录的“img”子目录里，则引用图片的语句应该为：

 <body background="img/bg.jpg">

注意：相对路径使用“/”字符作为目录的分隔字符，而绝对路径可以使用“\”或“/”字符作为目录的分隔字符。由于“img”目录是“第2章”目录下的子目录，因此在“img”前不用再加上“/”字符。
在相对路径里常使用“…/”来表示上一级目录。如果有多个上一级目录，可以使用多个“…/”，例如“http://www.cnblogs.com/”代表上上级目录。假设 “s1.htm”文件所在目录为“E:\book\网页布局\代码\第2章”，而“bg.jpg”图片所在目录为“E:\book\网页布局\代码”，那么“bg.jpg”图片相对于“s1.htm”文件来说，是在其所在目录的上级目录里，则引用图片的语句应该为：

 <body background="../bg.jpg">

再举一个例子，假设“s1.htm”文件所在目录为“E:\book\网页布局\代码\第2章”，而“bg.jpg”图片所在目录为“E:\book\网页布局\代码\img”，那么“bg.jpg”图片相对于“s1.htm”文件来说，是在其所在目录的上级目录里的“img”子目录里，则引用图片的语句应该为：

  <body background="../img/bg.jpg">

4.相对虚拟目录
有关相对路径还有一个比较特殊的表示：“相对虚拟目录”。请看下面的例子：

 <body background="/img/bg.jpg">

在这个例子里，background属性的值为“/img/bg.jpg”，注意在“img”前有一个“/”字符。这个“/”代表的是虚拟目录的根目录. 假设把“E:\book\网页布局\代码”设为虚拟目录，那么“/img/bg.jpg”的真实路径为“E:\book\网页布局\代码\img \bg.jpg”；如果把“E:\book\网页布局\代码\第2章”设为虚拟目录，那么“/img/bg.jpg”的真实路径为“E:\book\网页布局\代码\第2章\img\bg.jpg”

5./和\的区别

路径中使用斜杠/和反斜杠\的区别到底是什么。查阅了一些资料后可知。

Unix使用斜杆/ 作为路径分隔符，而web应用最新使用在Unix系统上面，所以目前所有的网络地址都采用斜杆/ 作为分隔符。

Windows由于使用斜杆/ 作为DOS命令提示符的参数标志了，为了不混淆，所以采用反斜杠\ 作为路径分隔符。所以目前windows系统上的文件浏览器都是用反斜杠\ 作为路径分隔符。随着发展，DOS系统已经被淘汰了，命令提示符也用的很少，斜杆和反斜杠在大多数情况下可以互换，没有影响。

知道这个背景后，可以总结一下结论：

（1）浏览器地址栏网址使用斜杆/ ;

（2）windows文件浏览器上使用反斜杠\ ;

（3）出现在html url() 属性中的路径，指定的路径是网络路径，所以必须用斜杆/ ;

    <div style="background-image:url(/Image/Control/title.jpg); background-repeat:repeat-x; padding:10px 10px 10px 10px"></div>

// 如果url后面用反斜杠，就不会显示任何背景

（4）出现在普通字符串中的路径，如果代表的是windows文件路径，则使用斜杆/ 和反斜杠\ 是一样的；如果代表的是网络文件路径，则必须使用斜杆/ ;

6.js和css相对路径引用的区别

javascript和css文件中采用相对路径，其基准路径是完全不同的。

javascript引用资源(比如图片)相对路径是以宿主路径(被引用的网页比如你在首页index.php引用了某js文件，则index.php即为宿主)所处位置为基准。
css引用资源(比如图片)相对路径是以.css文件所处位置为基准!

举个例子来说明这个问题。

我们的文件结构是这样的：

/index.html

/js/chbk.js

/css/style.css

/images/bk1.jpg、bk2.jpg

style.css代码

@charset "utf-8";
/* CSS Document */
body{background-color:#ccc;}
#content{background:url(../images/bk1.jpg) no-repeat;width:200px;height:200px;margin:auto;}
#in{margin:auto;text-align:center;}

其中，url(…/images/bk.jpg)路径是相对于style.css的。

chbk.js代码

// JavaScript Document
function chbk(){
document.getElementById('content').style.backgroundImage='url(images/bk2.jpg)';
}

其中，url(images/bk2.jpg)路径是相对于index.html的，而不是chbk.js的url(…/images/bk.jpg)。

～/ 是网站的根目录
…/ 是当前目录的上一级目录
./ 和不加任何东西表示当前路径
/ 表示该目录为根目录的一个子目录

如直接对该页面打开访问：则这里相对的是我们的盘符，如（/res/index.html），实际路径为(C://res/index.html);

如我们在Tomcat中构建打开：则这里相对的是我们的站点，如(/webTest/html/index.html)，实际路径为(http://localhost:8080/webTest/html/index.html);
在这里插入图片描述

相对路径和绝对路径的区别以及js和css引入相对路径的区别

猜你喜欢