src 和 href 的区别

src

src 是用来加载和嵌入资源到页面中，如图像、脚本或 iframe。

<img src="image.png" alt="An Image">
<script src="script.js"></script>

对于 <script> 标签：默认情况下会阻塞 HTML 的解析和其他资源的加载，直到脚本被下载并执行完成（除非使用 async 或 defer）。对于 <img> 标签，不会阻塞页面的解析，即使图片还未加载完成，页面的其他部分依然会被渲染出来。图片加载完毕后，浏览器会将图片插入到页面的占位符中。

href

href 指向外部资源或页面的地址，通常用于链接跳转或引入外部文件。

注意：

当使用 <link> 标签来加载 CSS 文件时，CSS 文件相对于 HTML 来说是引入而不是嵌入。它的内容没有直接写在 HTML 文件里，而是从外部文件加载并使用。

当使用 <style> 标签时，CSS 内容就是页面的一部分，直接嵌入到 HTML 文档里。

<a href="https://example.com">Visit Example</a>
<link rel="stylesheet" href="styles.css">

样式表、超链接等资源是并行下载的，样式表下载完成后才会应用到页面，不会阻塞 HTML 的解析。

总结

src 属性的主要作用是将某个资源嵌入到当前元素中，并替换当前元素的内容。

href 属性创建一个链接，建立了当前页面与目标资源之间的关联，不会将目标资源直接嵌入到当前页面中。