URL格式
 
在WWW上，每一信息资源都有统一的且在网上唯一的地址，该地址就叫URL（Uniform Resource Locator,统一资源定位器），它是WWW的统一资源定位标志，就是指网络地址。
 
URL由三部分组成：资源类型、存放资源的主机域名、资源文件名。
 
也可认为由4部分组成：协议、主机、端口、路径
 
格式分析
 
如上说的比较笼统，如下详细讲解一下
 
协议
 
指定使用的传输协议，下表列出 protocol 属性的有效方案名称。 最常用的是HTTP协议，它也是WWW中应用最广的协议。
 
file 资源是本地计算机上的文件。格式file:///，注意后边应是三个斜杠。
 
ftp 通过 FTP访问资源。格式 FTP://
 
gopher 通过 Gopher 协议访问该资源。
 
http 通过 HTTP 访问该资源。 格式 HTTP://
 
https 通过安全的 HTTPS 访问该资源。 格式 HTTPS://
 
mailto 资源为电子邮件地址，通过 SMTP 访问。 格式 mailto:
 
MMS 通过 支持MMS（流媒体）协议的播放该资源。（代表软件：Windows Media Player）格式 MMS://
 
ed2k 通过 支持ed2k（专用下载链接）协议的P2P软件访问该资源。（代表软件：电驴） 格式 ed2k://
 
Flashget 通过 支持Flashget:（专用下载链接）协议的P2P软件访问该资源。（代表软件：快车） 格式 Flashget://
 
thunder 通过 支持thunder（专用下载链接）协议的P2P软件访问该资源。（代表软件：迅雷） 格式 thunder://
 
news 通过 NNTP 访问该资源。
 
hostname（主机名）
 
是指存放资源的服务器的域名系统(DNS) 主机名或 IP 地址。有时，在主机名前也可以包含连接到服务器所需的用户名和密码（格式：username:password@hostname）。
 
域名
 
以www.bilibili.com举例
 
www代表主机名，主机名与域名组成子域名，子域名可对网站进行业务分类。bilibili.com代表域名，它便于记忆，配合域名与IP地址的绑定和解析，方便大家上网
 
port（端口号）
 
整数，可选，省略时使用方案的默认端口，各种传输协议都有默认的端口号，如http的默认端口为80。如果输入时省略，则使用默认端口号。有时候出于安全或其他考虑，可以在服务器上对端口进行重定义，即采用非标准端口号，此时，URL中就不能省略端口号这一项。
 
一些默认端口号如下：
 
HTTP => 默认端口号80
 
HTTPS => 默认端口号443
 
FTP => 默认端口号21
 
请求路径（文件名部分）
 
“/”之后-?之前 的部分，如果没有“?”,则是从域名后的第一个“/”开始到“#”为止，如果没有“？”和“#”，那么从域名后的第一个“/”开始到结束，都是请求路径。请求路径部分并不是一个URL必须的部分，如果省略该部分，则使用默认的文件名
 
例如 /video/BV1V7411f7Rf 一般都是请求当前服务对应的项目目录中，video文件夹中的BV1V7411f7Rf 页面。但是也有特殊情况，就是当前的URL是被“伪URL重写”的，我们看到的URL请求其实不是真实的请求。
 
query(查询)/传参
 
可选，用于给动态网页（如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技术制作的网页）传递参数，可有多个参数，用“&”符号隔开，每个参数的名和值用“=”符号隔开。
 
问号传参
 
?xxx=xxx&…直到“#”之前
 
在HTTP事务中，问号传参是客户端把信息传递给服务器的一种方式(也有可能是跳转到某一个页面，把参数值传递给页面用来标识的)
 
锚部分（哈希值）
 
从“#”开始到最后，都是锚部分。锚部分也不是一个URL必须的部分
 
fragment（信息片断）
 
字符串，用于指定网络资源中的片断。例如一个网页中有多个名词解释，可使用fragment直接定位到某一名词解释。感觉挺少见的。
 
这是最基本的，但我还是完全不懂，举几个例子吧。
 
http://www,zhufengpeixun.cn:80/stu/index.html?name=xxx&age=25#teacher
 
