url、src、herf的区别

1.url：统一资源定位符

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

结构

基本URL包含协议、服务器名称（IP地址）、路径和文件名，如：“协议://授权/路径?查询”。

完整的、带有授权部分的普通统一资源标识符语法如下：“协议://用户名:密码@子域名.域名.顶级域名:端口号/目录/文件名.文件后缀?参数=值#标志”

第一部分：

协议/模式：告诉浏览器如何处理将要打开的文件。最常用的模式是超文本传输协议（http）

http ------- 超文本传输协议资源

https ------- 用安全套接字层传送的超文本传输协议

ftp ------- 文件传输协议

mailto ------- 电子邮件地址

idap ------- 轻型目录访问协议搜索

第二部分：

文件所在服务器的名称或IP地址，后面是到达这个文件的路径和文件本身的名称。服务器的名称或IP地址后面有时还跟一个冒号和一个端口号。它也可以包含接触服务器必须的用户名称和密码。路径部分包含等级结构的路径定义，一般来说不同部分之间以斜线（/）分隔。询问部分一般用来传送对服务器上的数据库进行动态询问时所需要的参数。

2.href：（HyperText Reference）超文本引用

指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接

3.src：（Source）资源，引用资源代替当前元素

在img、script、iframe中使用

表示从互联网上得到的资源的位置和访问方法，是互联网上标准资源的地址。

4.href 和 src 的区别

使用 href ：a、link

使用 src：img、script

在可替换的元素上使用 src，然而把 href 用于在涉及的文档和外部资源之间建立一个关系

href 指定网络资源的位置，从而在当前元素或当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或关系。浏览器明白当前资源是一个样式表，页面解析不会暂停。这与把css文件内容卸载<style>标签里不同，因此建议使用 link 标签而不是 @import 来把样式导入到 html 文档里

src （Source）属性仅仅是嵌入当前资源到当前文档元素定义的位置。在浏览器下载，编译，执行这个文件之前页面的加载和处理会被暂停。这个过程与把js文件放到 <script> 标签里类似。浏览器暂停加载直到提取和加载图像

href 是引用

src 是引入

区别：

请求资源类型不同

① href 指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的练习

② 在请求 src 资源时会将其指向的资源下载并应用到文档中，如 JavaSctipt 脚本， ming图片

作用结果不同

① href 用于在当前文档和引用资源之间确立联系

② src 用于替换当前内容

浏览器解析方式不同

① href 若在文档中添加，浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理

② src 当浏览器解析到它，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此。类似于将所有资源应用到当前内容。这也是建议把js脚本放到底部而不是头部的原因