所有在浏览器端执行的代码中的“路径”都是告诉浏览器向哪个服务器路径发起请求

所有在浏览器端执行的代码中所包含的路径，其实最终的作用都是告诉浏览器向哪个服务器路径发起请求。

比如：

一、

当你请求如下路径时：

http://localhost:9000/a/b/c/index.html

如果在index.html中包含一个img标签，如下：

<img alt="dog" src="../images/a.gif"/>

那么当浏览器解析到img这个标签的时候，会向http://localhost:9000/a/b/images/a.gif发起请求。原因是当浏览器解析"../images/a.gif"这个路径的时候，因为该img标签是包含在index.html文件中的，所以浏览器会先找到index.html这个文件是通过请求哪个路径获取到的（显然是：http://localhost:9000/a/b/c/ 这个路径），然后浏览器会基于"http://localhost:9000/a/b/c/"路径和"../images/a.gif"进行运算，结果就是在"http://localhost:9000/a/b/c/"的基础上，先回到上一级目录，然后在上一级目录下寻找images/a.gif，最终结果就变成了http://localhost:9000/a/b/images/a.gif。

二、同理，当index.html中包含一个css文件时，也是如此。

比如，在index.html中包含如下代码来引入css：

<link rel="stylesheet" type="text/css" href="css/news.css" />

而在news.css文件中又包含如下代码：

background: url("../images/grayarrow.gif")

那么此时，浏览器会发起怎样的请求来获取graarrow.gif这张图片呢？

首先，根据index.html的请求地址:

http://localhost:9000/a/b/c/

和index.html中css的路径

href="css/news.css"

计算出请求news.css的路径为：

http://localhost:9000/a/b/c/css/news.css

接下来再news.css中的代码：

background: url("../images/grayarrow.gif")

又会根据news.css的路径来计算grayarrow.gif的请求路径为：

http://localhost:9000/a/b/c/images/grayarrow.gif

至此，大家要理解清楚对于浏览器来说所有静态文件（html、css、JavaScript）中的路径，最终都是为了告诉浏览器应该对哪个路径发起请求。