Web开发工程师笔试真题（含详细答案）

Web开发工程师笔试真题（含详细答案）适用岗位：初级/中级Web前端开发工程师考试时长：90分钟满分：100分考察范围：HTML、CSS、JavaScript、ES6+、浏览器原理、网络基础、前端工程化、实战编程一、单项选择题（共10题，每题3分，共30分）1.以下关于HTML5新增特性说法错误的是（）A.新增语义化标签header、footer、section、articleB.支持本地存储localStorage、sessionStorageC.新增canvas、svg绘图能力D.可以直接解析XML文档，无需引入插件答案：D详细解析：HTML5核心新增特性为语义化标签、本地存储、绘图标签、音视频标签、表单新属性等。解析XML文档并非HTML5新增特性，且HTML无法直接原生解析XML，需要通过JS解析处理。2.CSS中，以下选择器优先级最高的是（）A.类选择器.boxB.标签选择器divC.行内样式styleD.伪类选择器:hover答案：C详细解析：CSS优先级从高到低排序：!important>行内样式>ID选择器>类/伪类/属性选择器>标签选择器>通配符选择器。3.以下不属于JavaScript基本数据类型的是（）A.StringB.NumberC.ArrayD.Undefined答案：C详细解析：JS基本数据类型（原始类型）包括：String、Number、Boolean、Undefined、Null、Symbol、BigInt。Array属于引用数据类型（复杂类型）。4.关于var、let、const说法正确的是（）A.var存在块级作用域B.let可以变量提升且不报错C.const声明的变量不可修改D.let、const存在块级作用域，不存在变量提升答案：D详细解析：var只有函数作用域和全局作用域，存在变量提升；let、const拥有块级作用域，存在暂时性死区，无法变量提升。const声明的基本类型值不可修改，引用类型的内部属性可以修改。5.浏览器同源策略中，不属于同源的是（）A.和/index.htmlB.和C.:8080和:8080/listD.和答案：B详细解析：同源判定标准：协议、域名、端口三者必须完全一致。B选项中一个是http协议，一个是https协议，协议不同，非同源。6.以下关于防抖和节流说法错误的是（）A.防抖是触发事件后延迟执行，多次触发重新计时B.节流是固定时间内只执行一次C.输入框搜索场景适合用节流D.窗口resize事件适合用节流答案：C详细解析：输入框搜索需要用户停止输入后再触发请求，避免频繁请求，适合用防抖；滚动、resize、点击高频触发场景适合用节流。7.Vue中，以下关于v-forkey说法正确的是（）A.key可以重复B.推荐使用index作为keyC.key用于虚拟DOMdiff算法，精准识别节点身份D.不写key会报错答案：C详细解析：key必须唯一，用于diff算法优化节点更新；不写key时Vue会默认用index，不会报错；index作为key容易引发列表更新错乱问题，推荐用数据唯一ID。8.HTTP状态码403的含义是（）A.页面不存在B.请求资源被禁止，权限不足C.服务器内部错误D.请求超时答案：B详细解析：404：资源不存在；403：权限不足、拒绝访问；500：服务器内部错误；408：请求超时。9.以下不能实现垂直居中的CSS方案是（）A.flex布局align-items:centerB.position+top:50%+transform:translateY(-50%)C.float:centerD.grid布局place-items:center答案：C详细解析：CSS中无float:center属性，float仅支持left、right、none，无法实现垂直居中。10.关于JS事件循环机制，说法正确的是（）A.微任务执行优先级高于宏任务B.宏任务先执行，再执行微任务C.同步代码、异步任务同时执行D.setTimeout属于微任务答案：A详细解析：事件循环执行顺序：同步代码>所有微任务>一个宏任务，循环往复。setTimeout、setInterval属于宏任务；Promise.then、async/await、queueMicrotask属于微任务。二、填空题（共5题，每题2分，共10分）1.CSS盒子模型分为标准盒模型和怪异盒模型，标准盒模型总宽度=____________。答案：width+padding+border+margin2.阻止事件冒泡的原生JS方法是____________，阻止默认事件的方法是____________。答案：event.stopPropagation()、event.preventDefault()3.ES6中用来定义模块化导出的关键字是____________，导入的关键字是____________。答案：export、import4.浏览器缓存中，____________属于强制缓存，无需向服务器发送请求；____________属于协商缓存，需要校验资源是否更新。答案：Cache-Control/Expires、ETag/Last-Modified5.Vue组件中，____________用于接收父组件传递的数据，____________用于向父组件触发事件。答案：props、$emit三、简答题（共4题，每题8分，共32分）1.简述HTML语义化的意义及常用语义化标签参考答案：语义化意义：（1）代码结构清晰，可读性、可维护性更强，方便团队协作开发；（2）利于搜索引擎爬虫抓取页面内容，提升网站SEO优化效果；（3）适配屏幕阅读器，提升网页无障碍访问体验；（4）明确页面模块功能，替代无意义的div嵌套。常用语义化标签：结构类：header（头部）、footer（底部）、nav（导航）、section（区块）、article（独立文章）、aside（侧边栏）；文本类：figure（图文容器）、figcaption（图文标题）、mark（高亮文本）、time（时间）。2.简述CSSflex布局的常用属性及作用参考答案：Flex布局是一维弹性布局，分为容器属性和子项属性，可快速实现居中、自适应布局：容器属性：（1）display:flex：开启弹性布局；（2）flex-direction：设置主轴方向（row横向、column纵向）；（3）justify-content：主轴对齐方式（居中、两端对齐、均分等）；（4）align-items：侧轴单行对齐方式；（5）flex-wrap：设置子项是否自动换行。子项属性：（1）flex-grow：剩余空间分配比例，默认0（不拉伸）；（2）flex-shrink：空间不足时收缩比例，默认1（自动收缩）；（3）flex-basis：设置子项基础宽度；（4）align-self：单独设置子项侧轴对齐方式。3.简述let、const、var的区别参考答案：（1）作用域：var无块级作用域，仅支持全局、函数作用域；let、const拥有块级作用域，仅在当前{}内生效；（2）变量提升：var存在变量提升，可先使用后声明；let、const存在暂时性死区，不允许先使用后声明；（3）重复声明：var允许重复声明变量；let、const同一作用域内禁止重复声明；（4）赋值规则：var、let声明的变量可重复赋值修改；const声明后必须初始化，基本类型值不可修改，引用类型可修改内部属性。4.简述前端跨域的产生原因及常用解决方案参考答案：跨域产生原因：浏览器出于安全考虑，实施同源策略限制，禁止不同协议、域名、端口的页面之间进行资源交互，前端请求接口时触发跨域限制。常用解决方案：（1）后端配置CORS跨域资源共享，设置响应头允许前端域名访问；（2）开发环境使用本地代理（Vue/Viteproxy、Webpackproxy）转发请求；（3）JSONP跨域，仅支持GET请求，兼容性强；（4）Nginx反向代理，统一域名端口，规避跨域；（5）WebSocket通信，不受同源策略限制。四、编程题（共2题，每题14分，共28分）1.手写JavaScript防抖函数（通用版，支持立即执行、延迟时间自定义）参考答案：javascript

