全部在瀏覽器端執行的代碼中的「路徑」都是告訴瀏覽器向哪一個服務器路徑發起請求

全部在瀏覽器端執行的代碼中所包含的路徑，其實最終的做用都是告訴瀏覽器向哪一個服務器路徑發起請求。

 

好比：

1、

當你請求以下路徑時：

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。

 

2、同理，當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）中的路徑，最終都是爲了告訴瀏覽器應該對哪一個路徑發起請求。