HTML5 中 href, src, url的用法和区别

href   (Hypertext Reference | 超文本引用)

常用标签: <a /> <link />

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

当浏览器解析到这一句的时候会识别该文档为css文件，会下载并且不会停止对当前文档的处理，这也是为什么建议使用link方式来加载css而不是使用@import。

引用和页面关联，是在当前元素和引用资源之间建立联系

 

src    (Source | 资源)

常用标签：<img /> <script /> <iframe / >

表示将引用资源，替换当前元素！

在请求src资源时会将其指向的资源下载并应用到当前文档中，例如JS，IMG，iframe等元素

 

URL (Uniform Resource Locator | 统一资源定位符) [引用W3C官方解释]

一般作为 href 或 src的 值

可能的值为：

绝对路径：指向另一个站点（比如 href="http://www.example.com/index.htm"）

相对路径：指向站点内的某个文件（href="index.htm"）

锚点：指向页面中的锚（href="#top"）

 

小结：

href 出现在<link />和<a />等标签当中，一般作为通过当前元素与超文本引用资源建立联系

src  出现在<script /> <img /> <iframe />等标签中，通过下载引用资源替换当前元素来使用

url  作为href 和 src的值的形式使用，可以使用绝对路径，相对路径，锚点三种方式。

参考文档：

HTML <a> 标签的 href 属性