详解 src 与 href 的区别

src与href 的区别

1. src用于替换当前元素，href用于在当前文档和引用资源之间确立关系。

src-source，指向外部资源位置，指向的内容将会嵌入到文档中当前标签所在位置；
在请求src资源时会将其指向的资源下载并应用到文档内部，例如js脚本，img图片和frame等元素。

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

当浏览器解析到元素时，会暂停其他资源的下载和处理，直到该资源，编译，执行完毕，图片和框架也是如此，类似将所指向资源嵌入标签内，这也是为什么js放在底部而不是头部。

2. href - Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档之间的链接，如果我们在文档中添加

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

href 目的不是为了引用资源，而是为了建立联系，让当前标签能够链接到目标地址。

那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

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

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

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

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

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

关于src和href的一些扩展：

1. 如果从单独的css文件中 引入某个资源（建立联系） 那么资源的路径要相对于当前css文件的地址引入 因为css在html文档中是以href引入的 如果还是相对于html文档的路径位置引入 会找不到资源
2. 如果从单独的js文件中 指向某个资源 那么资源的路径要相对于当前html文件的地址引入 因为js在html文档中是以src引入的 js文件会下载到html文件中 所以可以相对于当前html文件地址填写资源路径