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>就會）。