Web前端开发基础与实战笔试试题

Web前端开发基础与实战笔试试题考试说明：本试题适用于初级Web前端开发岗位考核，满分100分，考试时长90分钟；答题需独立完成，编程题可手写代码思路及完整实现，禁止照搬网络模板。题型分布：选择题20分、填空题20分、简答题30分、编程实操题30分一、单项选择题（共10题，每题2分，共20分）每题只有一个正确答案，将正确选项填入括号内1.以下不属于HTML5新增语义化标签的是（）A.headerB.sectionC.divD.article2.CSS中，以下选择器优先级最高的是（）A.类选择器B.行内样式C.标签选择器D.后代选择器3.关于CSS盒模型，下列说法正确的是（）A.standard盒模型宽度包含padding和borderB.border-box模式下，元素总宽度等于设置的width值C.margin会改变元素自身的可视宽度D.padding不可以设置负值4.以下JavaScript变量命名合法的是（）A.123nameB.user-nameC._scoreD.let5.下列关于var、let、const的区别，说法错误的是（）A.var存在变量提升，无块级作用域B.let存在块级作用域，不可重复声明C.const声明的变量不可修改任何内容D.let、const不存在变量提升6.JavaScript中，以下方法不会改变原数组的是（）A.pushB.spliceC.mapD.reverse7.关于事件冒泡和事件捕获，下列说法正确的是（）A.事件捕获是从子元素向父元素触发B.事件冒泡是默认的事件触发机制C.stopPropagation可以阻止事件默认行为D.事件捕获阶段在冒泡阶段之后执行8.以下不属于HTTP请求方式的是（）A.GETB.POSTC.SENDD.PUT9.Vue中，用于实现父子组件双向数据绑定的指令是（）A.v-bindB.v-modelC.v-onD.v-for10.清除浮动最常用、兼容性最好的方式是（）A.父元素设置overflow:hiddenB.空div清除浮动C.父元素浮动D.手动设置高度二、填空题（共10空，每空2分，共20分）1.HTML中，________属性用于设置元素的唯一标识，不可重复。2.CSS中，设置弹性布局的核心属性是________。3.JavaScript中，判断数组类型的精准方法是________。4.异步编程的三种常用方案：回调函数、________、________。5.阻止事件默认行为的JS方法是________。6.HTTP状态码200代表请求成功，404代表________，500代表________。7.Vue生命周期中，页面DOM首次渲染完成的钩子函数是________。8.移动端适配中，rem是相对于________的字体大小单位。三、简答题（共5题，每题6分，共30分）1.简述HTML语义化标签的意义，并举出3个常用语义化标签。2.详细说说CSS中flex布局的常用属性，以及justify-content和align-items的作用区别。3.谈谈JavaScript中原型和原型链的理解。4.简述GET和POST请求的核心区别（至少写出4点）。5.说说Vue中computed和watch的区别，以及各自的使用场景。四、编程实操题（共2题，每题15分，共30分）1.基础页面布局实现（15分）需求：编写完整HTML+CSS代码，实现一个简易卡片布局。要求如下：（1）页面包含一个卡片容器，宽度300px，自适应居中；（2）卡片包含标题、简介、按钮三个模块，结构整洁；（3）实现卡片悬浮阴影效果，按钮悬浮变色效果；（4）使用flex布局完成内部排版，代码规范、注释清晰。2.JavaScript逻辑编程（15分）需求：编写原生JS代码，实现数组去重并排序功能。要求如下：（1）给定无序含重复数组：[2,5,3,8,2,9,5,1,3]；（2）通过原生JS方法实现数组去重；（3）对去重后的数组进行从小到大升序排序；（4）最终在控制台打印结果，写出完整可运行代码。参考答案及评分标准一、单项选择题（每题2分）1.C2.B3.B4.C5.C6.C7.B8.C9.B10.A二、填空题（每空2分）1.id2.display:flex3.Array.isArray()4.Promise、async/await（顺序可互换）5.event.preventDefault()6.资源不存在、服务器内部错误7.mounted8.根元素（html）三、简答题（每题6分，核心要点答对即可得分）1.HTML语义化标签意义及示例意义：提升代码可读性，便于团队维护；利于搜索引擎抓取页面内容，优化SEO；适配设备无障碍阅读。常用标签：nav、footer、main、aside、figure（任意3个即可）。2.flex布局常用属性及核心区别常用属性：display:flex、flex-direction、flex-wrap、justify-content、align-items、align-content等。justify-content用于设置主轴对齐方式，align-items用于设置侧轴对齐方式，二者控制元素排列的轴向不同。3.原型与原型链理解每个JS对象都有一个__proto__属性，指向其构造函数的prototype（原型对象）；原型对象可以挂载公共方法和属性，实现代码复用。原型链是对象逐级向上查找原型的链条，当访问对象属性/方法时，自身不存在则向上遍历原型链，直至顶层Ototype，最终实现继承。4.GET与POST核心区别（1）参数位置：GET参数拼接在URL后，POST参数放在请求体；（2）缓存：GET可被浏览器缓存，POST默认不缓存；（3）安全性：POST安全性更高，参数不会暴露在地址栏；（4）数据限制：GET数据长度有限制，POST无严格限制；（5）书签：GET可保存为书签，POST不可。（答对4点即可满分）5.computed和watch区别及场景区别：computed是计算属性，依赖缓存，数据不变则不重新计算，支持双向绑定；watch是监听属性，无缓存，数据变化即触发回调，支持异步操作。场景：简单数据计算、多数据依赖同一结果用computed；数据变化后执行异步操作、复杂逻辑处理用watch。四、编程实操题（评分要点）1.卡片布局题（15分）评分要点：完整HTML结构（5分）、flex布局实现排版（4分）、悬浮阴影及变色效果（4分）、代码规范有注释（2分）2.数组处理题（15分）参考代码：PlainText

//定义原数组

constarr=[2,5,3,8,2,9,5