前端知识速记--HTML篇：src和href

src（source的缩写）属性用于指定外部资源的来源，通常用于嵌入媒体内容或脚本文件。它告知浏览器去哪个地址加载相应的资源。使用src时，浏览器在解析到该元素时，会暂停其他资源的加载和处理，直到该资源加载完成。它会将资源内容嵌入到当前标签所在的位置，将其指向的资源下载应用到文档内。

常见的使用场景包括：

href（hypertext reference的缩写）属性则是用来定义链接的目标位置，主要用于锚点或超链接，让用户能够点击后跳转至指定的URL。与src不同，使用href时，当浏览器识别到它指向的位置，将其下载的时候不会阻止其他资源的加载解析。

常见的使用场景包括：

以下是使用src属性引入JavaScript和图片的例子：

html 复制代码

<!-- 引入JavaScript文件 -->
<script src="script.js"></script>

<!-- 加载图片 -->
<img src="image.jpg" alt="示例图片">

在上述示例中，script.js和image.jpg是外部资源，浏览器会根据src属性来加载相应的文件。

href属性在定义链接和样式表中非常常见，如下所示：

html 复制代码

<!-- 创建一个超链接 -->
<a href="https://www.example.com">访问示例网站</a>

<!-- 引用外部CSS样式表 -->
<link rel="stylesheet" href="styles.css">

在这个示例中，href指向了要访问的外部地址或样式表文件，用户点击链接后会被引导到指定网址。

尽管src和href在表面上看似相似，它们在功能和使用场景上却有显著的区别：

功能：
- src用于直接加载和嵌入资源。
- href用于建立导航链接，指向其他网页或资源。
上下文：
- src通常出现在脚本、图片、音频、视频等标签中。
- href通常出现在<a>标签和<link>标签中。
影响：
- 使用src时，浏览器在文档解析时会立刻发起资源请求，并暂停其他资源的加载，直到该资源加载完成。
- 使用href时，只有在用户点击链接或加载相关的<link>时才会触发资源请求，且不会阻止其他资源的加载解析。