Web前端工程师笔试真题（含详细答案解析）

Web前端工程师笔试真题（含详细答案解析）适用人群：初级前端、应届生、转行前端面试笔试考试范围：HTML、CSS、JavaScript、浏览器原理、前端基础工程、常见面试考点答题说明：题目贴合互联网企业真实笔试风格，无偏题怪题，答案解析通俗易懂、实战性强一、单项选择题（共10题，每题3分，共30分）1.以下哪个标签是HTML5新增的语义化块级标签？（）A.div

B.span

C.section

D.b【答案】C详细解析：div、span是HTML通用标签，无语义；b是旧的加粗标签。section为HTML5新增语义化标签，代表文档中的独立区块，用于划分页面结构，提升可读性和SEO优化效果。2.CSS中，以下选择器优先级最高的是？（）A.类选择器

B.ID选择器

C.标签选择器

D.通配符选择器【答案】B详细解析：CSS优先级权重排序：!important>内联样式>ID选择器>类/伪类/属性选择器>标签选择器>通配符/继承样式。因此ID选择器优先级高于类、标签、通配符选择器。3.以下关于box-sizing属性描述正确的是？（）A.box-sizing:border-box元素宽高包含padding和border

B.box-sizing:content-box元素宽高包含padding不包含border

C.box-sizing默认值是border-box

D.border-box模式下，设置padding会撑大元素盒子【答案】A详细解析：CSS盒子模型默认值为content-box，此时元素宽高仅对应内容区，padding、border会额外撑大盒子；border-box模式下，设置的width/height为盒子总尺寸，padding和border会向内压缩内容区，不会撑大盒子。4.JavaScript中，以下哪个变量声明方式存在变量提升且无块级作用域？（）A.let

B.const

C.var

D.import【答案】C详细解析：var声明的变量存在变量提升，仅拥有函数作用域，无块级作用域，会出现变量穿透问题；let、const拥有块级作用域，不存在变量提升，存在暂时性死区；import是模块导入语法，不用于变量声明。5.以下关于null和undefined的区别，说法错误的是？（）A.undefined代表变量未定义、未赋值

B.null代表手动赋值的空对象

C.typeofnull==='null'

D.typeofundefined==='undefined'【答案】C详细解析：JS经典bug中，typeofnull的返回值为'object'，并非'null'。undefined是系统默认空值，null是开发者手动设置的空值，用于清空对象。6.以下哪个方法不会改变原数组？（）A.splice

B.push

C.map

D.reverse【答案】C详细解析：splice（截取/替换数组）、push（尾部添加）、reverse（反转数组）均会修改原数组；map、filter、slice、concat属于纯函数，遍历处理后返回新数组，不改变原数组。7.浏览器中，DOM事件冒泡的描述正确的是？（）A.事件从顶层元素向目标元素传递

B.事件从目标元素向顶层祖先元素传递

C.冒泡阶段可以通过capture:true开启

D.事件冒泡默认关闭【答案】B详细解析：JS事件流分为三个阶段：捕获阶段（外层向内层）、目标阶段、冒泡阶段（内层向外层）。事件冒泡默认开启，事件捕获需要手动设置capture:true。冒泡是事件从触发的目标元素逐级向上传递给父级、祖辈元素。8.以下不属于JavaScript基本数据类型的是？（）A.String

B.Number

C.Array

D.Boolean【答案】C详细解析：JS基本数据类型（原始类型）：String、Number、Boolean、Undefined、Null、Symbol、BigInt；引用数据类型：Object、Array、Function、RegExp等，Array属于引用类型。9.CSS中，清除浮动的核心目的是？（）A.让文字居中

B.解决父元素高度塌陷问题

C.隐藏溢出内容

D.取消元素定位【答案】B详细解析：子元素设置float浮动后，会脱离标准文档流，导致父元素无法被子元素撑开，出现高度塌陷。清除浮动的核心作用就是恢复父元素高度，保证页面布局正常。10.以下关于HTTP状态码说法正确的是？（）A.404代表服务器内部错误

B.500代表资源不存在

C.200代表请求成功

