前语

咱们都知道，在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> 标签用于显现一张图片：

<!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标签中用于创立超链接或引进外部款式表，其行为和作用取决于所运用的标签类型。一般情况下，它被用于创立超链接或引进外部款式表，以实现页面间的导航或款式的引进。

差异：

  1. 适用标签不同：

    • src特点一般用于<img>、<script>、<iframe>、<audio>和<video>等标签，用于嵌入外部资源。
    • href特点一般用于<a>、<link>和<base>等标签，用于创立超链接或引进外部款式表。

  2. 加载行为不同：

    • 关于src特点，阅读器会当即加载指定的资源，它会堵塞页面的加载，直到资源加载完结。
    • 关于href特点，它指定的资源一般在用户与页面交互时加载，不会堵塞页面的加载。

  3. 替换内容不同：

    • src特点会替换元素本来的内容，例如，一个<img>标签的src特点指向的图片地址会显现在页面上，而本来<img>标签中的内容将被替换掉。
    • href特点不会替换元素本来的内容，例如，一个<a>标签的href特点指向的超链接地址会成为链接的方针，但不会影响<a>标签本来的内容。

因而，在选择运用 src 还是 href 时，需求依据详细的需求来决议。假如需求向页面中嵌入外部资源，而且需求当即加载，可以运用 src 特点；假如需求创立超链接或许加载外部款式表等，且不想堵塞页面烘托，可以运用 href 特点。