剖析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