src 和 href 的区别
一、基本概念和用途
1. `src`属性
主要用于引入外部资源作为页面或元素的一部分，`src`属性通常用于`script`、`img`、`iframe`等标签。
2. `href`属性
主要用于建立链接，指向其他资源或页面位置，常见于`<a>`（超链接）和`<link>`（用于引入外部样式表等）标签。
二、加载行为和对页面渲染的影响
1. `src`属性的加载行为
1.1 阻塞页面解析（部分情况）
当浏览器遇到带有`src`属性的标签（如`script`）时，在获取并加载指定资源之前，会暂停 HTML 页面的解析。这是因为脚本可能会修改 DOM 结构或者使用文档中的其他元素，如果不暂停解析，可能会导致脚本执行错误。不过，对于一些现代浏览器和带有`defer`或`async`属性的脚本，这种阻塞行为可以被优化。
1.2 资源加载顺序与位置有关
对于多个带有`src`属性的脚本标签，它们的加载顺序通常是按照在 HTML 文档中的出现顺序来执行的。
2. `href`属性的加载行为
2.1 一般不阻塞页面解析（`link`标签引入 CSS 样式表的情况）
当浏览器遇到`<link>`标签引入 CSS 样式表时，会在后台加载样式表文件，同时继续解析 HTML 文档。这样可以提高页面的加载效率，使得用户能够更快地看到页面的基本结构。不过，浏览器会根据样式表中的规则来渲染页面元素，所以如果样式表加载过慢，可能会导致页面在加载过程中出现样式闪烁的情况，即先以默认样式显示，等样式表加载完成后再重新渲染为正确的样式。
2.2 链接跳转行为（`a`标签情况）
对于`<a>`标签的`href`属性，当用户点击链接时，浏览器会发起一个新的请求来加载目标页面，当前页面的解析和渲染会被中断（如果目标页面是在当前窗口打开）。如果`href`属性指向页面内的某个锚点（如`href="#section1"`），浏览器会在当前页面内滚动到指定的位置，不涉及新页面的加载。
三、在资源引用和关联中的角色
1. `src`属性关联资源作为内容主体或功能实现的一部分
通过`src`属性引入的资源往往是构成网页功能或内容展示的关键部分。例如，`img`标签引入的图像是网页视觉内容的重要组成部分，`iframe`标签引入的外部网页或文档是作为嵌入内容展示给用户的，`script`标签引入的脚本是用于实现网页的交互功能（如表单验证、动画效果等）。
2. `href`属性主要用于建立资源之间的引用关系或导航路径
在`<link>`标签中，`href`属性建立了 HTML 文档与外部 CSS 样式表之间的引用关系，使得网页能够获取样式信息来美化页面。在`<a>`标签中，`href`属性构建了网页之间或者网页内部不同位置之间的导航路径，方便用户在网站中浏览和获取信息。