src 与 href 的区别

HTML 中 src 和 href 属性的用途和行为差异

问题

HTML 中 src 和 href 属性有什么区别？

解答

href (Hypertext Reference)

href 用于建立当前文档与外部资源的链接关系，资源不会嵌入到文档中。

<!-- 链接到外部样式表 -->
<link rel="stylesheet" href="style.css">

<!-- 超链接 -->
<a href="https://example.com">点击跳转</a>

浏览器遇到 href 时会并行下载资源，不阻塞页面解析。

src (Source)

src 用于将外部资源嵌入到当前文档中，资源会成为文档的一部分。

<!-- 嵌入脚本 -->
<script src="app.js"></script>

<!-- 嵌入图片 -->
<img src="logo.png" alt="logo">

<!-- 嵌入 iframe -->
<iframe src="page.html"></iframe>

浏览器遇到 src 时会暂停解析，下载并执行/渲染资源（<script> 会阻塞，<img> 不阻塞）。

对比示例

<!DOCTYPE html>
<html>
<head>
  <!-- href: 并行加载，不阻塞解析 -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- src: 下载并嵌入图片 -->
  <img src="photo.jpg" alt="photo">
  
  <!-- src: 下载、解析、执行，会阻塞 -->
  <script src="app.js"></script>
  
  <!-- href: 只是建立链接关系 -->
  <a href="other.html">其他页面</a>
</body>
</html>

关键点

href 表示引用，建立链接关系；src 表示嵌入，资源成为文档一部分
href 用于 <a>、<link>；src 用于 <script>、<img>、<iframe>、<video> 等
<link href> 并行加载不阻塞；<script src> 会阻塞页面解析
<script> 放在 </body> 前或使用 async/defer 可避免阻塞