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

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

一、属性概述

1.1 src属性

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

常见的使用场景包括：

• 引入JavaScript文件
• 加载图片
• 嵌入音频或视频文件

1.2 href属性

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

常见的使用场景包括：

• 定义页面内的导航链接
• 指向外部资源
• 引用样式表（CSS）

二、用法示例

2.1 src的使用示例

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

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

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

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

2.2 href的使用示例

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

<!-- 创建一个超链接 -->
<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>时才会触发资源请求，且不会阻止其他资源的加载解析。