HTML5中的href與src的區別

今天來了解一下href與src的區別：

src:

src是source的簡寫，表示「源」，是引用一個資源將該元素的內容將整體替換。如果不寫src，那麼本身沒有內容，script會不存在腳本代碼，img會顯示x，iframe會顯示空白頁。例如，b.js:alert(2); 標準的瀏覽器里會顯示2，因為本身的內容已經被替代了。

src指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如前面說的js腳本，img圖片和frame等元素。

當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源載入、編譯、執行完畢，圖片和框架等元素也如此，類似於將所指向資源嵌入當前標籤內。這也是為什麼將js腳本放在底部而不是頭部。

簡而言之，src用於替換當前元素。

href:

href是Hypertext Reference的縮寫，表示「超鏈接」， 目的不是為了引用一個資源，而是為了建立一個「通道」，讓當前標籤能夠鏈接到目標地址上，並不是為了把目標拉進頁面本身內來替換本身的內容，例如a標籤的href不會被當做一個資源替換自身，link標籤本身並不包含實際的元素意義來做內容，它需要rel明確的表示被【被鏈接的文檔是做什麼的】。至於說為什麼當初就決定外部樣式表用link href來鏈接，而不是用style src來載入，可能是因為先賢們認為樣式表更符合外部鏈接資源的特徵，它更接近附屬的資源，而不是內嵌的內容。

href是Hypertext Reference的縮寫，指向網路資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，href 表示超文本引用，在 link 和 a 等元素上使用。如果我們在文檔中添加：

那麼瀏覽器會識別該文檔為css文件，就會並行下載資源並且不會停止對當前文檔的處理。這也是為什麼建議使用link方式來載入css，而不是使用@import方式。

簡言之，href用於在當前文檔和引用資源之間建立聯繫。

了解更多內容，請關註：

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！