URL和URI傻傻分不清，看这一篇就够了

说文解字

URI（Uniform Resource Identifier）统一资源标识符
URL（Uniform Resource Locator）统一资源定位符

按照RFC2396标准对名字进行解释如下：

1. Uniform：规定统一的格式可方便处理多种不同类型的资源，而不用根据上下文环境来识别资源指定的访问方式。另外，加入新增的协议方案（如http:或 ftp:）也更容易。
2. Resource：资源的定义是“可标识的任何东西”。除了文档文件、图像或服务（例如当天的天气预报）等能够区别于其他类型的，全都可作为资源。另外，资源不仅可以是单一的，也可以是多数的集合体。
3. Identifier：表示可标识的对象。也称为标识符。

那么，URI的作用即为一条用来标识抽象或物理资源的紧凑字符串，通过这个标识可以访问一个唯一的资源
通过标识符我们可以辨认资源对象，但如何在茫茫网络资源中找到并访问它？

URL

URL是一串通过位置来标识资源的字符串，是目前网络资源的主要访问机制的。
一个标准的URL必须包括：protocal、host、port、path、parameter、anchor。
URL可以看作URI的一种实现方式，不仅唯一标识资源，而且还提供了定位该资源的信息。

举个例子：
生活中，要寻找一个人，可以通过身份证号去查找，身份证号就相当于URI。但知道这个人的具体住址，也可以通过这个地址去找到他，换句话说，这个地址就标识了这个人，那么这条地址就相当于URL。

URL结构

完整的URL由这几个部分构成：scheme://host:port/path?query#hash

• scheme：通信协议，常用的有http、https、ftp、mailto、ws等。
• host：主机域名或IP地址。
• port：端口号，可选。省略时使用协议的默认端口，如http默认端口为80。
• path：路径由零或多个"/"符号隔开的字符串组成，一般用来表示主机上的一个目录或文件地址。
• query：查询，可选。用于传递参数，可有多个参数，用"&“符号隔开，每个参数的名和值用”="符号隔开。
• hash：信息片断字符串，也称为锚点。用于指定网络资源中的片断。

比如URL如下，https://www.baidu.com/index.html?id=1&page=1#name1

用javascript获得其中的各个部分如下：
window.location.href：整个URl字符串，返回值：“https://www.baidu.com/index.html?id=1&page=1#name1”。
window.location.protocol：协议部分，返回值：“https:”。
window.location.host：主机部分。返回值：“www.baidu.com”。
window.location.port：端口部分。如果采用了协议默认的端口，则返回空字符。本例返回值：“”。
window.location.pathname：路径部分。返回值：“/index.html”。
window.location.search：查询(参数)部分。返回值：“?id=1&page=1”。
window.location.hash：锚点。返回值：“#name1”。

参考

URI和URL的概念和区别
URL结构分解