src 和 href 都是用来引入外部资源的属性，例如：图片、视频、CSS 文件、JavaScript 文件等。
那么它们两者之间究竟有什么样的区别呢？
&ll 4 ] ] d N #t;link href="https://www.cnblogs.com/xueyubao/a @ r } m vp/style.css" rel="stylesheet" />
<img src="https://www.cnblogs.com/xueyubao/p/C [ xpic.png" alt=Y A v 1 w C g $ f"pic" />
<script src="https://www.cnblogs.com/xueyubao/p/script.js"></script>
href(Hypertext Reference超文本引用)属性通过指定Web资源的位置，来定义当前元素或者当前文档与目标资源之间的链接或关系。当我们引入CSS文件时：, % E I (
<link href="https://www.cnblogs.com/xueyubav : y (o/p/style.css" rel="stylesheet" />
浏览器会明白这是一个样式表资源，这时浏览器对于页面（HTML）的解析不会暂停（渲染可能会暂停，因为浏览器需要使用样式表的样式来绘制J v c i Q l ! {页面），这是因为它并不会像@import一样将整个CSS文件嵌入到stylef 4 3标签中。
src(Sou~ l ( v : 1rce)属性会将资源嵌入[ a o [到当前文档中元素所在位置。当我们引入JavaScript文件时：
<script src="https://www.cnblogs.com/xueyubao/p/script.js"></scri& k } G } q Dpt>
浏O \ Q & \ T M 9览器解析到这句代A I 7 % 7 U码时，页面的加载和解析都会暂停，直到浏览w 1 {器拿到并执行完这个JavaScriptC t ( E d x :文件，这就相当于将JavaScript文件中的内容全部嵌入到script标签中。
网上* ! Q G N有许多文章依次就认$ , ,定为使用src属性m \ N b % 7 | 6 v就代表了资源会阻塞页面，我并不认同这个观点。
在Hf . s z , 5TML5出现之后，我们可以通过给script标签添加async或defer属性来使JavaScript脚本异步加载。图片的引入也能很好的证明并非使用src属性就代表了该资源会阻塞页面，我们在引入图片时也是使用的src属性，在实际体验中我们可以H { # 8 } u看到，如果图片加载较慢会产生一种页面加载L = z _ V完成c ] s a u 7 o h，只有图片所在的部分是空白。
因此我认为，src和href的区别仅在于src会将资源嵌入到当前文档中，而href会建立一个关联指向资源（就像<a href="https://www.baidu.com"></a>并不会将百度嵌入到当前页面中，而<ifra1 ! @ ome src="https://www.bal ) @idu.com"></iframe>就会）。
参考文章
- DifferJ * . vence between Sq \ J ^RC and HREF
