RL 信息

JavaScript 提供了许多方法来检索和更改显示在浏览器地址栏中的当前 URL，所有这些方法都使用Location对象，它是对象的一个​属性Window。

您可以创建一个具有当前URL的新对象，如下所示：

let loc = window.location;
let url = loc.href;

Location 属性

Location 接口不继承任何属性，但是实现了那些来自 URLUtils 的属性。

Location.href包含整个URL的一个DOMStringLocation.protocol包含URL对应协议的一个DOMString，最后有一个":"。

Location.host包含了域名的一个DOMString，可能在该串最后带有一个":"并跟上URL的端口号。

Location.hostname包含URL域名的一个DOMString。

Location.port包含端口号的一个DOMString。

Location.pathname包含URL中路径部分的一个DOMString，开头有一个“/"。Location.search 包含URL参数的一个DOMString，开头有一个“?”。

Location.hash包含块标识符的DOMString，开头有一个“#”。

Location.username包含URL中域名前的用户名的一个DOMString。

Location.password包含URL域名前的密码的一个 DOMString。

Location.origin只读包含页面来源的域名的标准形式DOMString。

方法

Location没有继承任何方法，但实现了来自URLUtils的方法。

Location.assign()加载给定URL的内容资源到这个Location对象所关联的对象上。

Location.reload()重新加载来自当前 URL的资源。他有一个特殊的可选参数，类型为 Boolean，该参数为true时会导致该方法引发的刷新一定会从服务器上加载数据。如果是 false或没有制定这个参数，浏览器可能从缓存当中加载页面。

Location.replace()用给定的URL替换掉当前的资源。与 assign() 方法不同的是用 replace()替换的新页面不会被保存在会话的历史 History中，这意味着用户将不能用后退按钮转到该页面。

Location.toString()返回一个DOMString，包含整个URL。 它和读取URLUtils.href的效果相同。但是用它是不能够修改Location的值的。

般我们日常在上网的时候，会在浏览器的地址栏里输入一个网站的 "网址"，点击下回车，就会跳到你想去的网站，就类似这样

但其实，叫做 "网址" 并不是特别的准确，确切地说，应该叫做 URL

到底啥是URL

那到底啥是 URL 呢？ 不就是一个网址吗？

URL 是英文 Uniform Resource Locator 的缩写，即统一资源定位器，是因特网上用于指定信息位置的表示方法，通过它就能找到网上的某个你要的资源

URL的组成

虽然我们平时使用浏览器的时候，只要输入baidu.com或者qq.com就能正常上网了，但其实我们输入的只是整个URL中的一小部分

来，我先看看一个相对完整的URL的整体结构是怎么样的

这里大致分了几个部分，我们一个个来看，它们具体是干什么的

协议

图中http://这部分就是协议部分，即指定了URL是以什么协议发送网络请求的

常见的协议如：http://、https://、ftp://、file://，比如: http://就是超文本传输协议，平时上网大多用这个协议，https://是以安全为目标的HTTP协议。

地址

图中localhost就是地址部分，用来确定URL所要访问的服务器的网络地址（也就是网址）。在URL中，地址可以用三个形式来表示：域名、主机名、IP地址

域名

我们平时输入的www.baidu.com、www.qq.com就是域名，域名也分一级域名、二级域名、以及顶级域名。

• 顶级域名：在域名的尾巴部分，.com这种就是顶级域名，顶级域名一般都代表网站属于某种机构或组织。像.com(商业机构)、.org(非盈利组织)、
  .gov(政府机构)这类就是常见的顶级域名，除此之外，还有些代表国家的顶级域名，如：.cn（中国）、.us(美国)、.jp(日本)等等
• 一级域名：像qq.com就是一级域名，看上去十分简洁，在顶级域名.com前只有一个单词短语
• 二级域名：而mail.qq.com和v.qq.com这种前面加了mail.、v.等字符串的就叫二级域名

不过，域名也只是一串文字，计算机和路由器并不能直接认出它，还需要通过DNS服务器找到域名对应的IP地址，再通过底层的TCP/IP协议路由到对应的机器上去 （这些内容不是本文的重点暂时略过，先挖个坑再说）

主机名

主机名就是某台计算机的名字，在一个局域网内，可以通过主机名找到你要访问的计算机。主机名和域名一样，计算机和路由器不认它，需要通过HOSTS文件这样的技术找到主机名和IP地址的关联关系，最后还是翻译成IP地址再继续发送网络请求

图中的localhost也是主机名，但是一种比较特殊的主机名，是给 回环地址的一个标准主机名，就是代表本机自己的地址。

IP地址

在URL中也可以直接用IP地址来代替域名或主机名，如192.168.0.1，关于IP地址的相关知识点放到以后再讲（继续挖坑）

端口号

图中在冒号:后面的那串数字8080就是端口号，一台服务器上可以开多个端口号，往往一个网络服务程序就对应一个端口号

比如，我在机器 A 上，开了两个服务程序，分别是 Tomcat和SSH，让它们分别关联端口8080和22，那URL中如果端口号是8080就是会访问到Tomcat程序，22就会连接SSH服务。

但可能有小伙伴会有疑问：诶，我平时上百度看到的URL是http://www.baidu.com没看到有端口号啊

其实是有的，端口号是80，只是它被隐藏起来了，我们看不到而已，而这个80端口也就是URL的默认端口号

但不是所有URL的默认端口号都是80，如果协议是http://，默认端口号为80，但若是https://协议，默认端口号就是443了

虚拟目录

