src是“装进来”，浏览器阻塞解析直至资源加载执行完毕；href是“指过去”，建立关系或跳转，不阻塞解析，仅点击或特定rel（如stylesheet）时才触发加载。
src 和 href 不是“能不能互换”的问题，而是“根本不是一回事”——用错一个，轻则资源不加载、样式失效，重则页面白屏或脚本不执行。
src 是“装进来”，浏览器会停着等它
遇到 src，浏览器默认认为这个资源是当前元素的“内容本体”，必须加载完成才能继续。比如：
-
<script src="app.js"></script>：没下载完、没执行完，HTML 解析就卡住（除非加async或defer） -
<img src="logo.png" alt="HTML中src和href的区别_html src与href属性区别详解【从零开始】" >：图片加载失败，<img alt="HTML中src和href的区别_html src与href属性区别详解【从零开始】" >标签位置直接显示破图图标，onerror可捕获 -
<iframe src="widget.html"></iframe>：内嵌页面完全独立，它的 JS/CSS 与主页面隔离
关键点：所有带 src 的标签（<img alt="HTML中src和href的区别_html src与href属性区别详解【从零开始】" >、<script></script>、<iframe></iframe>、<video></video>、<audio></audio>）都遵循“阻塞 + 嵌入”逻辑。你不能用 href 替代 src，浏览器根本不认。
href 是“指过去”，浏览器通常不等它
href 表达的是“关系”或“跳转目标”，不是“内容来源”。它不替换当前元素，只建立连接：
立即学习“前端免费学习笔记（深入）”；
-
<a href="/login">登录</a>：点击才触发，解析时完全不加载 -
<link href="style.css" rel="stylesheet">：浏览器会并行下载 CSS，但不会阻塞 HTML 解析（不过它会影响渲染阻塞） -
<link href="icon.png" rel="icon">：仅声明 favicon，加载失败也不影响页面结构
注意：<link rel="preload"> 是个例外——它用 href 但带强制预加载语义，此时浏览器会提前 fetch，但仍不阻塞解析。
为什么 <link href> 能加载 CSS，而 <script href></script> 不存在？
因为语义和规范不允许：
- CSS 是渲染必需资源，
<link rel="stylesheet">是唯一被标准允许用于加载样式的机制；浏览器对它的href做了特殊处理（优先级高、可阻塞渲染） -
<script></script>标签没有href属性——写<script href="x.js"></script>是无效的，DOM 中读不到该属性，也不会触发任何请求 - 想动态加载脚本？得用 JS 手动创建
<script src="x.js"></script>并 append 到 document，而不是改属性名
混淆常发生在初学时照着 link 写法去套 script，结果资源根本没发请求。
相对路径解析都依赖当前文档 URL，但 base 标签只影响 href
src 和 href 的相对路径，绝大多数情况下都以当前 HTML 文档的 URL 为基准。但有一个关键差异：
-
<base href="https://cdn.example.com/">会影响所有后续href（如<a href="page.html"></a>→https://cdn.example.com/page.html），也影响部分src（如<img src="logo.png" alt="HTML中src和href的区别_html src与href属性区别详解【从零开始】" >） - 但某些浏览器对
<script src></script>的 base 处理不一致，尤其在动态插入 script 时；稳妥做法是：脚本路径尽量写绝对或从根开始（/js/app.js） -
javascript:协议只对href有效（如<a href="javascript:alert(1)"></a>），对src完全无效，还会破坏路径解析逻辑
真正容易被忽略的，是 base 标签对不同属性的实际生效范围并不统一——别假设它“全局管用”，尤其在微前端或 iframe 场景下，base 的作用域可能被截断。
