前端学习中src、href和url分别是什么以及他们的区别
一、url
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用于在当前文档和引用资源之间建立联系。