//防抖函数：多次触发事件，延迟结束后只执行一次

//fn：需要防抖的函数

//delay：延迟时间

//immediate：是否立即执行

functiondebounce(fn,delay=300,immediate=false){

lettimer=null;

returnfunction(...args){

//每次触发清空定时器

if(timer)clearTimeout(timer);

//立即执行场景

if(immediate&&!timer){

fn.apply(this,args);

}

//延迟执行

timer=setTimeout(()=>{

//非立即执行则延迟执行函数

if(!immediate){

fn.apply(this,args);

}

timer=null;

},delay);

};

}

//使用示例

constinputFn=debounce((e)=>{

console.log('输入内容：',e.target.value);

},500);

核心思路：利用定时器延时执行函数，每次触发事件清空原有定时器，重新计时；通过参数控制立即执行/延迟执行两种模式，保留this指向和事件参数。2.实现一个自适应九宫格布局，页面等分布局9个方块，响应式适配屏幕，间距统一，无固定宽高参考答案：html

<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<title>自适应九宫格</title>

<style>

*{

margin:0;

padding:0;

box-sizing:border-box;

}

.box-wrap{

width:90%;

margin:50pxauto;

/*开启flex布局实现九宫格*/

display:grid;

grid-template-columns:repeat(3,1fr);

gap:15px;/*统一间距*/

}

.box-item{

/*宽高自适应，保持正方形*/

aspect-ratio:1/1;

background:#409eff;

border-radius:8px;

}

</style>

</head>

<body>

<divclass="box-wrap">

<divclass="box-item"></div>

<divclass="box-item"></div>

<divclass="box-item"></div>

<divclass="box-item"></div>

<divclass="box-item"></div>

<divclass="box-item"></div>

<divclass="box-item"></div>

<divcla