前言

持續學習總結輸出中，src和href都是HTML中特定元素的屬性，都可以用來引入外部的資源。兩者區別如下：

1、作用

href 用于在當前文檔和引用資源之間確立聯系。

src 用于替換當前內容。

2、范圍用途

src（source）它通常用于img、video、audio、script元素，通過src指向請求外部資源的來源地址，指向的內容會嵌入到文檔中當前標簽所在位置，在請求src資源時，它會將資源下載并應用到文檔內，比如說：js腳本、img圖片、frame等元素。例如，<img src="image.jpg">用于引用圖片資源，<script src="script.js"></script>用于引用JavaScript腳本文件。

href（hyper reference）超鏈接，指向網絡資源，用于指定鏈接到HTML文檔之外的資源，如CSS樣式表、字體文件或其他網頁。例如，<link href="styles.css" rel="stylesheet">用于鏈接到一個CSS樣式表文件，<a href="page.html">link</a>用于創建一個指向其他網頁的超鏈接。

3、引用方式

src屬性引用的資源是必需的，并且將在文檔中占據一定的空間，直接影響文檔的渲染。例如，通過<img src="image.jpg">將在文檔中嵌入一張圖片。

href屬性引用的資源是可選的，并且不會占據文檔的空間，僅用于指定鏈接到文檔之外的資源。例如，通過<link href="styles.css" rel="stylesheet">將鏈接到一個 CSS 樣式表文件。

4、對文檔的影響

src 屬性會將引用的資源嵌入到文檔中，因此會直接影響文檔的加載和呈現。如果 src 屬性引用的資源無法加載或錯誤，將會導致嵌入的內容無法顯示或運行。

href 屬性不會直接影響文檔的加載和呈現，而是通過鏈接到外部資源來影響文檔的樣式和行為。如果 href 屬性引用的資源無法加載或錯誤，只會影響到該資源的使用，而不會影響到整個文檔的顯示。

6、瀏覽器解析方式

src 當瀏覽器解析到時 ，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等也如此，類似于將所指向資源應用到當前內容。這也是為什么建議把 js 腳本放在底部而不是頭部的原因。

href 文檔添加時 ，當瀏覽器識別到它指向的?件時，就會并?下載資源，不會停?對當前?檔的處理。這也是為什么建議使用 link 方式加載 CSS，而不是使用 @import 方式。

7、總結

src是用于嵌入到文檔中的資源，href是用于鏈接到文檔之外的資源。src會直接影響文檔的加載和顯示，href只會影響到引用的資源的使用。使用時，我們需要根據需求和資源類型，選擇適當的屬性來引用資源。