src和href的区别是什么

src 和 href 是 HTML 中两个重要的属性，它们的核心区别在于：

src（source - 源文件地址）

• 用途 ：将外部资源嵌入到当前文档中

• 行为 ：浏览器会下载并执行/显示该资源

• 常用场景 ：

  <script src="app.js"></script>    <!-- 加载并执行JS -->
  <img src="image.jpg">             <!-- 加载并显示图片 -->
  <iframe src="page.html">          <!-- 加载并嵌入页面 -->
  <audio src="music.mp3">           <!-- 加载音频 -->
  <video src="video.mp4">           <!-- 加载视频 -->

href（hypertext reference - 超文本引用）

• 用途 ：建立当前文档与外部资源的链接关系

• 行为 ：浏览器会建立关联，但不会立即处理

• 常用场景 ：

  <a href="page.html">链接</a>      <!-- 导航链接 -->
  <link href="style.css" rel="stylesheet"> <!-- 关联样式表 -->
  <link href="icon.ico" rel="icon"> <!-- 关联网站图标 -->

关键区别对比

特性	src	href
含义	嵌入资源	引用资源
加载时机	立即加载（除非有延迟属性）	按需加载
阻塞行为	可能阻塞页面渲染	不阻塞页面渲染
元素类型	可替换元素（替换内容）	链接元素（建立关系）
示例元素	<script>, <img>, <iframe>	<a>, <link>, <base>

实际应用示例

<!-- src：嵌入JS文件，浏览器会立即下载并执行 -->
<script src="script.js"></script>

<!-- href：链接到CSS，浏览器会解析但不立即执行 -->
<link href="styles.css" rel="stylesheet">

<!-- 错误用法示例 -->
<script href="script.js"></script>  <!-- 错误！script应该用src -->
<a src="page.html">点击</a>         <!-- 错误！a标签应该用href -->

记忆技巧

• src = "source"：表示这是内容的"源头"，需要取过来用
• href = "reference"：表示这是"参考资料"，只是建立联系

简单说：src是"拿来用"，href是"去链接"。