2026年web前端招聘面试题及答案

2026年web前端招聘面试题及答案考试时长：120分钟满分：100分一、单选题（总共10题，每题2分，总分20分）1.在HTML5中，用于定义文章或博客章节的语义化标签是？A.<div>B.<section>C.<article>D.<span>2.以下哪个CSS选择器具有最高的优先级？A.类选择器（.class）B.ID选择器（#id）C.标签选择器（<tag>）D.属性选择器（[attribute]）3.JavaScript中，以下哪个方法用于向数组末尾添加一个或多个元素？A.push()B.pop()C.shift()D.unshift()4.React中，用于管理组件内部状态的钩子是？A.useEffect()B.useContext()C.useState()D.useReducer()5.在CSS中，如何实现元素的垂直居中？A.display:flex;justify-content:center;align-items:center;B.position:absolute;top:50%;transform:translateY(-50%);C.margin:0auto;D.Alloftheabove.6.以下哪个HTTP状态码表示请求成功？A.404B.500C.200D.3027.WebP格式相比JPEG格式的主要优势是？A.更高的压缩率B.更好的兼容性C.更快的加载速度D.Alloftheabove.8.在Vue.js中，用于监听数据变化的指令是？A.v-modelB.v-forC.v-onceD.v-if9.以下哪个是前端性能优化的有效方法？A.减少HTTP请求B.使用CDN加速C.压缩图片资源D.Alloftheabove.10.CSSGrid布局与Flexbox布局的主要区别是？A.Grid适用于二维布局，Flexbox适用于一维布局B.Grid支持嵌套布局，Flexbox不支持C.Grid的兼容性更好，Flexbox更灵活D.Alloftheabove.二、填空题（总共10题，每题2分，总分20分）1.HTML中，用于定义表单提交数据的编码方式是________。2.CSS中，通过________属性可以控制元素的透明度。3.JavaScript中，用于阻止事件默认行为的函数是________。4.React中，用于传递数据给子组件的钩子是________。5.CSS中，通过________属性可以实现元素的动画效果。6.HTTP协议中，状态码401表示________。7.Web前端中，用于缓存静态资源的协议是________。8.Vue.js中，用于声明组件模板的指令是________。9.CSS中，通过________属性可以设置元素的外边距。10.WebP格式支持________和透明度两种图像格式。三、判断题（总共10题，每题2分，总分20分）1.HTML5中的语义化标签可以提高网页的可访问性。（正确）2.CSS选择器的优先级顺序是：标签选择器>类选择器>ID选择器。（错误）3.JavaScript中的闭包可以访问外部函数的变量。（正确）4.React中的函数组件不能使用类组件的特性。（错误）5.CSS中，`position:fixed`表示元素相对于视口固定。（正确）6.HTTP状态码301表示永久重定向。（正确）7.WebP格式不支持动画图像。（错误）8.Vue.js中的`v-for`指令可以用于遍历数组或对象。（正确）9.CSS中，`box-shadow`属性可以添加阴影效果。（正确）10.Flexbox布局不支持二维布局。（错误）四、简答题（总共4题，每题4分，总分16分）1.简述HTML5中的语义化标签及其作用。答：HTML5中的语义化标签包括`<header>`、`<nav>`、`<article>`、`<section>`、`<aside>`、`<footer>`等，它们可以提高网页的可访问性和SEO效果，使代码更易读、易维护。2.解释CSS中的盒模型及其组成部分。答：CSS盒模型包括内容（content）、边框（border）、外边距（margin）和内边距（padding），其中内容是元素的实际显示区域，边框和内边距分别控制元素的外部和内部空间，外边距则控制元素与其他元素的距离。3.描述JavaScript中的异步编程及其常见方法。答：JavaScript中的异步编程允许程序在等待某些操作（如网络请求）完成时继续执行其他任务，常见方法包括回调函数、Promise和async/await。4.说明React中的组件生命周期及其主要阶段。答：React组件的生命周期分为三个阶段：挂载（Mounting）、更新（Updating）和卸载（Unmounting），每个阶段包含不同的钩子函数，如`componentDidMount`、`componentDidUpdate`和`componentWillUnmount`。五、应用题（总共4题，每题6分，总分24分）1.编写一个HTML5和CSS3代码，实现一个居中显示的圆形按钮，按钮背景为渐变色。答：HTML：```html<buttonclass="circle-button">ClickMe</button>```CSS：```css.circle-button{width:100px;height:100px;border-radius:50%;background:linear-gradient(toright,#ff7e5f,#feb47b);border:none;color:white;font-size:16px;display:flex;align-items:center;justify-content:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}```2.编写JavaScript代码，实现一个数组去重的函数。答：```javascriptfunctionuniqueArray(arr){return[...newSet(arr)];}constarr=[1,2,2,3,4,4,5];console.log(uniqueArray(arr));//[1,2,3,4,5]```3.编写Vue.js代码，实现一个简单的计数器组件，包含增加和减少按钮。答：```html<template><div><button@click="decrement">-</button><span>{{count}}</span><button@click="increment">+</button></div></template><script>exportdefault{data(){return{count:0,};},methods:{increment(){this.count++;},decrement(){this.count--;},},};</script>```4.编写React代码，实现一个简单的表单，包含用户名和密码输入框，以及提交按钮。答：```jsximportReact,{useState}from'react';functionForm(){const[username,setUsername]=useState('');const[password,setPassword]=useState('');consthandleSubmit=(e)=>{e.preventDefault();console.log({username,password});};return(<formonSubmit={handleSubmit}><inputtype="text"value={username}onChange={(e)=>setUsername(e.target.value)}placeholder="Username"/><inputtype="password"value={password}onChange={(e)=>setPassword(e.target.value)}placeholder="Password"/><buttontype="submit">Submit</button></form>);}exportdefaultForm;```【标准答案及解析】一、单选题1.C解析：`<article>`标签用于定义独立的、可独立分配的内容，如博客文章或新闻故事。2.B解析：ID选择器的优先级最高，其次是类选择器、标签选择器，最后是属性选择器。3.A解析：`push()`方法用于向数组末尾添加元素，`pop()`用于删除末尾元素，`shift()`和`unshift()`分别用于删除和添加开头元素。4.C解析：`useState()`钩子用于在函数组件中管理内部状态。5.D解析：以上三种方法都可以实现垂直居中，`flexbox`更通用，`transform`更灵活。6.C解析：200表示请求成功，404表示未找到资源，500表示服务器错误，302表示重定向。7.D解析：WebP格式具有更高的压缩率、更好的兼容性和更快的加载速度。8.A解析：`v-model`用于双向数据绑定。9.D解析：以上都是前端性能优化的有效方法。10.A解析：Grid适用于二维布局，Flexbox适用于一维布局。二、填空题1.application/x-www-form-urlencoded解析：表单提交数据的默认编码方式。2.opacity解析：`opacity`属性控制元素的透明度。3.event.preventDefault()解析：阻止事件默认行为。4.props解析：`props`用于父组件向子组件传递数据。5.animation解析：`animation`属性实现动画效果。6.Unauthorized解析：401表示未授权。7.Cache-Control解析：`Cache-Control`头用于缓存控制。8.template解析：`template`指令声明组件模板。9.margin解析：`margin`属性设置外边距。10.RGB和RGBA解析：WebP支持RGB和RGBA格式。三、判断题1.正确解析：语义化标签提高可访问性和SEO效果。2.错误解析：优先级顺序是：ID>类>标签。3.正确解析：闭包可以访问外部函数的变量。4.错误解析：函数组件可以通过`React.useContext`使用类组件特性。5.正确解析：`position:fixed`相对于视口固定。6.正确解析：301表示永久重定向。7.错误解析：WebP支持动画图像。8.正确解析：`v-for`可以遍历数组或对象。9.正确解析：`box-shadow`添加阴影效果。10.错误解析：Flexbox也支持二维布局。四、简答题1.简述HTML5中的语义化标签及其作用。答：HTML5中的语义化标签包括`<header>`、`<nav>`、`<article>`、`<section>`、`<aside>`、`<footer>`等，它们可以提高网页的可访问性和SEO效果，使代码更易读、易维护。2.解释CSS中的盒模型及其组成部分。答：CSS盒模型包括内容（content）、边框（border）、外边距（margin）和内边距（padding），其中内容是元素的实际显示区域，边框和内边距分别控制元素的外部和内部空间，外边距则控制元素与其他元素的距离。3.描述JavaScript中的异步编程及其常见方法。答：JavaScript中的异步编程允许程序在等待某些操作（如网络请求）完成时继续执行其他任务，常见方法包括回调函数、Promise和async/await。4.说明React中的组件生命周期及其主要阶段。答：React组件的生命周期分为三个阶段：挂载（Mounting）、更新（Updating）和卸载（Unmounting），每个阶段包含不同的钩子函数，如`componentDidMount`、`componentDidUpdate`和`componentWillUnmount`。五、应用题1.编写一个HTML5和CSS3代码，实现一个居中显示的圆形按钮，按钮背景为渐变色。答：HTML：```html<buttonclass="circle-button">ClickMe</button>```CSS：```css.circle-button{width:100px;height:100px;border-radius:50%;background:linear-gradient(toright,#ff7e5f,#feb47b);border:none;color:white;font-size:16px;display:flex;align-items:center;justify-content:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}```2.编写JavaScript代码，实现一个数组去重的函数。答：```javascriptfunctionuniqueArray(arr){return[...newSet(arr)];}constarr=[1,2,2,3,4,4,5];console.log(uniqueArray(arr));//[1,2,3,4,5]```3.编写Vue.js代码，实现一个简单的计数器组件，包含增加和减少按钮。答：```html<template><div><button@click="decrement">-</button><span>{{count}}</span><button@click="increment">+</button></div></template><script>exportdefault{data(){return{