URL(Uniform Resource Locator) ，统一资源定位符，能够对因特网的资源进行定位。

URL一般有四部分组成： <协议>://<主机>:<端口>/<路径>

现在最常用的<协议>为http协议。

<主机>是指主机在因特网上的域名。

http协议的默认<端口>为80（可以省略）。

<路径>是指要活的的文件的路径。
超文本传输协议（HTTP）的统一资源定位符将从因特网获取信息的五个基本元素包括在一个简单的地址中：
1.传送协议。

2.服务器。

3.端口号。（以数字方式表示，若为HTTP的默认值“:80”可省略）

4.路径。（以“/”字符区别路径中的每一个目录名称）

5.查询。（GET模式的窗体参数，以“?”字符为起点，每个参数以“&”隔开，再以“=”分开参数名称与数据，通常以UTF8的URL编码，避开字符冲突的问题）

典型的统一资源定位符看上去是这样的：
(带方括号[]的为可选项)：

protocol:// hostname[:port] / path / [;parameters][?query]#fragment

URL 的组成部分

URL（统一资源定位符）是 URI（通用资源标识）的特定类型。URL 通常在因特网上查找现有资源。当 Web 客户机向服务器发出对资源的请求时，使用 URL。

URI 和 URL 的概念由因特网协会和 IETF（因特网工程任务组织）请求评论文档 RFC 2396 统一资源标识（URI）：一般语法定义（http://www.ietf.org/rfc/rfc2396.txt）。简要地说，URI 是定义为识别资源的任何一个字符串。URL 定义为按资源的位置或 用户访问它的方式，而不是按资源的名称或其他属性来识别资源的那些 URI。 

HTTP（HTTPS）的 URL 通常由三或四个组成部分组成：

规则。规则识别用于访问因特网上的资源的协议。它可以是 HTTP（不带 SSL）或 HTTPS（带 SSL）。
主机。主机名识别拥有资源的主机。例如，www.example.com。服务器在主机的名称中提供服务，但主机和服务器之间没有一对一映射。主机名说明关于主机名的更多信息。

主机名也可以后跟端口号。端口号说明关于这方面的更多内容。通常从 URL 省略服务的常用端口号。因为多数服务器将熟知端口号用于 HTTP 和 HTTPS，所以多数 HTTP URL 省略端口号。
路径。路径识别主机中 Web 客户机要访问的特定资源。例如，/software/htp/cics/index.html。
查询字符串。如果使用查询字符串，那么它跟随路径部分，并且提供一串字符串，资源使用这些字符串可以完成某些操作（例如，作为用于搜索的参数或用于处理的数据）。 查询字符串通常是一串名称和值对，例如，q=bluebird。


URL 的规则和主机部分不定义为区分大小写，但是路径和查询字符串是区分大小写的。通常，整个 URL 指定为小写字母。 

URL 的组成部分如下所示进行组合和定界：

scheme://host:port/path?query

规则后跟冒号和两个正斜杠。
如果指定端口号，那么主机名后面是号码，并用冒号分隔。
路径名以单正斜杠开始。
如果指定查询字符串，那么在它的前面加个问号。


图 1. HTTP URL 语法

阅读语法图跳过直观语法图 

                            .-:80—–.                      


  

    
-http://–+-host name–+–+———+–/–path component——> 

                ‘-IP address-’  ‘-:–port-’                      
  
  
  
–+—————–+—————————————–>< 

     ‘-?–query string-’   


这是 HTTP URL 的示例：

http://www.example.com/software/index.html

如果指定了端口号，那么 URL 为：

http://www.example.com:1030/software/index.html

URL 的后面可以跟片段标识。URL 与片段标识之间使用的分隔符是字符 #。 片段标识用于使 Web 浏览器指向它刚检索的项中的引用或函数。 例如，如果 URL 标识 HTML 页面，那么可使用片段标识，以子节的标识来指示页面中的子节。对于这种情况，Web 浏览器通常向用户显示页面， 以使用户可以看到子节。根据项的介质类型以及为该介质类型的片段标识所定义含义的不同，Web 浏览器为片段标识所采取的操作也会不同。  

其他协议（如文件传输协议（FTP）或 Gopher）也使用 URL。这些协议使用的 URL 可能与 HTTP 使用的 URL 的语法不同。

**客户端：**能够向服务端发送请求，还能够把服务端反馈的数据进行接收和处理

**服务端：**能够接收客户端的请求，请求把相应的数据返回给客户端
# 分析 https://…
https://credit.baidu.com:80/bkrcredit/cardList?fbank=3017&nf=fbank#index


