接下来给大家总结一下前端面试题，大家可以眼熟一下，总结的不是很多，后续还会持续更新。

 

一.html、css面试题

HTML和HTML5有什么区别？

主要有三个区别：

1、文档声明区别

1.HTML：超文本标记语言，一种纯文本类型的语言。

2.HTML5.0：文档声明HTML5方便书写，精简，有利于程序员快速的阅读和开发。

2、结构语义区别

1.html：没有体现结构语义化的标签，如：<div id="nav"></div>

2.html5：添加了许多具有语义化的标签，如：<article>、<aside>、<audio>、<bdi>...

3、绘图区别

1.HTML：指可伸缩矢量图形，用于定义网络的基于矢量的图形。

2.HTML5：HTML5的canvas元素使用脚本（通常使用JavaScript）在网页上绘制图像，可以控制画布每一个像素。

4、什么是盒子模型？

一个盒子我们会分成几个部分：内容区(content)、内边距(padding)、边框(border)、外边距(margin)，也就是盒模型的组成由margin，padding，boder，content组成
盒子模型分为标准盒子模型和IE盒子模型

2.如何理解HTML5语义化？

5、HTML语义化标签
header – 标题
nav – 导航
article – 文章
section – 节或段
aside – 侧边栏
footer – 页脚
6、语义化的好处？

1.在没有css代码的情况下，也能很好的呈现内容结构、代码结构（让非技术员也能看懂代码）
2.提高用户体验，比如：title，alt用于解释名词和图片信息
3.利于SEO。语义化能和搜索引擎建立更好的联系，优化搜索
4.便于团队开发与维护，语义化更具有可读性

7、CSS选择器以及优先级的理解？

1.常用的CSS选择器

ID选择器、类选择器、标签选择器、属性选择器、伪类选择器、后代选择器

2.权重划分

在同一层级下：

!important > 内联样式 > ID选择器 > 类选择器 > （标签选择器、伪类选择器、属性选择器）

不同层级下：

正常来说权重值越高的优先级越高，但是一直以来没有具体的权重值划分，所以目前大多数开发中层级越深的优先级越高

8.如何解决a标点击后hover事件失效的问题?

爱恨法则

1 a:link，定义正常链接的样式；

2 a:visited，定义已访问过链接的样式；

3 a:hover，定义鼠标悬浮在链接上时的样式；

4 a:active，定义鼠标点击链接时的样式。

9.实现水平垂直居中的几种方式

①定位

position:absolute

Top:50%

Left:50%

Transform:translate(-50%,-50%)

②flex布局

Display:flex

Justify-content:center

Align-items:center

3.js面试题

1、js数据类型

1.基本数据类型
Number、String、Boolean、Null、Undefined、Symbol、bigInt
2.引用数据类型
object、Array、Date、Function、RegExp
2、js变量和函数声明的提升

1.在js中变量和函数的声明会提升到最顶部执行
2.函数的提升高于变量的提升
3.函数内部如果用 var 声明了相同名称的外部变量，函数将不再向上寻找。
4.匿名函数不会提升。
3、闭包

1.闭包就是能够读取其他函数内部变量的函数
2.闭包基本上就是一个函数内部返回一个函数
好处
1.可以读取函数内部的变量
2.将变量始终保持在内存中
3.可以封装对象的私有属性和私有方法
坏处
比较耗费内存、使用不当会造成内存溢出的问题
4、== 和 ===的区别

1.==是非严格意义上的相等
值相等就相等
2.===是严格意义上的相等，会比较两边的数据类型和值大小
值和引用地址都相等才相等
5、this

1.this总是指向函数的直接调用者
2.如果有new关键字，this指向new出来的对象
3.在事件中，this指向触发这个事件的对象
6、js数组和对象的遍历方式

for in
for
forEach
for-of

 7.回调函数和事件绑定的优缺点

1.回调函数：

优点：简单容易理解

缺点：不利于维护，代码耦合性高

2.事件监听：

