src用于嵌入资源（如img、script），href用于引用链接（如a、link）；src默认阻塞html解析，href一般不阻塞（css除外）；路径均以html文档为基准，但base标签同时影响二者；src失败触发onerror，href失败常静默。
src 是“我需要它”，href 是“它在那里”——用错一个，轻则资源不加载，重则脚本不执行、图片不显示、样式全失效。
哪些标签只能用 src，哪些只能用 href
浏览器对这两个属性的校验是硬性的，不是“建议”，而是“不认就不干活”：
-
<img>、<script></script>、<iframe></iframe>、<video></video>、<audio></audio>—— 只接受src；写href会被完全忽略（比如<script href="app.js"></script>不会加载也不报错，只是静默失效） -
<a></a>、<link>、<base>、<area>—— 只接受href；<link src="style.css">是非法写法，现代浏览器直接无视 -
<input type="image">用src（它是可点击的图片按钮，本质是嵌入图像）；<button></button>不能用src或href，得靠 CSS 背景图或内联 SVG
浏览器加载时是否阻塞 HTML 解析
这是影响首屏性能的关键差异，不是“有没有加载”，而是“什么时候加载”：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
src：默认阻塞解析。例如<script src="init.js"></script>出现在，浏览器会停在那儿等 JS 下载、解析、执行完，才继续往下扫 DOM -
href：一般不阻塞（<link rel="stylesheet">是例外）。CSS 文件虽用href，但浏览器知道它影响渲染，所以会同步加载并阻塞渲染（但不阻塞 HTML 解析），而<a href="/about"></a>完全不触发任何加载，直到用户点击 - 想让
src不阻塞？加async或defer（仅限<script></script>）；想让href提前加载？用<link rel="preload" href="font.woff2" as="font">
路径解析规则其实不一样
别以为写 ./css/main.css 和 ./js/app.js 就万事大吉——它们的“当前目录”起点可能不同：
-
src路径始终以**当前 HTML 文档 URL** 为基准解析（除非有<base href>） -
href路径也以当前文档为基准，但<base href>会同时影响所有href和src（包括<img src>和<a href></a>），这点容易被忽略 - 如果用了
data:或blob:协议，src支持（如<img src="data:image/png,...">），href在<a></a>中支持，在<link>中多数浏览器不支持data:样式表
加载失败时的行为和调试线索
出问题时，错误表现和排查方式完全不同：
-
src失败会触发元素自身的onerror事件：<img src="404.jpg" onerror="this.style.display='none'">；控制台通常报GET http://.../404.jpg net::ERR_HTTP_RESPONSE_CODE -
href失败往往“无声无息”：<link href="missing.css" rel="stylesheet">加载 404，页面没样式但控制台可能只有一条警告，甚至没有；得靠 Network 面板查状态码，或监听document.styleSheets是否为空 -
<a href="broken.html"></a>点击后才暴露问题，且错误发生在新页面，和原页面无关——这导致很多开发者误以为“链接没问题”，其实是目标页挂了
最常被绕开的细节是：<link rel="icon"> 必须用 href，但浏览器会主动发起请求，即使你没点它；而 <script src></script> 的 onload 和 onerror 是可靠的钩子，<link href> 的加载完成却没法直接监听（得轮询 sheet.cssRules 或用 document.fonts.load 间接判断）。这些边界行为，不试一次真不知道。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