1、协议:(https://):传输协议就是能够把客户端和服务端通讯的信息进行传递的工具

http:超文本传输协议，除了传递文本，还可以传递媒体资源文件以及XML格式数据
https：更加安全的http，一般涉及支付的网站都要采用https协议(s:ssl安全套阶层加密传输)
ftp：文件传输协议(一般用于把本地资源上传到服务器，就是把你的前端资源代码上传到服务器的时候用到的一种传输协议)



2、域名:(credit.baidu.com)

顶级域名 baidu.com (以后花钱买域名的时候，只需要把顶级域名买下就可以，去万网买)
一级域名 credit.baidu.com  bike.baidu.com
二级域名 know.credit.baidu.com
三级域名 cqw.know.credit.baidu.com
.com 国际域名(想面向国际化)
.cn 中文域名(想在中国玩一玩)
.com.cn
.edu 教育类
.gov 政府类
.io 博客
.org 官方组织
.net 系统类



3、域名后边是端口号:(:80) 0~65535，用端口号来区分同一台服务器上不同的项目，一个端口下可以部署一个项目

http默认端口号是80
https默认端口号是 443
ftp默认端口号是 21
如果项目采用的就是默认端口号，那我们在写地址的时候可以不加端口号，浏览器在发送请求的时候会帮我们加上



4、请求资源路径名称:(/bkrcredit/cardList)

先去画图(服务器接收到请求后要做的事)
默认的路径或者名称(不指定资源名，服务器会找默认的资源，一般资源的默认资源名称是 default.html、index.html…当然这些咱们都可以在服务器端进行配置)
伪URL地址的处理(SEO搜索引擎优化)



5、问号传参信息:(?fbank=3017&nf=fbank)search部分 其实就是一些参数 search修改会造成页面刷新

客户端把信息传递给服务器，有很多的方式

URL地址问号传参





HASH值:(#index)这一部分属于hash部分（目前主要应用在路由控制上）hash更改的时候不会有页面更新

锚点定位
基于HASH实现路由切换(不同的HASH值实现展示不同的组件或者模块)




location和history
history是当前页面切换的历史记录，里边有当前切换地址的一些信息和操作方法，

在history中会有一个存储页面信息的池子，只要你打开了某一个页面不关闭他，那当前那个页面的历史记录就会保存在池子里
history自己身上的length代表了当前历史栈中存储了历史页面的个数

还在当前history实例所属类的原型上有go、back、forward方法，他们能够实现对页面的前进(forward)和后退(back)或者实现指定层级的前进和后退(go方法)
history.go() 进入到指定的页面，可以传递参数，如果传1，那就是前进一级  如果传-1那就是后退1级

history.forward() 前进一级

history.back() 后退一级

location的属性

location对象中存储了一些属性和方法可以让咱们来操作和获取url

hash:哈希值

host:域名+端口号

hostname:域名

href:当前url

origin:协议+域名+端口号

pathname: 资源路径名称

port：端口号

protocol：协议

search：给后台发送的参数(问号传参部分)

location.href 获取的是整个当前地址

location.search 获取的是问号部分（search部分）

location.hash 获取的是#部分（hash部分）

上边的这些属性不光可以获取，还可以进行设置

例如：location.href = ‘https://www.baidu.com’  切换当前页面到百度
reload() 刷新当前的页面

replace() 把当前历史记录中的页面进行替换，打开一个新的页面(不能回退到上一个页面)


我们前端可以通过window.οnhashchange=function(){}这个事件来监听hash的改变
小案例（部分）
让页面刷新时只是此页面变换
// 当页面刷新的时候，刷新之前是哪个页面，刷新之后还应该是哪个页面(第一种用localStorage去做，第二种用hash值去做，因为他们刷新的时候值都不会变化)
	let initIndex = 0;

	// 通过hash的值，去改变initIndex的值，如果当前页面的hash是organize，把initIndex对应的值是0，
	// 如果hash的值是customer，那initIndex对应的值是1
	let HASH = location.href.queryURLParams()['HASH'] || 'organize';
	console.log(HASH);
	if (HASH === 'customer') {
		initIndex = 1;
	}

URL即统一资源定位符 (Uniform Resource Locator, URL)，完整的URL由这几个部分构成：

scheme://host:port/path?query#fragment

scheme:通信协议，常用的http,ftp,maito等。
	
host:主机，服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。
	
port:端口号，整数，可选，省略时使用方案的默认端口，如http的默认端口为80。
	
path:路径，由零或多个"/"符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。
	
query:查询，可选，用于给动态网页（如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技术制作的网页）传递参数，可有多个参数，用"&"符号隔开，每个参数的名和值用"="符号隔开。
	
fragment:信息片断，字符串，用于指定网络资源中的片断。例如一个网页中有多个名词解释，可使用fragment直接定位到某一名词解释。(也称为锚点)
下面我们举例一个URL，然后获得它的各个组成部分。

http://www.nowamagic.net/newsDetail.php?id=65

1.window.location.href

可以获得整个URL字符串（在浏览器中就是完整的地址栏）。

 返回：http://www.nowamagic.net/newsDetail.php?id=65

 
2.window.location.protocol

可以获得 URL 的协议部分

返回：http:

3.window.location.host

可以获得 URL 的主机部分（带端口号）

返回：www.nowamagic.net

现在这个实例默认端口为80，所以这个没有显示端口

4.window.location.hostname

可以获得 URL 的主机部分（主机名）

返回：www.nowamagic.net

5.window.location.port

可以获得 URL 的端口部分

如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符。

6.window.location.pathname

获得 URL 的路径部分（就是文件地址）

返回：/newsDetail.php

7.window.location.search

获得查询（参数）部分，除了给动态语言赋值以外，我们同样可以给静态页面，并使用javascript来获得相信应的参数值。

返回：?id=65

8.window.location.hash

获得锚点。

这个URL没有锚点