初级前端面试题及答案.docxVIP

初级前端面试题及答案

一、HTML基础题

什么是HTML语义化标签？举3个常用的语义化标签并说明用途

答案：语义化标签就是让标签名能直接体现内容的含义，不用再靠class去区分。好处是搜索引擎能更好识别内容，同事看代码也能快速懂结构。比如header一般放页面顶部的logo、导航；article用来包独立的内容，像博客正文、新闻详情；footer就是页脚，放版权、联系方式这些。

HTML5比HTML4多了哪些常用新特性？

答案：除了刚才说的语义化标签，还有本地存储（localStorage、sessionStorage），比如存用户登录状态，关了浏览器再开还在；canvas能画图形、做简单动画，比如网页里的折线图；还有表单新类型，像inputtype=date直接调出日期选择器，不用自己写插件；另外还有音频视频标签audio、video，不用依赖Flash就能播放。

localStorage和sessionStorage的区别是什么？

答案：首先存储时间不一样，localStorage存在浏览器里，除非手动删或者用代码清，不然一直在；sessionStorage只要关了标签页就没了。然后共享范围也不同，同一浏览器里，同一个网站的所有标签页能共享localStorage，但sessionStorage是每个标签页单独的，互相不影响。比如存购物车临时数据用sessionStorage，存用户偏好设置用localStorage。

二、CSS基础题

CSS盒模型有哪两种？区别是什么？怎么切换？

答案：两种是标准盒模型和IE盒模型。标准盒模型里，width和height只算内容区（content），padding和border会把盒子撑大；IE盒模型的width和height包含了content、padding和border，不会额外撑大。切换用box-sizing属性，box-sizing:content-box是标准模型（默认），box-sizing:border-box是IE模型。实际开发里一般都设border-box，比如写表单输入框，不用算padding和border的宽度，方便。

CSS选择器的优先级怎么算？举个例子说明

答案：优先级从高到低是：!important（最顶，但尽量少用）内联样式（标签里的style属性）ID选择器（#xxx）类/伪类/属性选择器（.xxx、:hover、[type=text]）元素/伪元素选择器（div、::after）。计算的时候可以按“权重”算：内联1000，ID100，类/伪类10，元素1，加起来谁大谁生效。比如#box.text权重是100+10=110，div.text是1+10=11，所以前者样式会覆盖后者。

怎么用Flex布局让一个子元素在父元素里水平垂直居中？

答案：给父元素加两个属性就行。先让父元素变成Flex容器：display:flex，然后水平居中用justify-content:center，垂直居中用align-items:center。比如父元素是div，类名叫parent，子元素是child，CSS就是：

.parent{display:flex;justify-content:center;align-items:center;width:300px;height:200px;}

这样child不管宽高多少，都会在parent正中间。

三、JavaScript基础题

var、let、const的区别是什么？

答案：首先作用域不一样，var是函数级作用域，let和const是块级作用域（比如if、for括号里的范围）。然后var会变量提升，就是变量没声明就用也不报错，值是undefined；let和const不会，没声明就用会报“未定义”错。还有重复声明，var可以重复声明同一个变量，后面的会覆盖前面的；let和const不行，重复声明会报错。const是声明常量，赋值后不能改，而且声明的时候必须赋值；let可以改值，也可以先声明后赋值。实际开发里尽量不用var，优先用const，要改值再用let。

什么是Promise？它有哪几种状态？举个简单例子

答案：Promise是用来解决回调地狱的，比如先调接口1，再用接口1的结果调接口2，嵌套太多会乱，Promise能把它写成链式调用，更清楚。它有三种状态：pending（等待中，刚开始的状态）、fulfilled（成功，比如接口请求成功）、reject