<think>好的，用户想了解HTML中
href和src属性的
区别和用法。我需要先回顾一下之前学习过的相关知识，并结合提供的引用内容来组织答案。
首先，根据引用[1]
和[3]，
src和href都是用来引入外部资源的属性，但它们的作用不同。
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标签同时使用
href和rel属性，而script标签使用
src。需要指出常见的标签搭配，帮助用户记忆。
可能用户混淆这两个属性的使用场景，比如在
link标签中用
src是错误的，应该用
href。需要举例说明正确的用法，避免常见错误。
最后，根据用户提供的示例结构，我需要先分点解释
区别，再给出用法示例，最后生成相关问题。确保使用中文，并且数学公式正确，但这个问题可能不涉及数学内容，所以主要注意代码块
和格式。
检查引用是否正确，每个要点后添加对应的引用标记。确保回答结构清晰，先
区别再用法，帮助用户逐步理解。</think>### HTML中
href与
src属性的
区别及用法解析
#### 一、核心
区别
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]。
扫一扫
2323
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
