快速搞懂URL的构成

URL的构成

URL的构成基本如下

scheme:[//[user[:password]@]host[:port]][/path][?query][#fragment]

举例如下:

http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument

拆解如下:

协议(Protocol)

快速搞懂URL的构成_第1张图片
Protocol

http://为协议名,标明了请求需要使用的协议,通常使用的是HTTP协议或者安全协议 HTTPS.其他协议还有mailto:用户打开邮箱的客户端,和ftp:用来做文件的转换, file用来获取文件,data获取外部资源等

域名(Domain)

快速搞懂URL的构成_第2张图片
Domain

www.example.com为域名,标明了需要请求的服务器的地址.

端口(Port)

快速搞懂URL的构成_第3张图片
Port

:80是端口号,标明了获取服务器资源的入口
端口号用于区分服务的端口,一台拥有IP地址的服务器可以提供许多服务,比如Web服务、FTP服务、SMTP服务等.那么,服务器的资源通过“IP地址+端口号”来区分不同的服务.
如果把服务器比作房子,端口号可以看做是通向不同服务的门,

文件路径

快速搞懂URL的构成_第4张图片
Path to resource

/path/to/myfile.html表示服务器上资源的路径,过去这样的路径标记的是服务器上文件的物理路径,但是现在,路径表示的只是一个抽象地址,并不指代任何物理地址.

参数(query)

快速搞懂URL的构成_第5张图片
Parameters

?key1=value1&key2=value2是请求里提供的额外参数.这些参数是以键值对的形式,通过&符号分隔开来,服务器可以通过这些参数进行相应的个性化处理

片段(fragment)

快速搞懂URL的构成_第6张图片
Anchor

#SomewhereInTheDocument是对资源的部分补充.fragment可以理解为资源内部的书签.用来想服务器指明展示的内容所在的书签的点.例如对于HTML文件来说,浏览器会滚动到特定的或者上次浏览过的位置.对于音频或者视频资源来说,浏览器又会跳转到对应的时间节点.

补充 : 相对路径和绝对路径

我们上面所说的都是绝对路径,但是URL也有相对路径的表现形式.
URL所请求的资源依赖于请求所在的上下文,也就是当前环境,在浏览器的输入框内URL没有上下文,所以必须提供绝对路径.
但是当URL用于文件中时,例如HTML的页面,情况就大有不同了,因为浏览器已经拥有了文件的URL,所以可以自动填补文件内使用的URL丢失的部分,例如协议,域名,端口等,所以我们可以较为直观的区分相对路径绝对路径.
如果URL/开头,浏览器会从根服务器去获取资源,而不是从给定的文件夹中获取.
我们用一些例子来直观的理解下
完整的URL:

https://developer.mozilla.org/en-US/docs/Learn

隐藏协议
//developer.mozilla.org/en-US/docs/Learn
浏览器会使用文件主机的相同协议

隐藏域名

/en-US/docs/Learn

浏览器会使用文件主机的相同协议和同样的域名,注意,不能在未隐藏协议的前提下只隐藏域名

你可能感兴趣的:(快速搞懂URL的构成)