基礎 HTML之目錄問題(相對路徑與絕對路徑差異)_HTML/Xhtml_網頁製作

相對路徑-以引用文件之網頁所在位置為參考基礎，而建立的目錄路徑。因此，當保存於不同目錄的網頁引用同一個文件時，所使用的路徑將不相同，故稱之為相對。
　　絕對路徑-以Web網站根目錄為參考基礎的目錄路徑。之所以稱為絕對，意指當所有網頁引用同一個文件時，所使用的路徑都是一樣的。
　　其實絕對路徑與相對路徑的不同處，只在於描述目錄路徑時，所採用的參考點不同。由於對網站上所有檔案而言，根目錄這個參考點對所有檔案都是一樣的，因此，運用以根目錄為參考點的路徑描述方式才會被稱為絕對路徑。
　　以下為建立路徑所使用的幾個特殊符號，及其所代表的意義。
　　"."--代表目前所在的目錄。
　　".."--代表上一層目錄。
　　"/"--代表根目錄。
　　接下來，我們假設讀者所建立的Web網站擁有如下圖所示目錄路徑。
  
假若要在Ref.htm檔案中引用BeRef.gif檔案時，其相對路徑如下：

　　./SubDir2/BeRef.引用路徑中，"."代表目前的目錄(Dir1)，所以"./SubDir2"代表目前目錄下的SubDir2。其實，也可以省略"./"直接用下這個方式引用。

　　SubDir2/BeRef.gif

　　若使用絕對路徑以根目錄為參考點引用該文件時，引用路徑如下：

　　　/Dir1/SDirgif
　　如果Web站點的目錄結構如下圖時

         

          引用BeRef.gif檔案的相對路徑又是如何呢?

　　假若要在Ref.htm檔案中引用Beef.gif SubDir2/BeRef.gif

　　上面的引用路徑中，".."代表上一層目錄，所以，/Dir2"代表上一層目錄下的Dir2子目錄。若使用絕對路徑引用時，則引用路徑如下：

　　/Dir2/BeRer.gif

　　我們再舉一個比較複雜的例子，來比較一下相對路徑與絕對路徑的使用。假設在讀者所建立之Web網站中，擁有如下圖的目錄路徑。

  

　　我們用以一個表格來說明在上圖的情況下，某文件引用另一文件時，所應使用的相對路徑與絕對路徑。

引用者

被引用者	相對路徑	絕對路徑
Ref1.htm	BeRef1.gif	../SubDir2/BeRef1.gif	/Dir1/SubDir2/BeRef1.gif
Ref2.htm	BeRef1.gif	../../Dir1/SubDir2/ BeRef1.gif	/Dir1/SubDir2/ BeRef1.gif
Ref1.htm	BeRef2.htm	../../Dir2/ BeRef2.htm	/Dir2/BeRef2.htm
Ref2.htm	BeRef2.htm	../BeRef2.htm	/Dir2/BeRef2.htm

上表中比較需要說明「../../」所代表的意義。的意思。中目錄中，運用相對路徑是比較方便的。路徑是一樣的。