前端面试题准备完毕

我就是我 2023-01-01 13:51 156阅读 0赞

**目录**

1、箭头函数和普通函数的区别

2、一道JS综合面试题

3、CSS盒子模型和IE盒子模型

4、DOM事件

5、HTTP协议

6、通信类

--------------------

## 1、箭头函数和普通函数的区别 ##

1.  箭头函数没有`prototype`(原型)，所以箭头函数本身没有`this`
2.  箭头函数的`this`在定义的时候继承自外层第一个普通函数的`this`
3.  如果箭头函数外层没有普通函数，严格模式和非严格模式下它的`this`都会指向`window`(全局对象)
4.  箭头函数本身的`this`指向不能改变，但可以修改它要继承的对象的`this`
5.  箭头函数的`this`指向全局，使用`arguments`会报未声明的错误
6.  箭头函数的`this`指向普通函数时,它的`argumens`继承于该普通函数
7.  使用`new`调用箭头函数会报错，因为箭头函数没有`constructor`
8.  箭头函数不支持`new.target`
9.  箭头函数不支持重命名函数参数,普通函数的函数参数支持重命名
10. 箭头函数相对于普通函数语法更简洁优雅

## 2、一道JS综合面试题 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>JS综合面试题</title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			// function Foo() {
    			// 	getName = function(){alert(1);};
    			// 	return this;
    			// }
    			// Foo.getName = function(){ alert(2);};
    			// Foo.prototype.getName = function(){ alert(3);};
    			// var getName = function(){ alert(4);};
    			// function getName(){ alert(5);};
    			
    			function Foo() {
    				getName = function(){alert(1);};
    				return this;
    			}
    			var getName;
    			function getName(){ alert(5);};
    			// 上面是变量提升和函数提升，变量只是声明提升，函数是整个函数提升，当变量和函数的声明有冲突时，默认保留函数的定义
    			Foo.getName = function(){ alert(2);};
    			Foo.prototype.getName = function(){ alert(3);};
    			getName = function(){ alert(4);};
    			
    			
    			//请写出下列的输出结果
    			Foo.getName(); //2
    			getName();		 //4
    			Foo().getName();	// (Foo()).getName() --> window.getName() 1
    			getName();				//1
    			new Foo.getName();					//new (Foo.getName)() --> new (function(){ alert(2);})() 2
    			new Foo().getName();				//(new Foo()).getName() --> foo.getName() 3
    			new new Foo().getName();		//new ((new Foo()).getName)() --> new (foo.getName)() --> new (function(){ alert(3);})() 3
    		</script>
    	</body>
    </html>

## 3、CSS盒子模型和IE盒子模型 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 1][]

标准模型和IE模型的区别就在于宽和高的计算方式不同，标准模型的宽度和高度指的就是content的宽度和高度，它不包含padding和border，IE模型的宽度和高度是计算padding和border的，如果宽度都设置为200px，对于IE模型来说，200px包含了padding和border，如果IE模型的padding是10px，无border，那么对应的content只能是180px，高度亦是如此。

**CSS如何设置这两种模型**

通过CSS3中的属性box-sizing:content-box;设置成标准模型；box-sizing:border-box;设置成IE模型。浏览器默认的方式是content-box

**JS如何设置获取盒子模型对应的宽和高**

*  DOM.style.width/height（并不能拿到所有的宽和高，只能拿到内联样式的宽和高，也就是在div标签内写style的写法，其他两种CSS写法是取不到宽高的）
 *  DOM.currentStyle.width/height（拿到浏览器渲染后的宽高，但这个属性只有IE支持）
 *  window.getComputedStyle(DOM).width/height（与上一种原理相似，但这种支持大多数浏览器，兼容性更好）
 *  DOM.getBoundingClientRect().width/height（经常适用的场景是计算一个元素的绝对位置，这个绝对位置是根据视窗的绝对位置，getBoundingClientRect()这个方法拿到的有4个元素：left,top,width,height）

**BFC（边距重叠解决方案）**

**BFC的基本概念**

块级格式化上下文

**BFC的原理**

1.  在BFC这个元素的垂直方向的边距会发生重叠
2.  BFC的区域不会与浮动元素的box重叠（用来清除浮动和布局的）
3.  BFC在页面上是一个独立的容器，它外边的元素不会影响它里边的元素，里边的元素也不会影响它外边的元素
4.  计算BFC高度的时候，浮动元素也不参与计算

**如何创建BFC**

*  浮动元素：float除none以外的值
 *  定位元素：position除static、relative以外的值（absolute、fixed）
 *  display为inline-block、table-cells（跟table相关的那几个）、flex
 *  overflow除visible以外的值(hidden、auto、scroll)

## 4、DOM事件 ##

**DOM事件的级别**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 2][]

