web前端中的相對路徑是什麼

在web前端中，相對路徑是指由當前文件所在的路徑引起的跟其它文件（或資料夾）的路徑關係，是相對於當前文件的目標文件位置；簡單來說，就是以目前檔案為參考點，來決定不同檔案的路徑，相對路徑一般會以「./」、「../」開始。好處：當整個專案移動時，專案內文件之間的相對關係沒有改變，先前設定的路徑任然是準確的，不用進行修改。

本教學操作環境：windows7系統、Dell G3電腦。

首先得明白相對路徑和絕對路徑的概念和差異：

相對路徑:

#相對路徑是指由目前檔案所在的路徑所引起的跟其它檔案（或資料夾）的路徑關係。使用相對路徑可以為我們帶來非常多的便利。

絕對路徑：

絕對路徑是指目錄下的絕對位置，直接到達目標位置，通常是從磁碟機開始的路徑。

完整的描述檔案位置的路徑就是絕對路徑，以web站點根目錄為參考基礎的目錄路徑。絕對路徑名的指定是從樹型目錄結構頂部的根目錄開始到某個目錄或文件的路徑，由一系列連續的目錄組成，中間用斜線分隔，直到要指定的目錄或文件，路徑中的最後一個名稱即為要指向的目錄或檔案。之所以稱為絕對，意指當所有網頁引用同一個文件時，所使用的路徑都是一樣的。

• 個人總結：

#相對路徑簡而言之就是相對自己所在的目錄來引用其他檔案（不是根目錄），就是相對於目前檔案的目標檔案位置。

這樣有個好處就是，當你整個專案移動時，你專案內文件之間的相對關係沒有改變，你之前設定的路徑任然是準確的。例如：Web伺服器資料夾a下面有index.html和image.jpg兩個檔案。 index.html檔案裡引入image.jpg，只要這兩個檔案的相對位置沒有變(也就是說還是在資料夾a下面)，那麼無論上傳到Web伺服器的哪個位置，這個路徑都是正確的。

絕對路徑就是相對根目錄（磁碟）開始，每個檔案使用的路徑都是一樣的。

使用絕對路徑可以防止網站被惡意抄襲，抄襲預設的連結還是指向自己的網站。只要頁面中的目標檔案位置不變你的連結還是指向正確的URL。在Web開發的時候一般很少使用絕對路徑，因為你本地的環境和伺服器上的路徑可能不一樣。 /表示檔案的根目錄。

透過範例來講解

#下面我從web中最常用的html中的例子來說明相對路徑和絕對路徑的差異：

1、絕對路徑

例如：

再來一個小例子：

例如在平常使用電腦時要使用檔案就得知道檔案的位置，例如現在有一個檔案index.html，要使用index.png這張圖：

D:/websize/image/index.html

# D:/websize/image/img/index.png

你使用路徑D:/websize/image/img/index.png就可以引用這張圖片，在你的電腦上一切正常，但真正開發的時候基本上不使用絕對路徑，因為項目移植困難，在其他電腦上就存取不到你的圖片（他的電腦上沒有你的圖片）#。

2、相對路徑（實際使用推薦）

首先明白：

• . . / 代表目前檔案的上一層目錄

• ./  代表目前檔案所在目錄

例如：

在來一個小範例：

例如你的E碟下面的WEB資料夾裡有兩個檔案互相存取。

E:/WEB/mar/img/index.html

# E:/WEB/mar/image/ig/ip/pho.png

在這裡想要從index.html存取pho.png，則路徑是. ./image/ig/ip/pho. png;

如果想要反過來存取index.html，則需要路徑是. ./. ./. ./img/index.html

總結：

在Web開發中的相對路徑和絕對路徑都有使用，各有優劣。簡單的總結下，相對路徑就是以當前文件為參考點，來確定不同文件的路徑，相對路徑一般會以./、../開始，當然.如果文件是同級目錄./可以省略絕對路徑就是以電腦的檔案或網路上的絕對位址決定檔案的路徑，絕對路徑一般是Windows下的磁碟機代號開始、Linux下的/開始（但是在Web伺服器中，/表示Web伺服器的根目錄）、或是以網址開始。

（學習影片分享：web前端入門）

以上是web前端中的相對路徑是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！