D.304代表永久重定向【答案】C详细解析：200：请求成功；304：协商缓存，资源未更新，使用本地缓存；301永久重定向、302临时重定向；404资源不存在；500服务器内部错误。二、填空题（共5题，每题4分，共20分）1.HTML5中，用于播放视频的标签是______，播放音频的标签是______。答案：video、audio解析：video标签用于视频播放，支持controls、width、loop等属性；audio标签用于音频播放，二者均为HTML5新增多媒体标签，无需依赖插件。2.CSS实现弹性布局的核心属性是______，开启弹性布局的元素默认主轴方向为______。答案：display:flex、水平横向（row）解析：给父元素设置display:flex即可开启弹性布局，默认主轴方向为row（从左到右），侧轴为垂直方向。3.JavaScript中，判断数组类型的精准方法是______。答案：Array.isArray()解析：typeof无法精准判断数组（返回object），instanceof存在跨窗口失效问题，Array.isArray()是官方推荐、最精准的数组判断方法。4.阻止事件冒泡的原生JS方法是______，阻止默认事件的方法是______。答案：event.stopPropagation()、event.preventDefault()解析：stopPropagation()终止事件冒泡/捕获传播；preventDefault()阻止标签默认行为，如a标签跳转、表单提交、滚轮默认滚动等。5.JS中this的指向，全局环境下指向______，普通函数独立调用指向______。答案：window（全局对象）、window（全局对象）解析：浏览器环境中，全局this、普通函数直接调用的this均指向window；严格模式下，普通函数独立调用this为undefined。三、简答题（共4题，每题8分，共32分）1.简述HTML语义化的意义？参考答案&详细解析：HTML语义化就是使用符合标签本意的标签搭建页面结构，不滥用div、span。核心意义有四点：1.代码可读性更高：开发者通过标签名即可识别区块功能（header、footer、article），便于团队维护和迭代；2.利于SEO优化：搜索引擎爬虫可精准识别页面结构和内容权重，提升网页收录和排名；3.适配无障碍访问：屏幕阅读器可识别语义标签，帮助视障用户浏览页面；4.结构清晰、兼容性好：语义化标签结构规范，适配各版本浏览器，减少冗余代码。2.简述CSS浮动产生的问题及三种常用清除浮动的方法？参考答案&详细解析：浮动带来的问题：子元素浮动后脱离标准文档流，父元素高度塌陷；后续标准流元素会向上错位，导致页面布局错乱。常用清除浮动方法：1.额外空div法：在浮动子元素末尾添加空div，设置clear:both；简单易懂，但会产生冗余空标签；2.伪元素清除法（推荐）：给父元素添加clearfix类，通过::after伪元素设置clear:both、display:block，无冗余标签，适配所有场景；3.父元素开启BFC：给父元素设置overflow:hidden，触发BFC布局，自动包裹浮动元素，代码简洁，适合简单布局场景。3.简述var、let、const的区别？参考答案&详细解析：1.作用域不同：var无块级作用域，仅函数作用域；let、const拥有块级作用域，代码块内有效，防止变量穿透；2.变量提升不同：var存在变量提升，可先使用后声明；let、const无变量提升，存在暂时性死区，必须先声明后使用；3.重复声明：var允许重复声明变量；let、const同一作用域内禁止重复声明；4.赋值规则：var、let可重复修改值；const声明常量，必须初始化，基础类型不可修改，引用类型可修改内部属性。4.简述JS原型和原型链的理解？参考答案&详细解析：1.原型（prototype）：每个函数都有prototype属性，指向一个原型对象，用于存放公共方法和属性，实现方法复用，减少内存占用；2.__proto__：每个实例对象都有__proto__属性，指向创建它的构造函数的prototype；3.原型链：对象查找属性/方法时，先在自身查找，找不到则通过__proto__向上查找原型对象，层层向上直到Ototype，最终指向null，这条查找链路就是原型链；4.核心作用：实现JS继承、属性方法共享、代码复用，是JS面向对象的核心机制。四、编程代码题（共1题，18分）题目：手写JavaScript数组去重函数，要求兼容所有常规数据类型（字符串、数字），写出两种常用方法。答案+详细代码解析：方法一：Set去重（ES6最简方法，推荐）javascript

//Set数据结构特性：元素唯一，不允许重复

functionuniqueArr(arr){

return[...newSet(arr)];

}

//测试

letarr=[1,2,2,3,3,'a','a',true];

console.log(uniqueArr(arr));//[1,2,3,'a',true]解析：ES6新增Set结构自动去重，扩展运算符转为数组，代码极简、性能优异，日常开发首选。方法二：indexOf遍历去重（ES5兼容写法）javascript

functionuniqueArr(arr){

letnewArr=[];

for(leti=0;i<arr.length;i++){

//新数组中不存在当前元素则存入

if(newArr.indexOf(arr[i])===-1){

newArr.push(arr[i])

}

}

returnnewArr;

}

//测试

letarr=[1,2,2,3,3,'a','a'];

console.log(uniqueArr(arr));//[1,2,3,'a']解析：兼容低版本浏览器，通过遍历原数组，判断新数组是否包含当前元素