src和herf都是引用外部的资源。
一、核心区别对比表
| src | href | |
|---|---|---|
| 全称 | source（资源来源） | hypertext reference（超文本引用） |
| 作用 | 替换当前元素内容 | 建立关联到外部资源 |
| 加载 | 同步加载（阻塞页面渲染） | 异步加载（不阻塞） |
| 场景 | <img> <script> <iframe> | <a> <link> |
| 示例 | <script src="app.js"></script> | <link href="style.css"> |
二、代码示例理解
<!-- 使用src的典型场景 -->
<img src="photo.jpg"> <!-- 图片会直接显示在当前位置 -->
<script src="app.js"></script> <!-- 会立即下载执行该JS文件 -->
<!-- 使用href的典型场景 -->
<a href="page.html">跳转</a> <!-- 点击才会加载新页面 -->
<link href="style.css" rel="stylesheet"> <!-- 异步加载CSS -->
三、阻塞原理演示
<!-- 错误用法：script放在head使用src会阻塞渲染 -->
<head>
<script src="big-file.js"></script> <!-- 页面会卡住直到JS加载完成 -->
</head>
<!-- 正确用法：CSS用href异步加载 -->
<head>
<link href="style.css" rel="stylesheet"> <!-- 不阻塞，页面继续解析 -->
</head>
四、易错场景提醒
<!-- 错误：link标签用src -->
<link src="style.css"> ❌ 应该用href
<!-- 危险：img标签用href -->
<img href="photo.jpg"> ❌ 应该用src（虽然不报错但无效）
<!-- 特殊：iframe同时使用 -->
<iframe src="page.html"></iframe> ✅ 正确用法
五、记忆口诀
"src替换内容会阻塞，href关联异步走"
