2026年web工程师 面试题及答案

2026年web工程师面试题及答案考试时长：120分钟满分：100分一、单选题（总共10题，每题2分，总分20分）1.在HTML5中，用于定义文章章节或页面区域的语义化标签是？A.<div>B.<section>C.<article>D.<span>2.以下哪种HTTP状态码表示请求成功且服务器返回了资源？A.404B.500C.200D.3023.CSS中，用于实现元素垂直居中的属性组合是？A.display:flex;justify-content:center;align-items:center;B.position:absolute;top:50%;transform:translateY(-50%);C.float:left;margin:0auto;D.text-align:center;4.JavaScript中，以下哪个方法用于向数组末尾添加元素？A.push()B.pop()C.shift()D.unshift()5.React中，用于管理组件内部状态的钩子是？A.useEffect()B.useContext()C.useState()D.useReducer()6.在Web安全中，防止跨站脚本攻击（XSS）的有效方法是？A.使用HTTPOnlyCookieB.对用户输入进行转义C.启用HTTPSD.限制文件上传大小7.CSSGrid布局中，用于定义列宽的属性是？A.grid-template-columnsB.grid-template-rowsC.grid-gapD.grid-area8.WebSockets协议的主要用途是？A.网站SEO优化B.实时双向通信C.数据库索引优化D.响应式布局设计9.在Git中，用于撤销本地未提交更改的命令是？A.gitcommit--amendB.gitpush--forceC.gitreset--hardD.gitrebase10.响应式Web设计（RWD）的核心原则是？A.固定像素布局B.使用@media查询C.静态图片展示D.减少HTTP请求二、填空题（总共10题，每题2分，总分20分）1.CSS中，用于控制元素可见性的属性是________。2.JavaScript中，用于判断变量类型的操作符是________。3.HTML5中，用于播放视频的标签是________。4.HTTP协议中，用于缓存控制的头部字段是________。5.React中，用于处理组件生命周期的方法名是________。6.WebSockets协议的端口默认是________。7.CSS中，用于实现动画效果的属性是________。8.Git中，用于暂存已修改但未提交文件的命令是________。9.CSSGrid布局中，用于定义行高的属性是________。10.Web性能优化中，减少页面加载时间的有效方法是________。三、判断题（总共10题，每题2分，总分20分）1.CSS中的Flexbox布局只能用于一维布局。（×）2.JavaScript中的闭包可以访问外部函数的变量。（√）3.HTML5的语义化标签会影响页面SEO。（√）4.WebSocket协议是同步通信协议。（×）5.CSSGrid布局支持无限维度的网格。（√）6.Git中的commit命令会覆盖本地所有更改。（×）7.HTTP/2协议支持多路复用。（√）8.React中的Hooks只能用于类组件。（×）9.WebSockets协议需要建立TCP连接三次握手。（×）10.CSS中的媒体查询可以用于移动端适配。（√）四、简答题（总共4题，每题4分，总分16分）1.简述HTTP和HTTPS协议的主要区别。答：HTTP是明文传输协议，数据易被窃取；HTTPS通过TLS/SSL加密传输，安全性更高。HTTPS需要证书和公钥加密，但能防止中间人攻击。2.解释React中的组件生命周期分为哪几个阶段。答：创建阶段（constructor、render）、挂载阶段（componentDidMount）、更新阶段（componentDidUpdate）、卸载阶段（componentWillUnmount）。3.说明CSS中Flexbox布局的三个主要属性。答：flex-direction（主轴方向）、justify-content（主轴对齐）、align-items（交叉轴对齐）。4.描述WebSockets协议的工作原理。答：通过TCP长连接实现全双工通信，客户端通过WebSocket协议头建立连接，服务器响应后可双向传输数据，无需HTTP轮询。五、应用题（总共4题，每题6分，总分24分）1.写出HTML和CSS代码，实现一个响应式导航栏，在屏幕宽度小于600px时显示汉堡菜单。答：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：```cssnav{display:flex;justify-content:space-between;align-items:center;}.menu-toggle{display:none;}.nav-links{list-style:none;display:flex;}@media(max-width:600px){.menu-toggle{display:block;}.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;i++){if(!result.includes(arr[i])){result.push(arr[i]);}}returnresult;}```3.解释Git中分支管理的基本流程，包括常用命令。答：1.创建分支：`gitbranchfeature`2.切换分支：`gitcheckoutfeature`3.合并分支：`gitmergemain`4.推送分支：`gitpushoriginfeature`5.解决冲突：手动编辑冲突文件，`gitadd.`，`gitcommit`4.设计一个简单的React组件，实现表单提交功能，包含用户名和密码输入框。答：```javascriptimportReact,{useState}from'react';functionLoginForm(){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="用户名"/><inputtype="password"value={password}onChange={(e)=>setPassword(e.target.value)}placeholder="密码"/><buttontype="submit">登录</button></form>);}exportdefaultLoginForm;```【标准答案及解析】一、单选题1.B解析：HTML5的<section>标签用于定义文档中的章节，语义化且利于SEO。2.C解析：200表示请求成功，其他状态码分别表示错误（404/500）或重定向（302）。3.A解析：Flexbox通过flex布局实现居中，justify-content和align-items控制水平和垂直对齐。4.A解析：push()用于添加元素到数组末尾，pop()移除末尾元素，shift()移除首元素。5.C解析：useState()用于声明组件内部状态，useEffect()处理副作用，useContext()获取上下文。6.B解析：转义用户输入可防止XSS攻击，其他选项分别涉及Cookie安全、HTTPS和文件限制。7.A解析：grid-template-columns定义列宽，grid-template-rows定义行高，grid-gap定义间距。8.B解析：WebSockets支持实时双向通信，其他选项分别涉及SEO、数据库和布局设计。9.C解析：reset--hard会清空本地所有分支，rebase用于变基操作，commit--amend修改当前提交。10.B解析：@media查询是RWD核心，通过媒体类型和特征控制不同设备下的样式。二、填空题1.display解析：display属性控制元素显示方式，如block、flex、none等。2.typeof解析：typeof操作符返回变量类型，如"string"、"number"等。3.<video>解析：HTML5的<video>标签支持视频播放，可包含source子标签指定源文件。4.Cache-Control解析：Cache-Control头部控制浏览器缓存策略，如max-age、no-cache等。5.componentDidMount解析：React生命周期方法，组件挂载DOM后调用，用于初始化数据。6.8080解析：WebSocket默认端口是8080，但可自定义，需与HTTP协议端口区分。7.animation解析：animation属性用于定义CSS动画，包含名称、持续时间、延迟等。8.stash解析：gitstash暂存未提交更改，不影响当前分支，后续可apply或pop。9.grid-template-rows解析：grid-template-rows定义Grid布局的行高，与列宽属性对应。10.CDN加速解析：CDN可将静态资源分发到全球节点，减少加载时间，其他方法如图片压缩。三、判断题1.×解析：Flexbox支持一维和二维布局，可定义交叉轴实现更复杂排列。2.√解析：闭包通过函数嵌套访问外部作用域变量，是JavaScript核心特性。3.√解析：语义化标签如<header>、<footer>等影响搜索引擎对页面结构的理解。4.×解析：WebSocket是全双工协议，无需等待HTTP请求响应即可通信。5.√解析：Grid布局支持任意维度的网格系统，不受CSSFlexbox的一维限制。6.×解析：gitcommit会保存当前分支的更改，不会覆盖其他分支或本地文件。7.√解析：HTTP/2的多路复用机制允许同一连接并行传输多个请求。8.×解析：Hooks是React16.8引入的新特性，仅用于函数组件，类组件需使用生命周期。9.×解析：WebSocket建立连接只需三次握手，与HTTP/TLS类似，但协议不同。10.√解析：媒体查询通过@media检测设备特性（如宽度），动态调整样式实现响应式。四、简答题1.HTTP和HTTPS的主要区别：-安全性：HTTPS通过TLS/SSL加密传输，HTTP是明文；-证书：HTTPS需要CA颁发的SSL证书，HTTP无需；-端口：HTTPS默认443，HTTP默认80；-SEO：搜索引擎优先索引HTTPS网站。2.React组件生命周期：-创建阶段：constructor、render；-挂载阶段：componentDidMount；-更新阶段：componentDidUpdate；-卸载阶段：componentWillUnmount。3.Flexbox主要属性：