src 和 href
HTML 中 src 与 href 的语义差异，以及它们对资源加载和页面行为的影响。
#tech / dev / frontend
#type / concept
#status / growing
[!info] related notes
- 所属 MOC: 前端基础 MOC
- 相关概念: html, html-js-scripts, browser-rendering-process
- 面试问法: src-vs-href-interview-question
src 和 href
src 和 href 都会指向一个资源，但它们表达的关系不同。
一句话定义
src表示“把这个资源拿来用”href表示“把当前文档和这个资源建立引用关系”
src 的典型场景
src 常见于：
<script src="..."><img src="..."><iframe src="..."><audio src="...">
它更强调把外部资源嵌入到当前文档或执行环境中。
href 的典型场景
href 常见于：
<a href="..."><link href="...">
它更强调建立跳转或关联关系，比如跳到另一个页面，或者告诉浏览器当前文档依赖一份样式资源。
核心差异
语义不同
src更像“把资源本体引进来”href更像“声明一个引用关系”
常见行为不同
<img src>会直接请求图片并嵌入页面<script src>会下载并执行脚本<a href>本身不会在解析时把目标页面嵌进当前页面，它主要用于跳转<link href>常用于加载样式、图标等关联资源
对页面的影响不同
有些 src 资源会直接参与当前页面渲染或执行流程，比如脚本和图片；href 更偏向建立导航或资源引用关系。
最容易混淆的点
<link href>也会触发资源请求，但它的语义仍然是“当前文档引用这个资源”<script href>不成立，因为脚本标签需要的是脚本来源，不是超链接关系
最短记忆方式
src 是把资源拿来用，href 是和资源建立链接。
面试要点
来自 src-vs-href-interview-question 的面试视角整理。
一句话回答
src 表示把资源本体引入当前文档或执行环境，href 表示当前文档和某个资源建立引用或跳转关系。
最稳的回答主线
src
- 常见于
script、img、iframe - 更像“把资源拿进来直接使用”
href
- 常见于
a、link - 更像“建立链接或关联关系”
面试里可以顺手补的一句
比如 <script src> 会直接影响脚本加载和执行，<a href> 更多是导航语义，<link href> 更多是资源关联语义。
最短记忆方式
src 引资源，href 建链接。