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 属性创建一个链接,建立了当前页面与目标资源之间的关联,不会将目标资源直接嵌入到当前页面中。