4.1 浏览器基础操作 2021-06-15

浏览器基础操作

后期的内容会在浏览器上面做一些操作，这一篇先补充一下浏览器中的一些常识：

大家在打开浏览器，进行浏览的时候，看到的图片、文字、视屏等待都是通过一个一个的元素(element)进行组合来展示出来的，那么看到的外观、大小、动画等都是通过对元素添加不同的样式(style)来呈现的,用户进行点击、滑动等一些行为操作是通过js来进行的操作，那么咱们想要去查看图片、文字等是通过什么元素或者样式来控制展示的怎么办呢？

F12可以(也可以鼠标右击，找到检查打开)打开浏览器的控制台，控制台里面包含了咱们上面所说的元素、样式、接口(前后端进行通讯)、缓存等等所有的信息。

相信大家对百度很熟悉了，那咱们就以百度为例，先来对控制台整体有一个大体的认知：

1. 方框中有一个箭头的标志，它可以用来查找元素，点击它，然后鼠标放置在任意文字、图片…上面，再次进行点击，就可以查看该文字、图片等是通过什么元素来进行渲染的。
2. 小框大框进行嵌套，可以用来切换手机模式和电脑模式
3. element：展示在页面上的所有元素
4. console：输出的一些信息，也可以在此处书写js代码
5. NetWork：向服务端发送的所有请求，包括图片、接口、文件等
6. style：样式，用来控制元素的大小、宽高、位置、动画等

上面的一张图，讲了几个大的类别，当然还有其它的一些比如缓从、文件树等一些类别，python中的用的很少，用的时候再去补充，接下来详细的对element和NetWork进行详解：

1. element：当我们向选择某个元素的时候，可以通过（1）方框中有一个箭头的标志来进行查找，然后element中就会自动定位的选择的元素中，并且高亮显示，下图中选中的是百度的搜索按钮（百度一下）：
   

元素可以通过class id 元素名来控制元素的尺寸、大小、位置，也可以通过class id 元素名来对元素进行操作；
img标签/元素，是用来展示图片的，src属性用来决定展示的是哪张图片，大家可以自己去控制台看一下哦；

2. NetWork:当我们打开网页的时候，会向服务端发起请求来取网页要展示的内容，这些发起的请求就放在了NetWork当中：接下来我们通过几张图片来进行详细解释：

点击NetWork第一眼看到的所有内容如下：

点击任意一个请求我们可以看到一个请求的详细信息：

下面我们会对请求每一个模块进行讲解

1. Network-- Header-- General：

Request URL: 资源请求的url;
Request Method: 请求方法（HTTP方法）;
Status Code: 状态码;
                      200(状态码) OK
                      301 - 资源（网页等）被永久转移到其它URL
                      404 - 请求的资源（网页等）不存在
                      500 - 内部服务器错误(后台问题)
Remote Address: 远程地址;
Referrer Policy:  控制请求头中 refrrer 的内容;
                               包含值的情况: 
                               enum ReferrerPolicy {
                                    "", 设为空串则默认按照浏览器的机制设置 referrer的内容，默认情况下是和 no-referrer-when-downgrade设置得一样
                                    "no-referrer", 不显示 referrer的任何信息在请求头中
                                    "no-referrer-when-downgrade",  默认值。当从https网站跳转到http网站或者请求其资源时（安全降级HTTPS→HTTP），不显示 referrer的信息，其他情况（安全同级HTTPS→HTTPS，或者HTTP→HTTP）则在 referrer中显示完整的源网站的URL信息
                                    "same-origin",  表示浏览器只会显示 referrer信息给同源网站，并且是完整的URL信息。所谓同源网站，是协议、域名、端口都相同的网站
                                    "origin",  表示浏览器在 referrer字段中只显示源网站的源地址（即协议、域名、端口），而不包括完整的路径
                                    "strict-origin",  该策略更为安全些，和 origin策略相似，只是不允许 referrer信息显示在从https网站到http网站的请求中（安全降级）
                                    "origin-when-cross-origin",  当发请求给同源网站时，浏览器会在 referrer中显示完整的URL信息，发个非同源网站时，则只显示源地址（协议、域名、端口）
                                    "strict-origin-when-cross-origin",  和 origin-when-cross-origin相似，只是不允许 referrer信息显示在从https网站到http网站的请求中（安全降级）
                                    "unsafe-url"  浏览器总是会将完整的URL信息显示在 referrer字段中，无论请求发给任何网站
                                };
    补充: 什么是referrer?
          当一个用户点击页面中的一个链接，然后跳转到目标页面时，本变页面会收到一个信息,即用户是从哪个源链接跳转过来的。
           也就是说当你发起一个HTTP请求，请求头中的 referrer 字段就说明了你是从哪个页面发起该请求的;

2. Response Headers

Access-Control-Allow-Origin: 请求头中允许设置的请求方法
Connection:
content-length:
content-type:  客户端发送的类型及采用的编码方式
Date:  客户端请求服务端的时间
keep-alive: 
Vary:
x-content-type-options: 
x-download-options: 
x-frame-options: 
x-readtime:
x-xss-protection: 
Last-Modified:  服务端对该资源最后修改的时间
Server:  服务端的web服务端名
Content-Encoding:  gzip 压缩编码类型
Transfer-Encoding:chunked:  分块传递数据到客户端

3. Request Headers：

Accept: 客户端能接收的资源类型
Accept-Encoding:  客户端能接收的压缩数据的类型
Accept-Language:  客户端接收的语言类型
Authorization: 
Cache-Control: no-cache 服务端禁止客户端缓存页面数据
Connection: keep-alive 维护客户端和服务端的连接关系
Cookie:客户端暂存服务端的信息
Content-Length: 
Host:  连接的目标主机和端口号
Origin: 
Pragma: no-cache 服务端禁止客户端缓存页面数据
Referer:  来于哪里(即从哪个页面跳转过来的)
Sec-Fetch-Dest: 
Sec-Fetch-Mode: 
Sec-Fetch-Site: 
User-Agent:  客户端版本号的名字

4. Query String Paramters 发送到服务端的参数
   以下图为例，include是发送请求的参数
   
   上一篇python实例练习
   下一章网页爬虫及实战