Web前端开发笔试考试题（含详细答案）

Web前端开发笔试考试题（含详细答案）考试说明：满分100分，考试时长90分钟，题型包含选择题、填空题、简答题、编程实操题，侧重基础知识点、实战应用与常见问题排查。一、单项选择题（共15题，每题2分，共30分）1.以下不属于HTML5新增标签的是（）A.articleB.headerC.iframeD.section2.CSS中，以下哪个属性可以实现元素水平居中（）A.text-align:centerB.vertical-align:middleC.float:centerD.position:center3.JavaScript中，以下声明变量的方式，存在变量提升且无块级作用域的是（）A.letB.varC.constD.import4.以下哪种盒子模型是CSS标准盒子模型（）A.border-boxB.content-boxC.padding-boxD.margin-box5.关于flex布局，以下说法错误的是（）A.flex-direction可设置主轴方向B.justify-content控制主轴对齐方式C.align-items控制侧轴对齐方式D.flex属性不能简写6.JavaScript中，===和==的核心区别是（）A.无区别B.===严格区分数值和类型，==会自动隐式转换类型C.==优先级更高D.===可以比较对象，==不可以7.以下事件中，属于鼠标悬浮事件的是（）A.onclickB.onmouseoverC.onkeydownD.onscroll8.清除浮动最彻底、适用性最广的方法是（）A.父元素设置overflow:hiddenB.空div清除浮动C.伪类:after清除浮动D.子元素设置clear:both9.以下不属于JavaScript基本数据类型的是（）A.StringB.NumberC.ArrayD.Boolean10.CSS3中，实现元素过渡动画效果的属性是（）A.animationB.transitionC.transformD.opacity11.原生AJAX中，用于监听请求状态变化的事件是（）A.onloadB.onreadystatechangeC.onchangeD.onsubmit12.以下关于闭包的说法正确的是（）A.闭包会造成全局变量污染B.闭包可以保存函数内部变量，避免全局污染C.闭包无法实现变量私有化D.闭包执行后变量会立即销毁13.HTML中，input标签type属性值，用于提交表单的是（）A.buttonB.resetC.submitD.text14.JavaScript中，遍历数组不改变原数组的方法是（）A.spliceB.pushC.mapD.pop15.以下选择器优先级最高的是（）A.类选择器B.标签选择器C.行内样式D.后代选择器二、填空题（共10空，每空2分，共20分）1.HTML文档的根标签是________，网页头部标签是________。2.CSS中，设置元素透明度的属性是________，取值范围是________。3.JavaScript中，定义常量使用________关键字，定义块级作用域变量使用________关键字。4.数组排序方法________可实现数组升序排序，反转数组顺序的方法是________。5.页面加载完成事件中，________是DOM结构加载完成触发，无需等待图片资源。6.同源策略的三个限制条件是：协议、________、端口号必须一致。三、简答题（共4题，每题5分，共20分）1.简述行内元素、块级元素、行内块元素的区别。2.简述JS中垃圾回收机制的原理及常用回收方式。3.简述flex布局中flex:1的含义。4.简述AJAX的工作原理及使用场景。四、编程实操题（共2题，每题15分，共30分）1.基础布局题：使用HTML+CSS实现一个简单卡片布局，要求：卡片圆角、阴影、居中显示，鼠标悬浮时有轻微上浮效果，适配电脑端基础显示。2.JS编程题：编写代码，实现数组去重功能，给出两种不同实现方式。参考答案（详细解析）一、单项选择题答案及解析1.C解析：iframe是HTML4原有标签，article、header、section均为HTML5新增语义化标签。2.A解析：text-align:center用于行内/行内块元素水平居中；vertical-align为垂直对齐属性，无float:center、position:center写法。3.B解析：var存在变量提升，无块级作用域，仅存在函数作用域；let、const有块级作用域，无变量提升。4.B解析：content-box为W3C标准盒子模型，元素宽高仅包含内容区；border-box为IE怪异盒子模型，宽高包含边框、内边距、内容。5.D解析：flex是复合属性，可简写flex:数值，代表flex-grow、flex-shrink、flex-basis的组合值。6.B解析：==会进行隐式类型转换，仅判断数值是否相等；===严格匹配数值和数据类型，完全一致才返回true。7.B解析：onmouseover为鼠标悬浮事件，onclick为点击事件，onkeydown为键盘按下事件，onscroll为滚动事件。8.C解析：伪类:after清除浮动无副作用、兼容性好、不冗余，是项目中最常用的方案；overflow:hidden会隐藏溢出内容，有局限性。9.C解析：JS基本数据类型包含String、Number、Boolean、Null、Undefined、Symbol；Array属于引用数据类型。10.B解析：transition用于设置属性过渡效果（状态切换动画）；animation用于自定义关键帧动画；transform为变形属性，无动画效果。11.B解析：onreadystatechange监听AJAX请求状态的四次变化，是AJAX核心监听事件。12.B解析：闭包是函数嵌套形成的作用域，可保留内部变量，实现变量私有化，避免全局变量污染，缺点是容易造成内存堆积。13.C解析：submit为表单提交按钮，reset为重置按钮，button为普通按钮。14.C解析：map遍历数组并返回新数组，不修改原数组；splice、push、pop均会直接修改原数组。15.C解析：选择器优先级排序：行内样式>ID选择器>类选择器>标签选择器>后代选择器。二、填空题答案1.html、head2.opacity、0-13.const、let4.sort()、reverse()5.DOMContentLoaded6.域名三、简答题详细答案1.行内元素、块级元素、行内块元素的区别（1）块级元素：独占一行，默认宽度100%父级宽度，可设置宽、高、内外边距、浮动，常见标签：div、p、h1-h6、ul、li；（2）行内元素：不独占一行，同行可并排显示，宽高由内容撑开，无法设置宽高、上下内外边距，仅可设置左右内外边距，常见标签：span、a、em、i；（3）行内块元素：兼具两者特点，同行可并排显示，同时可以设置宽高、内外边距，常见标签：img、input、button。2.JS垃圾回收机制原理及常用方式原理：JS会自动监测内存中不再被使用的变量、对象、函数等数据，释放其占用的内存空间，避免内存堆积，无需手动操作内存释放。常用两种回收方式：（1）标记清除：最主流方式，遍历所有内存数据，标记活跃数据，清除无标记的废弃数据；（2）引用计数：统计数据的引用次数，引用次数为0时立即回收，缺点是无法解决循环引用问题。3.flex:1的含义flex是复合属性，flex:1等价于flex:110%，包含三个属性值：（1）flex-grow:1：父容器有剩余空间时，当前元素平分所有剩余空间；（2）flex-shrink:1：父容器空间不足时，当前元素自动等比例压缩；（3）flex-basis:0%：元素初始尺寸为0，完全根据剩余空间分配大小。整体效果：多个设置flex:1的子元素，会平分父容器的可用宽度。4.AJAX的工作原理及使用场景工作原理：通过浏览器内置的XMLHttpRequest对象，创建异步通信通道，在不刷新整个页面的前提下，向服务器发送请求、接收服务器返回的数据，局部更新页面内容，实现页面无刷新交互。使用场景：表单异步提交、搜索联想下拉、分页加载、局部数据刷新、上传文件进度监听等。四、编程实操题参考答案1.卡片布局代码（完整可运行）html

<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<title>卡片布局</title>

<style>

*{

margin:0;

padding:0;

box-sizing:border-box;

}

body{

display:flex;

justify-content:center;

align-items:center;

min-height:100vh;

background-color:#f5f5f5;

}

.card{

width:300px;

height:400px;

background:#fff;

border-radius:12px;

box-shadow:02px12pxrgba(0,0,0,0.1);

transition:all0.3sease;

}

/*悬浮上浮效果*/

.card:hover{

transform:translateY(-8px);

box-shadow:08px20pxrgba(0,0,0,0.15);

}

</style>

</head>

<body>

<divclass="card"></div>

</body>

</html>2.数组去重两种实现方式方式一：ES6Set去重（最简写法）javascript

//Set数据结构自动去重，转换为数组

functionuniqueArr1(arr){

return[...newSet(arr)];

}

//测试

letarr=[1,2,2,3,3,4,5,5];

console.log(uniqueArr1(arr));//[1,2,3,4,5]方式二：遍历判断去重（兼容低版本浏览器）javascript

//利用indexOf判断元素是否存在新数组

functionuniqueArr2(arr)