src和href区别

(1)请求资源类型不同

  • href
    用来建立文档和元素之间的链接(是引用),常用的有a、link
  • src
    在请求src资源时候会将指向的资源下载并且应用到文档中(引入),常用的有script、iframe、image。

(2)作用结果不同

  • href
    不会替换当前内容
  • src
    会替换当前内容
   <script src="source.js">
       console.log("1111")//将会被替代
   </script>

(3)解析方式不同

  • href
    当浏览器解析到href处,浏览器会识别文件,并行下载资源。(不会停止对当前资源的处理)
  • src
    当浏览器解析到src处,会暂停对当前资源的处理,直到该资源执行完毕。这就是为啥要把js放在底部的原因。
### HTML 中 `src` `href` 的区别及用法场景 #### 1. 定义与作用 - **`src` 属性**:用于指定外部资源的路径,其内容会被嵌入到当前文档中。它主要用于加载图片、脚本、框架等资源[^2]。 - **`href` 属性**:用于指定超链接的目标地址或引入外部样式表。它通常用于创建页面间的导航或引入样式文件[^4]。 #### 2. 使用场景 - **`src` 的使用场景**: - 加载图片:`<img src="image.jpg" alt="Description">` - 引入脚本:`<script src="script.js"></script>`[^2] - 嵌入框架:`<iframe src="page.html"></iframe>` - **`href` 的使用场景**: - 创建超链接:`<a href="https://example.com">Visit Example</a>` - 引入样式表:`<link rel="stylesheet" href="styles.css">` #### 3. 行为差异 - **`src` 的行为**:当浏览器解析到带有 `src` 属性的标签时,会立即加载该资源并将其嵌入到文档中。例如,`<img>` 标签会显示指定的图片,而 `<script>` 标签会执行指定的脚本文件[^2]。 - **`href` 的行为**:`href` 属性定义了点击链接后跳转的目标地址,或者用于引入外部资源(如 CSS 文件)。它不会自动加载资源,而是等待用户交互或特定条件触发[^4]。 #### 4. 兼容性与限制 - **`src` 的限制**:`src` 属性只能用于某些特定的 HTML 标签,如 `<img>`、`<audio>`、`<video>` 等[^1]。 - **`href` 的灵活性**:`href` 属性可以用于任何具有可点击性的元素,例如 `<a>` 标签或 `<link>` 标签[^1]。 #### 5. 示例代码 以下是一些常见的 `src` `href` 使用示例: ```html <!-- 使用 src 属性 --> <img src="logo.png" alt="Logo"> <script src="app.js"></script> <iframe src="content.html"></iframe> <!-- 使用 href 属性 --> <a href="https://example.com">Visit Example</a> <link rel="stylesheet" href="styles.css"> ``` ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

太阳与星辰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值