HTML有2種路徑的寫法：絕對路徑和相對路徑

對路徑-以引用文件之網頁所在位置為參考基礎，而建立出的目錄路徑。因此，當保存于不同目錄的網頁引用同一個文件時，所使用的路徑將不相同，故稱之為相對。

絕對路徑-以Web站點根目錄為參考基礎的目錄路徑。之所以稱為絕對，意指當所有網頁引用同一個文件時，所使用的路徑都是一樣的。
其實絕對路徑與相對路徑的不同之處，只在于描述目錄路徑時，所采用的參考點不同。由于對網站上所有文件而言，根目錄這個參考點對所有文件都是一樣的，因此，運用以根目錄為參考點的路徑描述方式才會被稱之為絕對路徑。　

　　以下為建立路徑所使用的幾個特殊符號，及其所代表的意義。

　　“.”–代表目前所在的目錄。

　　“..”–代表上一層目錄。

　　“/”–代表根目錄。

例：假設讀者所建立的Web站點擁有如下圖所示目錄路徑。假若要在Ref.htm文件中引用BeRef.gif文件時，其相對路徑如下：
　　./SubDir2/BeRef.gif
上面的引用路徑中，”.”代表目前的目錄(Dir1)，所以”./SubDir2”代表目前目錄下的SubDir2。其實，也可以省略”./”直接用這個式引用。

　　SubDir2/BeRef.gif

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

　　/Dir1/SubDir2/BeRef.gif

　　如果Web站點的目錄之結構如下圖示:

　　引用BeRef.gif文件的相對路徑又是如何呢?假若要在Ref.htm文件中引用BeRef.gif文件時其相對路徑如下：
　　../SubDir2/BeRef.gif
　　上面的引用路徑中，”..”代表上一層目錄，所以，/Dir2”代表上一層目錄下的Dir2子目錄。若使用絕對路徑引用時，則引用路徑如下：　　
/Dir2/BeRer.gif
　　我們再舉一個比較復雜的例子，來比較一下相對路徑與絕對路徑的使用。假設在讀者所建立的Web站點中，擁有如下圖的目錄路徑。

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

　　上表中比較需要說明的是”../../”所代表的意義。

　　“..”代表上一層目錄，而”../../”所代表的是上一層目錄的上一層目錄。所以，從上表中可以看出，如果引用的文件存在于目前目錄的子目錄中，或者存在于上一層目錄的另一個子目錄中，運用相對路徑是比較方便的。如果不是時，則利用絕對路徑。從上表中，亦可以看出，當被引用的是同一個文件時，引用文件所使用的絕對路徑是一樣的。

徑描述

<img src="picture.jpg">

picture.jpg 位于與當前網頁相同的文件夾

<img src="images/picture.jpg">

picture.jpg 位于當前文件夾的 images 文件夾中

<img src="/images/picture.jpg">

picture.jpg 當前站點根目錄的 images 文件夾中

<img src="../picture.jpg">

picture.jpg 位于當前文件夾的上一級文件夾中

HTML 文件路徑

文件路徑描述了網站文件夾結構中某個文件的位置。

文件路徑會在鏈接外部文件時被用到：

網頁
圖像
樣式表
JavaScript

絕對文件路徑

絕對文件路徑是指向一個因特網文件的完整 URL：

實例

對路徑與絕對路徑的使用方法

在《HTML元素中的屬性1——零基礎自學網頁制作》這一篇教程最后內容中，我們詳細展示了"絕對路徑"與"相對路徑"在寫法上的區別。示例代碼如下：

<img src="file:///D:/零基礎自學網頁制作/image1.jpg"/><!--絕對路徑-->
<img src="image1.jpg"/><!--相對路徑-->

那什么時候使用"相對路徑"什么時候使用"絕對路徑"呢？

搞清楚這個問題就要介紹一下網頁制作的最后一步，上傳服務器的過程與要求。

我們所有的可以通過網絡在瀏覽器上顯示的頁面都是存儲在網絡服務器中的文件。

網絡服務器是什么？大家可以理解為一臺電腦，和我們使用的個人計算機在構造上差不多，但是功能更加強大、穩定。因此服務器的價格相比個人電腦更加昂貴，可靠性也要更高。

服務器圖片

