HTML中的src、href的区别

HTML中的src、href的区别


前言
我们在开发页面的时候,有时候需要需要引用一些外部的资源,但对于小白的我而言经常分不清src与href,那下面我就围绕这个问题,进行一下探讨。

经过百度,我们可以知道:

href (Hypertext Reference)指定网络资源的位置,从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系。

也就是说:它指向一些网络资源,建立和当前元素或者说是本文档的链接关系。在加载它的时候,不会停止对当前文档的处理,浏览器会继续往下走。常用在a、link等标签。

举例:

<link rel="stylesheet"  type="text/css" href="css/style.css " />
<a href="http://www.w3school.com.cn">W3School</a>

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


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

举例:

<img src="img/LOGO.svg" width="42" height="42" alt="pic"/>
<script src="script.js"></script>

对比不同:

  1. 请求资源类型不同
    (1)href 指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的联系。
    (2)在请求 src 资源时会将其指向的资源下载并应用到文档中,比如 Javascript 脚本,img 图片。

  2. 作用结果不同
    (1)href 用于在当前文档和引用资源之间确立联系。
    (2)src 用于替换当前内容。

  3. 浏览器解析方式不同
    (1)若在文档中添加 ,浏览器会识别该文档为 CSS 文件,就会并行下载资源并且不会停止对当前文档的处理。
    (2)当浏览器解析到 ,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等也如此,类似于将所指向资源应用到当前内容。

总结:
简而言之,(敲重点!!!)
src用于替换当前元素;
href用于在当前文档和引用资源之间建立联系。

原创文章 8 获赞 8 访问量 413

猜你喜欢

转载自blog.csdn.net/weixin_45532870/article/details/105699543