欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

前端实习面试题（自己当笔记用）

程序员文章站 2022-04-18 21:55:56
...

一、CSS

01.Flex布局

display:flex; 在父元素设置，子元素受弹性盒影响，默认排成一行，如果超出一行，按比例压缩 

容器属性：

1.flex-direction属性

取值：row(默认) | row-reverse | column | column-reverse

用于控制项目排列方向与顺序，默认row，即横向排列，项目排列顺序为正序1-2-3；row-reverse同为横向排列，但项目顺序为倒序3-2-1。

column 与row相反，为纵向排列，项目顺序为正序1-2-3，column-reverse同为纵向排列，项目顺序为倒序3-2-1。

2.flex-wrap属性

取值：nowrap(默认) | wrap | wrap-reverse

用于控制项目是否换行，nowrap表示不换行；

举个例子：比如容器宽度为300px，容器中有6个宽度为60px的项目，nowrap情况下，项目会强行等分容器宽度从而不换行，那么项目实际宽度也就只有50px了，而非我们自己设置的60px。

3.flex-flow属性

flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。

4.justify-content属性

取值：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;

用于控制项目在横轴的对齐方式，默认flex-start即左对齐，center 为居中，对应的flex-end为右对齐。space-between为左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等。space-around为项目之间间距为左右两侧项目到容器间距的2倍；space-evenly为项目之间间距与项目与容器间距相等，相当于除去项目宽度，平均分配了剩余宽度作为项目左右margin。

5.align-items属性

取值：flex-start | flex-end | center | baseline | stretch(默认)

用于控制项目在纵轴排列方式，默认stretch即如果项目没设置高度，或高度为auto，则占满整个容器，下面第一张图的项目没设置高度，其余图片中均为60px。flex-start会让项目在纵轴紧贴容器顶部，flex-end与之相反：center使用最多，自然不会陌生，在纵轴中心位置排列：baseline比较特殊，它让项目以第一行文字的基线为参照进行排列：

6.align-content

取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);

用于控制多行项目的对齐方式，如果项目只有一行则不会起作用；默认stretch，即在项目没设置高度，或高度为auto情况下让项目填满整个容器，与align-items类似

项目属性：

1.order

取值：默认0，用于决定项目排列顺序，数值越小，项目排列越靠前。

2.flex-grow

取值：默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；注意，即便设置了固定宽度，也会放大。

假设默认三个项目中前两个个项目都是0，最后一个是1，最后的项目会沾满剩余所有空间。

3.flex-shrink

取值：默认1，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。

但如果某个项目flex-shrink设置为0，则即便空间不够，自身也不缩小。

4.flex-basis

取值：默认auto，用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会width属性高，因此会覆盖widtn属性。

5.flex

取值：默认0 1 auto，flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。

该属性有两个快捷键值，分别是auto(1 1 auto)等分放大缩小，与none(0 0 auto)不放大不缩小。

6.align-self

取值：auto(默认) | flex-start | flex-end | center | baseline | stretch，表示继承父容器的align-items属性。如果没父元素，则默认stretch。

用于让个别项目拥有与其它项目不同的对齐方式，各值的表现与父容器的align-items属性完全一致。

02.CSS3新特性

  1. transition：过渡
  2. animation：动画
  3. transform：形状转换
  4. 选择器
  5. box-shadow：阴影
  6. border-radius：边框圆形化处理
  7. rgba：颜色
  8. 弹性布局Flex

03.img中alt和title的区别

alt属性是在图片不能正常显示时出现的文本提示。

title属性是在鼠标在移动到元素上的文本提示。

 04.用纯CSS创建一个三角形 

<style>
    div {
        width: 0;
        height: 0;
        border-top: 40px solid transparent;
        border-left: 40px solid transparent;
        border-right: 40px solid transparent;
        border-bottom: 40px solid #ff0000;
    }
    </style>
</head>
<body>
  <div></div>
</body>

05.CSS的盒子模型

box-sizing:conten-box（标准模型）| border-box（IE模型）

标准盒子模型：宽度=内容的宽度（content）+ border + padding

IE盒子模型：宽度=内容宽度（content+border+padding)

 06.div水平居中

a. 已知宽度，block元素 ，添加添加margin:0 auto属性。

b.已知宽度，绝对定位的居中 ，上下左右都为0，margin:auto

07.div水平垂直居中

div {

position: relative / fixed; /* 相对定位或绝对定位均可 */

width:500px;

height:300px;

top: 50%;

left: 50%;

margin-top:-150px;

margin-left:-250px; 

}

