web前端基础面试题

涵盖常见考点，助力面试通关

在web前端的面试中，基础问题是考察的重点。下面将从几个关键方面为大家详细介绍常见的基础面试题。

html相关问题

html是网页的骨架，面试中常考的问题有元素语义化。比如问你为什么要使用语义化标签，答案就是语义化标签能让代码结构更清晰，方便开发者阅读和维护，同时有利于搜索引擎优化。像使用header、nav、article、section、footer等标签来构建页面结构，比单纯使用div更具语义。还有一个常见问题是html5新特性，这包括语义化标签、本地存储（localstorage和sessionstorage）、多媒体标签（video和audio）等。例如，使用video标签可以直接在网页中嵌入视频，而无需依赖第三方插件。

css相关问题

css用于美化网页，盒模型是常考知识点。盒模型由内容区、内边距、边框和外边距组成。计算一个元素的总宽度时，需要把内容区宽度、左右内边距、左右边框宽度相加。例如，一个元素的width为100px，左右内边距各10px，左右边框各5px，那么它的总宽度就是100 + 10×2 + 5×2 = 130px。另一个重要问题是浮动和清除浮动。浮动元素会脱离文档流，可能导致父元素高度塌陷。可以使用clear: both清除浮动，或者使用bfc（块级格式化上下文）来解决。比如给父元素设置overflow: hidden就可以创建bfc。

javascript相关问题

javascript是网页交互的核心。变量提升是常考概念。在javascript中，变量和函数声明会被提升到当前作用域的顶部。例如：

console.log(a); // 输出undefined

var a = 10;

这里虽然在使用变量a之后才声明，但由于变量提升，不会报错，只是输出undefined。还有作用域问题，javascript有全局作用域和函数作用域，es6引入了块级作用域（let和const声明的变量）。例如：

function test() {

let b = 20;

}

console.log(b); // 报错，b未定义，因为b在函数作用域内

浏览器相关问题

浏览器渲染机制是重要考点。浏览器解析html生成dom树，解析css生成cssom树，两者结合形成渲染树，然后进行布局和绘制。回流和重绘也是常考内容。当dom的变化影响了元素的布局信息（元素的宽高、边距等），浏览器需要重新计算元素的布局信息，将其安放到界面中的正确位置，这个过程叫回流。当dom的变化只影响了元素的外观（颜色、背景等），只需要重新绘制元素，这个过程叫重绘。回流的代价比重绘大，所以要尽量减少回流。

响应式设计相关问题

响应式设计能让网页在不同设备上都有良好的显示效果。媒体查询是实现响应式设计的重要手段。通过媒体查询可以根据设备的屏幕宽度等条件应用不同的css样式。例如：

@media screen and (max-width: 768px) {

body {

font-size: 14px;

}

}

这段代码表示当屏幕宽度小于等于768px时，将body的字体大小设置为14px。还有viewport的使用，通过设置viewport可以控制页面在移动设备上的缩放和布局。