css和html面试题及答案2020,2020前端面试题（HTML、CSS、JS）

一. HTML

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

根据内容的结构化， 选择合适的标签。

例如：文章就用article标签，标题就用h1标签，代码就用code标签等。

便于开发者阅读和写出更优雅的代码。

好处：(1)有利于SEO(搜索引擎优化)

(2)呈现较好的内容结构和代码结构。

(3)便于开发和维护。

(4)方便其它设备解析。

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

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

写法：

content="width=device-width,

initial-scale=1,

maximum-scale=1">

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