src和href的区别

src和href是HTML中常见的属性，它们用于引用不同类型的资源，具有以下区别：
1. 用途：
   src（Source）属性通常用于指定外部资源，如图像、脚本、音频或视频文件等，以便在当前文档中嵌入这些资源。
   - `href`（Hypertext Reference）属性通常用于指定超链接的目标位置，如文档、样式表、图标文件等，用户点击链接时将导航到这些目标资源。
2. 适用元素：
   src属性通常用于`<img>`、`<script>`、`<audio>`、`<video>`等元素，用于引入嵌入式内容。
   href属性通常用于`<a>`、`<link>`等元素，用于创建超链接或引入外部资源。
3. 行为：
   在加载HTML文档时，浏览器会加载`src`属性指定的资源，并将其嵌入到文档中，比如图片会显示在页面上，脚本会执行。
   而`href`属性指定的资源则不会自动加载到文档中，而是在用户点击链接时才会进行导航到目标资源，或者被浏览器用于加载外部资源，如样式表。
总的来说，`src`用于嵌入内容，`href`用于导航链接或引入外部资源。

4.浏览器解析方式不同

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

用href时，那么浏览器会识别该文档为css 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

举例:

<!-- 嵌入图像 -->
<img src="example.jpg" alt="Example Image">

<!-- 引入脚本 -->
<script src="example.js"></script>

<!-- 嵌入音频 -->
<audio controls>
  <source src="example.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

<!-- 嵌入视频 -->
<video controls>
  <source src="example.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<!-- 创建超链接 -->
<a href="https://www.example.com">Visit Example</a>

<!-- 引入外部样式表 -->
<link rel="stylesheet" href="styles.css">

<!-- 引入网站图标 -->
<link rel="icon" href="favicon.ico">