【HTML 面经】src 和 href 的区别详解

在 Web 开发中，我们经常会看到 src 和 href 这两个属性，特别是在 HTML 中，它们用于指定资源的位置。虽然它们看起来非常相似，但实际用途却大不相同。理解这两者的区别是前端开发的基础，尤其是当你进行面试时，掌握这些基础知识能够帮助你轻松回答相关问题。本文将详细解析 src 和 href 的使用场景、作用以及它们之间的区别。

一、src 属性的概念与用法

1. 什么是 src 属性？

src 是 “source”（源）的缩写，用于指定资源的路径，主要用于外部资源的引入。在 HTML 中，src 常用于以下标签中：

• <img>：指定图片的路径
• <script>：指定 JavaScript 文件的路径
• <iframe>：指定嵌入页面的源
• <audio> 和 <video>：指定音频和视频的文件路径

2. src 属性的作用

src 的作用是告诉浏览器去哪里获取资源，通常指向外部文件。当浏览器解析到使用了 src 属性的标签时，它会尝试加载指定的资源，并将其嵌入或执行。

例如，使用 src 属性引入一个图片文件：

<img src="https://example.com/image.jpg" alt="Example Image">

在这个例子中，src 指定了图片的路径，浏览器会从该路径下载并显示图片。

3. src 的加载行为

当浏览器遇到带有 src 属性的标签时，它会立即发起网络请求去加载指定的资源。并且，只有当该资源加载完成后，浏览器才会继续处理后续的内容。例如，<script> 标签会阻塞页面的渲染，直到脚本文件加载完毕并执行。

二、href 属性的概念与用法

1. 什么是 href 属性？

href 是 “Hypertext Reference”（超文本引用）的缩写，主要用于链接其他页面或资源。href 属性通常用于以下标签：

• <a>：指定超链接的目标地址
• <link>：指定外部资源文件，如 CSS 样式表
• <base>：指定文档的基本 URL

2. href 属性的作用

href 的作用是为网页元素（如超链接）指定跳转的目标。当用户点击链接时，浏览器会跳转到指定的 URL 地址。

例如，使用 href 属性创建一个超链接：

<a href="https://example.com">Click here</a>

点击该链接后，浏览器会跳转到 https://example.com。

3. href 的加载行为

与 src 属性不同，href 不会阻塞页面渲染。浏览器会在解析完 HTML 后继续加载页面，而不会等待 href 指向的资源加载完成。对于 <link> 标签，浏览器会在文档加载时异步加载 CSS 文件。

三、src 和 href 的主要区别

1. 用途不同

• src 用于引入外部资源，通常是图像、视频、JavaScript 文件等，它会加载并嵌入资源到页面中。
• href 用于指定超链接的目标地址，通常是网页的 URL 地址，用于页面间的跳转或者外部资源的引用。

2. 加载行为不同

• src 会阻塞后续的页面渲染，直到资源加载完成。例如，浏览器在遇到 <script> 或 <img> 标签时，会等待对应资源加载完毕再继续执行后续操作。
• href 不会阻塞页面渲染，它仅仅是提供了跳转的地址。当浏览器解析到带有 href 的链接时，它会异步加载目标资源，并在用户点击时进行跳转。

3. 影响范围不同

• src 影响的是元素本身，指定的资源会直接嵌入到该元素中。
• href 影响的是页面间的跳转或外部资源的加载，点击链接后，页面或资源会加载到新的位置。

四、实际应用场景

1. src 的应用场景

引入图片资源

<img src="https://example.com/logo.png" alt="Company Logo">

在这个例子中，src 引入了一个外部图片，浏览器会加载并显示该图片。

引入外部 JavaScript 文件

<script src="https://example.com/script.js"></script>

在这个例子中，src 引入了一个外部的 JavaScript 文件，浏览器会下载并执行该脚本。

嵌入视频

<video src="video.mp4" controls></video>

通过 src 属性，我们可以嵌入视频文件，使其在网页中播放。

2. href 的应用场景

创建超链接

<a href="https://example.com">Visit Example</a>

这个例子中，href 创建了一个超链接，点击后会跳转到指定的 URL。

引入外部 CSS 样式表

<link rel="stylesheet" href="styles.css">

href 在这里用来加载外部的 CSS 文件，样式会应用到页面中。

基本的文档链接

<a href="#section1">Go to Section 1</a>

通过 href 和 #，我们可以实现页面内的跳转，用户点击该链接后会滚动到页面内的某个区域。

五、常见问题与误解

1. src 和 href 是否可以互换使用？

虽然 src 和 href 都用于指定资源路径，但它们的用途和行为不同，因此不可以互换。src 用于引入外部资源并将其嵌入页面，而 href 用于指定跳转目标或引入外部资源（如 CSS）。

2. 为什么 <link> 使用 href 而不是 src？

<link> 标签用于链接外部资源，如 CSS 样式表或网页图标，它的作用是引入样式或设置元数据，而不是嵌入资源。因此，使用 href 来指定目标地址，而不是 src。

3. 在 <script> 标签中，为什么使用 src 而不是 href？

<script> 标签是用于嵌入或引入 JavaScript 代码的。当 src 属性指定一个外部 JavaScript 文件时，浏览器会去下载并执行该文件，影响页面的行为。所以，src 是合适的选择，因为它会加载并执行资源。

推荐：

• JavaScript
• react
• vue

---