src与href属性的区别

下面我会详细讲解“src与href属性的区别”。

一、src属性与href属性的定义

1. src属性

src 是 source 的缩写，表示引入外部资源对应的 source（源）地址。通常用于在 HTML 中引入图片、视频等媒体资源、以及 JavaScript 文件等。将资源引入到 HTML 中后，浏览器会根据 src 属性所指定的地址发送 HTTP 请求，获取到资源后渲染到页面上。

2. href属性

href 是 hypertext reference 的缩写，表示建立 HTML 页面与其他网页或资源之间的超链接。通常用于在 HTML 中设置链接，比如页面跳转、下载文件、引入 CSS 文件等。

二、src属性与href属性的区别

1. 用途不同

src 属性用于引入外部资源到当前页面，而 href 属性通常用于在 HTML 中设定链接。

2. 加载顺序不同

通过 src 属性引入的资源，需要在页面加载的时候进行加载；而 href 属性通常是在浏览器解析到对应标签时才进行加载。比如引入样式表或字体文件时，提前加载可以提高页面的渲染速度。

3. 对文档结构的影响不同

src 属性引入的外部资源，会影响整个文档结构的的解析和渲染。比如某个页面中插入了一张图片或视频，由于资源的加载需要时间，页面可能需要等待资源加载完成后才能完成渲染。而 href 属性中引入的外部资源通常只有样式表，不会在页面渲染时对文档结构产生影响。

4. 适用标签不同

通常情况下，src 属性适用于 <img>、<audio>、<video>、<script> 标签，href 属性适用于 <link>、<a> 标签。

5. 两者属性值的类型不同

src 属性值通常是指向外部资源的 URL，而 href 属性值通常是 URL 或文件路径。因此，在使用这两个属性时需要注意其属性值的类型。

下面提供两个实例，来帮助更好地理解 src 与 href 的区别。

三、示例说明

1. 图片的加载

使用 img 标签在 HTML 页面上引入一个图片资源，比如下面的代码：

<img src="https://picsum.photos/id/432/300/200" alt="example image">

其中 src 属性值为图片的 URL，浏览器解析到该标签时会发送 HTTP 请求获取该图片，请求成功后将其渲染到图片标签上。

2. 样式表的引入

使用 link 标签引入一个 CSS 样式表，比如下面的代码：

<link href="style.css" rel="stylesheet">

其中，href 属性指向该 CSS 文件的相对路径，当浏览器解析该标签时，将会异步加载并解析该文件，使页面中的样式表生效。

综上所述，src 与 href 两个属性虽然有许多相似的地方，但用途、加载顺序、对文档结构的影响、适用标签和属性值的类型等方面却有着明显的不同，需要根据实际情况选择合适的属性使用。