Web前端技术笔试试题（含详细答案）

Web前端技术笔试试题（含详细答案）适用场景：前端入门/初级工程师考核、企业招聘笔试、实训结课测试考试时长：90分钟满分：100分一、单项选择题（共15题，每题2分，共30分）1.以下不属于HTML5新增标签的是（）A.articleB.sectionC.divD.header2.CSS中，以下哪个属性可以实现元素水平居中（）A.text-align:centerB.vertical-align:middleC.float:centerD.position:center3.JavaScript中，以下哪个变量声明方式存在变量提升且无块级作用域（）A.letB.varC.constD.import4.盒子模型中，元素实际占据的宽度计算公式正确的是（）A.内容宽度+padding+border+marginB.内容宽度+padding+borderC.内容宽度+margin+borderD.仅内容宽度5.以下哪种HTTP请求方法是幂等且主要用于查询数据（）A.POSTB.GETC.PUTD.DELETE6.JavaScript中，typeofnull的返回值是（）A.nullB.undefinedC.objectD.boolean7.CSS3中，transition属性的作用是（）A.实现元素动画过渡效果B.实现3D变换C.设置弹性布局D.实现网格布局8.以下关于原型链的说法正确的是（）A.所有函数都没有原型对象B.实例对象的__proto__指向构造函数的prototypeC.原型链不存在逐级查找机制D.原型属性无法被实例继承9.flex布局中，justify-content属性用于控制（）A.侧轴对齐方式B.主轴对齐方式C.元素换行方式D.元素缩放比例10.以下哪个事件可以监听浏览器窗口大小变化（）A.resizeB.scrollC.loadD.change11.JavaScript中，===和==的核心区别是（）A.无区别B.===不转换类型，==会隐式转换类型C.==优先级更高D.===仅比较值12.以下选择器优先级最高的是（）A.类选择器B.标签选择器C.ID选择器D.通配符选择器13.阻止事件冒泡的标准方法是（）A.event.stopPropagation()B.event.preventDefault()C.returnfalseD.event.stop()14.Vue中，v-model的核心作用是（）A.单向数据绑定B.双向数据绑定C.条件渲染D.列表渲染15.以下不属于前端存储方式的是（）A.localStorageB.sessionStorageC.cookieD.javaBean二、填空题（共10空，每空2分，共20分）1.HTML中，________标签用于引入外部CSS样式表。2.CSS盒模型分为标准盒模型和________盒模型。3.JavaScript中，遍历数组的常用方法有forEach、________、________（填写两个即可）。4.事件触发的三个阶段分别是：捕获阶段、________、冒泡阶段。5.ES6中，________用于定义常量，声明后不可修改。6.清除浮动的常用方法有伪元素清除、________、________。7.浏览器的标准事件绑定方法是________。三、简答题（共4题，每题5分，共20分）1.简述link和@import引入CSS的区别？2.简述var、let、const三者的区别？3.什么是闭包？闭包的优缺点是什么？4.简述HTTP和HTTPS的区别？四、编程题（共3题，共30分）1.（10分）手写代码：实现一个数组去重方法，兼容普通数组、字符串数字混合数组。2.（10分）手写CSS代码：实现一个宽高自适应、水平垂直居中的弹窗盒子，适配不同屏幕。3.（10分）手写JS代码：防抖函数基础实现（延迟500ms执行）。参考答案及详细解析一、单项选择题答案及解析1.C解析：div是HTML传统通用标签，HTML5新增语义化标签包含article、section、header、footer、nav等。2.A解析：text-align:center用于行内元素、文本水平居中；vertical-align用于行内块垂直对齐；CSS无float:center、position:center属性值。3.B解析：var存在变量提升，无块级作用域，仅函数作用域；let、const有块级作用域，无变量提升。4.A解析：元素实际占据空间=内容宽高+内边距padding+边框border+外边距margin；元素可视大小为内容+padding+border。5.B解析：GET用于查询数据，无请求体、幂等、可缓存；POST用于提交数据，非幂等；PUT用于更新、DELETE用于删除。6.C解析：这是JS经典bug，typeofnull返回object，null是空对象指针，属于基本数据类型。7.A解析：transition为过渡属性，实现元素状态变化的平滑过渡；transform用于变换，flex用于弹性布局。8.B解析：每个构造函数都有prototype原型对象，实例对象__proto__指向构造函数原型，通过原型链实现属性方法继承和逐级查找。9.B解析：justify-content控制主轴对齐，align-items控制侧轴对齐，flex-wrap控制换行。10.A解析：resize监听窗口尺寸变化，scroll监听滚动事件，load监听资源加载完成，change监听表单值改变。11.B解析：==会进行隐式类型转换，仅对比数值；===严格相等，不转换类型，数值和类型必须完全一致。12.C解析：选择器优先级：!important>行内样式>ID选择器>类/伪类选择器>标签选择器>通配符。13.A解析：stopPropagation()阻止事件冒泡；preventDefault()阻止默认行为；returnfalse可同时阻止冒泡和默认行为，非标准写法。14.B解析：v-model是Vue核心双向绑定指令，数据改变视图更新，视图修改数据同步变化；v-bind为单向绑定。15.D解析：javaBean是Java后端实体类，前端本地存储主要为cookie、localStorage、sessionStorage、indexedDB。二、填空题答案及解析1.link2.怪异（IE）3.map、filter（reduce、some、every均可）4.目标阶段5.const6.父元素高度自适应、overflow:hidden（浮动清零、额外标签法均可）7.addEventListener()三、简答题详细答案1.link和@import引入CSS的区别？①从属关系：link是HTML标签，无依赖；@import是CSS语法，只能在CSS文件中使用。②加载顺序：link引入的样式会和页面结构同步加载；@import会等页面加载完成后再加载样式，容易出现闪屏问题。③兼容性：link兼容性更好，所有浏览器均支持；@import在老旧浏览器存在兼容问题。④JS控制：link可以通过JS动态操作修改样式；@import无法被JS直接动态控制。⑤权重：link样式权重高于@import引入的样式。2.var、let、const三者的区别？①作用域：var无块级作用域，仅函数作用域；let、const拥有块级作用域，仅在当前代码块生效。②变量提升：var存在变量提升，声明前访问值为undefined；let、const无变量提升，存在暂时性死区，声明前访问会报错。③重复声明：var允许重复声明变量；let、const禁止同一作用域内重复声明。④赋值规则：var、let声明的变量可重复赋值；const声明常量，必须初始化，且不可修改基础类型值，引用类型可修改内部属性。3.什么是闭包？闭包的优缺点是什么？定义：函数嵌套函数，内部函数访问外部函数的变量，外部函数执行结束后，变量不被销毁，这个组合就是闭包。简单来说，闭包是能够读取其他函数内部变量的函数。优点：①保护私有变量，实现变量私有化；②延长变量生命周期；③可以实现模块化代码，避免全局变量污染。缺点：①变量长期驻留内存，会造成内存占用过高；②使用不当容易引发内存泄漏；③可能导致页面性能下降。4.HTTP和HTTPS的区别？①安全层面：HTTP是超文本传输协议，明文传输，无加密，数据易被窃取、篡改；HTTPS是加密传输协议，基于SSL/TLS加密，数据传输安全。②端口不同：HTTP默认端口80；HTTPS默认端口443。③证书要求：HTTP无需证书；HTTPS需要CA机构颁发的安全证书。④速度与开销：HTTP传输速度快、开销小；HTTPS需要加密解密握手，加载速度稍慢，服务器开销更大。⑤排名权重：搜索引擎对HTTPS站点的收录权重更高。四、编程题详细答案1.数组去重（通用方法）javascript

