src和href的区别

src和href的区别：

我们在开发页面的时候，有时候需要需要引用一些外部的资源，经常分不清href与src，下面我们就来谈谈它们之间到底分别是什么，这样使用的时候就做到心中有数。

概念及使用：
href：Hypertext Reference的缩写，超文本引用，它指向一些网络资源，建立和当前元素或者说是本文档的链接关系。在加载它的时候，不会停止对当前文档的处理，浏览器会继续往下走。常用在a、link等标签。

<a href="http://www.baidu.com"></a>
<link type="text/css" rel="stylesheet" href="common.css">

如上面所显示的那样，当浏览器加载到link标签时，会识别这是CSS文档，并行下载该CSS文档，但并不会停止对当前页面后续内容的加载。这也是不建议使用@import加载CSS的原因。

src： source的所写，表示的是对资源的引用，它指向的内容会嵌入到当前标签所在的位置。由于src的内容是页面必不可少的一部分，因此浏览器在解析src时会停下来对后续文档的处理，直到src的内容加载完毕。常用在script、img、iframe标签中，我们建议js文件放在HTML文档的最后面。如果js文件放在了head标签中，可以使用window.onload实现js的最后加载。

<img src="img/girl.jpg">
  
<frame src="top.html">
  
<iframe src="top.html">
  
<script src="show.js">

区别：

src和href之间存在区别，能混淆使用。src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

1. 请求资源类型不同
   （1） href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。
   （2）在请求 src 资源时会将其指向的资源下载并应用到文档中，常用的有script，img 、iframe；

2. 作用结果不同

   • href 用于在当前文档和引用资源之间确立联系；
   • src 用于替换当前内容；

3. 浏览器解析方式不同

   • 若在文档中添加href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link方式加载 CSS，而不是使用 @import 方式。

   • 当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。