Web前端基础测试题（含详细答案解析）

Web前端基础测试题（含详细答案解析）适用人群：前端初学者、初级前端岗位面试/笔试、在校前端专业考核考试时长：90分钟满分：100分题型说明：选择题、填空题、简答题、代码实操题，答案附每道题后，附带详细思路解析一、单项选择题（共15题，每题2分，共30分）1.以下不属于HTML5新增标签的是？（）A.articleB.sectionC.iframeD.nav答案：C详细解析：iframe是HTML4就存在的内嵌框架标签，不属于HTML5新增语义化标签。article（文章区块）、section（内容区块）、nav（导航区块）均为HTML5核心语义化新增标签，用于优化页面结构可读性。2.CSS中，以下哪个属性可以实现元素水平居中？（）A.text-align:centerB.vertical-align:middleC.float:centerD.position:center答案：A详细解析：text-align:center用于设置块级元素内部的行内、行内块元素水平居中。vertical-align:middle仅用于行内元素或表格单元格垂直居中；CSS无float:center和position:center合法属性值。3.JavaScript中，以下哪个变量声明方式存在变量提升且无块级作用域？（）A.letB.varC.constD.import答案：B详细解析：var声明的变量存在全局提升、函数级作用域，无块级作用域，同一作用域可重复声明。let和const拥有块级作用域，不存在变量提升（暂时性死区）；import是模块导入语法，并非变量声明。4.以下关于CSS盒模型说法正确的是？（）A.标准盒模型宽高包含padding和borderB.IE怪异盒模型宽高仅包含contentC.标准盒模型：元素总宽度=width+padding+border+marginD.怪异盒模型无法手动设置答案：C详细解析：标准盒模型（box-sizing:content-box）中，width仅代表内容区宽度，元素实际占位宽度需要叠加padding、border、margin；怪异盒模型（box-sizing:border-box）的width包含content、padding、border，可通过属性手动切换。5.JS中typeofnull的返回值是？（）A.nullB.undefinedC.objectD.boolean答案：C详细解析：这是JS的历史遗留bug，typeof检测null会返回object。null是独立的空对象引用类型，正确判断null的方式为：变量===null。6.以下哪种选择器权重最高？（）A.类选择器B.ID选择器C.标签选择器D.通配符选择器答案：B详细解析：CSS选择器权重优先级从高到低：ID选择器>类/伪类/属性选择器>标签选择器>通配符选择器。权重越高，样式优先级越高，可覆盖低权重样式。7.JavaScript中，以下哪个方法不会改变原数组？（）A.push()B.splice()C.map()D.pop()答案：C详细解析：map()遍历数组并返回新数组，不会修改原数组。push（尾部添加）、pop（尾部删除）、splice（增删改数组）均为变异数组方法，会直接改变原数组。8.HTML中，以下标签默认是行内块元素的是？（）A.divB.spanC.imgD.p答案：C详细解析：div、p是块级元素，独占一行；span是行内元素，无法设置宽高；img、input、button为默认行内块元素，可设置宽高且不独占一行。9.JS中==和===的区别，说法错误的是？（）A.===严格相等，不做类型转换B.==宽松相等，会自动隐式转换类型C.1==true结果为trueD.1===true结果为true答案：D详细解析：严格相等===要求数值和类型完全一致，1是数字类型，true是布尔类型，结果为false。宽松相等==会将true转为1，因此1==true结果为true。开发中优先使用===，避免隐式转换带来的bug。10.实现CSS弹性布局的属性是？（）A.display:gridB.display:flexC.display:blockD.display:inline答案：B详细解析：display:flex开启弹性盒布局，适合一维布局排列；display:grid为网格布局，适合二维布局；block、inline仅为普通块级、行内显示模式。11.以下不属于JS基本数据类型的是？（）A.stringB.numberC.arrayD.undefined答案：C详细解析：JS基本数据类型（原始类型）：string、number、boolean、undefined、null、symbol、bigint。array（数组）属于引用数据类型（对象类型）。12.CSS中z-index属性的作用是？（）A.设置元素宽度层级B.设置元素堆叠层级C.设置元素透明度D.设置元素缩放答案：B详细解析：z-index用于控制定位元素的上下堆叠顺序，数值越大层级越高，越靠前显示。该属性仅对开启定位（relative、absolute、fixed、sticky）的元素生效。13.JS中for...in循环主要用于遍历？（）A.数组下标B.对象属性C.数组元素D.字符串字符答案：B详细解析：for...in主要遍历对象的可枚举属性名，遍历数组会获取下标字符串，不推荐遍历数组；遍历数组/字符串优先使用for...of、forEach。14.HTML中meta标签的作用不包括？（）A.设置网页编码B.设置移动端适配C.引入外部样式D.设置网页关键词答案：C详细解析：引入外部样式需要link标签，meta标签用于设置网页元信息，包括编码格式、viewport移动端适配、搜索引擎关键词、网页描述等。15.以下JS语句执行结果正确的是？（）A.console.log(2+'2')//4B.console.log(2-'2')//0C.console.log('2'-2)//NaND.console.log(2+2)//'22'答案：B详细解析：JS运算规则：加号遇到字符串会做拼接，减号会强制将字符串转为数字运算。2+'2'结果为'22'，2-'2'会将字符串2转为数字，结果为0。二、填空题（共10空，每空2分，共20分）1.HTML页面的根标签是______，网页主体内容标签是______。答案：html、body解析：html是整个网页的根容器标签，所有网页内容都包裹在其中；body标签用于承载页面所有可见内容。2.CSS中清除浮动的常用方式有______、______、伪元素清除浮动。答案：父级高度固定、overflow:hidden解析：浮动元素脱离标准文档流，会导致父级高度塌陷。常用解决方案：固定父盒子高度、设置父元素overflow:hidden、给父元素添加clearfix伪元素（企业最常用）。3.JavaScript中获取DOM元素的常用方法：______（通过ID获取）、getElementsByClassName。答案：getElementById解析：getElementById根据唯一ID精准获取单个DOM元素；getElementsByClassName根据类名获取元素集合。4.弹性布局中，______属性用于设置主轴对齐方式，______属性用于设置侧轴对齐方式。答案：justify-content、align-items解析：flex布局默认水平为主轴、垂直为侧轴，justify-content控制主轴元素排列对齐，align-items控制侧轴元素对齐。5.JS中终止循环的语句是______，跳过本次循环进入下一次循环的语句是______。答案：break、continue解析：break直接跳出并终止整个循环；continue仅终止当前这一次循环，后续循环继续执行。6.响应式布局中，适配不同设备屏幕的核心属性是______。答案：媒体查询（@media）解析：CSS媒体查询可根据屏幕宽度、分辨率等设备特性，设置不同样式，是响应式布局的核心技术。三、简答题（共4题，每题5分，共20分）1.简述行内元素、块级元素、行内块元素的区别？详细答案解析：1.块级元素：独占一行，默认宽度100%父容器宽度，可设置宽、高、内外边距、margin，常见标签：div、p、h1-h6、ul、li；2.行内元素：同行显示，不独占一行，无法设置宽高、上下margin，仅可设置左右内外边距，常见标签：span、a、em、i；3.行内块元素：兼具两者特点，同行显示，同时可以自由设置宽高、内外边距，常见标签：img、input、button。2.简述JS中var、let、const的区别？详细答案解析：1.作用域不同：var仅支持函数作用域和全局作用域，无块级作用域；let、const支持块级作用域（大括号内生效）；2.变量提升不同：var存在变量提升，可先使用后声明；let、const存在暂时性死区，必须先声明后使用；3.重复声明：var允许同一作用域重复声明变量；let、const禁止重复声明；4.赋值规则：var、let声明的变量可修改值；const声明常量，必须初始化赋值，且基础类型值不可修改（引用类型可修改内部属性）。3.什么是CSS浮动？浮动的优缺点是什么？详细答案解析：浮动是CSS传统布局方式，通过float属性让元素脱离标准文档流，向左或向右悬浮，实现同行排列效果。优点：兼容性好，适配老旧浏览器，可快速实现简单的多列并排布局；缺点：元素脱离文档流会造成父级高度塌陷，需要手动清除浮动；布局逻辑繁琐，嵌套复杂时容易出现错位问题，现在基本被flex、grid布局替代。4.简述JS原型和原型链的核心作用？详细答案解析：1.原型（prototype）：每个构造函数都有一个原型对象，用于存放公共方法和属性，实现方法共享，节省内存开销，避免每个实例重复创建相同方法；2.原型链：每个实例对象都有__proto__属性，指向构造函数原型，原型对象又可向上指向更高层级原型，层层向上追溯形成的链式结构就是原型链；3.核心作用：实现JS的继承机制，当访问对象的属性/方法时，会先在自身查找，找不到则顺着原型链向上查找，直至顶层Object原型。四、代码实操题（共3题，共30分）1.编写代码，实现一个div盒子水平垂直居中（至少写出两种方法）（10分）详细答案解析：方法一：flex布局（推荐，最简写法）css

/*父容器设置*/

.box-wrap{

width:100vw;

height:100vh;

display:flex;

justify-content:center;/*水平居中*/

align-items:center;/*垂直居中*/

margin:0;

}

/*子盒子*/

.box{

width:200px;

height:200px;

background:#ccc;

}方法二：绝对定位+margin自适应居中css

.box-wrap{

position:relative;

width:100vw;

height:100vh;

}

.box{

position:absolute;

top:0;

left:0;

right:0;

bottom:0;

margin:auto;

width:200px;

height:200px;

background:#ccc;

}2.编写JS代码，实现数组去重，输出无重复的新数组（10分）需求：将数组[1,2,2,3,3,4,5,5,1]去重，返回新数组[1,2,3,4,5]详细答案解析：方法一：Set去重（最简ES6写法，企业常用）javascript

//原数组

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

//Set自动去重，再转为数组

constnewArr=[...newSet(arr)];

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

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

constnewArr=[];

arr.forEach(item=>{

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

if(newArr.indexOf(item)===-1){

newArr.push(item);

}

});

console.log(newArr);//[1,2,3,4,5]3.写出以下JS代码的执行结果，并解释原因（10分）javascript

console.log(a);

vara=10;

console.log(a);详细答