//方法1：ES6Set去重（简洁通用，支持混合类型）

functionuniqueArr(arr){

return[...newSet(arr)];

}

//方法2：传统遍历去重（兼容低版本浏览器）

functionuniqueArr(arr){

letnewArr=[];

arr.forEach(item=>{

if(!newArr.includes(item)){

newArr.push(item);

}

});

returnnewArr;

}

//测试

console.log(uniqueArr([1,2,2,3,3,"1","2"]));//[1,2,3,"1","2"]2.自适应水平垂直居中弹窗CSScss

/*弹窗容器*/

.popup{

position:fixed;

top:50%;

left:50%;

/*宽高自适应，最大宽高限制*/

width:80%;

max-width:500px;

height:auto;

transform:translate(-50%,-50%);

background:#fff;

border-radius:8px;

box-shadow:0020pxrgba(0,0,0,0.1);

padding:20px;

box-sizing:border-box;

}

/*遮罩层*/

.mask{

position:fixed;

top:0;

left:0;

right:0;

bottom:0;

background:rgba(0,0,0,0.5);

}解析：使用fixed定位+transform位移实现完美居中，适配所有屏幕尺寸，宽度百分比自适应，设置最大宽度避免大屏过宽，高度自适应内容。3.JS防抖函数（500ms延迟）javascript

//防抖函数：触发事件后，延迟指定时间执行，期间再次触发重置计时

functiondebounce(fn,delay=500){

lettimer=null;

returnfunction(...args){

//每次触发清空之前的定时器

if(timer)clearTimeout(timer);

//重新开启定时器

timer=setTimeout(()=>{

fn.apply(this,args);

timer=null;

},del