优点：容易理解，可以绑定多个事件，每个事件可以指定多个回调函数

缺点：事件驱动型，流程不够清晰

8.什么是作用域链？

1.作用域链可以理解为一组对象列表，包含 父级和自身的变量对象，因此我们便能通过作用域链访问到父级里声明的变量或者函数。

9.什么是原型，原型链，继承？

1.所有的函数都有prototype属性（原型）

2.所有对象都有__proto__属性

3.在js中，每个函数都有一个原型属性prototype指向自身的原型，而由这个函数创建的对象也有一个proto属性指向这个原型，而函数的原型是一个对象，所以这个对象也会有一个proto指向自己的原型，这样逐层深入直到Object对象的原型，这样就形成了原型链。

10.谈谈你对回流和重绘的理解？

1.什么是回流？

当一个元素自身的宽高，布局，显示或隐藏，或元素内部的文字结构发生变化，导致需要重新构建页面的时候，就产生了回流
2.什么是重绘？

当一个元素自身的宽高，布局，及显示或隐藏没有改变，而只是改变了元素的外观风格的时候，就产生了重绘

11.jQuery能做什么？
获取页面的元素；修改页面的外观；改变页面大的内容；响应用户的页面操作；为页面添加动
态效果；无需刷新页面，即可以从服务器获取信息；简化常见的javascript任务。

12.jQuery的作用：

1.快速获取文档元素

2.提供漂亮的页面动态效果

3.创建Ajax无刷新网页

4.提供对JavaScript语言的增强

5.增强的事件处理

6.更改网页内容
JQuery可以修改网页中的内容,比如更改网页的文本、插入或转网页图像, jQuery简化了原本使用JavaScript代码需要处理的方式。

13.jQuery的优点 

1.利用css的选择器提供高速的元素查找行为。
2.提供了一个抽象层来标准化各种常见的任务，可以解决各种浏览器的兼容问题。
3.将复杂的代码简化，提供连缀编程模式，大大简化了代码的操作。

14.script 引入方式? 

1.html静态引入<script>

2.js动态插入<script>

15.JS垃圾回收机制是怎样的？
1.概述

js的垃圾回收机制是为了防止内存泄漏（已经不需要的某一块内存还一直存在着），垃圾回收机制就是不停歇的寻找这些不再使用的变量，并且释放掉它所指向的内存。
在JS中，JS的执行环境会负责管理代码执行过程中使用的内存。

16. jQuery库中的$()函数的是什么？

$() 全局核心函数，可传4种参数

1.传函数，相当于$(document).ready() 入口函数

2.传选择器，获取节点放入jquery对象中

3.传dom对象 转化我jquery对象

4.传unll,undefined,'',jquery 容错机制

17.jQuery ready函数和JavaScript window.onload事件有何不同？

1.js的入口函数要等到所有资源加载完毕（包括图片，文件）加载完毕才执行

2.jquery的入口函数只会等待文档树加载完毕后就开始执行，不会等待图片，文件加载

执行时机不一样，jquery先执行，js后执行

18. Canvas和SVG的区别？

1.canvas是H5中新增的画布，是位图，用js创建画笔通过方法绘画，一般不使用css样式对宽高修改，因为将画布缩放，会使图片失真

2.svg是来源于XML中的，是矢量图，与canvas类似，是用标签和css样式进行绘画，本质上是文本，不会出现失真的问题

3.canvas的内容不能绑定事件，svg可以绑定

19. new关键字的四步

1.在构造函数中创建一个空对象

2.将this指向这个空对象

3.执行函数，给这个空对象添加属性和方法

4.返回这个对象

20. 本地存储的区别

1.浏览器本地存储：以字符串的行式存储，信息有同源规则，存储大小为4kb，不会因为关闭浏览器而清楚，除非手动清除浏览器缓存。

2.会话本地存储：也是以字符串的行式存储信息，也有同源规则，存储大小为4kb，当关闭浏览器时会清空数据，安全性更高