2026年Web前端工程师初级面试题库

2026年Web前端工程师（初级）面试题库一、单选题（每题2分，共10题）1.HTML5中，用于定义文章内容的元素是？A.`<div>`B.`<section>`C.`<article>`D.`<span>`2.CSS中，哪个属性用于控制元素的外边距？A.`padding`B.`margin`C.`border`D.`border-radius`3.JavaScript中，以下哪个方法用于向数组末尾添加元素？A.`push()`B.`pop()`C.`shift()`D.`unshift()`4.React中，用于存储组件内部状态的钩子是？A.`useState()`B.`useEffect()`C.`useContext()`D.`useReducer()`5.Vue3中，哪个指令用于绑定用户的输入事件？A.`v-model`B.`v-on`C.`v-bind`D.`v-if`6.CSSGrid布局中，用于定义网格列的属性是？A.`grid-template-columns`B.`grid-template-rows`C.`grid-gap`D.`grid-area`7.Web性能优化中，以下哪个方法不属于代码分割的范畴？A.`Webpack`的`SplitChunksPlugin`B.`CodeSplitting`C.`LazyLoading`D.`TreeShaking`8.HTTP协议中，哪个状态码表示“请求成功”？A.`200`B.`404`C.`500`D.`301`9.浏览器缓存中，以下哪个策略不属于强缓存？A.`Cache-Control:public`B.`ETag`C.`Expires`D.`Max-Age`10.Webaccessibility中，哪个属性用于提高屏幕阅读器的可访问性？A.`aria-label`B.`alt`C.`title`D.`style`二、多选题（每题3分，共5题）1.CSSFlexbox布局中，以下哪些属性用于控制子项的对齐方式？A.`justify-content`B.`align-items`C.`flex-wrap`D.`flex-direction`2.JavaScript异步编程中，以下哪些属于Promise的状态？A.`pending`B.`fulfilled`C.`rejected`D.`resolved`3.React生命周期中，以下哪些方法属于类组件的生命周期钩子？A.`componentDidMount`B.`componentWillUnmount`C.`useEffect`D.`getDerivedStateFromProps`4.Web安全中，以下哪些属于XSS攻击的防范措施？A.`HTML实体编码`B.`CSP`C.`CSRF`D.`输入验证`5.Web性能优化中，以下哪些方法有助于提升页面加载速度？A.`图片懒加载`B.`CDN`C.`GZIP压缩`D.`预加载`三、判断题（每题1分，共10题）1.`<header>`元素在HTML5中用于定义页面的页眉部分。2.CSS中，`inline`布局的元素不支持设置`margin`和`padding`。3.JavaScript中，`let`声明的变量属于全局作用域。4.React中，`useState`钩子可以用于函数组件以外的组件类型。5.Vue3中，`v-for`指令需要配合`:key`使用以优化性能。6.CSSGrid布局中，`grid-template-areas`用于定义网格区域的命名。7.HTTP协议中，`301`状态码表示“永久重定向”。8.浏览器缓存中，`Cache-Control:no-cache`表示禁止缓存。9.Webaccessibility中，`alt`属性仅用于图片元素。10.Web性能优化中，`TreeShaking`可以移除未使用的代码。四、简答题（每题5分，共4题）1.简述CSS中`box-sizing:border-box`的作用。2.解释JavaScript中`async/await`的原理。3.如何实现React组件的受控组件模式？4.简述HTTP请求的`GET`和`POST`方法的区别。五、编程题（每题15分，共2题）1.编写一个React组件，实现一个简单的待办事项列表，支持添加和删除待办事项。2.编写一个Vue3组件，实现一个轮播图，支持自动播放和手动切换。答案与解析一、单选题1.C解析：`<article>`用于定义独立的文章内容，而`<div>`是通用容器，`<section>`用于文档中的章节，`<span>`是行内元素。2.B解析：`margin`控制元素的外边距，`padding`控制内边距，`border`控制边框，`border-radius`控制圆角。3.A解析：`push()`用于添加元素，`pop()`删除元素，`shift()`删除第一个元素，`unshift()`添加到开头。4.A解析：`useState`用于状态管理，`useEffect`处理副作用，`useContext`获取上下文，`useReducer`更复杂的状态管理。5.A解析：`v-model`实现双向绑定，`v-on`绑定事件，`v-bind`绑定属性，`v-if`条件渲染。6.A解析：`grid-template-columns`定义列，`grid-template-rows`定义行，`grid-gap`定义间隙，`grid-area`定义区域。7.D解析：`TreeShaking`属于代码压缩范畴，其他属于代码分割。8.A解析：`200`表示成功，`404`表示未找到，`500`表示服务器错误，`301`表示重定向。9.B解析：`ETag`属于协商缓存，其他属于强缓存。10.A解析：`aria-label`用于屏幕阅读器，`alt`是图片替代文本，`title`是提示信息，`style`是样式。二、多选题1.A,B解析：`justify-content`控制水平对齐，`align-items`控制垂直对齐，其他属性定义布局方向和换行。2.A,B,C解析：Promise状态为`pending`（等待）、`fulfilled`（成功）、`rejected`（失败），`resolved`不是标准状态。3.A,B,D解析：`componentDidMount`和`componentWillUnmount`是生命周期钩子，`useEffect`是函数组件钩子，`getDerivedStateFromProps`是类组件钩子。4.A,B,D解析：`HTML实体编码`、`CSP`、`输入验证`可防范XSS，`CSRF`是跨站请求伪造攻击。5.A,B,C,D解析：所有选项都有助于提升性能。三、判断题1.正确2.错误解析：`inline`元素也支持`margin`和`padding`，但不会影响布局。3.错误解析：`let`声明局部变量，`var`是全局变量。4.错误解析：`useState`仅用于函数组件。5.正确6.正确7.正确8.正确9.错误解析：`alt`也用于`input`等元素。10.正确四、简答题1.`box-sizing:border-box`的作用答：`border-box`使元素的宽度和高度包含内容、内边距和边框，而不需要额外计算边框宽度。默认是`content-box`，宽度仅包含内容。2.`async/await`的原理答：`async/await`是语法糖，基于Promise实现。`async`声明异步函数，`await`暂停执行等待Promise完成，返回结果。本质是Promise链的简化。3.React受控组件模式答：受控组件是表单数据由React组件管理，通过`state`绑定表单元素，修改时更新`state`。例如：jsx<inputvalue={value}onChange={e=>setValue(e.target.value)}/>4.`GET`和`POST`的区别答：`GET`参数在URL中，无状态，用于查询；`POST`参数在请求体中，可修改数据，用于提交。五、编程题1.React待办事项列表jsxfunctionTodoList(){const[todos,setTodos]=useState([]);const[input,setInput]=useState('');constaddTodo=()=>{setTodos([...todos,input]);setInput('');};constremoveTodo=(index)=>{setTodos(todos.filter((_,i)=>i!==index));};return(<div><inputvalue={input}onChange={e=>setInput(e.target.value)}/><buttononClick={addTodo}>添加</button><ul>{todos.map((todo,index)=>(<likey={index}>{todo}<buttononClick={()=>removeTodo(index)}>删除</button></li>))}</ul></div>);}2.Vue3轮播图vue<template><divclass="carousel"><button@click="prev">上一张</button><divclass="slides"><divv-for="(slide,index)inslides":key="index"class="slide">{{slide}}</div></div><button@click="next">下一张</button></div></template><script>exportdefault{data(){return{slides:['图片1','图片2','图片3'],current:0,};},mounted(){setInterval(()