传输协议：http:，域名：www,zhufengpeixun.cn，端口号：80，请求路径：/stu/index.html，问好传参：?name=xxx&age=25，锚部分：#teacher
 
http://www.aspxfans.com:8080/news/index.asp?boardID=5&ID=24618&page=1#name
 
协议：http:，域名：www.aspxfans.com，端口号：8080，请求路径：/news/index.asp，问号传参：?boardID=5&ID=24618&page=1，锚部分：#name
 
http://www.baidu.com/index.html?name=mo&age=25#dowell
 
协议：http:，域名：www.baidu.com，请求路径：/index.html，问号传参：?name=mo&age=25，锚部分：#dowell
 
https://baike.baidu.com/item/%E5%B0%8F%E4%B8%91/9042571?fr=aladdin
 
协议：https:，域名：baike.baidu.com，请求路径：/item/%E5%B0%8F%E4%B8%91/9042571，问号传参：?fr=aladdin
 
https://blog.csdn.net/no_loafer/article/details/71486654?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242
 
协议：https:，域名：blog.csdn.net，请求路径：/no_loafer/article/details/71486654，问好传参：?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242
 
https://www.bilibili.com/video/BV1V7411f7Rf?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.24
 
协议：https:，域名：www.bilibili.com，请求路径：/video/BV1V7411f7Rf，问号传参：？spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.24

URL是Uniform Resource Locator的简写，统一资源定位符。
 一个URL由以下几部分组成：
 
  scheme://host:port/path/?query-string=xxx#anchor
 
scheme：代表的是访问的协议，一般为http或者https以及ftp等。
 host：主机名，域名，比如www.baidu.com。
 port：端口号。当你访问一个网站的时候，浏览器默认使用80端口。
 path：查找路径。比如：www.jianshu.com/trending/now，后面的trending/now就是path。
 query-string：查询字符串，比如：www.baidu.com/s?wd=python，后面的wd=python就是查询字符串。
 anchor：锚点，后台一般不用管，前端用来做页面定位的。
 注意：URL中的所有字符都是ASCII字符集，如果出现非ASCII字符，比如中文，浏览器会进行编码再进行传输。

一个完整的URL包括：协议部分、域名部分、端口部分、虚拟目录部分、文件名部分、参数部分、锚部分
 
http://www.test.com:8080/crm/index.html?uid=67953&page=1#r_555
 1.协议部分：该URL的协议部分为http:，这代表网页使用的是HTTP协议。在Internet中可以使用多种协议，如HTTP，FTP等等本例中使用的是HTTP协议。在HTTP后面的//为分隔符
 
2.域名部分：该URL的域名部分为www.test.com。一个URL中，也可以使用IP地址作为域名使用
 
3.端口部分：跟在域名后面的是端口，域名和端口之间使用:作为分隔符。端口不是一个URL必须的部分，如果省略端口部分，将采用默认端口
 
4.虚拟目录部分：从域名后的第一个/开始到最后一个/为止，是虚拟目录部分。虚拟目录也不是一个URL必须的部分。本例中的虚拟目录是/crm/
 
5.文件名部分：从域名后的最后一个/开始到？为止，是文件名部分，如果没有页面功能就不用截图?,则是从域名后的最后一个/开始到#为止，是文件部分，如果没有？和#，那么从域名后的最后一个/开始到结束，都是文件名部分。本例中的文件名是index.html。文件名部分也不是一个URL必须的部分，如果省略该部分，则使用默认的文件名
 
7.参数部分：从？开始到#为止之间的部分为参数部分，又称搜索部分、查询部分。本例中的参数部分为uid=67953&page=1。参数可以允许有多个参数，参数与参数之间用&作为分隔符。
 
6.锚部分：HTTP请求不包括锚部分，从#开始到最后，都是锚部分。本例中的锚部分是r_555。锚部分也不是一个URL必须的部分。
 锚点作用：打开用户页面时滚动到该锚点位置。如：一个html页面中有一段代码，该url的hash为r_555。

**客户端：**能够向服务端发送请求，还能够把服务端反馈的数据进行接收和处理
 **服务端：**能够接收客户端的请求，请求把相应的数据返回给客户端
 
# 分析 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;
	}