参考链接

href和src的区别

谈谈src和href的区别

src 与 href

简单概括:src 用于替代这个元素,而 href 用于建立这个标签与外部资源之间的关系。

href

href (Hypertext Reference) 超文本引用,这个属性指定 web 资源的位置,从而定义当前元素或当前文档链接与目标锚点或目标资源之间的联系

在加载它的时候,不会停止对当前文档的处理,浏览器会继续往下走。常用在 a、link 等标签。

例如:

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

浏览器加载到 link 时,会知道这是个 CSS 文件,html 的解析和渲染不会暂停,CSS 文件的加载是同时进行的

这不同于在 style 标签里面的内置样式,用 @import 添加的样式是在页面载入之后再加载

这可能会导致页面因重新渲染而闪烁。所以我们建议使用 link 而不是 @import

src

src (Source)源,这个属性是对指定资源的引用,会将所指向的资源嵌入到当前文档中标签所在的位置

浏览器在解析 src 时会停下来对后续文档的处理,直到 src 的内容加载完毕。

常用在 script、img、iframe 标签中,我们建议 js 文件放在 HTML 文档的最后面。

如果 js 文件放在了 head 标签中,可以使用 window.onload 实现 js 的最后加载。

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

总结

href 用于建立当前页面与引用资源之间的关系(链接),而 src 则会替换当前标签

遇到 href,页面会并行加载后续内容;而 src 则不同,浏览器需要加载完毕 src 的内容才会继续往下走