准确来说是DOM标准定义的级别。element.addEventListener('click', function()\{\}, false)其中function是响应函数，后面可以是false也可以是true，它其实是指定了冒泡还是捕获。DOM3其实还是DOM2这种事件的定义方式，只不过事件类型增加了很多，比如说鼠标事件、键盘事件等等。

**DOM事件模型**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 3][]

事件模型是捕获和冒泡，捕获是从上往下，冒泡是从当前元素也就是目标元素往上，这是两个过程

**DOM事件流**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 4][]

浏览器在当前页面与用户做交互的过程中，比如说点击鼠标左键，这个左键是怎么传到这个页面上，这就是事件流，它又是怎么响应的，一个完整的事件流分3个阶段，第一阶段是捕获，第二阶段也就是目标阶段，比如说我点了当前这个按钮，这个按钮就是目标阶段，也就是说事件通过捕获到达目标元素，这个时候就是目标阶段，第三阶段就是从目标元素再上传到window对象，也就是冒泡的过程

**描述DOM事件捕获/冒泡的具体流程**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 5][]

第一个接收到事件的对象是window，window接收完以后给document，JS中关于BOM对象，两个最常用的，一个是window，一个是document，这两个是非常重要的对象，在事件捕获中也是它两优先得到的，第三个才是html标签（**怎么用JS表示当前这个HTML节点？**document.documentElement专门表示节点的对象），html完了以后就是body了，body完了以后就是按照普通的html结构一层一层往下传，比如说父级元素，然后是子级元素，最后到达目标元素。冒泡的具体流程，就是从目标元素，一层一层往上传，最后到window，完成了一次冒泡的流程。

**Event对象的常见应用**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 6][]

**自定义事件**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 7][]

## 5、HTTP协议 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 8][]

**HTTP协议的主要特点**

*  无连接（我连接一次，它就会断掉，不会保持连接）
 *  无状态（客户端和服务端是两种身份，客户端向服务端请求一个图片，HTTP协议帮你建立连接，帮你中间传输，任务完成以后，连接就要断开了，下次客户端再过来，服务端是没法区分上次和这次连接是不是同一个人同一个身份，服务端单从HTTP协议上是不能区分两次连接者的身份的，这就是无状态）
 *  简单快速（每个资源url，一个图片或者页面地址要统一资源符，这是固定的，所以在HTTP协议处理起来也是非常简单的，想访问某个资源只需输入这个url就可以了）
 *  灵活（在每一个HTTP协议中有一个头部分会有一个数据类型，通过一个HTTP协议就可以完成不同数据类型的传输，所以是比较灵活的）

**HTTP报文的组成部分**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 9][]

**请求行包含什么**

HTTP方法、页面地址、HTTP协议以及版本

**请求头是什么**

就是一些key、value值，来告诉服务端我要哪些内容，要注意什么类型

**空行是什么**

空行是告诉服务端往下就是按照请求体的内容解析了，而不是请求头了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 10][]

请求头下面是空行和请求体，没显示出来

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 11][]

响应头下面是空行和响应体（文档部分），没显示出来

**HTTP方法**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 12][]

GET:请求指定的页面信息，并返回实体主体。POST:向指定资源提交数据进行处理请求(例如提交表单或者上传文件)。数据被包含在请求体中。POST请求可能会导致新的资源的建立和已有资源的修改。HEAD:类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头。PUT:从客户端向服务器传送的数据取代指定的文档的内容。DELETE:请求服务器删除指定的页面。

**GET和POST的区别**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 13][]

红色的必须记住

**HTTP状态码**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 14][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 15][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 16][]

状态码分类：

*  1XX- 信息型，服务器收到请求，需要请求者继续操作。
 *  2XX- 成功型，请求成功收到，理解并处理。
 *  3XX - 重定向，需要进一步的操作以完成请求。
 *  4XX - 客户端错误，请求包含语法错误或无法完成请求。
 *  5XX - 服务器错误，服务器在处理请求的过程中发生了错误。

常见状态码：

*  200 OK - 客户端请求成功301 - 资源(网页等)被永久转移到其它URL
 *  302 - 临时跳转
 *  400 Bad Request - 客户端请求有语法错误，不能被服务器所理解
 *  401 Unauthorized - 请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用
 *  404 - 请求资源不存在，可能是输入了错误的URL
 *  500 - 服务器内部发生了不可预期的错误
 *  503 Server Unavailable - 服务器当前不能处理客户端的请求，一段时间后可能恢复正常

**持久连接**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 17][]

只有HTTP1.1版本才支持，HTTP1.0版本不支持，面试要答出这个和持久连接与非持久连接之间的区别

**HTTP协议的缺点**

