2020前端面试题（HTML、CSS、JS）

一. HTML

1. 你是如何理解HTML语义化的？

根据内容的结构化， 选择合适的标签。
例如：文章就用article标签，标题就用h1标签，代码就用code标签等。
便于开发者阅读和写出更优雅的代码。
好处：（1）有利于SEO（搜索引擎优化）
（2）呈现较好的内容结构和代码结构。
（3）便于开发和维护。
（4）方便其它设备解析。

2. meta-viewport 是做什么的？怎么写？

meta标签主要用于描述页面中的一些信息。
写法：

name = "viewport" 表示可供移动设备使用
content = "width=device-width" 表示移动设备下显示的宽度为设备宽度
initial-scale = 1 表示设备与视口的缩放比率
maximum 和 minimum 表示缩放的最大和最小值，等于1.0则不可缩放。

3. 你用过哪些HTML5标签？

 - 

4. H5是什么？

HTML5并不是一项技术，而是一个标准，所以严格意义上说，H5不是用来“做的”，
H5只是一个标准，通俗的说就是一种准则，不是一项技术。H5是指HTML第五次
重大修改版本，也指用H5语言制作的一切数字产品

二. CSS

1. 两种盒模型说一下。

border-box: width = border + padding + 内容的宽度

content-box: width = 内容的宽度

border-box更好的原因： content-box改变padding 和 border之后需要重新计算宽度，
而border-box不需要，但是boder-box的内容区域会被挤压。

2. 如何垂直居中？

1. .content{
          display: flex;
          aligin-item: center;
          justicfy-content: center;
    }
2. .content{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
    }
3. .coontent{
          width: 50px;
          height: 50px;
          position: absolute;
          left: 50%;
          top: 50%;
          margin-top: -25px;
          margin-left: -25px;
    } 
4. .content{
          width: 50px;
          height: 50px;
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          right: 0;
          margin: auto
     }  

3. flex怎么用？常用属性有哪些？

4. BFC是什么？

  BFC的全称是块级格式化上下文

  BFC的概念比较抽象，浮动元素、display:inline- 
  block、绝对定位元素和overflow: hidden等都形成BFC

  BFC的作用：使内部浮动元素不会乱跑，并可以和
  浮动元素产生边界margin。

5. CSS选择器的优先级？

1. 越具体优先级越高
2. 写在后面的覆盖写在前面的。
3. important! 优先级最高

6. 如何清除浮动？

  .clearfix{
       content: '',
       display: block;
       clear: both;
   }

三. 原生JS

1. ES6语法知道哪些？分别怎么用？

2. promise、promise.all、promise.race 分别怎么用？

  Promise是异步编程的一种解决方案，可以将异步操作以同步操作的流程
表达出来。Promise必须为以下三种状态：
Pending（等待），FullFilled（执行态），和Reject（拒绝）
状态的改变只能是单向的，且变化后不可变。
一个Promise必须调用一个then方法已返回其当前值、终值和拒因。
Promise.then回调函数只能执行一次，且返回Promise对象。

（1）Promise.all()方法将多个Promise实例，包装成
一个新的Promise实例。
Promise.all([promise1,promise2]).then(success, fali)
当Promise1和promise2都成功才会调用success。

（2）Promise.race()同样将多个Promise实例，包装
成一个新的Promise实例。
Promise.race([promise1,promise2]).then(success, fali)
promise1和promise2只要有一个成功就会调用success

3. 手写函数防抖和函数节流。

4. 手写Ajax

5. 这段代码里面的this是什么？

6. 闭包、立即执行函数是什么？

7. 什么是JSONP？什么是CORS？什么是跨域？

8. async/await 怎么用？如何捕获异常？

9. 如何实现深拷贝？

10. 如何用正则实现trim()？

11. 不用class如何实现继承？

12. 如何实现数组去重？

13. 手写一个Promise