从第一个斜杠/开始，到最后一个斜杠/结束的那部分，也就是图中/app/user/那部分即为虚拟目录

它就类似我们电脑中文件目录的格式，第一个/为根目录，每多一个/就多进入一层目录

文件名

从域名后开始算起的最后一个斜杠/开始，到?为止，没有?则到#为止，或者?和#都没有就是到整个URL结束为止的那部分就为文件名

说起来很绕吧，其实就是图中 info.do 这部分，它一般包含文件名和扩展名('.'后面那部分)，用来指代一个URL所访问的具体文件或资源，它可以是图片、html文件、css文件，也可以是js文件、字体文件等等，它也可以不是某种文件，而是服务端后台执行的某段程序。

甚至可以省略不写虚拟目录和文件名，因为它们本来就不是必须的，就如http://www.baidu.com这样的URL就没有文件名，但服务器会在缺省的情况下给你定位到某个特定的文件或程序上去。

查询参数

从?后到#结束，即图中的?uid=101&ty=2为查询参数

查询参数，也称为URL参数、查询字符串，英文名为 Query，它是用来向服务端以字符串的形式传递参数和少数数据用的

其参数形式一般都以多个键值对的形式进行表示，如 a=1、b=2就是两个键值对，键为"a"和"b"，值为对应的"1"和"2", 多个键值对应&连起来：a=1&b=2

URL编码

但参数要传递的某些值往往带有特殊字符，这些字符和URL标准的格式冲突，比如要传a&b这样字符串，和查询参数键值对的连接符&冲突了，若不加以区分就会产生歧义

而最简单的办法，就是对参数值进行编码，称为 URL Encoding，通过编码，a&b变成了a%26b，就不再包含会冲突的特殊字符

而有些参数即便有特殊字符，也不会被编码，除非自行强制编码，比如URL中参数值是另外一串URL，就可以写成 http://localhost/do?url=http://www.baidu.com
这种特殊情况不会有歧义，因为计算机系统认得出参数是另一串URL，就会按URL的形式来解析，但当子URL又包含子参数和多子键值对的时候也难免会分不清参数到底是儿子的还是父亲的，这时还是强制编码的好

列表参数

URL的参数是一个个键值对，即一个key对应一个value，那如果是一个key要传递多个值，也就是一个列表咋办？也好办

URL的参数名是可以重复的，比如a=1&a=2&a=3,这里穿了3个参数名都为a的查询参数，是完全可以的，可以利用这种特性，按顺序将 1、2、3作为参数a的列表值

为了表示更清楚点，一般都会在列表参数名后面加上一对方括号[]，如：a[]=1&a[]=2&a[]=3

但是，对于URL参数的写法和格式的标准，也没有特别严格的规定，以上几种形式一般都会支持

锚

图中#后面那部分字符串，#abc就是锚部分

锚，英文称做Reference，通常也是用来传递参数等信息，但与查询参数的本质区别就是这部分内容不会被传递到服务器端

锚一般用于页面，比如在浏览网页的时候，按个按钮突然帮你定位到页首或页面中的某个位子去了，这就是锚

现在随着前后端分离技术，尤其是 vue、reactjs 等前端框架的兴起，锚作为前端javascript程序处理的参数载体也越来越重要了

结语

URL看似已经习以为常、非常简单的东西，背后往往也隐藏着很多技术细节和知识点，甚至这短短一篇文章也没办法穷尽

其实URL的内容还有不少，比如<用户名>@<密码>这种用户验证信息在URL中的传递，由于篇幅的关系还没有讲到

所以我讲分几篇文章来讲解HTTP协议的其中几个重要部分，如果这一系列文章对你有帮助，别忘了关注哦~

何打开HTML文件？一文教你多种方法！HTML文件是网页开发的基础，它可以包含文本、图像、音频、视频等多种多媒体元素。那么，我们该如何打开这样的文件呢？下面来介绍几种常见的方法。第一种方法是使用浏览器打开。这是最常见的方式，只需要几个简单的步骤就能完成。首先，我们可以使用Chrome浏览器。打开Chrome浏览器，然后在地址栏中输入HTML文件的URL，或者直接将HTML文件拖拽到浏览器窗口中，HTML文件就会在浏览器中打开了。同样的，使用Firefox浏览器和Safari浏览器也是类似的操作，只需要在地址栏中输入URL或者拖拽HTML文件到浏览器窗口中即可。第二种方法是使用编辑器打开。如果你习惯使用Sublime Text或者Atom这样的编辑器，也可以通过它们来打开HTML文件。

只需要在菜单栏中选择“文件”->“打开”，然后在弹出的文件浏览器窗口中找到你的HTML文件，点击打开即可。第三种方法是使用命令行工具打开。如果你熟悉命令行操作，可以使用命令行工具来打开HTML文件。在Windows系统中，打开命令提示符，使用cd命令切换到HTML文件所在的目录，然后在命令提示符中输入"type filename.html"（其中filename.html是你的HTML文件名），HTML文件的内容将会在命令提示符中显示。在macOS系统中，打开终端，使用cd命令切换到HTML文件所在的目录，然后在终端中输入"cat filename.html"（其中filename.html是你的HTML文件名），HTML文件的内容将会在终端中显示。通过以上几种方式，你可以轻松地打开HTML文件。

无论是使用浏览器、编辑器还是命令行工具，都能够帮助你查看和编辑HTML文件，更好地进行网页开发工作。参考资料：- [How to Open HTML Files](https://www.wikihow.com/Open-HTML-Files)- [How to Open HTML Files](https://www.techwalla.com/articles/how-to-open-html-files)