*  请求信息明文传输，容易被窃听截取。数据的完整性未校验，容易被篡改没有验证对方身份，存在冒充危险
 *  HTTP协议不适合传输一些敏感信息，比如：各种账号、密码等信息，使用http协议传输隐私信息非常不安全

**什么是HTTPS**

HTTPS 协议(HyperText Transfer Protocol over Secure Socket Layer)：一般理解为HTTP+SSL/TLS，通过 SSL证书来验证服务器的身份，并为浏览器和服务器之间的通信进行加密

**HTTPS协议的优点**

相比于http，https可以提供更加优质保密的信息，保证了用户数据的安全性，此外https同时也一定程度上保护了服务端，使用恶意攻击和伪装数据的成本大大提高。

**HTTPS协议的缺点**

HTTPS协议多次握手，导致页面的加载时间延长近50%;HTTPS连接缓存不如HTTP高效，会增加数据开销和功耗;申请SSL证书需要钱，功能越强大的证书费用越高。SSL涉及到的安全算法会消耗 CPU 资源，对服务器资源消耗较大。

**HTTP和HTTPS的区别**

*  https协议需要到CA申请证书，一般免费证书较少，因而需要一定费用。
 *  http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl/tls加密传输协议。
 *  http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
 *  http的连接很简单，是无状态的；HTTPS协议是由SSL/TLS+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

**CA证书是什么**

CA证书就是CA机构颁发的数字证书，CA机构就是电子商务认证授权机构，是负责发放和管理数字证书的权威机构，是具有权威性和公正性的第三方信任机构，承担公钥体系中公钥的合法性检验的责任。

**HTTP1.0 和 HTTP1.1 区别**

1.  **缓存处理**，在HTTP1.0中主要使用header里的If-Modified-Since,Expires来做为缓存判断的标准，HTTP1.1则引入了更多的缓存控制策略例如Entity tag，If-Unmodified-Since, If-Match, If-None-Match等更多可供选择的缓存头来控制缓存策略。
2.  **带宽优化及网络连接的使用**，HTTP1.0中，存在一些浪费带宽的现象，例如客户端只是需要某个对象的一部分，而服务器却将整个对象送过来了，并且不支持断点续传功能，HTTP1.1则在请求头引入了range头域，它允许只请求资源的某个部分，即返回码是206（Partial Content），这样就方便了开发者自由的选择以便于充分利用带宽和连接。
3.  **错误通知的管理**，在HTTP1.1中新增了24个错误状态响应码，如409（Conflict）表示请求的资源与资源的当前状态发生冲突；410（Gone）表示服务器上的某个资源被永久性的删除。
4.  **Host头处理**，在HTTP1.0中认为每台服务器都绑定一个唯一的IP地址，因此，请求消息中的URL并没有传递主机名（hostname）。但随着虚拟主机技术的发展，在一台物理服务器上可以存在多个虚拟主机（Multi-homed Web Servers），并且它们共享一个IP地址。HTTP1.1的请求消息和响应消息都应支持Host头域，且请求消息中如果没有Host头域会报告一个错误（400 Bad Request）。
5.  **长连接**，HTTP 1.1支持长连接（PersistentConnection）和请求的流水线（Pipelining）处理，在一个TCP连接上可以传送多个HTTP请求和响应，减少了建立和关闭连接的消耗和延迟，在HTTP1.1中默认开启Connection： keep-alive，一定程度上弥补了HTTP1.0每次请求都要创建连接的缺点

**HTTP/1.x现在存在的一些问题**

*  HTTP1.x 在传输数据时，每次都需要重新建立连接，增加了大量的延迟时间
 *  HTTP1.x 在传输数据时，所有的传输内容都是明文的，客户端和服务端无法验证对方的身份，在一定程度上无法保证数据的安全性
 *  HTTP1.x 在使用时，header里携带的内容过大，增加了传输的成本，在移动端增加用户流量
 *  HTTP1.x 虽然支持了keep-alive, 来减少多次创建连接产生的延迟，但是keep-alive 使用多了也会给服务端带来大量的性能压力，并且对于单个文件被不断请求的服务，因为文件被请求之后还保持了不必要的连接时间，keep-alive可能会极大的影响服务器的性能
 *  虽然HTTP1.x可以让客户端向服务器并行发送多个请求，而且服务器也可以并行处理多个请求，但是HTTP/1.x 有严格的串行返回响应机制，通过 TCP 连接返回响应时，必须一个接一个，前一个响应没有完成，下一个响应就不能返回，如果第一个响应时间很长，那么后面的响应处理完了也无法发送，只能被缓存起来，占用服务器内存

**HTTP2.0新特性**

1.  二进制分帧层
2.  多向请求与响应
3.  优先级和依赖性
4.  首部压缩
5.  服务器推送

**HTTP2.0优点**