div {

position: relative / fixed; /* 相对定位或绝对定位均可 */

top: 50%;

left: 50%;

transform：translate（-50%，-50%）

}

div {

display:flex;

justify-content:center;

align-content:center;

}

 08.清除浮动

  1. clear清除浮动（添加空div法）在浮动元素下方添加空div,并给该元素写css样式 {clear:both;height:0;overflow:hidden;}
  2. 给浮动元素父级设置高度
  3. 父级同时浮动（需要给父级同级元素添加浮动）
  4. 父级设置成inline-block，其margin: 0 auto居中方式失效
  5. 给父级添加overflow:hidden 清除浮动方法
  6. 万能清除法 after伪类 清浮动（现在主流方法，推荐使用）

float_div:after{ content:"."; clear:both; display:block; height:0; overflow:hidden; visibility:hidden; } .float_div{ zoom:1 }

 09.display:none 和 visibility: hidden的区别

display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。

visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

 10.CSS中 link 和@import 的区别

  1. link属于HTML标签，而@import是CSS提供的页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
  2. import只在IE5以上才能识别，而link是HTML标签，无兼容问题
  3. link方式的样式的权重 高于@import的权重.

 11.position的absolute与fixed共同点与不同点

共同点： 改变行内元素的呈现方式，display被置为block 让元素脱离普通流，不占据空间 默认会覆盖到非定位元素上

不同点： absolute的”根元素“是可以设置的 fixed的”根元素“固定为浏览器窗口。当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

 12.transition和animation的区别

主要区别是transition需要触发一个事件才能改变属性， 而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from .... to，而animation可以一帧一帧的。

transition 规定动画的名字 规定完成过渡效果需要多少秒或毫秒 规定速度效果 定义过渡效果何时开始 animation 指定要绑定到选择器的关键帧的名称

13. CSS优先级

  1. !important（优先级最高）
  2. id 选择器
  3. class选择器、属性选择器、伪类选择器
  4. 标签选择器、伪元素选择器
  5. 通配符选择器、关系选择器 （优先级最低）

 14.title与h3的区别、b与strong的区别、i与em的区别？

 <b>与 <strong>用在网页上都能使字体加粗，二者的不同是：<b>是物理元素 ;<strong>是逻辑元素。

物理元素强调的是一种物理行为。比如说，把一段文字用b加粗，意思是告诉浏览器应该加粗显示，没有其他作用。而<strong>可以从字面理解知道它是强调的意思，<strong>是逻辑标签，强调文档逻辑。

 对于搜索引擎（SEO）来说，<strong>比<b>重视的多。

<em>和<i>都是斜体，但是<em>是逻辑元素，<i>是物理元素。

 二、JS

1.typeof和instance of 检测数据类型有什么区别？

相同点： 都常用来判断一个变量是否为空，或者是什么类型的。

不同点：

  1. typeof 返回值是一个字符串，用来说明变量的数据类型
  2. instanceof 用于判断一个变量是否属于某个对象的实例

 2.元素消失的方法

  1. opacity:0,该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定了一些事件，如click事件也能触发。
  2. visibility:hidden,该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件。
  3. display:node, 把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删掉。
  4. z-index:-1

 3.浅拷贝和深拷贝

浅拷贝只是对指针的拷贝，拷贝后两个指针指向同一个内存空间

深拷贝不但对指针进行拷贝，而且对指针指向的内容进行拷贝，经深拷贝后的指针是指向两个不同地址的指针。

 4.es6的新特性

  1. let定义块级作用域变量 没有变量的提升，必须先声明后使用 let声明的变量，不能与前面的let，var，conset声明的变量重名
  2. const 定义只读变量 const声明变量的同时必须赋值，const声明的变量必须初始化，一旦初始化完毕就不允许修改 const声明变量也是一个块级作用域变量 const声明的变量没有“变量的提升”，必须先声明后使用 const声明的变量不能与前面的let， var ， const声明的变量重 const定义的对象\数组中的属性值可以修改,基础数据类型不可以
  3. ES6可以给形参函数设置默认值
  4. 数组之前加上三个点（...）展开运算符
  5. 数组的解构赋值、对象的解构赋值
  6. 箭头函数的特点 箭头函数相当于匿名函数，是不能作为构造函数的，不能被new 箭头函数没有arguments实参集合,取而代之用...剩余运算符解决 箭头函数没有自己的this。他的this是继承当前上下文中的this 箭头函数没有函数原型 箭头函数不能当做Generator函数，不能使用yield关键字 不能使用call、apply、bind改变箭头函数中this指向 Set数据结构，数组去重

 5.==和===区别是什么？

