跳到主要内容

src 与 href 的区别？

面试速答（30 秒版 TL;DR）​

  • src（source）：把外部资源“嵌入/引入为当前元素内容”。浏览器通常会发起请求并把返回内容用于渲染/执行（如图片显示、脚本执行、iframe 加载）。
  • href（hypertext reference）：声明一个“引用/关联/可跳转”的地址。它表达的是“关系或导航”，是否会立刻请求取决于元素/rel（如 <a href> 通常点击才导航；<link rel="stylesheet" href> 会立即拉取 CSS 并应用）。

核心区别（一句话 + 对照）​

一句话记忆：src 供“用”，href 供“指”。

维度srchref
语义资源是该元素的“内容来源”资源是该元素“指向/关联”的目标
典型标签img、script、iframe、audio/video/sourcea、link、base
浏览器行为（常见）多数场景会立即请求并消费资源取决于场景：可能仅作为跳转地址，也可能作为依赖被加载（如样式表）

典型例子​

<!-- src：资源会被“用来显示/执行/加载” -->
<img src="/logo.png" alt="logo" />
<script src="/app.js"></script>
<iframe src="https://example.com"></iframe>

<!-- href：资源是“指向/关联/跳转”的目标 -->
<a href="https://example.com">去 example.com</a>
<link rel="stylesheet" href="/styles.css" />

易错点（面试常追问）​

  • 不要简单说“src 会下载、href 不会”：<link rel="stylesheet" href>、<link rel="preload" href> 等同样会触发加载；而 <a href> 通常不主动下载目标页面。
  • base 的影响：<base href="..."> 会改变文档内相对 URL 的解析基准（包括 src、href 等）。