href和src的区别

关于href和src一直都有用,可是一直都是惯性思维,在遇到link和a时就用href,在遇到img和script时就用src,一直都不知道为什么,以及两者有什么区别。今天就来简单的总结下:


(1)href用在link和a等标签上,src用在img和script等标签上;
(2)两者在使用时的差异

  • href是引用和页面关联,是在当前元素和引用资源之间建立联系,比如点击a标签时,页面会跳转到href所指定的路径的页面;

  • src表示引用资源,表示要引用的资源会替换当前元素,所要引用的内容是页面上要加载显示的,比如img标签会显示src里引用的图片资源;

(3)两者在性能上的差异

  • 当浏览器解析到src时会暂停其他资源的下载和对页面的加载,直至将资源加载,编译,执行完毕才会下载其他资源加载页面,所以在优化网页时,建议将js文件放在页面的最底部;

  • 当浏览器解析文档遇到href时,会下载href所引用的文件,但是不会停止对当前文档的处理,所以为了使页面更快的出现在用户的面前,不建议使用@import来导入CSS文件,而是使用href来导入CSS文件。


上面有提到link和@import,下面补充说明下link和@import的区别:

(1)link是html标签,可以定义自己的属性,可以进行DOM操作,而且没有兼容性的问题,而@import是CSS的内容,不能进行DOM操作,是在CSS2.1提出的,低版本的浏览器可能不支持;

(2)link引入CSS样式时和页面的加载同时执行,@import需要页面完全载入后加载,会使页面发生闪烁(即文档加载完成没有样式,过一会就好了)。

<think>好的,用户想了解HTML中hrefsrc属性的区别用法。我需要先回顾一下之前学习过的相关知识,并结合提供的引用内容来组织答案。 首先,根据引用[1][3],srchref都是用来引入外部资源的属性,但它们的作用不同。src用于替换当前元素,比如img或script标签,而href用于建立当前文档与外部资源之间的联系,比如link或a标签。这里需要强调src是嵌入资源,而href是引用资源。 接下来,引用[2]提到href是非阻塞加载,而src是阻塞加载。比如link标签使用href加载CSS,不会阻塞页面渲染,而script标签使用src加载JS会阻塞。这一点对性能有影响,需要说明清楚。 然后,引用[4]详细解释了href的三种URL值:绝对、相对锚点。这部分可以作为用法示例,比如a标签中的href="#top"回到顶部。而src的用法示例可以是img的src属性指向图片地址。 还要注意语法结构的不同,比如link标签同时使用hrefrel属性,而script标签使用src。需要指出常见的标签搭配,帮助用户记忆。 可能用户混淆这两个属性的使用场景,比如在link标签中用src是错误的,应该用href。需要举例说明正确的用法,避免常见错误。 最后,根据用户提供的示例结构,我需要先分点解释区别,再给出用法示例,最后生成相关问题。确保使用中文,并且数学公式正确,但这个问题可能不涉及数学内容,所以主要注意代码块格式。 检查引用是否正确,每个要点后添加对应的引用标记。确保回答结构清晰,先区别再用法,帮助用户逐步理解。</think>### HTML中hrefsrc属性的区别及用法解析 #### 一、核心区别 1. **作用对象不同** - `src`(source)用于**替换当前元素**,将资源直接嵌入文档中,例如:$<script\>$标签引入JS代码、$<img\>$标签加载图片[^3]。 - `href`(Hypertext Reference)用于**建立关联关系**,定义当前文档与外部资源之间的链接,例如:$<a\>$标签跳转页面、$<link\>$标签引入CSS文件[^2][^3]。 2. **加载行为不同** - `src`会**阻塞页面渲染**,浏览器需等待资源下载并执行完毕(如JS文件)[^2]。 - `href`是**非阻塞加载**,浏览器会并行下载资源(如CSS文件),不影响页面渲染[^2][^4]。 3. **语法结构差异** - `src`常作为**独立属性**使用,例如: ```html <script src="app.js"></script> <img src="image.jpg"> ``` - `href`通常需搭配其他属性,例如: ```html <link href="style.css" rel="stylesheet"> <a href="https://example.com">链接</a> ``` #### 二、典型用法示例 | 属性 | 适用标签 | 示例代码 | 用途说明 | |-------|-------------------|-----------------------------------------------|------------------------------| | `src` | `<script>`, `<img>` | `<script src="lib.js"></script>` | 嵌入JS文件 | | | `<iframe>`, `<video>` | `<iframe src="page.html"></iframe>` | 内嵌其他页面 | | `href`| `<a>`, `<link>` | `<a href="#section1">跳转</a>` | 页面锚点跳转 | | | `<area>`, `<base>` | `<link href="print.css" media="print">` | 按条件加载CSS | #### 三、常见误区 1. **错误写法**: ```html <link rel="stylesheet" src="style.css"> <!-- 错误!应使用href --> ``` 2. **特殊场景**: - `href="javascript:void(0)"` 用于阻止默认跳转行为。 - `src="data:image/png;base64,..."` 直接嵌入Base64编码图片。 #### 四、性能影响对比 $$ \text{阻塞程度} = \begin{cases} \text{高(src)} & \text{如JS文件需立即执行} \\ \text{低(href)} & \text{如CSS文件异步加载} \end{cases} $$ 优化建议:将`<script>`标签放在页面底部,或添加`async/defer`属性[^1][^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值