浅析 URL

蓝笔头
313 阅读4分钟

李爵士发明的三样东西：WWW = URL + HTTP + HTML，其中，URL=协议+域名或IP+端口号+路径+查询字符串+锚点

IP

  • I : Internet
  • P : Protocol

如何获取外网的IP

外网IP

路由器连接上电信的服务器，那么路由器就会有一个外网IP，这也是你在互联网中的地址。 重启路由器可能会重新分配外网地址即路由器没有固定的外网IP,除非你花钱租个）。

那么手机和ipad的IP呢？ 这就要问问内网IP了

内网IP

路由器在你家创建的是一个内网，处于内网中的谁被就会使用内网IP（一般这个IP格式是192.168.xxx.xxx），路由器也会给自己分配一个内网IP（如：192.168.1.1），然后路由器会给每一个内网中的设备分配一个不同的内网IP。

路由器的功能

  • 有两个IP
  • 内网和外网只有通过路由器才能互通，故路由器也叫网关

IP的功能

  • 如何定位一台设备（电脑、手机、摄像头等）
  • 如何封装数据报文，以及跟其他设备交流

注：查询自己IP地址的命令：ipconfig

特殊的IP

  • 127.0.0.1表示自己
  • localhost通过hosts指定自己
  • 0.0.0.0不代表任何设备

localhost和127.0.0.1的区别

  • 打开文件资源管理器C:\Windows\System32\drivers\etc\hosts，在hosts里面就可以看到localhost就是127.0.0.1
  • 可以根据自己的喜好设置打开本地的方式，如：添加一行127.0.0.1 lanbitou（注：中间有个空格的），那么在浏览器中输入lanbitou:8080/index.html ，即可打开本地index.html；
  • 所以localhost只是一个和lanbitou一样的给127.0.0.1起的名字

端口

端口的功能

一台设备服务可以提供很多服务，每个服务一个号码，这个号码就叫端口号port。

不同的服务对应的端口号

  • HTTP服务使用80端口
  • HTTPS服务使用443端口
  • FTP服务使用21端口
  • 一共有65535个端口（目前基本够用）

更多不同端口详见维基百科

端口使用规则

  • 0-1023号端口是留给系统使用的（只有拥有管理员权限才可使用），其他端口可以随便用；

  • http-server默认使用8080端口，也可以更改 ，如在命令行执行hs -c-1 -p 1234，更改端口为1234，那么在地址栏输入localhost:1234即可访问；

  • 一个端口被占用只能换一个端口 注：此时报的错误提示是EADDRINUSE；

总而言之，言而总之，IP和端口缺一不可

域名

域名就是对IP的别称

ping命令

想知道baidu.com对应什么IP就用ping baidu.com

关于域名

  • 一个域名可以对应不同的IP，称为均衡负载，防止一台机器扛不住
  • 一个IP可以对应不同域名，称为共享主机

DNS

将域名和IP对应起来的系统

  • D : Domain
  • N : Name
  • S : Server

DNS的运行过程

  • 浏览器向电信/联通提供的DNS服务器询问baidu.com对应什么IP；
  • 电信/联通回答一个IP，如：可以用nslookup baidu.com来查看回答的baidu.com对应的IP；
  • 浏览器向对应IP的80/443端口发送请求；
  • 请求内容是查看``baidu.com```的首页

注：服务器默认用80提供http服务，用443提供https服务，可以在开发者工具中看到具体的端口，如baidu.com的

域名相关知识

  • com是顶级域名（com : company）
  • xiedaimala.com是二级域名（俗称一级域名）
  • www.xiedaimala.com是三级域名（俗称二级域名）
  • 二级域名与三级域名是父子关系
  • 像github.io（是giuhub的）与xxx.github.io（某个用户的）是没有关系，所以xiedaimala.com和www.xiedaimala.com可以不是同一家的

域名前边加个www，多此一举

如何请求不同的页面 - 路径

  • 查看MDN中的HTML相关内容使用的路径

    https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML

  • 查看MDN中的CSS相关内容使用的路径

    https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS

注：路径没有后缀名；

注：可以使用chrome的开发者工具查看两个路径的区别，主要不同就在于Request URL，见下图

同一个页面，访问不同的内容 - 查询参数

  • https://www.baidu.com/s?wd=hi

  • https://www.baidu.com/s?wd=hello

    注：s指百度的搜索页面；?wd=hi指查询参数

  • https://www.baidu.com/s?wd=hi&pn=20直接查询关于hi内容的第三页内容

    如图将鼠标放上去就可以看到查询参数：

同一个内容，不同的位置 - 锚点

  • 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面板上看到，因为锚点不会传到服务器上，会被浏览器吃掉#后边的部分。

URL案例

URL=协议+域名或IP+端口号+路径+查询字符串+锚点

举例子：https://www.baidu.com/s?wd=hello#5

  • https://是协议
  • www.baidu.com是域名
  • /s是路径
  • ?wd=hello是查询参数
  • #5是锚点
avatar
文章
阅读
粉丝