在 HTML 中，src和href都是用于引用外部资源的属性，但它们的用途和作用机制有所不同，下面详细介绍它们的区别。
1. 定义和用途
src属性src是source的缩写，主要用于引入将成为当前文档一部分的外部资源，比如图片、脚本、视频等。当浏览器解析到带有src属性的标签时，会暂停对当前文档的解析，直到该资源加载完成，然后将其嵌入到文档中相应的位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>src示例</title>
</head>
<body>
<!-- 引入图片 -->
<img src="example.jpg" alt="示例图片">
<!-- 引入脚本 -->
<script src="example.js"></script>
</body>
</html> href属性
3. 资源的加载方式
4. 常见使用场景
href是hypertext reference的缩写，主要用于建立当前文档与外部资源之间的关联，最常见的用途是创建超链接，如链接到其他网页、样式表等。当浏览器解析到带有href属性的标签时，不会暂停文档的解析，而是会并行地加载所引用的资源。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>href示例</title> <!-- 引入样式表 --> <link rel="stylesheet" href="styles.css"> </head> <body> <!-- 创建超链接 --> <a href="https://www.example.com">访问示例网站</a> </body> </html>2. 对页面解析的影响
src属性- 当浏览器遇到带有
src属性的标签时，会暂停对 HTML 文档的解析，直到该资源加载完成。这是因为src引入的资源通常是文档的必要组成部分，比如脚本文件需要在页面中执行，图片需要显示在页面上。
- 当浏览器遇到带有
href属性- 浏览器在解析到带有
href属性的标签时，会继续解析 HTML 文档，同时并行地加载所引用的资源。例如，在引入外部样式表时，浏览器会继续解析 HTML 结构，而不会等待样式表加载完成。
- 浏览器在解析到带有
src属性src引入的资源会被嵌入到当前文档中，成为文档的一部分。例如，图片会显示在页面上，脚本会在页面中执行。
href属性href建立的是一种关联关系，所引用的资源不会嵌入到当前文档中，而是通过这种关联来实现特定的功能，如样式表用于为页面提供样式，超链接用于跳转到其他页面。
src属性- 图片：
<img src="image.jpg"> - 脚本：
<script src="script.js"></script> - 视频：
<video src="video.mp4"></video> - 音频：
<audio src="audio.mp3"></audio>
- 图片：
href属性- 超链接：
<a href="https://www.example.com">链接文本</a> - 样式表：
<link rel="stylesheet" href="styles.css"> - 书签链接：
<a href="#section1">跳转到章节1</a>
- 超链接：