src和href的区别是什么

代码猎人2025-12-10 10:19

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

src（source - 源文件地址）

用途：将外部资源嵌入到当前文档中
行为：浏览器会下载并执行/显示该资源

常用场景 ：

html 复制代码

<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 - 超文本引用）

用途：建立当前文档与外部资源的链接关系
行为：浏览器会建立关联，但不会立即处理

常用场景 ：

html 复制代码

<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>`

实际应用示例

html 复制代码

<!-- 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是"去链接"。