计算机二级《web程序设计》试题+答案

计算机二级《web程序设计》试题+答案单项选择题（每题2分，共40分）1.下列选项中，不属于HTML5新增语义化标签的是（）A.`<header>`B.`<div>`C.`<article>`D.`<footer>`答案：B解析：`<div>`是HTML早期版本就存在的通用块级容器元素，本身无语义，不属于HTML5新增语义化标签。HTML5新增语义化标签还包括`<section>`、`<nav>`、`<aside>`、`<main>`等，作用是明确页面不同区块的语义，提升代码可读性、屏幕阅读器可访问性以及搜索引擎优化效果，因此本题选B。2.在HTML原生表单中，用于设置input元素为必填项，提交时自动校验的属性是（）A.requiredB.validateC.placeholderD.disabled答案：A解析：`required`是HTML5新增的原生表单校验属性，设置该属性后，浏览器会在表单提交时自动校验该输入框是否为空，若为空则阻止提交并显示提示信息，无需编写额外JavaScript校验代码；`placeholder`是输入框为空时显示的占位提示文本，`disabled`用于禁用表单元素，`validate`不是HTML原生属性，因此本题选A。3.下列CSS选择器中，优先级最高的是（）A.内联样式B.ID选择器C.类选择器D.标签选择器答案：A解析：CSS选择器优先级从高到低的排序规则为：`!important`声明>内联行内样式>ID选择器>类选择器/属性选择器/伪类选择器>标签选择器/伪元素选择器>通配选择器。因此内联样式的优先级高于ID选择器，本题选A。4.CSS中，要实现元素宽度为父元素宽度的50%，且宽高比例固定为1:1，正确的现代写法是（）A.`width:50%;height:50%;`B.`width:50%;padding-top:50%;height:0;`C.`width:50%;aspect-ratio:1/1;`D.`width:50vmin;height:50vmin;`答案：C解析：`aspect-ratio`是CSS原生的宽高比设置属性，可以直接指定元素的宽高比例，本题要求宽度为父元素50%，宽高比1:1，C选项完全符合需求；A选项中高度50%是相对于父元素高度，不是根据宽度自适应，无法保证宽高始终为1:1；B选项是不支持`aspect-ratio`的旧浏览器兼容hack写法，不符合现代CSS规范要求；D选项`vmin`是相对于视口的单位，不是相对于父元素，不符合题目要求，因此本题选C。5.JavaScript操作DOM时，哪个方法可以给元素添加新类名，且不会覆盖元素已有的类名（）A.`element.className='newClass'`B.`element.classList.add('newClass')`C.`element.setAttribute('class','newClass')`D.`element.appendChild('newClass')`答案：B解析：DOM提供的`classList`对象是专门用于操作元素类名的API，`add()`方法用于追加新类名，不会覆盖原有类名，同时还提供了`remove()`删除类、`toggle()`切换类、`contains()`检测类是否存在等方法，极大简化了类名操作；A和C选项都会直接覆盖元素原有的`class`属性值，替换掉所有原有类名；D选项`appendChild()`用于添加DOM子节点，不能操作类名，因此本题选B。6.JavaScript中，下列变量声明方式，变量具有块级作用域的是（）A.varB.functionC.letD.以上都不对答案：C解析：ES6新增的`let`和`const`声明方式遵循块级作用域规则，变量仅在声明它的代码块（`{}`包裹的区块）内有效；`var`声明的变量存在变量提升，作用域为函数级或全局，不存在块级作用域，因此本题选C。7.下列关于JavaScript中Promise的描述，错误的是（）A.Promise有三种状态：pending（等待）、fulfilled（成功）、rejected（失败）B.Promise的状态一旦改变就不会再发生变化C.Promise可以解决异步编程中回调地狱的问题D.Promise的`then()`方法只能接收成功回调，不能接收失败回调答案：D解析：Promise的`then()`方法支持两个参数，第一个参数是状态变为成功时的回调函数，第二个参数是状态变为失败时的回调函数，失败回调也可以通过`catch()`方法统一添加，因此D选项描述错误；其余选项均符合Promise的特性，本题选D。8.关于HTTP协议中GET请求和POST请求的区别，下列描述错误的是（）A.GET请求参数拼接在URL中，POST请求参数放在请求体中B.GET请求对参数长度有限制，POST请求理论上没有长度限制C.GET请求会被浏览器主动缓存，POST请求默认不会被缓存D.GET只能发送文本数据，POST只能发送二进制数据答案：D解析：GET和POST是HTTP请求的两种方法，都可以发送任意类型的数据，二者的核心区别是GET用于获取资源，POST用于提交资源，参数位置不同，因此D选项描述错误；其余选项均为二者的正确区别，本题选D。9.JavaScript中，表达式`typeofnull`的输出结果是（）A.nullB.objectC.undefinedD.number答案：B解析：这是JavaScript的历史遗留bug，JavaScript最初设计时，对象的类型标签用低三位存储，`null`代表空指针，低三位全为0，因此`typeof`判断结果为`object`，该bug一直保留至今未修复，因此本题选B。10.下列CSS布局方式中，可以实现左侧固定宽度、右侧自适应宽度的两栏布局的是（）A.浮动+外边距B.Flex布局C.Grid布局D.以上三种都可以实现答案：D解析：三种方式都可以实现需求：浮动+外边距方案中，左栏设置左浮动、固定宽度，右栏设置`margin-left`等于左栏宽度即可实现；Flex方案中，父容器设置`display:flex`，左栏设置固定宽度，右栏设置`flex:1`即可自动占满剩余宽度；Grid方案中，父容器设置`display:grid;grid-template-columns:固定宽度1fr;`即可实现，因此本题选D。11.HTML中，img标签的哪个属性用于图片加载失败时显示替代文本（）A.altB.titleC.srcD.data答案：A解析：`alt`是img标签的核心属性，作用是图片无法加载时显示替代文本，同时可以供屏幕阅读器识别，提升网页可访问性；`title`是鼠标悬停在图片上时显示的提示文本，`src`用于指定图片的地址，因此本题选A。12.CSS中，哪个属性可以让元素的padding和border不会撑大元素设置的总宽高（）A.`box-sizing:content-box`B.`box-sizing:border-box`C.`box-sizing:padding-box`D.`box-sizing:inherit`答案：B解析：`border-box`盒模型模式下，元素设置的width和height已经包含了border和padding，实际内容区宽度等于设置宽度减去border和padding的总宽度，因此padding和border不会额外撑大元素的总宽高；`content-box`是默认模式，width仅包含内容区宽度，padding和border会额外增加总宽高，因此本题选B。13.JavaScript数组方法`filter()`的作用是（）A.遍历数组，对每个元素做处理，返回处理后的新数组B.遍历数组，过滤出符合条件的元素，返回新数组C.累计遍历数组，返回最终的计算结果D.对原数组元素进行排序，改变原数组答案：B解析：`filter()`是数组的过滤方法，不改变原数组，会将每个元素传入回调函数，回调返回true的元素会被保留，最终返回所有符合条件元素组成的新数组；A选项是`map()`方法的作用，C选项是`reduce()`方法的作用，D选项是`sort()`方法的作用，因此本题选B。14.下列关于浏览器跨域问题的描述，错误的是（）A.跨域是浏览器同源策略导致的，限制了客户端获取跨域请求的响应B.协议不同、域名不同、端口不同，任意一个不匹配都会产生跨域C.JSONP可以解决跨域问题，同时支持GET和POST请求D.CORS是目前主流的跨域解决方案，需要后端配置跨域响应头答案：C解析：JSONP跨域的原理是利用script标签不受同源策略限制的特性实现跨域，只能发送GET请求，不支持POST等其他类型的请求，因此C选项描述错误；其余选项描述均正确，本题选C。15.下列HTML标签中，默认是行内元素的是（）A.`<p>`B.`<div>`C.`<span>`D.`<ul>`答案：C解析：`<span>`默认是行内元素，不会独占一行，可以和其他行内元素排在同一行；`<p>`、`<div>`、`<ul>`默认都是块级元素，独占一行，因此本题选C。16.JavaScript中，下列选项不属于异步编程实现方式的是（）A.回调函数B.PromiseC.GeneratorD.`console.log()`答案：D解析：`console.log()`是控制台输出方法，和异步编程无关；回调函数、Promise、Generator、async/await都是JavaScript常用的异步编程方案，因此本题选D。17.下列CSS实现元素垂直水平居中的方法，描述错误的是（）A.`position:absolute;top:50%;left:50%;margin:负宽高一半;`适用于定宽高元素B.`position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;`适用于定宽高元素C.`display:flex;justify-content:center;align-items:center;`父元素设置即可让子元素居中D.`position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);`只适用于定宽高元素答案：D解析：`transform:translate(-50%,-50%)`方案的核心优势就是不需要元素定宽高，无论元素宽高是多少，都可以实现居中，因此D选项描述错误；其余选项描述均正确，本题选D。18.下列关于前端本地存储的描述，正确的是（）A.localStorage存储的数据会在浏览器关闭后自动清除B.sessionStorage存储的数据可以跨标签页共享，永久存储C.localStorage的存储容量远大于cookieD.cookie不会随HTTP请求自动发送到服务器答案：C解析：cookie的最大存储容量约为4KB，localStorage的存储容量可以达到5-10MB，容量远大于cookie，因此C选项正确；localStorage是持久化存储，浏览器关闭后数据不会清除，A错误；sessionStorage是会话级存储，当前标签页关闭后数据就会清除，也不能跨标签页共享，B错误；cookie每次HTTP请求都会自动携带发送给服务器，D错误，本题选C。19.下列关于JavaScript闭包的描述，正确的是（）A.闭包一定会导致内存泄漏，占用的内存永远不会被回收B.闭包是指函数可以访问外部作用域的变量，即使函数执行完毕，外部变量也不会被释放C.闭包只能在函数作为返回值的时候产生，其他场景不会产生闭包D.闭包不能用于实现前端模块化开发答案：B解析：闭包的定义就是函数引用外部作用域变量，作用域链保留外部作用域，因此外部变量不会被提前回收，B选项描述正确；只有不合理使用闭包，持有不需要的大对象引用才会导致不必要的内存占用，闭包占用的内存可以手动释放，也会被浏览器垃圾回收机制处理，不会永远不回收，A错误；函数作为参数传入另一个函数时，内部访问外部变量也会产生闭包，不只是函数作为返回值才会产生，C错误；早期前端IIFE模块化就是基于闭包实现的，实现了变量私有和模块化，D错误，因此本题选B。20.Node.js中，用于创建HTTP服务的核心模块是（）A.fsB.httpC.pathD.events答案：B解析：`http`是Node.js原生核心模块，用于创建HTTP服务、发送HTTP请求；`fs`是文件系统模块，`path`是路径处理模块，`events`是事件模块，因此本题选B。多项选择题（每题3分，共15分，多选、少选、错选均不得分）1.下列属于JavaScript原始基本数据类型的有（）A.UndefinedB.NullC.NumberD.Object答案：ABC解析：JavaScript的原始基本数据类型包括Undefined、Null、Boolean、Number、String、Symbol、BigInt共7种，Object是引用数据类型，不属于基本数据类型，因此选ABC。2.下列CSS单位中，属于相对单位的有（）A.pxB.emC.remD.%答案：BCD解析：px是绝对单位，代表设备独立像素；em是相对于父元素字体大小的相对单位，rem是相对于根元素html字体大小的相对单位，%是相对于父元素对应属性的相对单位，因此BCD都是相对单位。3.下列关于Flex布局属性的描述，正确的有（）A.flex-direction用于设置主轴的方向B.justify-content用于设置项目在主轴上的对齐方式C.align-items用于设置项目在交叉轴上的对齐方式D.flex-wrap用于设置主轴空间不足时项目是否换行答案：ABCD解析：四个选项的描述均符合Flex布局属性的定义，全部正确。4.下列操作中，会触发浏览器重排（回流）的有（）A.修改元素的width属性B.修改元素的文字color属性C.添加、删除DOM元素D.获取元素的offsetWidth属性答案：ACD解析：重排（回流）是浏览器重新计算元素几何位置和大小的过程，修改宽高、添加删除DOM都会改变页面布局结构，触发重排；浏览器为了性能会批量处理重排，但若主动获取offsetWidth、offsetHeight等几何属性，浏览器为了返回准确值会强制触发重排；修改color只会触发重绘，不会改变元素布局，不会触发重排，因此选ACD。5.下列属于HTML5新增input输入类型的有（）A.emailB.numberC.dateD.password答案：ABC解析：password是HTML早期版本就存在的输入类型，email、number、date都是HTML5新增的input类型，提供原生的输入校验和控件交互，因此选ABC。操作题（共45分）1.基本操作题（15分）题目：编辑`index.html`文件，完成以下要求：①在页面body内添加一个语义化头部区块，标签为header，id为header，区块内添加一级标题，文本内容为“前端学习笔记”。②为header设置CSS样式：背景色为#f5f5f5，上下内边距15px、左右内边距20px，所有文本水平居中对齐。请写出符合要求的代码。参考答案：```html<!--HTML部分--><headerid="header"><h1>前端学习笔记</h1></header><!--CSS部分（内部样式表）--><style>background-color:#f5f5f5;padding:15px20px;text-align:center;}</style>```评分标准：语义化标签使用正确得4分，id属性设置正确得2分，标题和文本正确得2分，背景色设置正确得2分，内边距设置正确得3分，文本对齐设置正确得2分，共15分，属性书写错误酌情扣分。2.简单应用题（15分）题目：已知数组`constarr=[3,15,22,7,46,9,18,33,27]`，使用JavaScript完成需求：①筛选出数组中所有大于10且为奇数的元素，组成新数组；②计算新数组中所有元素的平均值，将结果输出到控制台。请写出完整代码。参考答案：```javascriptconstarr=[3,15,22,7,46,9,18,33,27];//筛选符合条件的元素constnewArr=arr.filter(item=>item>10&&item%2!==0);//计算总和constsum=newArr.reduce((total,curr)=>total+curr,0);//计算平均值constavg=sum/newArr.length;//输出结果console.log(avg);//最终结果：(15+33+27)/3=25```评分标准：筛选逻辑正确得7分，计算逻辑正确得6分，结果正确得2分，共15分，使用传统循环实现逻辑正确也可得分。3.综合应用题（15分）题目：实现一个点击切换图片的功能，要求：页面有一张默认图片，下方有一个“下一张”按钮，每次点击按钮切换到下一张图片，切换到最后一张后点击自动回到第一张循环切换，请写出完整的HTML、CSS、JavaScript代码。参考答案：```html<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="U