讓初學者糾結的相對路徑和絕對路徑

時間 2019-12-07

標籤初學者糾結相對路徑絕對简体版

原文原文鏈接

好比說你的C盤ABC文件夾下有兩個文件1和2css

若是要文件1說出文件2的位置(也就是路徑),那麼它有兩種表示方法:web

C:\ABC\2 瀏覽器

這就是絕對路徑,指明2文件在C盤ABC文件下,從最大的目錄C盤開始表示出來.服務器

這就是相對路徑,由於1文件和2文件都在C:\ABC下,因此它們的路徑前面"C:\ABC"都是同樣,就不用表示出來了..編輯器

另個比喻:學習

比方C盤ABC文件夾有個1文件,還有一個DEF文件夾,而DEF文件下有個2文件.網站

那1和2的文件路徑分別爲:(都是絕對路徑).net

C:\ABC\1htm

C:\ABC\DEF\2圖片

若是讓1文件來表示2文件的路徑

絕對路徑: C:\ABC\DEF\2

相對路徑: DEF\2 (由於1和2文件前面的C:\ABC這段路徑相同就不用寫出來了)

，而把頁面傳到服務器上就老是出現看不到圖片，css樣式表失效等錯誤。這種狀況下多半是因爲你使用了錯誤的路徑，在應該使用相對路徑的地方使用了絕對路徑，致使瀏覽器沒法在指定的位置打開指定的文件。

下面咱們就來談一下最讓初學者頭疼的相對路徑與絕對路徑的區別問題。

什麼是絕對路徑

你們都知道，在咱們平時使用計算機時要找到須要的文件就必須知道文件的位置，而表示文件的位置的方式就是路徑，例如只要看到這個路徑：c:/website/img/photo.jpg咱們就知道photo.jpg文件是在c盤的website目錄下的img子目錄中。相似於這樣完整的描述文件位置的路徑就是絕對路徑。咱們不須要知道其餘任何信息就能夠根據絕對路徑判斷出文件的位置。而在網站中相似以 http://www.pckings.net/img/photo.jpg來肯定文件位置的方式也是絕對路徑。

另外，在網站的應用中，一般咱們使用"/"來表示根目錄，/img/photo.jpg就表示photo.jpg文件在這個網站的根目錄上的img目錄裏。可是這樣使用對於初學者來講是具備風險性的，由於要知道這裏所指的根目錄並非你的網站的根目錄，而是你的網站所在的服務器的根目錄，所以當網站的根目錄與服務器根目錄不一樣時，就會發生錯誤。

什麼是相對路徑

讓咱們先來分析一下爲何會發生圖片不能正常顯示的狀況。舉一個例子，如今有一個頁面index.htm,在這個頁面中聯接有一張圖片photo.jpg。他們的絕對路徑以下：

c:/website/index.htm

c:/website/img/photo.jpg

若是你使用絕對路徑c:/website/img/photo.jpg，那麼在本身的計算機上將一切正常，由於確實能夠在指定的位置即c: /website/img/photo.jpg上找到photo.jpg文件，可是當你將頁面上傳到網站的時候就極可能會出錯了，由於你的網站可能在服務器的c盤，可能在d盤，也可能在aa目錄下，更可能在bb目錄下，總之沒有理由會有c:/website/img/photo.jpg這樣一個路徑。那麼，在index.htm文件中要使用什麼樣的路徑來定位photo.jpg文件呢？對，應該是用相對路徑，所謂相對路徑，顧名思義就是本身相對與目標位置。在上例中index.htm中聯接的photo.jpg可使用img/photo.jpg來定位文件，那麼不論將這些文件放到哪裏，只要他們的相對關係沒有變，就不會出錯。

另外咱們使用「../」來表示上一級目錄，「../../」表示上上級的目錄，以此類推。（學習過dos的朋友可能更容易理解）

再看幾個例子，注意全部例子中都是index.htm文件中聯接有一張圖片photo.jpg。

例：

c:/website/web/index.htm

c:/website/img/photo.jpg

在此例中index.htm中聯接的photo.jpg應該怎樣表示呢？

錯誤寫法：img/photo.jpg

這種寫法是不正確的，在此例中，對於index.htm文件來講img/photo.jpg所表明的絕對路徑是：c:/website/web/img/photo.jpg，顯然不符合要求。

正確寫法：使用../img/photo.jpg的相對路徑來定位文件

例：

c:/website/web/xz/index.htm

c:/website/img/images/photo.jpg

在此例中index.htm中聯接的photo.jpg應該怎樣表示呢？

錯誤寫法：../img/images/photo.jpg

這種寫法是不正確的，在此例中對於index.htm文件來講../img/images/photo.jpg所表明的絕對路徑是：c:/website/web/img/images/photo.jpg。

正確寫法：可使用../../img/images/photo.jpg的相對路徑來定位文件

例：

c:/website/web/xz/index.htm

c:/website/web/img/photo.jpg

在此例中index.htm中聯接的photo.jpg應該怎樣表示呢？

錯誤寫法：../../img/photo.jpg

這種寫法是不正確的，在此例中對於index.htm文件來講../../img/photo.jpg所表明的絕對路徑是：c:/website/img/photo.jpg。

正確寫法：可使用../img/photo.jpg的相對路徑來定位文件

總結：經過以上的例子能夠發現，在把絕對路徑轉化爲相對路徑的時候，兩個文件絕對路徑中相同的部分均可以忽略，不作考慮。只要考慮他們不一樣之處就能夠了。

如何修改樣式表的路徑：

使用文本編輯器打開htm文件，查看源代碼，在源代碼的開頭部分<head>......</head>標記中間找到<link rel="stylesheet" href="test.css" type="text/css">。「Href=」後面的內容就是css的路徑，咱們能夠根據以上的知識進行相對路徑的轉換。

例：

c:/website/web/xz/index.htm

c:/website/css/test.css

在此例中index.htm中聯接test.css文件，可使用../../css/test.css的相對路徑來定位文件，完整的代碼標記是：<link rel="stylesheet" href="../../css/test.css " type="text/css">

錯誤寫法舉例：../../../css/test.css

這種寫法是不正確的，在此例中對於index.htm文件來講../../../css/test.css所表明的絕對路徑是：c:/css/test.css

最後，爲了不在製做網頁時出現路徑錯誤，咱們可使用dreamweaver的站點管理功能來管理站點。只要使用菜單命令site-new site新建站點並定義站點目錄以後，它將自動的把絕對路徑轉化爲相對路徑，而且當你在站點中移動文件的時候，與這些文件關聯的鏈接路徑都會自動更改，實在是很是的方便。

相對路徑，從一個目錄爲起點到你所在的目錄。

例如：

┍ A文件夾

C -|

┕ B文件夾