src和href都是鏈接有啥不一樣

前言

src和href都是用於外部資源的引入，像圖片、CSS文件、HTML文件、js文件或其他web頁面等。
那么在SRC和HREF之間是否有一個明確的區別呢？在哪些地方或者什么時候應該用SRC還是HREF？我想它們的使用並不是可以隨意替換的。
我先給出幾個這兩個屬性的使用例子：

• 引用css文件時：href="cssfile.css"
• 引用js文件時：src="myscript.js"
• 引用圖片：src="mypic.jpg"
• 網站鏈接：href="http://www.webpage.com"

它們之間的主要區別可以用這樣一句話來概括：src用於替代這個元素，而href用於建立這個標簽與外部資源之間的關系。
例如：
<a href="www.xxx.com">\<\img src="1.jpg">\</a>
a標簽里面的內容是一張圖片，a標簽加上href屬性將圖片鏈接到了www.xxx.com這個網站，但並未替換a標簽里面的內容，而img標簽的src屬性則是將這個標簽完全替換成了src里面的資源

href

href (Hypertext Reference) 超文本引用href這個屬性指定web資源的位置，從而定義當前元素（如錨點a）或當前文檔（如鏈接）與目標錨點或目標資源之間的聯系。
例如當我們寫：
<link href="style.css" rel="stylesheet" />
瀏覽器知道這是個樣式表文件，html的解析和渲染不會暫停，css文件的加載是同時進行的，這不同於在style標簽里面的內置樣式，用@import添加的樣式是在頁面載入之后再加載，這可能會因為頁面重新渲染而導致閃爍。所以我們建議使用link而不是@import。

注：修改DOM、修改樣式表、用戶操作都會導致頁面重新渲染。

src

src (Source)源這個屬性是將資源嵌入到當前文檔中元素所在的位置。例如當我們寫：
<script src="script.js"></script>
當瀏覽器解析到這句代碼時，頁面的加載和解析都會暫停直到瀏覽器拿到並執行完這個js文件。這就像是把js文件里的內容全部注入到這個script標簽中，類似於img，img標簽是一個空標簽，它的內容就是由src這個屬性定義，瀏覽器會暫停加載直到這個圖片加載完成。這也是為什么要將js文件的加載放在body最后的原因（在 </body>前面）。

參考：Difference between SRC and HREF