前端菜鸟打怪路：浅析 URL（八）

月石子君
723 阅读6分钟

URL简介

提及URL就不得不提及万维网的发明者Tim Berners-lee，他发明了万维网World Wide Web(www),而World Wide Web(www)的组成就是由Uniform Resource Locator(URL)+HyperText Transfer Protocol(HTTP)+Hyper Text Markup Language(HTML)这三部分组成。
在World Wide Web(www)的中Uniform Resource Locator(URL)就是统一资源定位标志，就是指网络地址。

URL的组成

URL格式

统一资源定位符的标准格式如下：
协议类型 :// 服务器地址:端口号 / 资源层级UNIX文件路径 文件名 ? 査询字符串 # 锚点

统一资源定位符的完整格式如下：
协议类型 :// 访问资源需要的凭证信息 @ 服务器地址 : 端口号 / 资源层级UNIX文件路径 文件名 ? 査询字符串 # 锚点
其中访问凭证信息、端口号、查询、片段ID都属于选填项
由上可知 URL=协议+域名或IP+端口号+路径+査询字符串+锚点
让我们以下网址为例：

https://zh.wikipedia.org:80/w/index.php?title=Special:随机页面为例#锚点
  • 协议：https://
  • 域名：zh.wikipedia.org
  • 端口：80
  • 路径：/w/index.php
  • 查询参数:?title=Special:随机页面
  • 锚点：#锚点

URL重点

协议

  • 代表网页使用的是HTTP协议。在Internet中可以使用多种协议，如HTTP，FTP等等。在HTTP后面的“//”为分隔符

IP

  • IP地址是什么？
  • IP地址（英语：IP Address, 全称：Internet Protocol Address），又译为网际协议地址、互联网协议地址。当设备连接网络，设备将被分配一个IP地址，用作标识。通过IP地址，设备间可以互相通讯，如果没有IP地址，我们将无法知道哪个设备是发送方，无法知道哪个是接收方.
  • IP地址分为内网和外网
    • 外网IP地址获取:只要路由器连上电信的服务器，那么路由器就会有一个 外网IP,这就是你在互联网中的地址。但是如果重启路由器，那么你很有可能被重新分配一个「外网IP」，也就是说路由器没有固定的外网IP
    • 内网IP地址获取：路由器会在你家里创建一个内网，内网中的设备使用内网IP,—般来逋这个IP的格式者是192.168.xxx.xxxo.
    • 内网和外网区别：内网IP是固定的，手机无线和电脑有线IP地址是不同的，并且内网和外网互相隔绝的，他们之间是通过路由器来相互连通的，在生活家庭中人们电脑手机（内网）需要通过猫（调制解调器）把线路的信号转为计算机能够理解的信号,并通过路由器把网络信息传播出去，由外网的IP地址发送出去。
    • 特殊IP
    127.0.0.1表示自己 127.0.0.1/XXX.文件  可直接在网页访问文件内容 
localhost通过hosts指定为自己  localhost/XXX.文件  可直接在网页访问文件内容
通过hosts可修改IP，自定义IP来表示自己
0.0.0.0不表示任何设备

路由器

  • 路由器功能
    • 路由器有两个IP, —个外网IP和一个内网IP
    • 内网中的设备可以互相访问，但是不能直接访问外网
    • 内网设备想要访问外网，就必须经过路由器中转
    • 外网中的设备可以互相访问，但是无法访问你的内网
    • 外网设备想要把内容送到内网，也必须通过路由器
    • 也就是说内网和外网就像两个隔绝的空间，无法互通, 唯一的联通点就是路由器
    • 所以路由器有时候也被叫做「网关」

域名

  • 域名可以说是一个IP地址的代称，目的是为了便于记忆后者,用于在数据传输时标识计算机的电子方位（全国不同方位）。
  • 域名系统拥有层次
    • 第一级是顶级域，它包括通用顶级域，例如.com和.net和.org以及国家和地区顶级域，例如.us和.cn和.tk。
    • 二级域是互联网DNS等级之中，处于顶级域名之下的域，俗称一级域名。例子：www.xiedaimala.com
    • www.xiedaimala.com则是三级域，俗称二级域名
    • 二级域与三级域是父子关系
  • 使用ping命令
    • 在Cmder中使用ping命令即可查询域名的IP
    • 也可在ip138.com中查询

IP和域名的关系(NDS)

  • IP和域名是通过DNS对应起来 NDS作为将域名和IP地址相互映射的一个分布式数据库，能够使人更方便地访问互联网。
  • 过程，例如baidun.com
    • 浏览器会向电信或联通提供的DNS眼务器，询问baidun.com对应什么IP
    • 电信儼通会回答一个IP
    • 然后浏览器才会想对应IP的80/443端口发送请求
    • 请求内容是査看baidun.com的首页
  • 注意：
    • 服务器用80端口提供http服务
    • 服务器用443端口提供https服务
  • nslookup查询 DNS
    • nslookup命令用于查询NDS的记录，查看域名解析是否正常，在网络故障的时候用来诊断网络问题
 ```
 # nslookup + 域名
 nslookup domain [dns-server]
 ```
 ```
 nslookup xmasuhai.xyz
 ```

端口port

  • 一台计算机提供不同服务，每项服务链接一个端口
  • 一台计算机一共有65535个端口
    • HTTP服务使用80端口
    • HTTPS服务最好使用443
    • FTP服务最好使用21端口
    • 维基百科查询端口端口对应服务列表
  • 端口规则：0到1023 端口号是留给系统使用的，你只有拥有了管理员权限后，才能使用这1024个端口，其他端口可以给普通用户，http-server默认使用8080端口，一个端口如果被占用，要换一个端口。
  • IP和端口缺一不可，出现问题必然在两者之间。

路径

  • /w/index.php网络服务器上资源的路径，路径表示访问哪个网页

查询字符串

  • ?title=Special:随机页面 表示页面的展示内容，第几部分，第几章，第几页，或者查询关键词，通过#锚点查询自身要查的词。
  • 重要提示
    • 锚点表示资源中的一种“书签”，给浏览器显示位于该“加书签”位置的内容的方向。
    • 在 HTML 文档上，浏览器将滚动到定义锚点的位在视频或音频文档上，浏览器将尝试转到锚代表的时间
    • ＃后面的部分（也称为片段标识符）[fragment]从来没有发送到请求的服务器，锚点会被浏览器‘吃掉’，锚点只和浏览器有关，没必要发送给服务器

URL页面请求

  • 如何请求不同的页面

    • 用路径
    https://developer.mozilla.org/zh-CN/docs/Web/HTML
https://developer.mozilla.org/zh-CN/docs/Web/CSS
    • 工具
      • 使用Chrome开发者工具Network面板查看区别

  • 同一个页面，不同内容

    • 用查询参数
    https://xxx.com/s?wd=hello
https://www.baidu.com/s?wd=hi
https://www.baidu.com/s?wd=hello

  • 同一个内容（页面），不同位置

    • 用锚点
    https://developer.mozilla.org/zh-CN/docs/Web/CSS#参考书
https://developer.mozilla.org/zh-CN/docs/Web/CSS#教程
    • 锚点就是文档内部的定位

  • 注意：

    • 锚点看起来有中文，实际不支持中文
    • #参考书会变成#%E5%8F%82%E8%80%83%E4%B9%A6
    • 锚点不会传给服务器，所以是无法在Network面板里看到的

资料引用：
饥人谷方方老师
本文参考了饥人谷内部课程

avatar
文章
阅读
粉丝