1.  **多路复用（MultiPlexing）**：一次TCP握手，多个同域并行请求，请求和响应同时发送接受，然后再拼装组合，不阻塞；一个request对应一个id，这样一个连接上可以有多个request，每个连接的request可以随机的混杂在一起，接收方可以根据request的 id将request再归属到各自不同的服务端请求里面
2.  **header压缩** : HTTP1.x的header带有大量信息，而且每次都要重复发送，HTTP2.0使用encoder来减少需要传输的header大小，通讯双方各自cache一份header fields表，既避免了重复header的传输，又减小了需要传输的大小；
3.  **优先级和依赖性（Priority）**：可以请求的时候告知服务器端，资源分配权重，优先加载重要资源；
4.  **服务器推送（Server Push）**：根据客户端需求，服务端主动推送资源，减少请求耗时；

**Http2和Http1.X的区别**

（1）HTTP2使用的是二进制传送，HTTP1.X是文本（字符串）传送

二进制传送的单位是帧和流。帧组成了流，同时流还有流ID标示

（2）HTTP2支持多路复用

因为有流ID，所以通过同一个http请求实现多个http请求传输变成了可能，可以通过流ID来标示究竟是哪个流从而定位到是哪个http请求

（3）HTTP2头部压缩

HTTP2通过gzip和compress压缩头部然后再发送，同时客户端和服务器端同时维护一张头信息表，所有字段都记录在这张表中，这样后面每次传输只需要传输表里面的索引Id就行，通过索引ID查询表头的值

（4）HTTP2支持服务器推送

HTTP2支持在未经客户端许可的情况下，主动向客户端推送内容

**HTTPS什么时候用的对称加密，什么时候用的非对称加密**

HTTPS在内容传输的加密上使用的是对称加密，非对称加密只作用在证书验证阶段。

## 6、通信类 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 18][]

**什么是同源策略及限制**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 19][]

比如http是协议，www.imooc.com是域名，默认的端口是80（如果没指定端口的话，默认的端口是80），这三个构成的叫一个源，三个中有一个不一样，就是源不一样，就是跨域了。

限制：不是一个源的文档，你没有权利去操作另一个源的文档，主要限制的上面几个方面，无法获取和操作另一个资源的DOM，任何DOM都拿不到，有限制。Ajax只适合同源的通信，跨域就不行了。

**前后端如何通信**

*  Ajax
 *  WebSocket
 *  CORS

Ajax是同源的通信方式，跨域就不行了。WebSocket不受同源策略的限制。CORS既支持跨域通信也支持同源通信

**如何创建Ajax**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 20][]

**跨域通信的几种方式**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 21][]

**JSONP的原理是什么，怎么实现的**

通过script标签的异步加载来实现的

[前端][Link 1]开发交流QQ群：761614159

求职[前端][Link 1]开发的小伙伴可以进群交流一下！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70]: /images/20221120/73e3720acee240d48a2231fbec5df3bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 1]: /images/20221120/52b622034ab949acac64c229d47ad41f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 2]: /images/20221120/7dab82f98b934337bbef2e206059e7bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 3]: /images/20221120/088545950ef442f68fe4b5b93482a711.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 4]: /images/20221120/5bce95823bdb48de80f6b4519faedd4c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 5]: /images/20221120/73e6eaf62e2b401993d04a5d122871aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 6]: /images/20221120/e616dd8ccc4e475a8573dde90729c511.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 7]: /images/20221120/c1d317630d4b4030b723baf5cc1254c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 8]: /images/20221120/b106a37a46854e939a64a68271781ecb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 9]: /images/20221120/e4340c784a494b8ea25980e1acc8005d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 10]: /images/20221120/320aaed2dc134d919cc8bb4ab205ef99.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 11]: /images/20221120/984cb35c179842aba5580333c1cc904a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 12]: /images/20221120/bd7ae636d53b4b92bb39f685375948ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 13]: /images/20221120/48ccfbf7a4b54f5ca92274ec3c6fe1f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 14]: /images/20221120/a5a1db34829f4f70a61e1c4d642cf30b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 15]: /images/20221120/5c342aa6e97f411fb5f6486ddd9a734a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 16]: /images/20221120/a783e8f6064448f1bcbad34fb483c86c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 17]: /images/20221120/f69a6a303156493f8747025ed13fb78c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 18]: /images/20221120/1fe4bc0efbfe44068fa94345f9c19e86.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 19]: /images/20221120/c25a65614e714e98bfc073584876ebec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 20]: /images/20221120/3f3e34fcc2384cb3b57e00b3623e2048.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 21]: /images/20221120/1607a5adba3f4de7845e971f00158c33.png
[Link 1]: https://www.nowcoder.com/jump/super-jump/word?word=%E5%89%8D%E7%AB%AF