前端学习中src、href和url分别是什么以及他们的区别

前端学习中src、href和url分别是什么以及他们的区别
⼀、url
（Uniform Resource Locator）统⼀资源定位符
1、绝对URL（absolute URL）
显⽰⽂件的完整路径，这意味着绝对URL本⾝所在的位置与被引⽤的实际⽂件的位置五关。

2、相对URL（relative URL）
以包含URL本⾝的⽂件夹的位置为参考点，描述⽬标⽂件夹的位置。

如果⽬标⽂件与当前页⾯（也就是包含URL的页⾯）在同⼀个⽬录，那么这个⽂件的相对URL仅仅是⽂件名和扩展名，如果⽬标⽂件在当前⽬录的⼦⽬录中，那么它的相对URL是⼦⽬录名，后⾯是斜杠，然后是⽬标⽂件的⽂件名和扩展名。

⼀般来说，对于同⼀服务器上的⽂件，应该总是使⽤相对URL，他们更容易输⼊，⽽且在将页⾯从本地系统转移到服务器上时更加⽅便，只要每个⽂件的相对位置保持不变，链接⼏句仍然是有效的。

3、举例说明
“.”：代表⽬前所在的⽬录，相对路径。

“..”：代表上⼀层的⽬录，相对路径。

“../../”：代表的是上⼀层⽬录的上⼀层⽬录，相对路径。

“/”：代表根⽬录，绝对路径。

“D:/aaa/”：代表根⽬录，绝对路径。

关于url的特性很清晰，⽤于资源定位，主要是⽂件定位，发⽣混淆的⼀般是href和src.
⼆、href
(Hypertext Reference)超⽂本引⽤，指向⽹络资源所在位置，建⽴和当前元素（锚点）或当前⽂档（链接）之间的链接。

三、src
(Source)资源，引⽤资源替代当前元素，在img、script、iframe中使⽤。

表⽰从互联⽹上得到的资源的位置和访问⽅法，是互联⽹上标准资源的地址。

互联⽹上每⼀个⽂件都有⼀个唯⼀的URL，它包含的信息指出⽂件的位置以及浏览器应该怎么处理它。

四、href与src区别
使⽤href：a、link
使⽤src：img、script
href和src有区别的，且不能相互替换的。

⼀般来说，在可替换的元素上使⽤src，然⽽把href⽤于在涉及的⽂档和外部资源之间建⽴⼀个关系。

href (Hypertext Reference)指定⽹络资源的位置，从⽽在当前元素或者当前⽂档和由当前属性定义的需要的锚点或资源之间定义⼀个链接或者关系。

浏览器明⽩当前资源是⼀个样式表，页⾯解析不会暂停（由于浏览器需要样式规则去画或者渲染页⾯，渲染过程可能会被被暂停）。

这与把css⽂件内容写在<style>标签⾥不相同，因此建议使⽤link标签⽽不是@import来吧样式表导⼊到html⽂档⾥。

src (Source)属性仅仅嵌⼊当前资源到当前⽂档元素定义的位置。

在浏览器下载，编译，执⾏这个⽂件之前页⾯的加载和处理会被暂停。

这个过程与把js⽂件放到<script>标签⾥类似。

这也是建议把JS⽂件放到底部加载的原因。

当然，img标签页与此类似。

浏览器暂停加载直到提取和加载图像。

差异⼀般表现在如下⽅⾯：
请求资源类型不同
（1）href 指向⽹络资源所在位置，建⽴和当前元素（锚点）或当前⽂档（链接）之间的联系。

（2）在请求 src 资源时会将其指向的资源下载并应⽤到⽂档中，⽐如 JavaScript 脚本，img 图⽚；
作⽤结果不同
（1）href ⽤于在当前⽂档和引⽤资源之间确⽴联系；
（2）src ⽤于替换当前内容；
浏览器解析⽅式不同
（1）若在⽂档中添加，浏览器会识别该⽂档为 CSS ⽂件，就会并⾏下载资源并且不会停⽌对当前⽂档的处理。

这也是为什么建议使⽤ link ⽅式加载 CSS，⽽不是使⽤ @import ⽅式。

（2）当浏览器解析到，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，图⽚和框架等也如此，类似于将所指向资源应⽤到当前内容。

这也是为什么建议把 js 脚本放在底部⽽不是头部的原因。

五、总结
src指向的内容会嵌⼊到⽂档中当前标签所在的位置。

常⽤的有：img、script、iframe。

href是Hypertext Reference的缩写，表⽰超⽂本引⽤。

⽤来建⽴当前元素和⽂档之间的链接。

常⽤的有：link、a。

总结: src⽤于替换当前元素(⽐如：引⼊⼀张图⽚)；href⽤于在当前⽂档和引⽤资源之间建⽴联系。