HTML絕對路徑和相對路徑_網頁設計教程

推薦：設計師如何與產品經理一起合作
與專業的設計師在一起工作，發現與客戶、程序員等角色相比，與設計師合作需要特別考慮才能產生驚人創作。這里留下一些想法，供參考。 設計不僅僅是界面 產品經理要清楚的知道，設計絕不僅僅是界面。許多人把設計師當美工來用，這僅僅只調用到了設計師極少部分的智力資

HTML初學者會經常遇到這樣一個問題，如何正確引用一個文件。比如，怎樣在一個HTML網頁中引用另外一個HTML網頁作為超鏈接(hyperlink)？怎樣在一個網頁中插入一張圖片？

如果你在引用文件時(如加入超鏈接，或者插入圖片等)，使用了錯誤的文件路徑，就會導致引用失效(無法瀏覽鏈接文件，或無法顯示插入的圖片等)。

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

HTML相對路徑(Relative Path)
同一個目錄的文件引用
如果源文件和引用文件在同一個目錄里，直接寫引用文件名即可。

我們現在建一個源文件info.html，在info.html里要引用index.html文件作為超鏈接。

假設info.html路徑是：c:\Inetpub\wwwroot\sites\blabla\info.html
假設index.html路徑是：c:\Inetpub\wwwroot\sites\blabla\index.html
在info.html加入index.html超鏈接的代碼應該這樣寫：

<a href = "index.html">index.html</a>

如何表示上級目錄
../表示源文件所在目錄的上一級目錄，../../表示源文件所在目錄的上上級目錄，以此類推。

假設info.html路徑是：c:\Inetpub\wwwroot\sites\blabla\info.html
假設index.html路徑是：c:\Inetpub\wwwroot\sites\index.html
在info.html加入index.html超鏈接的代碼應該這樣寫：

<a href = "../index.html">index.html</a>

假設info.html路徑是：c:\Inetpub\wwwroot\sites\blabla\info.html
假設index.html路徑是：c:\Inetpub\wwwroot\index.html
在info.html加入index.html超鏈接的代碼應該這樣寫：

<a href = "../../index.html">index.html</a>

假設info.html路徑是：c:\Inetpub\wwwroot\sites\blabla\info.html
假設index.html路徑是：c:\Inetpub\wwwroot\sites\wowstory\index.html
在info.html加入index.html超鏈接的代碼應該這樣寫：

<a href = "../wowstory/index.html">index.html</a>
 
如何表示下級目錄
引用下級目錄的文件，直接寫下級目錄文件的路徑即可。

假設info.html路徑是：c:\Inetpub\wwwroot\sites\blabla\info.html
假設index.html路徑是：c:\Inetpub\wwwroot\sites\blabla\html\index.html
在info.html加入index.html超鏈接的代碼應該這樣寫：

<a href = "html/index.html">index.html</a>

假設info.html路徑是：c:\Inetpub\wwwroot\sites\blabla\info.html
假設index.html路徑是：c:\Inetpub\wwwroot\sites\blabla\html\tutorials\index.html
在info.html加入index.html超鏈接的代碼應該這樣寫：

<a href = "html/tutorials/index.html">index.html</a>
HTML絕對路徑(Absolute Path)
HTML絕對路徑(absolute path)指帶域名的文件的完整路徑

分享：網頁設計-柵格規范制作
隨著業務的不斷推進，現在我們的后臺項目越來越多。但是由于前端和后臺之間聯調復雜導致項目經常會推遲。為了能優化項目流程，提高開發效率。交互和前端決定一起做一套DPL，做一系列的規范出來。這樣可以減少交互，前端，后臺互相的溝通成本，同時能夠沉淀下這段時間大