src 和 href 是 HTML 中两个重要的属性，它们有显著区别：
src（source 的缩写）
含义：嵌入资源到当前文档
特点：
- 加载的资源会替代当前标签的内容
- 浏览器会暂停解析直到该资源加载执行完成
- 用于引入内容
常见用途：
<img src="image.jpg"> <!-- 嵌入图片 -->
<script src="script.js"></script> <!-- 嵌入JS代码 -->
<iframe src="page.html"></iframe> <!-- 嵌入框架内容 -->
<audio src="audio.mp3"></audio> <!-- 嵌入音频 -->
<video src="video.mp4"></video> <!-- 嵌入视频 -->
href（hypertext reference 的缩写）
含义：建立文档与外部资源的链接关系
特点：
- 创建的是关联关系，不是替换
- 资源并行加载，不会阻塞页面解析
- 用于建立链接
常见用途：
<a href="page.html">链接</a> <!-- 超链接 -->
<link href="style.css"> <!-- 链接CSS -->
<link href="icon.ico" rel="icon"> <!-- 网站图标 -->
<base href="https://example.com/"> <!-- 基准URL -->
核心区别对比
| 特性 | src | href |
|---|---|---|
| 含义 | 嵌入内容 | 建立链接 |
| 加载行为 | 阻塞式（某些情况） | 非阻塞式 |
| 作用 | 替代当前元素 | 引用外部资源 |
| 元素示例 | img, script, iframe | a, link, base |
实际例子理解
<!-- src：把JS代码嵌入到当前页面 -->
<script src="app.js"></script>
<!-- 浏览器会下载并执行app.js -->
<!-- href：链接到CSS文件 -->
<link rel="stylesheet" href="style.css">
<!-- 浏览器会下载style.css并应用到页面 -->
记忆技巧
- src = Source（来源）→ "把内容从那里拿过来放在这里"
- href = Hypertext Reference（超文本引用）→ "这里有个链接指向那里"
简单总结：src是"拿来用"，href是"指向它"。