==返回一个布尔值；相等返回true，不相等返回false； 允许不同数据类型之间的比较； 如果是不同类型的数据进行，会默认进行数据类型之间的转换； 如果是对象数据类型的比较，比较的是空间地址

=== 只要数据类型不一样，就返回false；

6.call bind apply 的区别？

  1. 都是用于改变this指向
  2. 通过apply和call改变函数的this指向，他们两个函数的第一个参数都是一样的表示要改变指向的那个对象，第二个参数，apply是数组，而call则是arg1,arg2...这种形式。
  3. 通过bind改变this作用域会返回一个新的函数，这个函数不会马上执行。

7.js继承方式

  1. 原型链继承 核心： 将父类的实例作为子类的原型
  2. 构造继承 核心：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类
  3. 实例继承 核心：为父类实例添加新特性，作为子类实例返回
  4. 拷贝继承
  5. 组合继承 核心：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现 函数复用
  6. 寄生组合继承 核心：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实 例方法/属性，避免的组合继承的缺点

8.闭包的理解

在函数的内部可以访问全局变量，但是在函数的外部无法访问函数内部的局部变量。 有时候我们需要获取函数内部的局部变量，此时就要使用到闭包。 做法就是在函数内部再定义一个函数，这个函数就可以访问外部的变量，之后我们再把内部函数作为外部函数的返回值，这样就可以在外部函数中读取到局部变量了。 闭包就是定义在一个函数内部的函数，是连接内外函数的桥梁。

9.原型和原型链

 把所有的对象共用的属性全部放在堆内存的一个对象（共用属性组成的对象），然后让每一个对象的 __proto__存储这个「共用属性组成的对象」的地址。而这个共用属性就是原型，原型出现的目的就是为了减少不必要的内存消耗。而原型链就是对象通过__proto__向当前实例所属类的原型上查找属性或方法的机制，如果找到Object的原型上还是没有找到想要的属性或者是方法则查找结束，最终会返回null

10.浏览器输入网址到页面渲染全过程

  1. DNS解析
  2. TCP连接（三次握手）
  3. 发送HTTP请求
  4. 服务器处理请求并返回HTTP报文
  5. 浏览器解析渲染页面
  6. 关闭TCP连接（四次挥手）

11. cookies，sessionStorage 和 localStorage 的区别

相同点：都是保存在浏览器端，且同源的。

不同点：

  • cookie数据始终在同源的http请求中携带，即cookie在浏览器和服务器间来回传递。
  • 而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
  • cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据。
  • sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；
  • localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
  • cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 作用域不同，sessionStorage不在不同的浏览器窗口*享，即使是同一个页面；
  • localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