如果我們的網頁或網站的制作完成后，需要去找一個網絡服務器或是網絡服務器中的部分內存（也可以自己搭建簡單服務器用來測試），之后會給我們相關的賬號，我們自己設置密碼后，使用ftp工具上傳到網絡服務器中，然后給我們分配一個臨時的域名用來測試網站。這樣我們就可以使用手機或電腦通過瀏覽器在線打開自己的頁面了。這是筆者做過的一個全景展館頁面----在線齊越教育館（http://qiyueehibitionhall.gz01.bdysite.com/indexWeiXin.html）。

那頁面或網站如何上傳呢？

還記得最開始我們建立的那個"零基礎自學網頁制作"文件夾嗎？簡單來說通過把這個文件夾上傳就可以了，把里面"第一個頁面.html"改成"index.html"這個頁面就變成了我們的主頁。

如果，這個頁面中的所有路徑都是使用絕對路徑寫的，這時問題就來了，

<img src="file:///D:/零基礎自學網頁制作/image1.jpg"/><!--絕對路徑-->

頁面及其所在文件夾在我的電腦上是在D盤，我上傳服務器之后，文件就不一定還在服務器的D盤上，也許是在服務器的F盤呢？或者把文件發給同事，同事接收后在C盤上打開，絕對路徑是不是就不能指示正確的位置了？因此頁面就不能正確的找到相應信息了。

為了解決因為上傳服務器或者換電腦而不能正確找到資源路徑的問題，相對路徑的概念就產生了，相對路徑是不管你在哪個磁盤上，它只是遵循資源與頁面文件的相對位置，只要文件夾中的相對位置沒變，無論你把文件夾搬運到天涯海角，頁面依然可以循著路徑找到相關信息。

<img src="image1.jpg"/><!--相對路徑-->

下面為家具體展示一下相對路徑的寫法以及頁面文件與路徑指定文件的位置關系。

<img src="image1.jpg"/><!--相對路徑-->

這句代碼指的是頁面文件"第一個頁面.html"與圖片"image1.jpg"在一個文件夾中。如圖所示：

如果，圖片比較多，我們建立一個叫做"img"的文件夾來專門存放圖片，那代碼該怎么寫呢？

如圖所示：

打開文件夾，里面有一張圖片"image2.jpg"。如圖：

下面我們把這個文件召喚出來！

代碼示例：

<img src="image1.jpg"/><!--相對路徑--><img src="img/image2.jpg"/><!--相對路徑-->

效果如下：兩張圖片都進來了。

那如果我們圖片種類比較多，在img文件夾內部也要分文件夾，導入不同文件夾中的方法相信大家已經猜到了。圖片分類如下：

代碼如下：

<img src="image1.jpg"/><!--相對路徑-->
<img src="img/辦公室/image2.jpg"/><!--相對路徑-->
<img src="img/戰斗機/image3.jpg"/><!--相對路徑-->

效果如圖：

大家發現書寫規律沒有？

相對于絕對路徑來說，相對路徑只需要寫工程文件夾（將要上傳服務器并且包含頁面或網站所有內容的文件夾）內部的路徑就可以了。這里"零基礎自學網頁制作"文件夾可以看做是工程文件夾。因此，包括"零基礎自學網頁制作"文件夾，以及以前的路徑信息在"相對路徑中"都不需要寫出。如圖：紅框以內的都不用寫了。

那什么時候使用絕對路徑呢？一般情況下，在需要引入其他網站的圖片或頁面或其他信息時使用絕對路徑！

示例代碼如下：

<img src="https://bkimg.cdn.bcebos.com/pic/38dbb6fd5266d01694f698369a2bd40734fa35c4?x-bce-process=image/watermark,g_7,image_d2F0ZXIvYmFpa2UyNzI=,xp_5,yp_5"/>

這樣我們就通過訪問百度百科的地址在自己的頁面中打開了殲20的圖片，如圖：

這樣做的好處是可以節省自己服務器的空間，減小工程文件夾的體積。

總結一下：

在頁面中顯示工程文件夾內的資源或信息使用"相對路徑"，不使用"絕對路徑"。

在頁面中顯示其他網站的資源或信息使用"絕對路徑"，不使用"相對路徑"。

今天的內容結束了。

最后請大家思考一個問題，為什么多個<p></p>標簽中的內容會自動換行，而多個<img>標簽卻并排顯示而不會換行呢？這個問題我們會在后面的講解中給出答案！

喜歡的小伙伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

下一篇繼續為大家介紹常用元素的使用方法。

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

在線咨詢

上一篇：scrollLeft scrollTop offse
下一篇：8歲學編程已經晚了？6個網站讓你在家教孩子學編程

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。