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

Web前端基础测试题（含详细答案）适用人群：前端入门、初级前端工程师考试时长：90分钟满分：100分说明：试题涵盖HTML、CSS、JavaScript基础核心知识点，题型贴合企业日常笔试、面试考核场景，无偏题怪题，侧重基础掌握与实际应用能力。一、单项选择题（共15题，每题2分，共30分）1.以下不属于HTML5新增标签的是（）A.articleB.sectionC.iframeD.nav2.CSS中，以下哪个属性可以实现元素水平居中（）A.text-align:centerB.vertical-align:middleC.float:centerD.position:center3.JavaScript中，以下哪个变量声明方式存在变量提升且无块级作用域（）A.constB.letC.varD.import4.下列关于DOM的说法正确的是（）A.DOM仅能操作页面文本内容B.DOM是文档对象模型，可操作页面所有元素C.DOM操作无法修改元素样式D.DOM只能读取页面数据，不能修改5.CSS3中，border-radius:50%对正方形元素的作用是（）A.四个角圆角50pxB.变成圆形C.变成椭圆形D.无效果6.JavaScript中，以下哪个方法可以阻止事件冒泡（）A.event.preventDefault()B.event.stopPropagation()C.event.stopDefault()D.event.cancelBubble()（仅IE）7.以下哪种选择器优先级最高（）A.类选择器B.标签选择器C.ID选择器D.通配符选择器8.HTML中，input标签的type属性值中，用于单选框的是（）A.checkboxB.radioC.submitD.text9.JavaScript中，typeofnull的返回值是（）A.nullB.undefinedC.objectD.boolean10.CSS弹性布局中，用于设置主轴对齐方式的属性是（）A.align-itemsB.justify-contentC.flex-directionD.flex-wrap11.以下不属于JavaScript基本数据类型的是（）A.stringB.numberC.arrayD.boolean12.HTML中，哪个标签用于定义页面主体内容（）A.headerB.bodyC.mainD.footer13.JavaScript中，==和===的核心区别是（）A.无区别B.===严格匹配（值+类型），==会隐式转换类型C.==匹配精度更高D.===仅匹配数值大小14.CSS中，清除浮动最常用、兼容性最好的方式是（）A.overflow:hiddenB.float:noneC.display:blockD.visibility:hidden15.以下哪个不是JavaScript循环语句（）A.forB.whileC.foreachD.do...while二、填空题（共10空，每空2分，共20分）1.HTML文档的根标签是________。2.CSS盒子模型由内容区、________、边框、外边距四部分组成。3.JavaScript中声明常量的关键字是________。4.给元素设置绝对定位需要添加position:________。5.数组方法中，________可以遍历数组并返回新数组，不修改原数组。6.HTML中________属性可以唯一标识页面元素。7.JavaScript中，________方法可以阻止表单默认提交行为。8.CSS中，________属性可以让元素隐藏但保留占位空间。9.箭头函数的核心特点是不绑定________。10.响应式布局中，常用的屏幕适配技术是________。三、简答题（共4题，每题5分，共20分）1.简述HTML、CSS、JavaScript三者的作用和区别。2.什么是CSS浮动？浮动的优缺点分别是什么？3.简述let、var、const三者的区别。4.简述事件委托的原理和优点。四、代码分析题（共2题，每题5分，共10分）1.写出以下代码的输出结果，并说明原因PlainText

console.log(a);

vara=10;

letb=20;

console.log(b);2.写出以下CSS代码的渲染效果PlainText

