说一说HTML语义化？
对于开发者而言，语义化标签有着更好的页面结构，利于个人的代码编写。 对于用户而言，当网络卡顿时有良好的页面结构，有利于增加用户的体验。 对于爬虫来说，有利于搜索引擎的SEO优化，利于网站有更靠前的排名。 对于团队来讲，有利于代码的开发和后期的维护。
说一说盒模型？
1，盒模型分为两类，一是标准盒模型，二是怪异盒模型。一般我们的盒子默认是标准盒模型。 2，两者区别是标准盒模型的实际宽高会把padding和border计算在内，而怪异盒模型不会。 3，形成怪异盒模型的条件是box-sizing:border-box；形成标准盒模型的条件box-sizing:content-box。
说一下浮动？
从三个方面回答：1、浮动的作用：常用于图片，可以实现文字环绕图片。2、浮动的特点：脱离文档流，容易造成盒子塌陷，影响其他元素的排列。3、解决塌陷问题：流行用法：父元素中添加overflow:hidden、给父元素添加高度、建立空白标签 添加clear、或者在父级添加伪元素::after{content:'',clear:both,display:table}。 说一说样式优先级的规则是什么？ important > 内联样式（style） > ID选择器（id） > 类选择器(class) > 标签选择器
说一说CSS尺寸设置的单位
- px：绝对像素 2. rem：相对于根元素像素 3. em：相对于父元素像素 4. vw：视口宽度 5. vh：视口高度
说一说BFC
得分点 块级格式化上下文、独立的渲染区域、不会影响边界以外的元素、形成BFC条件、float、position、overflow、display 标准回答 BFC(Block Formatting Context)块级格式化上下文，是Web页面一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素。 BFC布局规则 -内部盒子会在垂直方向，一个接一个地放置。 -Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。 -每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 -BFC的区域不会与float box重叠。 -BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 -计算BFC的高度时，浮动元素也参与计算。 BFC形成的条件 -
float设置成left或right-position是absolute或者fixed-overflow不是visible，为auto、scroll、hidden-display是flex或者inline-block等 BFC解决能的问题：清除浮动 加分回答 BFC的方式都能清除浮动，但是常使用的清除浮动的BFC方式只有overflow:hidden,原因是使用float或者position方式清除浮动，虽然父级盒子内部浮动被清除了，但是父级本身又脱离文档流了，会对父级后面的兄弟盒子的布局造成影响。如果设置父级为display:flex，内部的浮动就会失效。所以通常只是用overflow: hidden清除浮动。 IFC（Inline formatting contexts）：内联格式上下文。IFC的高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)，IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。 GFC（GrideLayout formatting contexts）：网格布局格式化上下文。当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域。 FFC（Flex formatting contexts）：自适应格式上下文。display值为flex或者inline-flex的元素将会生成自适应容器。
说一说BFC
说几个未知宽高元素水平垂直居中方法
；1、使用相对定位，绝对定位来做，元素：position：sbsolute，left：50%，top：50%，tranform：translate（-50%，-50%） 2、 设置元素的父级为弹性盒子display:flex，设置父级和盒子内部子元素水平垂直都居中justify-content:center; align-items:center ， 3.设置元素的父级为网格元素display: grid，设置父级和盒子内部子元素水平垂直都居中justify-content:center; align-items:center ，这种方式代码简介，但是兼容性ie 10以上支持 4. 设置元素的父级为表格元素display: table-cell，其内部元素水平垂直都居中text-align: center;vertical-align: middle; ，设置子元素为行内块`display: inline-block;
说一说三栏布局的实现方案
三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，一共有五种实现方式。 这里以左边宽度固定为100px，右边宽度固定为200px为例。 （1）利用绝对定位的方式，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。 （2）利用flex布局的方式，左右两栏的宽度分别设置为100px和200px，中间一栏增长系数设置为1 （3）利用浮动的方式，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意这种方式，中间一栏必须放到最后。 （4）圣杯布局，利用浮动和负边距来实现。父级元素设置左右的padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置margin负值将其移动到上一行，再利用相对定位，定位到两边。圣杯布局中间列的宽度不能小于左边列的宽度，否则左边列上不去，而双飞翼布局则不存在这个问题。 （5）双飞翼布局，双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的margin值来实现的，而不是通过父元素的padding来实现的。本质上来说，也是通过浮动和外边距负值来实现的。
说一说JS数据类型有哪些,区别是什么？
原始数据类型：number、string、boolean、undefined、null、symbol、bigint 引用数据类型：object（包括Array，Function、Object类等） 区别：前七中原生数据类型的存放在栈中，引用数据类型存放在堆中，它的地址在栈中，一般我们访问就是它的地址
说一说null 和 undefined 的区别，如何让一个属性变为null
null表示一个值被定义了，但是是空值，但是undefined表示未被定义。null和undefined在if判断中都会被解析为false，但是在用Number运算时，null的结果为0，undefined的结果为NaN，让属性变为null就需要先定义，再赋空值
说一说JavaScript有几种方法判断变量的类型
- typeof（根据二进制判断）,不能判断数据类型：null和object 2. intanceof(根据原型链判断),原生数据类型不能判断 3. constructor.name(根据构造器判断)，不能判断null数据类型 4. Object.prototype.toString.call()（用Object的toString方法判断）所有类型数据都能判断,记住判断结果打印为：'[object Xxx]'
说一说数组去重都有哪些方法？
1.array.from(new Set(arr)):不考虑兼容性，这种方法去重代码最少。这种方法还没无法去掉“{}”空对象；2.利用for嵌套for，使用splice(ES5中常用)；3.利用indexOf去重，新建一个空的结果数组，for循环原数组，判断结果数组中是否存在当前元素，如果存在则跳过，如果不存在，就push到结果数组；4.利用sort（倒叙方法，然后根据排序后的结果进行遍历及相邻的元素比较）；5.利用include，判断数组中书否包含某个值，不包含则push，包含则跳过；6.利用map数据结构去重：创建一个空的map数据结构，遍历需要去重的数组，把数组的每个元素作为key存在map中。由于map中不会出现相同的值，所以最终得到的是去重之后的结果；7.[...new Set(arr)]
说一说伪数组和数组的区别？
- 伪数组的特点：类型是object、不能使用数组方法、可以获取长度、可以使用for in遍历 2. 伪数组可以装换为数组的方法：a. Array.prototype.slice.call() b.Array.from() c. [...伪数组] 3. 有哪些是伪数组：函数的参数arguments，Map和Set的keys()、values()和entires()
说一说map 和 forEach 的区别？
- map有返回值，且返回值是新数组，而forEach无返回值，返回结果undefined，一般做修改修改数组操作 2. map和forEach用只能用try...catch...中断抛出错误中断，而return不能，用其效果相当于for循环的continue会跳过此次循环进入下一次循环。
说一说es6中箭头函数？
箭头函数比普通函数的定义写法更加简洁明了和快捷。但是两者又有区别：箭头函数没有原型prototype和super，所以无法创建this，其this是通过继承外部函数环境中的变量获取的，所以call、bind、apply都无法改变其this的指向；在找不到最外层的普通函数时，其this一般指向window；箭头函数不能使用new；箭头函数没有arguments；也不能作为generator函数，不能使用yield命令；箭头函数不能用于对象域和回调函数动态this中，一般用在内部没有this引用。
事件扩展符用过吗(...)，什么场景下？
对象中的扩展运算符(...)用于取出参数对象中的所有可遍历的属性，浅拷贝到当前的对象中，浅拷贝和深拷贝：浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。
说一说你对闭包的理解？
闭包形成的原理：作用域链，当前作用域可以访问上级作用域中的变量 闭包解决的问题：能够让函数作用域中的变量在函数执行结束之后不被销毁，同时也能在函数外部可以访问函数内部的局部变量。 闭包带来的问题：由于垃圾回收器不会将闭包中变量销毁，于是就造成了内存泄露，内存泄露积累多了就容易导致内存溢出。 加分回答 闭包的应用，能够模仿块级作用域，能够实现柯里化，在构造函数中定义特权方法、Vue中数据响应式Observer中使用闭包等。
说一说JS变量提升？
函数和var声明的变量会有变量提升，js在预编译阶段会将函数和var声明的变量提升至最前面先执行，之后再按顺序执行代码块进行赋值，而let和const声明的变量只是创建提升，在预编译中将其创建，形成暂时性死区，不能提前访问和调用变量，只能在赋值之后进行调用和访问
说一说this指向（普通函数、箭头函数）？
this当在普通函数调用时，如果处于非严格模式之中将会是指向window、如果是严格模式将会是指向undefined。 在对象之中调用，将会是指向当前的对象。通过new创建出来的对象将会是指向当前的新对象 如果是使用call、bind、apply修改了指向，将会指向绑定后的this 在箭头函数之中将会指向函数的外层执行上下文，当函数定义之后将会确定当前的this。继承了上一层执行环境的this
说一说call apply bind的作用和区别？
三者功能一致，改变函数体内的this指向 call、apply可以立即执行，bind不会立即执行，会返回一个函数 需要加入括号才会调用 apply的第二个参数是数组，call和bind有多个参数需要挨个写 说一说js继承的方法和优缺点？
1、原型链继承-缺点：父类的引用类型数据被所有子类共享，更改一个子类的数据，其他数据会受到影响，一起改变；子类实例不能向父类构造函数传参。2、借用构造函数的继承-优点：父类的引用类型数据不会被子类共享。缺点：子类不能访问父类原型属性的上的方法和参数。3、组合继承-优点：父类可以复用，父类构造函数中的引用类型数据不会被共享。缺点：会调用两次父类的构造函数，会有两份一样的属性和方***影响性能。4、寄生组合继承（目前推荐的最优的方法之一）-优点：解决组合继承调用两次父类构造函数的缺点。5、class继承extends，也是目前推荐的最优方法之一。
说一说new会发生什么？
看下new的实现代码就知道有以下四步：1. 创建一个新对象 2. 将新对象的__proto__（原型）指向构造函数的prototype（原型对象）3. 构造函数绑定新对象的this并执行返回结果 4. 判断返回结果是否为null，如果为null,返回新对象，否则直接返回执行结果。
说一说defer和async区别？
html文件都是按顺序执行的，script标签中没有加defer和async时，浏览器在解析文档时遇到script标签就会停止解析阻塞文档解析，先加载JS文件，加载完之后立即执行，执行完毕后才能继续解析文档。 而在script标签中写入defer或者async时，就会使JS文件异步加载，即html执行到script标签时，JS加载和文档解析同时进行，而async是在JS加载完成后立即执行JS脚本，阻塞文档解析，而defer则是JS加载完成后，在文档解析完成后执行JS脚本
说一说promise是什么与使用方法？
说一说JS实现异步的方法？
回调函数、事件监听、setTimeout（定时器）、Promise、async/await，generator生成器
说一说cookie sessionStorage localStorage 区别？
共同点：都是存储在浏览器本地； 不同： 1.cookie 服务器端写入； S，L 由前端写入； 生命周期 2.cookie由服务器端在写入的时候就设置好的；L写入就一直存在，除非手动清除；S 页面关闭就自动清除； 存储大小 3.cookie最小，4kb； S，L大约5M； 数据共享 4.数据共享都遵循同源原则，S还限制必须是同一个页面；前端向后端发送请求的时候会自动携带Cookie中的数据； 应用场景 5.Cookie一般用于存储登录验证信息SessionID或者token; L存储不易变动的数据，减轻服务器的压力；S可以用来检测用户是否是刷新进入 页面
说一说如何实现可过期的localstorage数据？
一种是惰性删除：惰性删除是指获取数据的时候，拿到存储的时间和当前时间做对比，如果超过过期时间就清除Cookie。 另一种是定时删除：每隔一段时间执行一次删除操作，并通过限制删除操作执行的次数和频率，来减少删除操作对CPU的长期占用。 LocalStorage清空应用场景：token存储在LocalStorage中，要清空
说一下token 能放在cookie中吗？
1.实现上是可以的，功能上不推荐，容易产生csrf问题 2.token一般存储在sessionStorage/localStorage里面。token的出现就是为了解决用户登录后的鉴权问题，如果采用cookie+session的鉴权方式，则无法有效地防止CSRF攻击，同时，如果服务端采用负载均衡策略进行分布式架构，session也会存在一致性问题，需要额外的开销维护session一致性。
说一说axios的拦截器原理及应用？
axios拦截器分为响应和请求拦截器，请求拦截器 在请求发送前进行必要操作处理，例如添加统一cookie、请求体加验证、设置请求头等，相当于是对每个接口里相同操作的一个封装； 响应拦截器 同理，响应拦截器也是如此功能，只是在请求得到响应之后，对响应体的一些处理，通常是数据统一处理等，也常来判断登录失效等。
说一说创建ajax过程？
（1）创建异步对象，即 XMLHttpRequest 对象。 （2）使用 open 方法设置请求参数。open(method, url, async)。参数解释：请求的方法、请求的 url、是否异步。第三个参数如果不写，则默认为 true。 （3）发送请求：send()。 （4）注册事件：注册 onreadystatechange 事件，状态改变时就会调用。如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。 （5）服务端响应，获取返回的数据。
