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

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

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

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

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

　　“/”–代表根目錄。

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

　　SubDir2/BeRef.gif

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

　　/Dir1/SubDir2/BeRef.gif

　　如果Web站點的目錄之結(jié)構(gòu)如下圖示:

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

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

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

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

<img src="picture.jpg"> 

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

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

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

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

在《HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作》這一篇教程最后內(nèi)容中，我們詳細(xì)展示了"絕對路徑"與"相對路徑"在寫法上的區(qū)別。示例代碼如下：

<img src="file:///D:/零基礎(chǔ)自學(xué)網(wǎng)頁制作/image1.jpg"/><!--絕對路徑-->
<img src="image1.jpg"/><!--相對路徑-->

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

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

我們所有的可以通過網(wǎng)絡(luò)在瀏覽器上顯示的頁面都是存儲在網(wǎng)絡(luò)服務(wù)器中的文件。

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

服務(wù)器圖片

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

那頁面或網(wǎng)站如何上傳呢？

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

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

<img src="file:///D:/零基礎(chǔ)自學(xué)網(wǎng)頁制作/image1.jpg"/><!--絕對路徑-->

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

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

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

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

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

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

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

如圖所示：

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

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

代碼示例：

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

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

那如果我們圖片種類比較多，在img文件夾內(nèi)部也要分文件夾，導(dǎo)入不同文件夾中的方法相信大家已經(jīng)猜到了。圖片分類如下：

代碼如下：

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

效果如圖：

大家發(fā)現(xiàn)書寫規(guī)律沒有？

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

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

示例代碼如下：

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

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

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

總結(jié)一下：

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

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

今天的內(nèi)容結(jié)束了。

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

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

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

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

第一個HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

16進制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中使用<a>標(biāo)簽實現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作