.box{

width:200px;

height:200px;

background:red;

position:relative;

left:50px;

top:30px;

}五、编程实操题（共2题，每题10分，共20分）1.用HTML+CSS实现一个简单卡片布局：卡片宽300px，圆角10px，阴影效果，内边距20px，居中显示。2.用JavaScript实现：定义一个数组，包含5个数字，遍历数组，筛选出所有大于10的数字并打印输出。参考答案（详细解析）一、单项选择题答案及解析1.C解析：iframe是HTML4原生标签，article、section、nav均为HTML5新增语义化标签。2.A解析：text-align:center实现行内/行内块元素水平居中；vertical-align:middle用于垂直居中，无float:center、position:center属性。3.C解析：var存在变量提升，无块级作用域，仅函数作用域；let、const有块级作用域，无变量提升。4.B解析：DOM（文档对象模型）是浏览器提供的接口，可获取、修改、删除页面任意元素、样式、文本和属性。5.B解析：正方形元素设置border-radius:50%，四个圆角半径为边长的一半，会渲染为正圆形。6.B解析：stopPropagation()标准阻止事件冒泡；preventDefault()阻止默认事件；cancelBubble仅适配低版本IE浏览器。7.C解析：选择器优先级排序：ID选择器>类选择器>标签选择器>通配符选择器。8.B解析：radio为单选框，checkbox为复选框，submit为提交按钮，text为文本输入框。9.C解析：这是JS历史遗留bug，typeofnull返回object，null是独立的空对象类型。10.B解析：justify-content控制弹性盒子主轴对齐方式；align-items控制侧轴对齐方式。11.C解析：JS基本数据类型：string、number、boolean、null、undefined、symbol；array属于引用数据类型。12.B解析：html为根标签，body为页面主体内容容器，所有可见页面内容均写在body内。13.B解析：==会自动进行隐式类型转换，仅对比数值；===严格相等，同时对比数值和数据类型。14.A解析：父元素设置overflow:hidden可快速清除子元素浮动，代码简洁、兼容性极佳，是日常开发最常用方式。15.C解析：JS标准循环语句为for、while、do...while，foreach不是循环语句，是数组遍历方法。二、填空题答案1.html2.内边距（padding）3.const4.absolute5.map6.id7.event.preventDefault()8.visibility:hidden9.this10.媒体查询（@media）三、简答题详细答案1.HTML、CSS、JavaScript三者的作用和区别三者是前端开发的核心三剑客，各司其职、相互配合：HTML是结构层，负责搭建网页骨架，定义页面的标签、内容、结构布局，决定网页有什么内容；CSS是样式层，负责美化网页，设置元素的颜色、大小、间距、布局、动画等视觉效果，决定网页长什么样子；JavaScript是行为层，负责实现网页交互逻辑，实现点击、弹窗、数据渲染、表单验证、动态更新页面等交互功能，决定网页能做什么。核心区别：HTML负责结构、CSS负责样式、JS负责交互，三者分离，提升代码可维护性。2.什么是CSS浮动？浮动的优缺点浮动是CSS的一种布局方式，通过float属性（left/right）让元素脱离标准文档流，向左或向右漂浮，实现横向排列布局。优点：可以快速实现多个块级元素横向排列，兼容性好，适配老旧浏览器；缺点：元素脱离文档流后会导致父元素高度塌陷，影响后续页面布局，需要手动清除浮动，代码冗余度较高，复杂布局适配性差。3.let、var、const三者的区别（1）作用域：var无块级作用域，仅存在函数作用域；let、const拥有块级作用域（大括号内生效）；（2）变量提升：var存在变量提升，声明前调用会返回undefined；let、const无变量提升，存在暂时性死区，声明前调用会报错；（3）重复声明：var允许重复声明变量；let、const不允许重复声明；（4）赋值特性：var、let声明的变量可修改值；const声明的是常量，不可修改（引用类型除外）。4.事件委托的原理和优点原理：利用事件冒泡机制，将多个子元素的事件监听，统一绑定到父元素上，通过事件对象的target属性判断触发事件的子元素，执行对应逻辑。优点：①减少DOM事件绑定次数，优化页面性能；②支持动态新增元素的事件绑定，无需重复绑定事件；③简化代码结构，减少冗余代码。四、代码分析题答案1.输出结果及原因输出：undefined、报错（UncaughtReferenceError:Cannotaccess'b'beforeinitialization）解析：vara存在变量提升，代码执行前会提前声明变量a，未赋值，因此第一个打印为undefined；letb无变量提升，存在暂时性死区，在声明前调用变量会直接报错。2.CSS渲染效果该盒子为宽高200px的红色方块；开启相对定位，相对于自身默认位置，向右偏移50px，向下偏移30px；相对定位不会脱离文档流，不会影响其他元素的布局排列。五、编程实操题参考答案1.卡片布局代码PlainText

<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<title>卡片布局</title>

<style>

.card{

width:300px;

padding:20px;

margin:50pxauto;/*水平居中*/

border-radius:10px;/*圆角*/

box-shadow:0010pxrgba(0,0,0,0.2);/*阴影*/

background:#fff;

}

</style>

</head>

<body>

<divclass="card">我是前端测试卡片</div>

</body>

</html>2.JS数组筛选代码PlainText

//定义数字数组