2026年web前端常见面试题及答案

2026年web前端常见面试题及答案考试时长：120分钟满分：100分一、单选题（总共10题，每题2分，总分20分）1.在HTML5中，用于定义文章章节标题的标签是？A.<section>B.<article>C.<header>D.<nav>2.以下哪个CSS选择器具有最高的优先级？A.类选择器（.class）B.ID选择器（#id）C.标签选择器（div）D.属性选择器（[type="text"]）3.JavaScript中，以下哪个方法用于向数组末尾添加一个或多个元素？A.push()B.pop()C.shift()D.unshift()4.React中，用于管理组件内部状态的钩子是？A.useEffect()B.useContext()C.useState()D.useRef()5.在CSS中，如何实现元素的垂直居中（水平方向使用flexbox）？A.display:flex;justify-content:center;align-items:center;B.display:block;margin:0auto;C.position:absolute;top:50%;transform:translateY(-50%);D.float:left;margin-left:50%;6.WebP格式相比JPEG格式的主要优势是？A.更高的文件体积B.更差的质量表现C.支持透明通道D.仅适用于静态图片7.以下哪个HTTP状态码表示“请求成功”？A.404B.500C.200D.3028.在Vue.js中，用于监听数据变化的指令是？A.v-modelB.v-forC.v-onceD.v-if9.CSSGrid布局中，如何定义一个具有三列的网格容器？A.grid-template-columns:1fr1fr1fr;B.display:inline-grid;C.grid-columns:3;D.column-count:3;10.以下哪个JavaScript框架基于TypeScript？A.AngularB.ReactC.Vue.jsD.Svelte二、填空题（总共10题，每题2分，总分20分）1.HTML中，用于定义页面标题的标签是________。2.CSS中，通过________属性可以设置元素的外边距。3.JavaScript中，用于声明变量的关键字包括________和const。4.React中，用于处理副作用的钩子是________。5.CSS中，使用________属性可以实现元素的绝对定位。6.HTTP协议中，状态码401表示________。7.Web前端性能优化中，减少HTTP请求的方法之一是使用________。8.Vue.js中，用于绑定DOM事件的方法是________。9.CSS中，通过________属性可以设置元素的透明度。10.在Web开发中，用于传输加密数据的协议是________。三、判断题（总共10题，每题2分，总分20分）1.HTML5中的<canvas>标签可以用于绘制矢量图形。（×）2.CSS中的flex-grow属性用于控制子项的宽度比例。（√）3.JavaScript中的undefined和null是等价的。（×）4.React中的Hooks只能在函数组件中使用。（√）5.CSSGrid布局和Flexbox布局可以同时使用。（√）6.WebP格式不支持动画。（√）7.HTTP状态码301表示“请求重定向”。（√）8.Vue.js中的computed属性是响应式的。（√）9.CSS中的z-index属性可以控制元素的堆叠顺序。（√）10.HTTPS协议比HTTP协议安全性更高。（√）四、简答题（总共4题，每题4分，总分16分）1.简述React中的组件生命周期。2.解释CSS中的盒模型（BoxModel）及其组成部分。3.说明JavaScript中Promise的作用及其三种状态。4.描述Web前端性能优化的主要方法。五、应用题（总共4题，每题6分，总分24分）1.请编写HTML和CSS代码，实现一个水平居中、宽度为300px的蓝色边框盒子。2.使用JavaScript编写一个函数，接收一个数组作为参数，返回该数组中所有偶数的平方和。3.在React中，编写一个简单的计数器组件，包含“增加”和“减少”按钮，并显示当前计数。4.假设你正在开发一个电商网站，请列举至少三种前端性能优化措施，并说明其原理。【标准答案及解析】一、单选题1.A解析：HTML5中<section>标签用于定义文档中的一个章节，通常包含标题和相关的流内容。2.B解析：ID选择器的优先级最高，其次是标签选择器、类选择器和属性选择器。3.A解析：push()方法用于向数组末尾添加元素，pop()用于删除末尾元素，shift()和unshift()分别用于删除和添加首部元素。4.C解析：useState()是React的钩子，用于在函数组件中声明和管理内部状态。5.A解析：flexbox布局可以通过设置display:flex;justify-content:center;和align-items:center;实现水平和垂直居中。6.C解析：WebP格式支持透明通道，且通常比JPEG文件体积更小，质量更高。7.C解析：200表示请求成功，404表示未找到资源，500表示服务器错误，302表示重定向。8.A解析：v-model用于双向数据绑定，v-for用于循环渲染，v-once表示只渲染一次，v-if用于条件渲染。9.A解析：grid-template-columns:1fr1fr1fr;定义了三列等宽的网格布局。10.A解析：Angular基于TypeScript，React和Vue.js基于JavaScript，Svelte是编译时框架。二、填空题1.<title>2.margin3.let4.useEffect()5.position:absolute6.未经身份验证7.CSSsprites（雪碧图）8.@click9.opacity10.HTTPS三、判断题1.×解析：<canvas>标签用于绘制2D图形，不支持矢量图形。2.√解析：flex-grow控制子项在可用空间中的扩展比例。3.×解析：undefined表示未定义，null表示空值，两者不等价。4.√解析：Hooks是React16.8引入的，只能在函数组件中使用。5.√解析：Grid和Flexbox可以嵌套使用，实现复杂布局。6.√解析：WebP支持静态和动画格式，但动画功能不如GIF或APNG。7.√解析：301表示永久重定向，302表示临时重定向。8.√解析：computed属性基于依赖进行缓存，自动更新。9.√解析：z-index控制元素在三维空间中的堆叠顺序。10.√解析：HTTPS通过TLS/SSL加密传输数据，安全性更高。四、简答题1.React组件生命周期：-挂载阶段：constructor()→render()→componentDidMount()-更新阶段：shouldComponentUpdate()→render()→componentDidUpdate()-卸载阶段：componentWillUnmount()2.CSS盒模型：-内容（Content）：元素的实际内容区域。-边框（Border）：围绕内容的边框。-外边距（Margin）：元素与其他元素的外部空间。-逻辑盒模型（CSS3）：包括padding和border，通过box-sizing:border-box包含在内。3.JavaScriptPromise：-作用：处理异步操作，避免回调地狱。-三种状态：pending（等待态）、fulfilled（成功态）、rejected（失败态）。4.性能优化方法：-减少HTTP请求：合并文件、雪碧图。-代码压缩：删除空格、缩短变量名。-缓存利用：设置HTTP缓存头。-延迟加载：异步加载非关键资源。五、应用题1.HTML和CSS代码：```html<divclass="box"></div>``````css.box{width:300px;height:200px;border:2pxsolidblue;display:flex;justify-content:center;align-items:center;}```2.JavaScript函数：```javascriptfunctionsumOfEvenSquares(arr){returnarr.reduce((sum,num)=>{if(num%2===0){returnsum+numnum;}returnsum;},0);}```3.React计数器组件：```jsximportReact,{useState}from'react';functionCounter(){const[count,setCount]=useState(0);return(<div><h1>{count}</h1><buttononClick={()=