前言

我们都知道，在HTML标签中有着src 和 href属性，虽然它们有着相似之处，它们都可以用于指定资源的位置，但实际上大不相同，下面本人将为大家介绍一下这两者之间的差别及用法。

src属性

src是 source 的缩写，指向外部资源的位置，指向的内容将会嵌⼊到⽂档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到⽂档内，例如js脚本，img 图片和 frame 等元素

如：当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。而这也是为什么将js脚本放在底部而不是头部。

作用 : src 属性用于指定外部资源的URL地址，可以是相对路径或绝对路径。通常用于向 HTML 元素中嵌入外部资源，如图片、音视频等。
适用标签 ：
- <img>：用于嵌入图像资源。
- <script>：用于指定要加载的脚本文件。
- <iframe>：用于嵌入另一个HTML文档。
- <audio>：用于指定音频文件的URL。
- <video>：用于指定视频文件的URL。
加载行为 ：
- 对于<img>、<script>、<iframe>等标签，src指向的资源会被浏览器同步加载。页面解析到该元素时会立即加载资源，会阻塞其他内容的渲染。
- 对于<audio>和<video>标签，浏览器会根据src属性指定的URL加载音频或视频文件，并根据需要进行缓冲，播放过程中可能会按需加载更多数据
替换内容 ：src 属性会替换掉元素原本的内容，例如，一个 <img> 标签的 src 属性指向的图片地址会显示在页面上，而原本 <img> 标签中的内容将被替换掉。

示例

假设我们有一个 HTML 页面，其中包含一个 <img> 标签用于显示一张图片：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
</head>
<body>
    <img src="example.jpg" alt="Example Image">
</body>
</html>

在这个示例中，<img> 标签的 src 属性指定了要显示的图片的地址。当浏览器解析到这个标签时，会立即加载 example.jpg 图片，然后将其显示在页面上。这个过程会阻塞其他内容的渲染，直到图片完全加载完成。

href属性

href 是 Hypertext Reference 的缩写，指向⽹络资源所在位置，建立和当前元素(锚点) 或当前⽂档 (链接) 之间的链接，如果我们在⽂档中添加那么浏览器会识别该⽂档为css⽂件，就会并⾏下载资源并且不会停止对当前⽂档的处理。这也是为什么建议使用link⽅式来加载css ，而不是使用@import⽅式

作用：href 属性用于指定超链接的地址，通常用于创建页面间的链接，或者链接到页面内的某个锚点。
适用标签 ：
- <a>：用于创建超链接，用户点击后会跳转到指定的URL。
- <link>：用于在HTML文档中引入外部样式表。
- <base>：用于设置HTML文档中所有相对URL的基准路径。
超链接行为 ：
- 对于<a>标签，用户点击链接时，浏览器会根据href属性指定的URL加载新页面或跳转到新的页面。
- 对于<link>标签，浏览器会根据href属性指定的URL加载外部样式表，用于页面样式的引入。
替换内容 ：href 属性不会替换元素原本的内容，例如，一个 <a> 标签的 href 属性指向的超链接地址会成为链接的目标，但不会影响 <a> 标签原本的内容。

示例

现在，让我们考虑一个包含超链接的 HTML 页面：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
</head>
<body>
    <a href="https://www.example.com">Go to Example</a>
</body>
</html>

在这个示例中，<a> 标签的 href 属性指定了一个外部链接的地址。当用户点击这个链接时，浏览器会异步加载 https://www.example.com 这个网页，并在新的标签页或当前标签页中打开它。与示例1不同的是，这个过程不会阻塞页面的渲染，因为浏览器会在后台异步加载资源，允许用户继续浏览页面。

通过这两个示例，我们可以清楚地看到 src 和 href 在不同场景下的作用和行为。

总结

通过上述内容，我们可以了解到在HTML中，src 和 href 都是常见的属性，它们分别用于指定外部资源的引用和超链接的地址，它们之间有着明显的区别：

src属性在HTML标签中用于加载外部资源，其行为和效果取决于所使用的标签类型。通常情况下，它被用于加载图片、脚本、框架、音频和视频等外部资源。
href属性在HTML标签中用于创建超链接或引入外部样式表，其行为和效果取决于所使用的标签类型。通常情况下，它被用于创建超链接或引入外部样式表，以实现页面间的导航或样式的引入。

区别：

适用标签不同：
- src属性通常用于<img>、<script>、<iframe>、<audio>和<video>等标签，用于嵌入外部资源。
- href属性通常用于<a>、<link>和<base>等标签，用于创建超链接或引入外部样式表。
加载行为不同：
- 对于src属性，浏览器会立即加载指定的资源，它会阻塞页面的加载，直到资源加载完成。
- 对于href属性，它指定的资源通常在用户与页面交互时加载，不会阻塞页面的加载。
替换内容不同：
- src属性会替换元素原本的内容，例如，一个<img>标签的src属性指向的图片地址会显示在页面上，而原本<img>标签中的内容将被替换掉。
- href属性不会替换元素原本的内容，例如，一个<a>标签的href属性指向的超链接地址会成为链接的目标，但不会影响<a>标签原本的内容。

因此，在选择使用 src 还是 href 时，需要根据具体的需求来决定。如果需要向页面中嵌入外部资源，并且需要立即加载，可以使用 src 属性；如果需要创建超链接或者加载外部样式表等，且不想阻塞页面渲染，可以使用 href 属性。

HTML中的src与href属性：解析外部资源与超链接的区别

前言

src属性

示例

href属性

示例

总结

区别：