JS和CSS的相对路径不同

2016-08-09

如果存在一个HTML文件

假设访问地址

1	www.int.com/html/page

可以访问到page.html文件，而在page.html文件中进行了加载CSS文件和JS文件

1 2	<link href="../css/style.css" rel="stylesheet" /> <script src="../js/util.js"></script>

在CSS和JS中使用相对路径

CSS文件中引用了图片image01

1
2
3

.icon {
    background: url(../img/image01.png) no-repeat top;
}

JS文件中进行了相对路径跳转

1 2	location.herf ＝ "../index.html"

以上HTML/JS/CSS的相对路径是指的哪里

先说结论 JS文件的相对路径是以其宿主文件(html)为准的，而CSS是以自己为准的根据以上假设，util.js文件的宿主是page.html，那么可以总结出下表

路径	HTML	JS	CSS
文件路径	www.int.com/html/page.html	www.int.com/js/util.js	www.int.com/css/style.css
/	www.int.com/	www.int.com/	www.int.com/
.	www.int.com/html	www.int.com/html	www.int.com/css
..	www.int.com/	www.int.com/	www.int.com/

表格结论

不论哪个文件使用“／” 时都代表根目录
在使用当前目录“.”的时候，HTML是是代表自己，JS是代表宿主，所以上表中一致，CSS是代表其自己

jsonContent: meta: false pages: false posts: title: true date: true path: true text: false raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true