# src 和 href 的区别

# href 属性

用途: href 属性用于指定网络资源的位置，它建立了当前元素或内容与目标 URL 之间的链接。当用户点击带有href 属性的元素时，浏览器会导航到该属性指定的 URL。href 属性通常用于 <a>（锚点）、<link> 和<base> 标签。

<link href="reset.css" rel=”stylesheet“/>

行为: href 属性的存在不会导致页面的加载行为暂停。对于 <link> 标签，浏览器会并行下载 href 属性指定的资源，这些资源通常是 CSS 文件，它们不会阻塞文档的解析（尽管它们可能会阻塞文档的渲染）。

用途：src 属性用于在 HTML 文档中包含或嵌入某个资源。它告诉浏览器在哪里可以找到这个资源，并将其下载下来，然后将其包含或嵌入到当前文档中。常见的使用 src 属性的标签包括 <img>、<script>、<iframe>、<video> 和 <audio>。

<script src="script.js"></script>

行为：当 HTML 解析器遇到使用 src 属性的元素时，它会暂停其他资源的下载和处理，直到指定的资源被下载和处理（特别是在 <script> 标签的情况下）。这意味着使用 src 属性的资源对页面加载有直接影响。

src 用于嵌入资源，使其成为文档的一部分，如图片、视频、脚本等。使用 src 时，资源的加载会影响到页面的加载时间。

href 用于建立当前文档和引用资源之间的链接，通常用于锚点、外部样式表等。href 的使用不会直接影响到页面的加载时间（除了CSS资源可能会影响渲染）。

简而言之，src 是为了将资源下载并嵌入到页面中，而 href 是为了建立对其他资源的链接或引用。

两者都是外部引用 CSS 的方式，但是存在一定的区别：

（1）link 是 XHTML 标签，除了能够加载 CSS，还可以定义 RSS 等其他事务；而 @import 属于 CSS 范畴，只可以加载 CSS。

（2）link 引用 CSS 时，在页面载入时同时加载；@import 需要页面完全载入以后再加载。

（3）link 是 XHTML 标签，无兼容问题；@import 则是在 CSS2.1 提出的，低版本的浏览器不支持。

（4）link 支持使用 Javascript 控制 DOM 改变样式；而 @import 不支持。