src 和 href 都是 HTML 里面非常常见的属性，核心差别就是加载资源的行为不一样，src 是引入外部资源，浏览器会下载并且执行这个资源，把资源内容嵌入到当前页面里面，href 是建立超链接或者引用关系，主要用来跳转页面，或者关联外部样式表，不会直接把资源内容替换进当前标签内部，很多前端初学者最容易混淆，尤其是 link 标签用 href，script 标签用 src，经常写反导致样式或者脚本失效，src 一般用在 img script iframe video audio 这类标签，href 一般用在 a 标签 link 标签，理解二者本质区别，要抓住一个关键点，src 是替换式加载，浏览器遇到 src 的时候，会暂停后续解析，优先去请求这个外部资源，资源加载完成之后才继续往下解析页面，href 更多是关联引用，link 标签引入 css 的时候，浏览器并行加载样式，不会阻塞页面主体渲染，a 标签的 href 只是记录跳转地址，用户点击之后才会发起页面跳转，不会自动加载，写前端代码的时候，如果把 script 的 src 写成 href，浏览器不会识别，脚本就不会执行，如果 link 标签写成 src，样式表也不会生效，这个是入门高频错误。

src 和 href 核心对照表

标签用法详细说明

src 典型用法

img 标签 src 填写图片地址，浏览器根据 src 请求图片，把图片渲染显示在页面位置

script 标签 src 填写 js 文件地址，浏览器下载这个 js 文件，并且立刻执行代码

iframe 标签 src 填写网页地址，在当前页面内嵌加载另一个网页

href 典型用法

a 标签 href 填写目标网址，它只是保存跳转地址，用户点击这个链接，浏览器才跳转到新页面

link 标签 href 填写 css 文件地址，建立样式表关联，浏览器下载 css 并且应用到当前页面

link 标签还可以通过 href 引入 favicon 网站图标

深度差异要点

第一 资源加载触发时机不一样，src 是标签解析到的时候就自动发起请求，href 里面 a 标签是被动触发，只有用户点击才跳转，link 标签虽然解析的时候自动请求 css，但是它的本质还是引用关系，不是把 css 内容嵌入标签内部。

第二 执行行为不一样，src 加载 script 之后会执行代码，加载 img 之后会渲染图片，href 的 link 只是应用样式，不会执行脚本，a 标签不会自动加载目标页面。

第三 缓存机制，src 和 href 的资源都可以被浏览器缓存，但是因为标签行为不同，缓存命中之后表现有区别，script 的 src 缓存之后再次打开页面不会重复下载 js，link 的 href 缓存 css 之后也不会重复请求样式文件。

第四 相对路径写法，src 和 href 都支持相对路径 绝对路径，路径写错之后，src 会报资源加载失败，图片空白或者 js 报错，href 里面 a 标签会跳转 404，link 会样式失效。

常见错误场景

错误 1 script 标签写 href，脚本不会加载执行，很多新手以为 href 可以代替 src

错误 2 img 标签写 href，图片不会显示，因为 img 标签本身不识别 href 属性

错误 3 认为 link 的 href 和 script 的 src 加载逻辑一样，误以为 css 加载会阻塞页面渲染，实际上 css 是阻塞渲染，但是不会阻塞 DOM 解析，和 script 的 src 阻塞 DOM 解析机制不同

错误 4 把 a 标签 href 理解成自动跳转，href 只是地址，必须用户点击或者 js 触发跳转才会打开目标页面

综合来看，src 代表引入资源并且嵌入执行渲染，href 代表超文本引用，主要用于跳转和外部文档关联，src 多用于 img script 这类需要把外部内容放进页面的标签，href 多用于 a link 这类跳转和样式关联标签，记住这个核心逻辑，写 HTML 的时候就不会把两个属性写混。

【常见问题】

问题 1 src 和 href 哪个是 script 标签使用的属性

回答 1 src 是 script 标签使用的属性，src 用来引入外部 js 文件，href 不能给 script 标签使用，使用 href 的话 script 不会加载执行，区分 src 和 href 是前端基础考点。

问题 2 src 和 href 里面 link 标签是用哪一个

回答 1 link 标签使用 href 属性，link 依靠 href 关联外部 css 样式表，link 标签不支持 src 属性，这也是 src 和 href 非常经典的区分案例。

问题 3 src 和 href 加载资源都会自动请求吗

回答 1 src 标签解析的时候就自动请求资源，href 里面 a 标签不会自动请求，只有点击才跳转，link 标签的 href 解析时会自动请求 css，所以 src 和 href 的自动加载触发逻辑并不完全相同。

问题 4 src 和 href 可以互相替换吗

回答 1 src 和 href 不可以互相替换，src 和 href 对应的标签支持属性不一样，强行替换会出现资源加载失败，img 用 href 或者 script 用 href 都无法正常工作。

【免责申明】

本文内容仅作为 src 和 href 有什么不同的前端学习参考，不同浏览器对资源加载阻塞的细节实现存在细微差异，正式项目开发请参考 HTML 官方标准文档，因属性误用造成页面加载异常，由开发者自行承担。