我们都知道，在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 页面：
<!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 属性。
1824
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
