HTML
1. HTML5的新特性
语义化标签: header、footer、nav、section、article、aside 等
API：地理定位Geolocation、拖放drag
视频和音频：audio、video
web storage: localStorage、sessionStorage
2. Doctype作用
声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。
3. 行内元素、块级元素有哪些？
行内元素：input、img、span等
块级元素：div、h1-h6、ul、ol、li等
4. 浏览器内核
1)、主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。内核就倾向于只指渲染引擎。
JS引擎则：解析和执行javascript来实现网页的动态效果。
2)、常见内核：
Trident内核：IE,360,搜狗浏览器等。
Gecko内核：Firefox
Webkit内核：Safari
Blink内核：Chrome
5. cookies，sessionStorage 和 localStorage 的区别
6. 浏览器内多个标签页之间的通信
1)、localStorage.setItem(key,value);添加内容
localstorage是浏览器多个标签共用的存储空间，所以可以用来实现多标签之间的通信
2)、cookie+setInterval
在页面A设置一个使用 setInterval 定时器不断刷新，检查 Cookies 的值是否发生变化，如果变化就进行刷新的操作。
由于 Cookies 是在同域可读的，所以在页面 B 审核的时候改变 Cookies 的值，页面 A 自然是可以拿到的。
3、SharedWorker：可以被多个window共同使用，但必须保证这些标签页都是同源的(相同的协议，主机和端口号)
7. src 和 href 的区别
src：指向外部资源的位置，指向的内容将会应用到文档中当前标签所在位置。
href：指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的联系。
不同：href 用于在当前文档和引用资源之间确立联系；src 用于替换当前内容
8. canvas和SVG
SVG： SVG表示（scalable vector graphics）可缩放矢量图形。这是一个基于文本的图形语言，它可以绘制使用文本、线、点等的图 形，因此可以轻巧又快速地渲染。 使用场景：功能更原始，适合像素处理，动态渲染和大数据量绘制，如百度地图
Canvas： 是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图。
9. Link和@include 引用
1)、link是XHTML标签，除了能够加载CSS，还可以定义RSS等其他事务；而@import属于CSS范畴，只可以加载CSS。
2)、link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后再加载。
3)、link是XHTML标签，无兼容问题；@import则是在CSS2.1提出的，低版本的浏览器不支持。
4)、link支持使用Javascript控制DOM改变样式；而@import不支持。
10. img标签的alt属性和title属性
alt是在图片不能正常加载时候，作为图片的替代文字出现
title是图片的解释文字。
11. WebSocket是什么
1)、WebSocket是HTML5一种新的协议，目的是在浏览器和服务器之间建立一个不受限的双向通信的通道，真正实现了全双工通信的服务器 向客户端推的互联网技术
2)、为什么要使用WebSocket技术
当我们在处理页面数据自动更新的时候，在使用js不断的请求服务器，查看是否有新数据。
如果有就获取到新数据，进行对页面信息的更新，但是当页面长时间没有更新数据时，这样就会存在资源浪费的情况，所以才会使用 WebSocket来解决。
3)、Http与WebSocket的区别？
http协议是短链接，因为请求之后，都会关闭连接，下次重新请求数据，需要再次打开连接。
WebSocket协议是一种长连接，只需要通过一次请求来初始化链接，然后所有的请求和响应都是通过这个TCP链接进行通信。
CSS
1. CSS 的盒子模型
2. CSS选择器及优先级
3. CSS3伪类和伪元素
伪类：获取不能被常规CSS选择器获取的信息、获取不存在与DOM树中的信息。 本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息
例子：:first-of-type、:nth-child、:link、:hover
伪元素(本质上是创建了一个有内容的虚拟容器)： 例子：::after、::before
4. 水平垂直居中
5. 实现双飞翼（圣杯）布局
6. CSS3有哪些新特性
7. 浮动及如何清除浮动
8. Display：none 与 visibility：hidden 的区别
9. px、em 和 rem 的区别
10. rem 适配方法
11. 如何解决 margin“塌陷”
12. less 和 Scss 的配置使用以及特点
13. Bootstrap 栅格系统的工作原理
14. BFC 是什么
15. CSS画0.5 px的线
16. 画三角形
17. CSS动画
18. 重构、回流
JavaScript
1. JavaScript 的数据类型及如何判断
基本数据类型：Number、String、Undefined、Null、Boolean、Symbol
引用数据类型：Object、Array、Function
typeof：常用于判断基本数据类型，对于引用数据类型除了function返回’function‘，其余全部返回’object'。
instance of：主要用于区分引用数据类型，检测方法是检测的类型在当前实例的原型链上， 用其检测出来的结果都是true，不太适合用于简单数据类型的检测， 检测过程繁琐且对于简单数据类型中的undefined, null, symbol检测不出来。
constructor：用于检测引用数据类型，检测方法是获取实例的构造函数判断和某个类是否相同， 如果相同就说明该数据是符合那个数据类型的，这种方法不会把原型链上的其他类也加入进来，避免了原型链的干扰。
Object.prototype.toString.call()：适用于所有类型的判断检测， 检测方法是Object.prototype.toString.call(数据)，返回的是该数据类型的字符串。
2. 创建函数的几种方式
方式一：函数声明
function 函数名(){
console.log('使用函数声明来创建一个函数')
}方式二：函数对象
var 函数名 = new Function(){
"console.log('使用函数对象来创建一个函数');"
}方式三：函数表达式
var 函数名 = function(){
console.log('使用函数表达式来创建一个函数')
}3. 创建对象的几种方式
4. === 和 ==的区别
5. null，undefined 的区别
6. 如何区分数组和对象
7. 怎么判断两个对象相等
8. 列举三种强制类型转换和两种隐式类型转换
9. 原型和原型链
原型： 在声明定义函数时，函数都会有一个 prototype 属性，这个属性就是一个指针，指向一个对象， 而这个对象就是原型对象（简称原型）。通过构造函数创建的实例对象， 可以直接访问到构造函数的 prototype 属性上（即原型对象）的属性和方法
原型链： 对象有__proto__属性, 属性值指向了当前的原型对象, 原型对象也是对象, 原型对象也有__proto__属性,原型对象的__proto__属性值指向了原型对象的原型对象, 这样一环套一环,形成的链式结构叫做原型链
10. 作用域和作用域链
ES5 中只存在两种作用域：全局作用域和函数作用域。
ES6 中新增了块级作用域，let 和 const 定义的变量存在块级作用域。
作用域链：当访问一个变量时，编译器在执行这段代码时，会首先从当前的作用域中查找是否有这个标识符， 如果没有找到，就会去父作用域查找，如果父作用域还没找到继续向上查找，直到全局作用域为止。
11. 如何实现继承
12. 闭包及应用场景
闭包的概念：简单概括就是函数内部嵌套函数，在嵌套的函数内有权访问另一个函数作用中的变量。 但其实闭包的意义就是在于使得函数拥有了内部自己的变量，并且无法被外部随意访问。 利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。
闭包的特性：1.函数内再嵌套函数 2.内部函数可以引用外层的参数和变量 3.参数和变量不会被垃圾回收机制回收
13. new操作符具体干了什么呢
1)、创建了一个空的js对象
2)、空对象的原型指针指向构造函数的原型对象
3)、利用函数的 call 方法改变 this 指向，在空对象上挂载属性或方法
4)、返回对象
14. apply、call、bind
1)、使用 apply、call、bind 函数也是可以改变 this 的指向的，this 指向第一个参数对象。
2)、apply 和 call 的区别在于传入的参数不同，call 方法接受的是若干个参数列表，而 apply 接收的第二个参数必须是一个数组。
3)、bind 是创建一个新的函数，必须要手动去调用。
4)、call 和 apply 都是改变上下文中的this并立即执行这个函数。
15. JS数组方法
| 函数 | 作用 |
|---|---|
| join() | 将数组中所有元素都转化为字符串连接在一起 |
| sort() | 将数组中的元素排序 |
| reverse() | 将数组中的元素颠倒顺序 |
| concat() | 将多个数组或数连接起来，组成一个新的数组 |
| slice() | 返回指定数组的一个片段或子数组 |
| splice() | 在数组指定位置插入或删除元素 |
| push() | 在数组的尾部添加一个或多个元素 |
| pop() | 删除数组的最后一个元素，并返回该元素 |
| unshift() | 在数组的头部添加一个或多个元素 |
| shift() | 删除数组第一个元素，并返回该元素 |
| toString() | 返回将数组每个元素转化为字符串并用逗号分隔连接起来的字符串 |
| forEach() | 从头至尾遍历数组，为每个元素调用指定的函数 |
| map() | 将调用的数组的每个元素传递给指定的函数，并返回一个数组 |
| filter() | 根据回调函数内的逻辑判断过滤数组元素，并返回一个新的数组 |
| every() | 对数组元素应用指定的函数进行判断，返回true或false |
| some() | 对数组元素应用指定的函数进行判断，返回true或false |
| reduce() | 使用指定的函数将数组元素进行组合 |
| reduceRigth() | 使用指定的函数将数组元素进行组合 |
| indexOf() | 判断一个数在该数组中的索引位置 |
| lastIndexOf() | 判断一个数在该数组中的索引位置 |
| find() | 遍历数组，找出第一个符合回调函数的元素 |
| findIndex() | 遍历数组，找出第一个符合回调函数的元素的索引 |
| fill() | 用于填充数组 |
| includes() | 判断一个数是否在该数组中 |
16. event loop事件模型
1.JS是单线程的
JS中的代码都是串行的, 前面没有执行完毕后面不能执行
2.执行顺序
2.1 程序运行会从上至下依次执行所有的同步代码
2.2 在执行的过程中如果遇到异步代码会将异步代码放到事件循环中
2.3 当所有同步代码都执行完毕后, JS会不断检测事件循环中的异步代码是否满足条件
2.4 一旦满足条件就执行满足条件的异步代码
3.宏任务和微任务
在JS的异步代码中又区分”宏任务(MacroTask)”和”微任务(MicroTask)”
宏任务: 宏/大的意思, 可以理解为比较费时比较慢的任务
微任务: 微/小的意思, 可以理解为相对没那么费时没那么慢的任务
4.常见的宏任务和微任务
MacroTask: setTimeout, setInterval, setImmediate（IE独有）…
MicroTask: Promise, MutationObserver ,process.nextTick（node独有) …
注意点: 所有的宏任务和微任务都会放到自己的执行队列中, 也就是有一个宏任务队列和一个微任务队列
所有放到队列中的任务都采用”先进先出原则”, 也就是多个任务同时满足条件, 那么会先执行先放进去的
5.完整执行顺序
1.从上至下执行所有同步代码
2.在执行过程中遇到宏任务就放到宏任务队列中,遇到微任务就放到微任务队列中
3.当所有同步代码执行完毕之后, 就执行微任务队列中满足需求所有回调
4.当微任务队列所有满足需求回调执行完毕之后, 就执行宏任务队列中满足需求所有回调
17. 事件委托机制
原理：把原本需要绑定在子元素的响应事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。
应用场景：如果我们有一个列表，列表之中有大量的列表项，我们需要在点击列表项的时候响应一个事件。
我们可以将li元素的点击事件绑定到它的父元素ul身上，执行事件的时候再去匹配判断目标元素。
18. 同步和异步的区别是什么
同步任务是那些没有被引擎挂起、在主线程上排队执行的任务。只有前一个任务执行完毕，才能执行后一个任务。
异步任务是那些被引擎放在一边，不进入主线程、而进入任务队列的任务。
只有引擎认为某个异步任务可以执行了（比如 Ajax 操作从服务器得到了结果），该任务（采用回调函数的形式）才会进入主线程执行。
排在异步任务后面的代码，不用等待异步任务结束会马上运行，也就是说，异步任务不具有“堵塞”效应。
19. 如何理解js的单线程
20. 内存泄漏
内存泄露：申请的内存空间没有被正确释放，导致后续程序里这块内存被永远占用（不可达），而且指向这块内存空间的指针不再存在时，这块内存也就永远不可达了。
内存溢出：存储的数据超出了指定空间的大小，这时数据就会越界。
举例来说，常见的溢出，是指在栈空间里，分配了超过数组长度的数据，导致多出来的数据覆盖了栈空间其他位置的数据，这种情况发生时，可能会导致程序出现各种难排查的异常行为。
21. 跨域
什么是跨域：当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，此请求就是一个跨域 HTTP 请求
如何避免跨域？
（1）通过html几个特殊的标签进行访问
script、link 、img 、iframe。 这些标签的 src 属性是不会受到浏览器的同源策略的限制
（2）通过jsonp来实现跨域请求
在script标签的src属性后面，拼接上一个 callback=回调函数名
Title
//在script标签的src属性后面，拼接上一个 callback=回调函数名
（3）通过CORS（跨域资源共享）实现跨域请求
给服务端相应头设置一下属性即可：Access-Control-Allow-Origin:*
1
2
3
Access-Control-Allow-Origin:*
Access-Control-Allow-Methods:POST,GET,OPTIONS
Access-Control-Allow-Headers:Origin,x-requested-with,content-type,Accept
（4）通过代理实现跨域请求
比如我们请求一个与自身不同域的脚本文件，那么我们可以先请求与自身同域的一个 url ，然后通过代理服务器进行跳转， 最后返回由代理服务器请求到的脚本文件
//引入 express 框架
const express = require('express');
//引入 代理中间件
const { createProxyMiddleware } = require('http-proxy-middleware');
//创建服务实例
const app = express();
// 使用一下代理中间件，第一个参数为我们需要代理的 url
// 第二个参数为跳转的 url
app.use('/api', createProxyMiddleware({ target: 'http://www.example.com:5000', changeOrigin: true }));
//监听5000端口
app.listen(5000);ES6
1. 数组去重
2. 深拷贝和浅拷贝
3. 扩展运算符
4. 伪数组转化为真实的数组
5. 变量提升与函数提升的区别
6. var，let，const的比较
7. set( ) 和 map( )
Set 又被称为集合：
1、集合中的元素无序且唯一
2、集合中的元素可以是任何类型、
3、Set 用途之一是可以去除数组中的重复元素
Map：类似于对象，也是键值对的集合