關於url/href/src的概念和區別
一、URL的概念
統一資源定位符（或稱統一資源定位器/定位地址、URL地址等，英語：Uniform Resource Locator，常縮寫為URL），有時也被俗稱為網頁地址（網址）。如同在網路上的門牌，是因特網上標準的資源的地址（Address）。
二、URL的格式
2.1 標準格式
協議型別:[//伺服器地址[:埠號]][/資源層級UNIX檔案路徑]檔名?查詢
2.2 完整格式
協議型別:[//[訪問資源需要的憑證資訊@]伺服器地址[:埠號]][/資源層級UNIX檔案路徑]檔名?查詢
其中【訪問憑證資訊@；:埠號；?查詢；#片段ID】都屬於選填項。
三、URL的語法規則
比如網址 http://segmentfault.com/html/index.asp，必須遵守以下的語法規則：
scheme://host.domain:port/path/filename
3.1 說明
（1）scheme - 定義因特網服務的型別。最常見的型別是 http （2）host - 定義域主機（http 的預設主機是 www） （3）domain - 定義因特網域名，比如 w3school.com.cn （4）:port - 定義主機上的埠號（http 的預設埠號是 80） （5）path - 定義伺服器上的路徑（如果省略，則文件必須位於網站的根目錄中）。 （6）filename
3.2 URL Schemes
以下是其中一些最流行的 scheme：
| Scheme | 訪問 | 用於... |
|---|---|---|
| http | 超文字傳輸協議 | 以 http:// 開頭的普通網頁。不加密。 |
| https | 安全超文字傳輸協議 | 安全網頁。加密所有資訊交換。 |
| ftp | 檔案傳輸協議 | 用於將檔案下載或上傳至網站。 |
| file | 您計算機上的檔案。 |
四、URL的型別
4.1 絕對URL
絕對URL（absolute URL）顯示檔案的完整路徑，這意味著絕對URL本身所在的位置與被引用的實際檔案的位置無關。
4.2 相對URL
相對URL（relative URL）以包含URL本身的資料夾的位置為參考點，描述目標資料夾的位置。
一般來說，對於同一伺服器上的檔案，應該總是使用相對URL，它們更容易輸入，而且在將頁面從本地系統轉移到伺服器上時更方便，只要每個檔案的相對位置保持不變，連結就仍然是有效地。
以下為建立路徑所使用的幾個特殊符號，及其所代表的意義。
（1） .：代表目前所在的目錄，相對路徑。 如： <a>文字 </a> 或 <img src="./abc" />
（2） ..：代表上一層目錄，相對路徑。 如： <a>文字 </a> 或 <img src="../abc" />
（3） ../../：代表的是上一層目錄的上一層目錄，相對路徑。 如： <img src="../../abc" />
（4） /：代表根目錄，絕對路徑。 如：[文字] (/abc) 或 <img src="/abc" />
五、href的概念
5.1 規範解釋
href (Hypertext Reference)指定網路資源的位置，從而在當前元素或者當前文件和由當前屬性定義的需要的錨點或資源之間定義一個連結或者關係。
5.2 通俗理解
href 目的不是為了引用資源，而是為了建立聯絡，讓當前標籤能夠連結到目標地址。
六、src的概念
source（縮寫），指向外部資源的位置，指向的內容將會應用到文件中當前標籤所在位置。
七、href和src的區別
7.1 請求資源型別不同
（1）href 指向網路資源所在位置，建立和當前元素（錨點）或當前文件（連結）之間的聯絡。
（2）在請求 src 資源時會將其指向的資源下載並應用到文件中，比如 JavaScript 指令碼，img 圖片；
7.2 作用結果不同
（1）href 用於在當前文件和引用資源之間確立聯絡；
（2）src 用於替換當前內容；
7.3 瀏覽器解析方式不同
（1）若在文件中新增 ，瀏覽器會識別該文件為 CSS 檔案，就會並行下載資源並且不會停止對當前文件的處理。這也是為什麼建議使用 link 方式載入 CSS，而不是使用 @import 方式。
（2）當瀏覽器解析到 ，會暫停其他資源的下載和處理，直到將該資源載入、編譯、執行完畢，圖片和框架等也如此，類似於將所指向資源應用到當前內容。這也是為什麼建議把 js 指令碼放在底部而不是頭部的原因。
八、link和@import的區別
兩者都是外部引用 CSS 的方式，但是存在一定的區別：
（1）link是XHTML標籤，除了能夠載入CSS，還可以定義RSS等其他事務；而@import屬於CSS範疇，只可以載入CSS。
（2）link引用CSS時，在頁面載入時同時載入；@import需要頁面完全載入以後再載入。
（3）link是XHTML標籤，無相容問題；@import則是在CSS2.1提出的，低版本的瀏覽器不支援。
（4）link支援使用Javascript控制DOM改變樣式；而@import不支援。