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

Web前端基础笔试试题（含详细答案）考试说明：满分100分，考试时长90分钟，题型包含选择题、判断题、简答题、代码实操题，考察HTML、CSS、JavaScript核心基础知识点，无偏题怪题，贴合日常开发与企业面试需求。一、单项选择题（共15题，每题3分，共45分）1.以下哪个标签是HTML5新增的语义化区块标签？（）A、divB、spanC、sectionD、b2.CSS中，以下哪个属性可以实现元素水平居中（块级元素）？（）A、text-align:centerB、margin:0autoC、float:centerD、position:center3.JavaScript中，以下哪个变量声明方式存在变量提升且无块级作用域？（）A、letB、constC、varD、function4.下列不属于JavaScript基本数据类型的是？（）A、stringB、numberC、arrayD、boolean5.CSS选择器中，优先级最高的是？（）A、类选择器B、标签选择器C、行内样式D、后代选择器6.HTML中，哪个属性可以实现超链接新窗口打开？（）A、target="_self"B、target="_blank"C、open="new"D、href="new"7.JavaScript中，==和===的核心区别是？（）A、无区别B、===会严格判断类型和值，==会隐式转换类型C、==优先级更高D、===支持对象比较8.清除浮动最推荐、无副作用的方法是？（）A、父元素设置overflow:hiddenB、空div清除浮动C、父元素伪类清除浮动D、设置float:none9.以下哪个方法可以遍历数组且不会改变原数组？（）A、spliceB、mapC、pushD、pop10.CSS3中，实现元素过渡动画效果的属性是？（）A、animationB、transitionC、transformD、opacity11.JavaScript中，undefined和null的说法正确的是？（）A、完全等价B、undefined表示变量未定义，null表示空对象C、null优先级更高D、均可自动转为112.以下哪个不是块级元素？（）A、pB、h1C、aD、ul13.JS中阻止事件冒泡的方法是？（）A、event.preventDefault()B、event.stopPropagation()C、returnfalseD、event.stop()14.Flex布局中，设置子元素水平居中的属性是？（）A、justify-content:centerB、align-items:centerC、flex:centerD、align-content:center15.以下关于cookie的说法错误的是？（）A、存储在客户端浏览器B、容量较小C、可以跨域访问D、可设置过期时间二、判断题（共10题，每题2分，共20分）1、HTML标签不区分大小写，推荐小写书写规范。（）2、CSS中，position:absolute绝对定位是相对于父元素默认定位。（）3、let和const声明的变量有块级作用域，不存在变量提升。（）4、JavaScript中，0、空字符串、null、undefined转换布尔值均为false。（）5、行内元素可以直接设置宽高、上下外边距。（）6、forEach可以遍历数组，且可以通过break终止循环。（）7、rem是相对于根节点html字体大小的单位，适配移动端首选。（）8、JS中对象、数组属于引用数据类型，存储的是内存地址。（）9、preventDefault()可以阻止a标签默认跳转、表单默认提交行为。（）10、localStorage存储的数据会在页面关闭后自动清除。（）三、简答题（共3题，每题5分，共15分）1、简述HTML、CSS、JavaScript三者的作用和区别。2、简述flex布局的优势，以及常用的核心属性。3、简述JS中浅拷贝和深拷贝的区别，以及常用实现方式。四、代码实操题（共2题，每题10分，共20分）1、编写完整代码，实现一个居中卡片布局：页面居中显示白色卡片，卡片有圆角、阴影，宽300px、高200px，内部文字水平垂直居中。2、编写JS代码，实现功能：定义一个数组[1,2,3,4,5,6]，筛选出所有偶数，并且每个偶数乘以2，返回新数组。详细参考答案一、单项选择题答案及解析1、C解析：section、article、header、footer均为HTML5新增语义化标签，div、span、b为传统标签。2、B解析：text-align:center只能让行内/行内块元素居中，块级元素水平居中统一使用margin:0auto。3、C解析：var存在变量提升、无块级作用域；let/const有块级作用域，无变量提升。4、C解析：JS基本数据类型：string、number、boolean、undefined、null、symbol、bigint；array属于引用类型。5、C解析：优先级排序：行内样式>ID选择器>类选择器>标签选择器。6、B解析：target="_blank"新窗口打开，target="_self"当前窗口打开（默认）。7、B解析：==会自动进行数据类型转换后比较值；===严格模式，必须类型和值完全一致才为true。8、C解析：伪类清除浮动（.clearfix:after）是业界标准方法，无高度塌陷、无兼容性问题、无副作用。9、B解析：map遍历返回新数组，不修改原数组；splice、push、pop均会直接修改原数组。10、B解析：transition是过渡（状态切换动画），animation是关键帧动画，transform是变形。11、B解析：undefined代表变量声明未赋值、属性不存在；null代表手动设置的空对象，二者不全等。12、C解析：a是行内元素，p、h1、ul均为块级元素。13、B解析：stopPropagation()阻止事件冒泡；preventDefault()阻止默认行为。14、A解析：justify-content控制水平对齐，align-items控制垂直对齐。15、C解析：cookie不支持跨域访问，受同源策略限制，其余选项均正确。二、判断题答案及解析1、√解析：HTML语法宽松，不区分大小写，行业统一规范小写书写。2、×解析：absolute绝对定位相对于最近的已定位父元素，无已定位父元素则相对于浏览器窗口。3、×解析：let/const存在暂时性死区，有隐性变量提升，但不会提前初始化，不能先使用后声明。4、√解析：JS假值包含：0、-0、""、null、undefined、NaN，其余均为真值。5、×解析：行内元素无法设置宽高、上下margin，只能设置左右margin和padding。6、×解析：forEach不支持break、continue终止循环，需用for循环或some/every方法实现终止。7、√解析：rem基于根字体，适配灵活，是移动端适配主流单位。8、√解析：引用类型不存储具体值，存储内存地址，多个变量指向同一个内存空间。9、√解析：preventDefault()专门用于阻止标签默认行为，常用于a标签、表单、滚轮事件。10、×解析：localStorage永久存储，手动清除才会消失；sessionStorage页面关闭自动清除。三、简答题答案1、HTML、CSS、JavaScript三者的作用和区别三者是Web前端三大核心技术，分工明确、相互配合：①HTML是结构层：负责搭建网页骨架，定义网页的标签、内容、结构，相当于房子的墙体框架；②CSS是样式层：负责美化网页，设置颜色、大小、布局、动画、适配等样式，相当于房子的装修装饰；③JavaScript是行为层：负责实现网页交互逻辑，比如点击事件、数据处理、动态渲染、表单验证等，相当于房子的水电智能系统。三者分离可以让代码结构清晰、易于维护、复用性更强。2、flex布局的优势及常用核心属性优势：传统布局依赖浮动、定位，容易出现高度塌陷、对齐麻烦、适配困难等问题；flex布局是弹性布局，语法简洁、对齐灵活、自适应能力强，完美适配移动端和各种自适应场景，无浮动副作用。常用核心属性：容器属性：display:flex（开启弹性布局）、justify-content（水平对齐）、align-items（垂直对齐）、flex-wrap（是否换行）；子项属性：flex（缩放比例）、align-self（单独设置子项对齐方式）。3、JS浅拷贝和深拷贝的区别及实现方式核心区别：浅拷贝只拷贝对象/数组的第一层属性，深层引用类型依旧共享内存地址，修改深层数据会影响原数据；深拷贝会递归拷贝所有层级数据，新旧数据完全独立，互不影响。浅拷贝实现：展开运算符...、Object.assign()、数组slice()；深拷贝实现：JSON.parse(JSON.stringify())（简单数据）、递归函数（复杂数据，支持函数、正则）、第三方库lodash。四、代码实操题答案1、居中卡片布局完整代码html

<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<title>居中卡片</title>

<style>

*{

margin:0;

padding:0;

box-sizing:border-box;

}

body{

/*页面整体垂直水平居中*/

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

background-color:#f5f5f5;

}

.card{

width:300px;

height:200px;

background:#fff;

border-radius:10px;

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

/*卡片内部文字居中*/

display:flex;

justify-content:center;

align-items:center;

}

</style>

</h