src 和 href 都是用來引入外部資源的屬性，例如：圖片、視訊、CSS 檔案、JavaScript 檔案等。
那麼它們兩者之間究竟有什麼樣的區別呢？
<link href="style.css" rel="stylesheet" />
<img src="pic.png" alt="pic" />
<script src="script.js"></script>
href(Hypertext Reference超文字引用)屬性通過指定Web資源的位置，來定義當前元素或者當前文件與目標資源之間的連結或關係。當我們引入CSS檔案時：
<link href="style.css" rel="stylesheet" />
瀏覽器會明白這是一個樣式表資源，這時瀏覽器對於頁面（HTML）的解析不會暫停（渲染可能會暫停，因為瀏覽器需要使用樣式表的樣式來繪製頁面），這是因為它並不會像@import一樣將整個CSS檔案嵌入到style標籤中。
src(Source)屬性會將資源嵌入到當前文件中元素所在位置。當我們引入JavaScript檔案時：
<script src="script.js"></script>
瀏覽器解析到這句程式碼時，頁面的載入和解析都會暫停，直到瀏覽器拿到並執行完這個JavaScript檔案，這就相當於將JavaScript檔案中的內容全部嵌入到script標籤中。
網上有許多文章依次就認定為使用src屬性就代表了資源會阻塞頁面，我並不認同這個觀點。
在HTML5出現之後，我們可以通過給script標籤新增async或defer屬性來使JavaScript指令碼非同步載入。圖片的引入也能很好的證明並非使用src屬性就代表了該資源會阻塞頁面，我們在引入圖片時也是使用的src屬性，在實際體驗中我們可以看到，如果圖片載入較慢會產生一種頁面載入完成，只有圖片所在的部分是空白。
因此我認為，src和href的區別僅在於src會將資源嵌入到當前文件中，而href會建立一個關聯指向資源（就像<a href="https://www.baidu.com"></a>並不會將百度嵌入到當前頁面中，而<iframe src="https://www.baidu.com"></iframe>就會）。