首頁 > 開發者 > JavaScript
【原創乾貨】絕對位址和相對位址，原創乾貨相對
絕對位址和相對位址是網站開發基礎知識中很重要的知識點。
1.在網頁中插入檔案時，不可以使用硬碟的絕對路徑
舉個例子，在網頁中插入圖片，代碼如下：
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>插入圖片</title></head><body><img src="file:///E|/MyDocument/Pictures/1.jpg">或<img src="E:\MyDocument\Pictures\1.jpg"></body></html>
意思是：插入一張圖片，圖片路徑是“E:\MyDocument\Pictures\1.jpg”。
即：這張圖片是放在電腦的“E:\MyDocument\Pictures\”檔案夾裡，圖片檔案名稱是：“1.jpg”。但是，這樣的代碼是錯誤的。
（1）由於HTML代碼是用戶端標記語言，這段代碼實際是告訴瀏覽器：顯示一張圖片，它放在用戶端瀏覽者硬碟中的某個檔案夾中。但實際上前端代碼並沒有讀取瀏覽者硬碟檔案的許可權，它涉及電腦資料的安全，如果沒有加以限制，那麼通過網頁就可以直接刪除或格式化瀏覽者的硬碟資料，又或者讀取瀏覽者的硬碟資料往網路上上傳，任何安全和隱私都將不存在。所以這種越權讀取檔案或資料的代碼，網頁無法成功執行。
（2）網站開發人員的電腦在該路徑位置確實存在這張圖片，那麼即使在網站開發人員的瀏覽器中測試能正常顯示該圖片，當將該網頁上傳到伺服器或虛擬機器主機中，他人訪問網頁時仍然是無法正常看到該圖片的。該圖片並不存在於瀏覽者的硬碟中（這張圖片只存在於網站開發人員的電腦中）。
所以在網頁中插入圖片或其它檔案時，不可以使用硬碟的絕對路徑。
2.認識絕對位址和相對位址
例一，假設我們電腦E盤的目錄和檔案結構如：
（圖2-39）
根據“E:\UPUPW_AP5.6\Apache2\conf\httpd-vhosts.conf”裡的配置，“E:\UPUPW_AP5.6\htdocs\”對應網址“http://127.0.0.1/”，那麼：
（1）“E:\UPUPW_AP5.6\htdocs\”的“htdocs”檔案夾是網站的（伺服器實體路徑）根目錄。
“http://127.0.0.1/”的最後一個斜杠“/”代表網站的（虛擬路徑）根目錄。
這兩者呈對應關係。我們如果要訪問“E:\UPUPW_AP5.6\htdocs\index.html”這個網頁檔案，對應的網址是“http://127.0.0.1/index.html”；如果要訪問“E:\UPUPW_AP5.6\htdocs\images\001.jpg”這個圖片檔案，對應的網址是“http://127.0.0.1/images/001.jpg”。
（2）假如我們在“E:\UPUPW_AP5.6\htdocs\index.html”這個網頁檔案中插入圖片“E:\UPUPW_AP5.6\htdocs\images\001.jpg”，正確的代碼寫法有三種：
①<img src="images/001.jpg">（這是相對位址，相對於“index.html”網頁本身的地址）
②<img src="/images/001.jpg">（這是絕對位址，以“/”開頭。“/”對應網站的根目錄，即從網站的根目錄“E:\UPUPW_AP5.6\htdocs\”算起）
③<img src="http://127.0.0.1/images/001.jpg">（這也是絕對位址，是一條完整的網址。但對站內檔案的引用不推薦這種寫法，一旦網站換網域名稱就要修改很多代碼，增加了維護成本。）
（3）假如我們在“E:\UPUPW_AP5.6\htdocs\member\login.html”這個網頁檔案中插入圖片
“E:\UPUPW_AP5.6\htdocs\images\001.jpg”，那麼正確的寫法有三種：
①<img src="../images/001.jpg">（這是相對位址，相對於“login.html”網頁本身的路徑。“../”代表往上一層檔案夾，當前“login.html”在“member”檔案夾中，“login.html”往上一層檔案夾則到達“htdocs”檔案夾，到達“htdocs”檔案夾後，再定位“images/001.jpg”即是“E:\UPUPW_AP5.6\htdocs\images\001.jpg”）
②<img src="/images/001.jpg">（這是絕對位址，以“/”開頭。“/”對應網站的根目錄，即從網站的根目錄“E:\UPUPW_AP5.6\htdocs\”算起）
③<img src="http://127.0.0.1/images/001.jpg">（這也是絕對位址，是一條完整的網址。對站內檔案的引用不推薦使用這種形式。）
（4）區分斜杠（/）和反斜線（\）的使用
按常識，硬碟中的實體路徑使用的是反斜線（\），如：“E:\UPUPW_AP5.6\htdocs\”，那麼我們可以這樣記憶：反斜線（\）用於硬碟的實體路徑。
除了實體路徑，網址、網站中涉及路徑的，我們均使用斜杠（/），如：“/images/001.jpg”。
（5）相對位址、絕對位址也有人稱為相對路徑、絕對路徑。
例二，假設我們電腦E盤的目錄和檔案結構如：
（圖2-40）
根據“E:\UPUPW_AP5.6\Apache2\conf\httpd-vhosts.conf”裡的配置，“E:\UPUPW_AP5.6\htdocs\”對應網址“http://127.0.0.1/”，那麼：
（1）“E:\UPUPW_AP5.6\htdocs\”的“htdocs”檔案夾是網站的（伺服器實體路徑）根目錄。
“http://127.0.0.1/”的最後一個斜杠“/”代表網站的（虛擬路徑）根目錄。
這兩者呈對應關係。我們如果要訪問“E:\UPUPW_AP5.6\htdocs\new\a\b\reg.html”這個網頁檔案，對應的網址是：“http://127.0.0.1/new/a/b/reg.html”，如果要訪問“E:\UPUPW_AP5.6\htdocs\new\a\b\c\002.jpg”這個圖片檔案，對應的網址是：“http://127.0.0.1/new/a/b/c/002.jpg”。
（2）假如我們在“E:\UPUPW_AP5.6\htdocs\new\a\b\reg.html”這個網頁檔案中插入圖片“E:\UPUPW_AP5.6\htdocs\new\a\b\c\002.jpg”，那麼正確的代碼寫法有三種：
①<img src="c/002.jpg">（相對位址）
②<img src="/new/a/b/c/002.jpg">（絕對位址）
③<img src="http://127.0.0.1/new/a/b/c/002.jpg">（絕對位址）
（3）假如我們在“E:\UPUPW_AP5.6\htdocs\new\a\b\reg.html”這個網頁檔案中插入圖片“E:\UPUPW_AP5.6\htdocs\new\d\e\003.jpg”，那麼正確的代碼寫法有三種：
①<img src="../../d/e/003.jpg">（相對位址）
②<img src="/new/d/e/003.jpg">（絕對位址）
③<img src="http://127.0.0.1/new/d/e/003.jpg">（絕對位址）
（4）假如我們在“E:\UPUPW_AP5.6\htdocs\new\a\b\reg.html”這個網頁中，要連結“E:\UPUPW_AP5.6\htdocs\new\d\e\test.html”這個網頁，那麼正確的代碼寫法有三種：
①<a href="../../d/e/test.html">test</a>（相對路徑）
②<a href="/new/d/e/test.html">test</a>（絕對路徑）
③<a href="http://127.0.0.1/new/d/e/test.html">test</a>（絕對路徑）
（5）假如我們在“E:\UPUPW_AP5.6\htdocs\new\a\b\reg.html”這個網頁中，要連結“E:\UPUPW_AP5.6\Apache2\”檔案夾中的檔案，有辦法嗎？
<a href="../../../Apache2/filename.ext">test</a>（錯誤）
當網站的實體路徑根目錄在伺服器裡（Apache）配置為“E:\UPUPW_AP5.6\htdocs\”，那麼絕對位址開頭的“/”符號即是指網站的根目錄，對應“E:\UPUPW_AP5.6\htdocs\”；而相對路徑“../../../../../../../../”無論向上多少層，最上層只能到達網站的根目錄“E:\UPUPW_AP5.6\htdocs\”，不會再向上一層。這也是屬於安全問題。假如通過向上一層的路徑關係可以突破我們配置的網站實體路徑根目錄“E:\UPUPW_AP5.6\htdocs\”，那麼意味著通過網頁可以連結和使用伺服器裡的任意檔案，包括伺服器系統硬碟裡的系統檔案。當使用網頁程式語言（如ASP、PHP、.NET、JSP）來編寫網站代碼時，那麼將可以操作讀取伺服器裡的任意檔案，還可以刪除伺服器裡的任意檔案，包括伺服器的系統檔案……這是多麼可怕的事情。所以涉及伺服器安全性的問題，會有許可權限制。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
