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

Web前端基础笔试题（含详细答案）适用人群：前端初学者、实习生、初级前端工程师考试时长：60分钟满分：100分一、单项选择题（共10题，每题3分，共30分）1.HTML中，以下哪个标签用于定义独立的、可复用的页面区块，且自带语义化？（）A.<div>B.<section>C.<span>D.<i>2.以下不属于CSS块级元素特征的是（）A.独占一行B.宽度默认100%C.可设置宽高、内外边距D.同行并排显示3.CSS中，position:absolute绝对定位的参照物是（）A.浏览器窗口B.父级最近已定位（非static）元素C.body元素D.根html元素4.以下JavaScript变量名命名合法的是（）A.123nameB.name-msgC._userInfoD.let5.下列关于var、let、const的说法，正确的是（）A.let存在变量提升B.const声明的变量不可修改C.var存在块级作用域D.let和const存在块级作用域6.JavaScript中，console.log(1+'2')的输出结果是（）A.3B.'12'C.12D.报错7.以下哪种事件可以监听元素鼠标点击操作（）A.mouseoverB.clickC.mousemoveD.mouseout8.CSS选择器中，优先级最高的是（）A.类选择器B.标签选择器C.行内样式D.后代选择器9.以下不属于JavaScript原始数据类型的是（）A.StringB.NumberC.ArrayD.Boolean10.网页加载过程中，DOMContentLoaded事件触发时机是（）A.整个页面所有资源（图片、样式、脚本）加载完成B.DOM树构建完成，无需等待图片等资源C.CSS加载完成后D.脚本执行完毕后二、填空题（共5题，每题4分，共20分）1.HTML5新增的语义化标签有______、______、______（任意写三个）。2.CSS盒子模型由四部分组成，分别是内容、______、______、______。3.JavaScript中，判断变量类型为数组的两种常用方法是______、______。4.防抖和节流的核心作用是______，常用于______、______场景。5.前端三大核心技术是______、______、______。三、简答题（共4题，每题8分，共32分）1.简述行内元素、块级元素、行内块元素的区别，并列举常用标签。2.简述CSS浮动的作用、副作用，以及清除浮动的常用方法。3.简述JavaScript中null和undefined的区别。4.简述浏览器缓存的分类及核心区别。四、编程题（共2题，每题9分，共18分）1.用原生JS实现：点击按钮，修改页面中div的文字内容和字体颜色。2.手写一个简单的数组去重方法，兼容普通数组场景。详细参考答案一、单项选择题答案及解析1.答案：B解析：div是无语义通用区块，span是行内无语义标签，i是斜体标签；section是HTML5语义化区块标签，用于定义页面独立内容区块。2.答案：D解析：块级元素独占一行，宽度默认铺满父容器，支持宽高、内外边距设置；同行并排是行内、行内块元素的特征。3.答案：B解析：绝对定位不跟随文档流，参照物为最近设置过relative/absolute/fixed定位的父级元素，无则逐级向上查找，最终默认相对于根元素。4.答案：C解析：变量名不能以数字开头、不能包含短横线、不能使用关键字；只能由字母、数字、下划线、$组成，且不能数字开头。5.答案：D解析：var无块级作用域、存在变量提升；let/const有块级作用域、无变量提升、不可重复声明；const声明的基本类型变量不可修改，引用类型可修改内部属性。6.答案：B解析：JS中字符串与数字相加会触发隐式类型转换，数字转为字符串后拼接，最终结果为字符串'12'。7.答案：B解析：mouseover是鼠标移入，mousemove是鼠标移动，mouseout是鼠标移出，click是鼠标点击事件。8.答案：C解析：CSS优先级排序：!important>行内样式>ID选择器>类/伪类选择器>标签选择器>通配符选择器。9.答案：C解析：JS原始数据类型（基本类型）：String、Number、Boolean、Null、Undefined、Symbol、BigInt；Array属于引用类型（复杂类型）。10.答案：B解析：DOMContentLoaded在DOM树构建完成后触发，无需等待图片、视频、样式文件等资源；load事件是所有资源全部加载完成后触发。二、填空题答案1.header、footer、nav、article、aside（任选三个即可）2.内边距（padding）、边框（border）、外边距（margin）3.Array.isArray()、Ototype.toString.call()4.限制函数高频触发、减少性能消耗；窗口resize、输入框实时搜索、滚动监听（任选两个场景）5.HTML（结构）、CSS（样式）、JavaScript（行为）三、简答题详细答案1.行内、块级、行内块元素区别及常用标签（1）块级元素：独占一行，宽度默认100%继承父级，可设置宽高、margin、padding。常用标签：div、p、h1-h6、ul、li、section。（2）行内元素：同行并排显示，宽度由内容撑开，无法设置宽高、上下margin，仅可设置左右内外边距。常用标签：span、a、i、em、b。（3）行内块元素：兼具两者特点，同行并排显示，可自由设置宽高、内外边距。常用标签：img、input、button。2.CSS浮动相关问题浮动作用：让块级元素脱离普通文档流，实现元素横向并排排列，多用于传统布局、图文环绕场景。浮动副作用：子元素浮动后脱离文档流，导致父元素高度塌陷；后续普通文档流元素会向上占位，页面布局错乱。清除浮动常用方法：①给父元素设置overflow:hidden（简单高效，适合大多数场景）；②伪元素清除浮动（最常用，无副作用）：给父元素添加clearfix类，通过::after伪元素设置clear:both；③在浮动子元素末尾添加空标签，设置clear:both（冗余，不推荐）。3.null和undefined的区别（1）undefined：表示未定义、不存在。场景：变量声明未赋值、访问对象不存在的属性、函数无返回值、函数参数未传参，默认值为undefined。（2）null：表示空值、空对象，是主动赋值的空状态。场景：主动清空变量、初始化对象变量、DOM获取元素为空时返回null。（3）核心差异：undefined是系统默认的空状态，代表无值；null是手动设置的空对象，代表主动置空。且typeofnull结果为object，typeofundefined结果为undefined。4.浏览器缓存分类及区别浏览器缓存分为强缓存和协商缓存，核心是减少重复请求、提升页面加载速度。（1）强缓存：优先级最高，命中后直接读取本地缓存，不向服务器发送任何请求。通过Cache-Control、Expires控制，缓存未过期时永久生效。（2）协商缓存：强缓存失效后触发，会向服务器发送请求验证缓存是否有效。通过Last-Modified/If-Modified-Since、ETag/If-None-Match验证，资源未更新则返回304，读取本地缓存；资源更新则返回新资源。核心区别：强缓存不发请求，协商缓存需要发送请求校验。四、编程题详细答案1.点击按钮修改div文字和颜色（原生JS）html

<!DOCTYPEhtml>

<htmllang="zh-CN">

<body>

<divid="box">初始文字</div>

<buttonid="btn">点击修改内容</button>

<script>

//获取元素

constbtn=document.getElementById('btn')

constbox=document.getElementById('box')

//绑定点击事件

btn.addEventListener('click',function(){

//修改文字内容和字体颜色

box.innerText='修改后的前端测试文字'

box.style.color='#f56c6c'

})

</script>

</body>

</html>2.手写数组去重方法方法一：ES6Set去重（简洁高效，推荐）javascript

functionuniqueArr(arr){

//Set自动剔除重复值，再转回数组

return[...newSet(arr)]

}

//测试

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

functionuniqueArr(arr){

constnewArr=[]

for(let