url、href、src 詳解

發現本身竟然沒把url、href、src關係及使用搞清楚，今天就理一下。主要包括：url、src、href定義以及使用區別。順便試下在segmentfault來一發。

URL(Uniform Resource Locator)

統一資源定位符是對能夠從互聯網上獲得的資源的位置和訪問方法的一種簡潔的表示，是互聯網上標準資源的地址。互聯網上的每一個文件都有一個惟一的URL，它包含的信息指出文件的位置以及瀏覽器應該怎麼處理它。

結構

基本URL包含模式（或稱協議）、服務器名稱（或IP地址）、路徑和文件名，如「協議://受權/路徑?查詢」。完整的、帶有受權部分的普通統一資源標誌符語法看上去以下：協議://用戶名:密碼@子域名.域名.頂級域名:端口號/目錄/文件名.文件後綴?參數=值#標誌

第一部分：

模式/協議（scheme）：它告訴瀏覽器如何處理將要打開的文件。最經常使用的模式是超文本傳輸協議（Hypertext Transfer Protocol，縮寫爲HTTP），這個協議能夠用來訪問網絡。1 其餘協議以下：

• http——超文本傳輸協議資源
• https——用安全套接字層傳送的超文本傳輸協議
• ftp——文件傳輸協議
• mailto——電子郵件地址
• ldap——輕型目錄訪問協議搜索
• file——當地電腦或網上分享的文件
• news——Usenet新聞組
• gopher——Gopher協議
• telnet——Telnet協議

第二部分：

文件所在的服務器的名稱或IP地址，後面是到達這個文件的路徑和文件自己的名稱。服務器的名稱或IP地址後面有時還跟一個冒號和一個端口號。它也能夠包含接觸服務器必須的用戶名稱和密碼。路徑部分包含等級結構的路徑定義，通常來講不一樣部分之間以斜線（/）分隔。詢問部分通常用來傳送對服務器上的數據庫進行動態詢問時所須要的參數。

分類

一、絕對URL

絕對URL（absolute URL）顯示文件的完整路徑，這意味着絕對URL自己所在的位置與被引用的實際文件的位置無關。

二、相對URL

相對URL（relative URL）以包含URL自己的文件夾的位置爲參考點，描述目標文件夾的位置。若是目標文件與當前頁面（也就是包含URL的頁面）在同一個目錄，那麼這個文件的相對URL僅僅是文件名和擴展名，若是目標文件在當前目錄的子目錄中，那麼它的相對URL是子目錄名，後面是斜槓，而後是目標文件的文件名和擴展名。

若是要引用文件層次結構中更高層目錄中的文件，那麼使用兩個句點和一條斜槓。能夠組合和重複使用兩個句點和一條斜槓，從而引用當前文件所在的硬盤上的任何文件，通常來講，對於同一服務器上的文件，應該老是使用相對URL，它們更容易輸入，並且在將頁面從本地系統轉移到服務器上時更方便，只要每一個文件的相對位置保持不變，連接就仍然是有效地。

如下爲創建路徑所使用的幾個特殊符號，及其所表明的意義。

• .：表明目前所在的目錄，相對路徑。 如：<a href="./abc">文本</a> 或 <img src="./abc" />
• ..：表明上一層目錄，相對路徑。 如：<a href="../abc">文本</a> 或 <img src="../abc" />
• ../../：表明的是上一層目錄的上一層目錄，相對路徑。 如：<img src="../../abc" />
• /：表明根目錄，絕對路徑。 如：<a href="/abc">文本</a> 或 <img src="/abc" />
• D:/abc/：表明根目錄，絕對路徑。

在使用相對路徑時，咱們用符號「.」來表示當前目錄，用符號「..」來表示當前目錄的父目錄。

重點：href 和 src 的定義與區別

href和src是有區別的，並且是不能相互替換的。咱們在可替換的元素上使用src，然而把href用於在涉及的文檔和外部資源之間創建一個關係。

href (Hypertext Reference)指定網絡資源的位置，從而在當前元素或者當前文檔和由當前屬性定義的須要的錨點或資源之間定義一個連接或者關係。當咱們寫下：

<link href="style.css" rel="stylesheet" />

瀏覽器明白當前資源是一個樣式表，頁面解析不會暫停（因爲瀏覽器須要樣式規則去畫或者渲染頁面，渲染過程可能會被被暫停）。這與把css文件內容寫在<style>標籤裏不相同，所以建議使用link標籤而不是@import來吧樣式表導入到html文檔裏。

src (Source)屬性僅僅 嵌入當前資源到當前文檔元素定義的位置。當瀏覽器找到

<script src="script.js"></script>

在瀏覽器下載，編譯，執行這個文件以前頁面的加載和處理會被暫停。這個過程與把js文件放到<script>標籤裏相似。這也是建議把JS文件放到底部加載的緣由。固然，img標籤頁與此相似。瀏覽器暫停加載直到提取和加載圖像。
與img相似的有更多： replaced elements。

參考：

• http://stackoverflow.com/questions/3395359/difference-between-src-and-...
• http://reference.sitepoint.com/css/replacedelements
• Google