12.js中跨域方法

  1. jsonp跨域(只能解决get）
  2. document.domain 基础域名相同 子域名不同
  3. window.name 利用在一个浏览器窗口内，载入所有的域名都是共享一个window.name
  4. 服务器设置对CORS的支持 原理：服务器设置Access-Control-Allow-Origin HTTP响应头之后，浏览器将会允许跨域请求
  5. 利用h5新特性window.postMessage()
  6. Web Sockets

13. 页面优化方法

  • 减少 HTTP请求数
  • 从设计实现层面简化页面
  • 合理设置 HTTP缓存
  • 资源合并与压缩
  • 合并 CSS图片，减少请求数的又一个好办法。
  • 将外部脚本置底（将脚本内容在页面信息内容加载后再加载）
  • 多图片网页使用图片懒加载。
  • 在js中尽量减少闭包的使用
  • 尽量合并css和js文件
  • 尽量使用字体图标或者SVG图标，来代替传统的PNG等格式的图片
  • 减少对DOM的操作
  • 在JS中避免“嵌套循环”和 “死循环”
  • 尽可能使用事件委托（事件代理）来处理事件绑定的操作

14.Ajax步骤

  1.  创建ajax实例
  2. 执行open 确定要访问的链接 以及同步异步
  3. 监听请求状态
  4. 发送请求

15. 数组去重的方法

function unique(arr){

var arr2 = arr.sort();

var res = [arr2[0]];

for(var i=1;i<arr2.length;i++)

{ if(arr2[i] !== res[res.length-1]){ res.push(arr2[i]); } }

return res; }

利用下标查询

function unique(arr){

var newArr = [arr[0]];

for(var i=1;i<arr.length;i++){ if(newArr.indexOf(arr[i]) == -1){ newArr.push(arr[i]); } }

return newArr; }

16. ajax中get和post请求的区别

  • get 一般用于获取数据
  • get请求如果需要传递参数，那么会默认将参数拼接到url的后面；然后发送给服务器；
  • get请求传递参数大小是有限制的；是浏览器的地址栏有大小限制；
  • get安全性较低
  • get 一般会走缓存，为了防止走缓存，给url后面每次拼的参数不同；放在?后面，一般用个时间戳
  • post 一般用于发送数据
  • post传递参数，需要把参数放进请求体中，发送给服务器；
  • post请求参数放进了请求体中，对大小没有要求；
  • post安全性比较高；
  • post请求不会走缓存；

17.ajax的状态码

 2开头（成功）

  • 200 : 代表请求成功;

3开头（重定向）

  • 301 : 永久重定向；
  • 302: 临时转移
  • 304 : 读取缓存 [表示浏览器端有缓存，并且服务端未更新，不再向服务端请求资源]
  • 307:临时重定向

4开头（客户端）

  • 400 :数据/格式错误
  • 401: 权限不够；（身份不合格，访问网站的时候，登录和不登录是不一样的）
  • 404 : 路径错误，找不到文件

5开头（服务器）

  • 500 : 服务器的问题
  • 503: 超负荷

18. 常见的异步任务

  1. 定时器
  2. ajax
  3. 事件绑定
  4. 回调函数
  5. async await
  6. promise

19. 作用域

  1. 全局作用域
  2. 私有作用域
  3. 块级作用域
  4. 上级作用域

20. Promise处理异步

他是ES6中新增加的一个类（new Promise）,目的是为了管理JS中的异步编程的，所以把他称为“Promise设计模式” new Promise 经历三个状态：padding(准备状态：初始化成功、开始执行异步的任务)、fullfilled(成功状态)、rejected(失败状态)== Promise本身是同步编程的，他可以管理异步操作的（重点），new Promise的时候，会把传递的函数立即执行 Promise函数天生有两个参数，resolve(当异步操作执行成功，执行resolve方法),rejected(当异步操作失败，执行reject方法) then()方法中有两个函数，第一个传递的函数是resolve,第二个传递的函数是reject ajax中false代表同步，true代表异步，如果使用异步，不等ajax彻底完成

21. map和forEach的区别

相同点

  • 都是循环遍历数组中的每一项 forEach和map方法里每次执行匿名函数都支持3个参数，参数分别是item（当前每一项）、index（索引值）、arr（原数组），需要用哪个的时候就写哪个 匿名函数中的this都是指向window 只能遍历数组

不同点

  • map方法返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。(原数组进行处理之后对应的一个新的数组。)
  • map()方法不会改变原始数组 map()方法不会对空数组进行检测
  • forEach()方法用于调用数组的每个元素，将元素传给回调函数.(没有return，返回值是undefined）

22.async await函数

  •  异步代码的新方式
  • 基于promise实现的
  • 异步代码更像同步代码
  • await 只能在async函数中使用，不能再普通函数中使用，要成对出现
  • 默认返回一个promise实例
  • await下面的代码是异步，后面的代码是同步的

23.this指向

  •  普通函数非严格模式下调用的时候指向于Window,严格模式指向为undefind
  • 构造函数调用this指向于实例对象
  • 对象方法调用this指向与该方法所属的对象
  • 事件绑定方法this指向于绑定事件对象
  • 定时器函数this指向于Window
  • 自执行函数中的this永远指向window
  • 箭头函数没有this，this是指向于外面的一层，如果没有则指向Window

24. 异步回调（如何解决回调地狱）

promise、generator、async/await

promise： 1.是一个对象，用来传递异步操作的信息。代表着某个未来才会知道结果的时间，并未这个事件提供统一的api，供进异步处理 2.有了这个对象，就可以让异步操作以同步的操作的流程来表达出来，避免层层嵌套的回调地狱 3.promise代表一个异步状态，有三个状态pending（进行中），Resolve(以完成），Reject（失败） 4.一旦状态改变，就不会在变。任何时候都可以得到结果。从进行中变为以完成或者失败 promise.all() 里面状态都改变，那就会输出，得到一个数组 promise.race() 里面只有一个状态变为rejected或者fulfilled即输出 promis.finally()不管指定不管Promise对象最后状态如何，都会执行的操作（本质上还是then方法的特例）

25.前端事件流

  1. 事件捕获
  2. 事件目标
  3. 事件冒泡

26.事件如何先捕获后冒泡

 在DOM标准事件模型中，是先捕获后冒泡。但是如果要实现先冒泡后捕获的效果， 对于同一个事件，监听捕获和冒泡，分别对应相应的处理函数，监听到捕获事件，先暂缓执行，直到冒泡事件被捕获后再执行捕获事件。

27. 如何判断一个变量是对象还是数组（prototype.toString.call()）

千万不要使用typeof来判断对象和数组，因为这种类型都会返回object。

三、Vue

 1.V-model的原理

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)。

2.谈谈对生命周期的理解

  • beforeCreate阶段：vue实例的挂载元素el和数据对象data都是undefined，还没有初始化。
  • created阶段：vue实例的数据对象data有了，可以访问里面的数据和方法，未挂载到DOM，el还没有
  • beforeMount阶段：vue实例的el和data都初始化了，但是挂载之前为虚拟的dom节点
  • mounted阶段：vue实例挂载到真实DOM上，就可以通过DOM获取DOM节点
  • beforeUpdate阶段：响应式数据更新时调用，发生在虚拟DOM打补丁之前，适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器
  • updated阶段：虚拟DOM重新渲染和打补丁之后调用，组成新的DOM已经更新，避免在这个钩子函数中操作数据，防止死循环
  • beforeDestroy阶段：实例销毁前调用，实例还可以用，this能获取到实例，常用于销毁定时器，解绑事件
  • destroyed阶段：实例销毁后调用，调用后所有事件监听器会被移除，所有的子实例都会被销毁

3. vuex的流程

页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation。 mutation会修改state中对于的值。 最后通过getter把对应值跑出去，在页面的计算属性中 通过mapGetter来动态获取state中的值

4.vuex有哪几种状态和属性

  • state中保存着共有数据，数据是响应式的
  • getter可以对state进行计算操作，主要用来过滤一些数据，可以在多组件之间复用
  • mutations定义的方法动态修改state中的数据，通过commit提交方法，方法必须是同步的
  • actions将mutations里面处理数据的方法变成异步的，就是异步操作数据，通store.dispatch来分发actions，把异步的方法写在actions中，通过commit提交mutations，进行修改数据。
  • modules：模块化vuex

5.vue路由的两种模式

  • hash ——即地址栏URL中的#符号（此hsah 不是密码学里的散列运算） hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。
  • history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法

这两个方法应用于浏览器的历史记录站，在当前已有的back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改是，虽然改变了当前的URL，但你浏览器不会立即向后端发送请求。

6.vue中 key 值的作用

key是vue中的 vnode标记的唯一id,通过这个key,我们的df算法操作可以更准确,更快速的算出那个dome元素需要修改。如果不加key,那么vue会选择复用节点vue的就地更新策略),导致之前节点的状态被保留下来,会产生一系列的bug

key的作用主要是为了高效的更新虚拟DOM。

7. $route和$router的区别

  • $route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。
  • $router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

8.vue-router守卫

全局守卫

  • router.beforeEach 全局前置守卫
  • router.afterEach 全局后置守卫

组件守卫

  • beforeRouteEnter
  • beforeRouteUpdate
  • beforeRouteLeave

9. vue修饰符

  • stop：阻止事件的冒泡
  • prevent：阻止事件的默认行为
  • once：只触发一次
  • self：只触发自己的事件行为时，才会执行

10.vue项目中的性能优化

  1. 不要在模板里面写过多表达式
  2. 循环调用子组件时添加key
  3. 频繁切换的使用v-show，不频繁切换的使用v-if
  4. 尽量少用float，可以用flex
  5. 按需加载，可以用require或者import()按需加载需要的组件
  6. 路由懒加载

11.V-if和V-show区别

v-if是”真正”的渲染,每次为ture的时候会渲染dome元素出来, v-show页面一初始化的时候就渲染出来,只是根据条件去改变 display的属性,实现显示和隐藏,如果是经常切换的条件不建议使用vⅱ进行条件判断,非常频繁的切换建议,使用 v-show进行判断比较好。 

相关标签： 前端面试 面试

上一篇： 前端笔试题目合集（持续更新）

下一篇： 15 个第三方 Web 表单资源

推荐阅读