2020前端面试题（HTML、CSS、JS）
2020-07-21 本文已影响0人
柳岸花茗
一. HTML
1. 你是如何理解HTML语义化的？
根据内容的结构化， 选择合适的标签。
例如：文章就用article标签，标题就用h1标签，代码就用code标签等。
便于开发者阅读和写出更优雅的代码。
好处：（1）有利于SEO（搜索引擎优化）
（2）呈现较好的内容结构和代码结构。
（3）便于开发和维护。
（4）方便其它设备解析。
2. meta-viewport 是做什么的？怎么写？
meta标签主要用于描述页面中的一些信息。
写法：
<meta name="viewport"
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标签？
<hader></header>
<content></content>
<footer></footer>
<main></main>
<section></section>
<h1> - <h5>
<pre></pre>
<article></article>
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
