蒂莫西·约翰·伯纳斯-李发明了三样东西:URL + HTTP +HTML,其中HTML为超文本标记语言,就是我们前端编写页面的HTML,HTTP为超文本传输语言(这个会在我之后的博客中写道),以及我们本次要提到的URL。
URL为:Uniform Resource Locator,翻译成中文就是统一资源定位符,而URL = 协议 + 域名或IP + 端口号 + 路径 + 查询字符串 + 锚点。这里我们分开来讨论。

IP

IP:Internet protocol 网络协议,IP协议主要在我们的网络层,主要起到的作用分为两点

  1. 如何定位一台设备
  2. 何封装数据报文,以跟其他设备交流,具体内容我们不关心

只要你的设备在互联网中就至少有一个独特的IP,可以在命令行使用 ipconfig来看自己电脑的IP地址。以下是哥们儿的IP地址:
image.png
IP分为内网和外网,通过路由器将内网和外网分开,如果想获得外网IP你可以去购买宽带,这样运营公司会给你一个外网IP,如果你购买的路由器接上网络,那么你的路由器就会获得一个外网的IP地址,这个就是你的外网IP,那么既然你的路由器使用的是外网IP,那你接路由器发出的WLAN用的是什么IP呢,答案就是内网IP,其它的外网和该路由器的内网不相通,而通过该路由器进行联系。

端口

端口是什么呢? 一台机器可以提供很多种的服务,每一种服务就是一个号码,这个号码就是端口,比如医院有缴费的窗口也有取药的窗口,每个窗口提供不同的服务,而计算机中把每个不同的服务用端口来区分,一共有65535个端口,要提供HTTP服务最好使用80端口,要提供HTTPS服务最好使用443端口,要提供FTP服务最好使用21端口,每个端口提供的服务可以参考维基百科。
而这些端口中都有什么作用呢,其中0~1023是给系统使用的,用户只能有了管理员权限后才可以使用这些端口,如果一个端口被占用,则只能使用其他的端口。
在使用的时候,IP地址和端口号一个都不能少。

域名

域名就是对ip的别称,因为记ip地址太难记了所以就使用域名来方便大家记住,一个域名可以对应不同IP,这个叫做均衡负载,防止一台机器扛不住,一个IP可以对应不同域名,这个叫做共享主机,穷开发者会这么做。
而域名和IP地址是如何对应起来的呢?
当你在地址栏输入http://www.baidu.com的时候你的浏览器会做一系列的操作来返回你之后看到的百度的页面,浏览器会先向你的运营商的DNS服务器(域名服务器)发送你输入的地址,DNS服务器会返回你输入的地址的IP地址,然后浏览器会向对应的IP服务器发送对应的请求来返回页面。
可以通过命令行来ping一下你所访问的地址的IP
image.png
这是我所访问的百度服务器:14.215.177.38,不同的地方所访问到的服务器地址可能不同,因为百度的服务器不止一个。
在输入的http://www.baidu.com中:

  1. com是顶级域名
  2. http://xiedaimala.com是二级域名(俗称一 级域名)
  3. http://www.xiedaimala.com是三级域名(俗称二级域名)

其中的www是多余的,不信可以试试。

路径

而如何在同一个服务器来请求不同的页面呢?这里就要用到路径。

  1. https://developer.mozilla.org/zh-CN/docs/Web/HTML
  2. https://developer.mozilla.org/zh-CN/docs/Web/CSS

上面两个地址是在同一个服务器的页面,都是 https://developer.mozilla.org的页面,而之所以不一样是通过后面的路径来控制的。
同一个页面也可以有不同的内容,可以通过查询数做到,比如B站的播放时候后面的p=5,为播放第五集。https://www.bilibili.com/video/av23333?p=5, 可以把后面的p=5换成其他数子就会播放不同的视频,这就是查询参数的作用。

而在同一个页面可以显示不同的位置,这个可以通过锚点来实现

  1. https://developer.mozilla.org/zh-CN/docs/Web/CSS#参考书
  2. https://developer.mozilla.org/zh-CN/docs/Web/CSS#教程

比如上面的两个地址,显示的明明是同一个页面,而通过改变后面的#参考书或者 #教程 可以显示不同的位置,这就是锚点的作用

总结

所以综上所诉,一个URL就是由协议+域名或IP+端口号+路径+查询字符串+锚点 组成的
下面是一个例子
image.png