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.CSSGrid布局中，用于定义列宽的属性是？A.grid-template-columnsB.grid-template-rowsC.grid-gapD.grid-area6.以下哪个HTTP状态码表示“请求成功”？A.404B.500C.200D.3027.在Vue.js中，用于监听数据变化的指令是？A.v-modelB.v-forC.v-onceD.v-if8.以下哪个CSS属性用于实现元素的弹性布局？A.flexB.gridC.positionD.transform9.WebP格式相比JPEG格式的主要优势是？A.更高的文件大小B.更差的质量C.支持透明通道D.仅支持黑白图像10.以下哪个浏览器插件用于开发者调试前端代码？A.AdBlockB.LastPassC.ChromeDevToolsD.FlashPlayer二、填空题（总共10题，每题2分，总分20分）1.CSS中，使用________属性可以设置元素的外边距。2.JavaScript中，________是全局对象，所有函数和变量都默认属于它。3.HTML5中，________标签用于定义导航链接。4.React中，________生命周期方法在组件卸载时调用。5.CSSGrid布局中，________属性用于定义行高。6.HTTP协议中，________方法用于发送数据到服务器。7.Vue.js中，________指令用于条件渲染元素。8.CSS中，________属性用于控制元素的对齐方式。9.Web开发中，________协议用于传输加密数据。10.JavaScript中，________方法用于解析JSON字符串。三、判断题（总共10题，每题2分，总分20分）1.CSS中，`z-index`属性可以用于定位绝对定位元素。（×）2.HTML5中，`<audio>`标签支持自动播放。（×）3.JavaScript中，`let`声明的变量是全局作用域。（×）4.React中，`useState`钩子可以用于异步更新状态。（√）5.CSSGrid布局中，`grid-template-areas`属性可以定义网格区域名称。（√）6.HTTP协议中，`GET`方法可以用于提交表单数据。（×）7.Vue.js中，`v-for`指令可以用于遍历对象属性。（√）8.CSS中，`flex-wrap`属性可以控制弹性盒子的换行行为。（√）9.WebP格式不支持动画效果。（×）10.JavaScript中，`eval()`函数可以执行字符串形式的代码。（√）四、简答题（总共4题，每题4分，总分16分）1.简述CSSFlexbox布局的核心优势。答：Flexbox布局可以简化复杂布局的设计，自动分配剩余空间，支持灵活的换行和对齐，适用于响应式设计。2.解释JavaScript中闭包的概念及其应用场景。答：闭包是指函数可以访问其外部作用域的变量，即使外部函数已执行完毕。应用场景包括数据封装、模块化设计等。3.描述React中组件的生命周期阶段。答：组件生命周期分为挂载阶段（constructor、render、componentDidMount）、更新阶段（componentDidUpdate）、卸载阶段（componentWillUnmount）。4.说明HTTP缓存的作用及其常见实现方式。答：HTTP缓存可以减少服务器请求，提高页面加载速度。常见实现方式包括强缓存（max-age）和协商缓存（ETag）。五、应用题（总共4题，每题6分，总分24分）1.请编写HTML和CSS代码，实现一个响应式导航栏，在小屏幕设备上显示汉堡菜单。答：HTML：```html<nav><divclass="menu-toggle">☰</div><ulclass="nav-links"><li><ahref="#">首页</a></li><li><ahref="#">关于</a></li><li><ahref="#">服务</a></li></ul></nav>```CSS：```css.menu-toggle{display:none;}.nav-links{display:flex;}@media(max-width:768px){.menu-toggle{display:block;}.nav-links{display:none;}}```2.编写JavaScript代码，实现一个数组去重函数，不使用内置方法。答：```javascriptfunctionunique(arr){constresult=[];for(leti=0;i<arr.length;i++){if(!result.includes(arr[i])){result.push(arr[i]);}}returnresult;}```3.创建一个React组件，使用`useState`钩子实现计数器功能。答：```jsximportReact,{useState}from'react';functionCounter(){const[count,setCount]=useState(0);return(<div><p>计数：{count}</p><buttononClick={()=>setCount(count+1)}>增加</button><buttononClick={()=>setCount(count-1)}>减少</button></div>);}exportdefaultCounter;```4.编写CSS代码，实现一个卡片组件，要求支持悬停效果和响应式布局。答：```css.card{border:1pxsolid#ccc;padding:20px;margin:10px;transition:transform0.3s;}.card:hover{transform:scale(1.05);}@media(max-width:600px){.card{width:100%;}}```【标准答案及解析】一、单选题1.A解析：`<section>`标签用于定义文档中的章节，`<article>`用于独立内容，`<header>`和`<nav>`用于导航。2.B解析：ID选择器优先级最高（1000），其次是类选择器（100），标签选择器（10），属性选择器（1）。3.A解析：`push()`用于添加元素，`pop()`删除，`shift()`删除首元素，`unshift()`添加首元素。4.C解析：`useState`用于声明组件状态，`useEffect`处理副作用，`useContext`获取上下文，`useRef`引用DOM。5.A解析：`grid-template-columns`定义列宽，`grid-template-rows`定义行高，`grid-gap`定义间距，`grid-area`定义区域。6.C解析：200表示成功，404表示未找到，500表示服务器错误，302表示重定向。7.A解析：`v-model`双向绑定，`v-for`循环，`v-once`一次性渲染，`v-if`条件渲染。8.A解析：`flex`实现弹性布局，`grid`实现网格布局，`position`定位，`transform`变换。9.C解析：WebP支持透明通道，比JPEG文件小且质量高。10.C解析：ChromeDevTools是前端调试工具，AdBlock是广告拦截，LastPass是密码管理，FlashPlayer已淘汰。二、填空题1.margin2.window3.<nav>4.componentWillUnmount5.grid-template-rows6.POST7.v-if8.align-items9.HTTPS10.JSON.parse三、判断题1.×解析：`z-index`仅对定位元素有效，静态元素无效。2.×解析：HTML5`<audio>`默认不自动播放，需设置`autoplay`属性。3.×解析：`let`是块级作用域，`var`是全局作用域。4.√解析：`useState`支持异步更新，如`setCount(fetchData().then(data=>data.count))`。5.√解析：`grid-template-areas`通过名称定义网格区域。6.×解析：`GET`用于获取数据，`POST`用于提交数据。7.√解析：`v-for`支持对象遍历，如`v-for="(item,key)inobj"`。8.√解析：`flex-wrap`控制弹性盒子换行，如`flex-wrap:wrap`。9.×解析：WebP支持动画，如GIF格式。10.√解析：`eval()`可以执行字符串代码，但存在安全风险。四、简答题1.简述CSSFlexbox布局的核心优势。答：Flexbox布局的核心优势包括：-自动分配剩余空间，简化对齐和分布；-支持灵活的换行和方向调整；-适用于响应式设计，适应不同屏幕尺寸；-减少嵌套层级，提高代码可读性。2.解释JavaScript中闭包的概念及其应用场景。答：闭包是指函数可以访问其外部作用域的变量，即使外部函数已执行完毕。应用场景包括：-数据封装，保护内部变量不被外部访问；-模块化设计，实现私有作用域；-延迟执行，如事件处理函数。3.描述React中组件的生命周期阶段。答：React组件生命周期分为：-挂载阶段：constructor→render→componentDidMount；-更新阶段：componentDidUpdate；-卸载阶段：componentWillUnmount。4.说明HTTP缓存的作用及其常见实现方式。答：HTTP缓存的作用是减少服务器请求，提高页面加载速度。实现方式包括：-强缓存：通过`max-age`设置缓存过期时间；-协商缓存：通过`ETag`和`If-None-Match`验证缓存有效性。五、应用题1.请编写HTML和CSS代码，实现一个响应式导航栏，在小屏幕设备上显示汉堡菜单。答：HTML：```html<nav><divclass="menu-toggle">☰</div><ulclass="nav-links"><li><ahref="#">首页</a></li><li><ahref="#">关于</a></li><li><ahref="#">服务</a></li></ul></nav>```CSS：```css.menu-toggle{display:none;}.nav-links{display:flex;}@media(max-width:768px){.menu-toggle{display:block;cursor:pointer;}.nav-links{display:none;flex-direction:column;position:absolute;width:100%;background:white;}.menu-toggle.active+.nav-links{display:flex;}}```2.编写JavaScript代码，实现一个数组去重函数，不使用内置方法。答：```javascriptfunctionunique(arr){constresult=[];for(leti=0;i<arr.length;