src与href的区别

src与href的区别

在 HTML 中，src（Source）和 href（Hypertext Reference）是两个常见的属性，但它们的用途和行为有本质区别：

1. 核心定义

• src 表示 “引入资源”，用于替换当前元素的内容或直接嵌入外部资源。 常见场景：<script>、<img>、<iframe>、<audio>、<video>。

  <script src="app.js"></script>  <!-- 加载并执行 JS -->
  <img src="image.jpg">          <!-- 加载并显示图片 -->
  

• href 表示 “建立关联”，用于定义当前文档与外部资源的链接关系。 常见场景：<a>、<link>、<area>。

  <a href="page.html">链接</a>     <!-- 跳转到其他页面 -->
  <link href="style.css" rel="stylesheet"> <!-- 关联 CSS 文件 -->
  

2. 关键区别

特性	src	href
作用	直接嵌入资源，替换当前元素内容	建立关联，不替换当前内容
加载行为	阻塞性加载（如 JS 会阻塞 HTML 解析）	非阻塞性加载（如 CSS 并行加载）
语义	资源是当前文档的一部分	资源与当前文档是关联关系
典型标签	<script>、<img>、<iframe>	<a>、<link>、<area>

3. 具体场景分析

(1) <script> 标签

• 使用 src 引入外部 JS 文件，文件内容会替代标签内的代码：

  <!-- 正确 -->
  <script src="app.js"></script>
  
  <!-- 错误：同时写 src 和内部代码时，内部代码会被忽略 -->
  <script src="app.js">
    console.log("这段代码不会执行！");
  </script>
  

(2) <link> 标签

• 使用 href 关联 CSS 文件，浏览器会加载但不会替换标签本身：

  <link href="style.css" rel="stylesheet">
  

(3) <a> 标签

• 使用 href 定义超链接，点击后跳转到目标 URL：

  <a href="https://example.com">访问网站</a>
  

(4) <img> 标签

• 使用 src 加载图片资源，图片会替代 <img> 标签的位置：

  <img src="photo.jpg" alt="示例图片">
  

4. 加载行为差异

• src 的阻塞性： 浏览器遇到 src 属性时会暂停解析 HTML，直到资源加载并执行完成（如 JS 文件）。

  <!-- 页面会等待 app.js 加载执行完成后，再继续渲染 -->
  <script src="app.js"></script>
  

• href 的非阻塞性： 浏览器遇到 href 属性时会并行加载资源，不会阻塞 HTML 解析（如 CSS 文件）。

  <!-- 页面继续渲染，同时加载 style.css -->
  <link href="style.css" rel="stylesheet">
  

5. 常见误区

(1) 混淆 <link> 和 <script>

• 错误：

  <link src="style.css"> <!-- 应用 href，而非 src -->
  <script href="app.js"></script> <!-- 应用 src，而非 href -->
  

(2) 误用 <a> 标签的 src

• 错误：

  <a src="page.html">点击</a> <!-- 应用 href -->
  

总结

场景	使用 src	使用 href
资源类型	直接嵌入内容（JS、图片、框架等）	关联外部资源（CSS、超链接等）
是否替换元素内容	是	否
加载行为	阻塞	非阻塞
典型标签	<script>、<img>、<iframe>	<a>、<link>、<area>

简单记忆：

• src 是 “拿来用”（替换当前内容），如脚本、图片。
• href 是 “指向它”（建立关联），如超链接、样式表。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github