2026年计算机二级Web程序设计真题答案

2026年计算机二级Web程序设计真题答案选择题（每题1分，共20分）下列关于浏览器缓存的说法中，正确的是（）A.缓存一定会降低网站加载速度B.Cache-Control:no-cache表示完全不缓存内容C.Expires字段是基于相对时间的缓存控制D.ETag可以用于验证缓存资源是否更新答案：D解析：缓存的核心作用是减少重复资源请求，降低服务器压力，提升网站二次加载速度，因此A选项表述错误；Cache-Control的no-cache属性并不代表完全不缓存，而是要求浏览器每次发起请求时都必须向服务器验证缓存资源是否过期，只有资源确认未更新时才会使用本地缓存，因此B选项错误；Expires是HTTP/1.0时期的缓存控制字段，其值为一个固定的绝对时间点，Cache-Control的max-age属性才是基于相对时间的缓存控制，单位为秒，因此C选项错误；ETag是服务器为资源生成的唯一标识，浏览器下次请求该资源时会携带本地缓存的ETag，服务器通过对比ETag判断资源是否更新，若未更新则返回304状态码让浏览器使用本地缓存，因此D选项表述正确。HTML5中新增的用于通过脚本动态绘制图形的元素是（）A.B.C.D.答案：A解析：是HTML5新增的画布元素，用于提供一块可绘图区域，支持通过JavaScript脚本动态绘制图形、动画、图表等内容；本身就是一种基于XML的矢量图形标记语言，并非HTML5新增的脚本绘图元素；和都不是HTML标准规定的元素，因此本题选择A选项。CSS3中，能够实现元素顺时针旋转45度的属性写法正确的是（）A.transform:rotate(45deg);B.transform:scale(45);C.transform:skew(45deg);D.transform:translate(45px);答案：A解析：CSS3的transform属性包含多种变形函数，其中rotate()函数用于实现元素旋转，参数为旋转角度，单位为deg，默认顺时针旋转；scale()用于实现元素缩放，参数为缩放比例；skew()用于实现元素倾斜变形；translate()用于实现元素位移，因此本题A选项正确。JavaScript中，下列变量命名不合法的是（）A._userNameB.123abcC.$priceD.user_id

答案：B解析：JavaScript变量命名规则明确要求：变量名只能由字母、数字、下划线(_)、美元符号($)组成，且必须以字母、下划线或美元符号开头，不能以数字开头，也不能使用JavaScript关键字保留字作为变量名，因此以数字开头的123abc命名不合法，本题选择B选项。

5.下列关于HTTP状态码的说法，错误的是（）A.200表示请求成功B.301表示永久重定向C.404表示服务器无法找到请求资源D.503表示客户端请求语法错误答案：D解析：HTTP状态码按类型分为五类：1xx信息提示、2xx成功、3xx重定向、4xx客户端错误、5xx服务器错误，其中200是标准的请求成功状态码，301表示资源永久迁移到新地址，404表示服务器无法找到请求的资源，这三个选项表述正确；503状态码表示服务器当前无法处理请求，一般是服务器过载或维护导致，400状态码才表示客户端请求语法错误，因此D选项表述错误，符合题意。HTML中，下列哪个属性用于给元素指定全局唯一标识（）A.classB.nameC.idD.data-id答案：C解析：id属性是HTML规定的用于给元素指定唯一标识的属性，同一页面中不能有两个相同id的元素；class属性用于给元素分类，多个元素可以共用同一个class；name属性多用于表单元素，用于提交表单时标识数据；data-id是自定义数据属性，用于存储自定义数据，不是标准的唯一标识属性，因此本题选择C选项。CSS中，下列选择器优先级最高的是（）A.内联样式B.ID选择器C.类选择器D.标签选择器答案：A解析：CSS选择器优先级遵循固定规则：内联样式（优先级权重1000）>ID选择器（优先级权重100）>类选择器/伪类选择器/属性选择器（优先级权重10）>标签选择器/伪元素选择器（优先级权重1），因此内联样式优先级最高，本题选择A选项。JavaScript中，Array对象的哪个方法可以删除数组最后一个元素，并返回被删除的元素（）A.shift()B.unshift()C.pop()D.push()答案：C解析：pop()方法用于删除数组末尾的最后一个元素，修改原数组，同时返回被删除的元素；push()方法用于向数组末尾添加一个或多个元素，返回修改后数组的长度；shift()方法用于删除数组开头的第一个元素，返回被删除元素；unshift()方法用于向数组开头添加元素，返回修改后数组的长度，因此本题选择C选项。HTML5中，哪个输入类型专门用于邮件地址输入，自带浏览器端格式验证（）A.B.C.D.答案：B解析：HTML5新增了多种输入类型，其中type=“email”专门用于输入邮件地址，浏览器会自动验证输入内容是否符合邮件地址格式，提交表单时不通过会给出提示；type=“url”用于输入URL地址，type=“tel”用于输入电话号码，type=“text”是默认的普通文本输入，因此本题选择B选项。下列关于flex弹性布局的说法，错误的是（）A.flex容器默认的主轴方向是水平方向B.justify-content属性用于定义主轴上项目的对齐方式C.align-items属性用于定义交叉轴上项目的对齐方式D.flex-direction:column;表示主轴方向为水平从左到右答案：D解析：flex布局中，flex-direction属性用于指定主轴方向，默认值为row，表示主轴方向水平从左到右；column表示主轴方向垂直从上到下，因此D选项表述错误；其余选项表述均符合flex布局的规则，因此本题选择D选项。JavaScript中，表达式typeofnull的输出结果是（）A.nullB.objectC.undefinedD.number答案：B解析：这是JavaScript最初设计遗留的缺陷，最初的JavaScript将值分为对象和基本类型，用低位标记类型，null代表空指针，对象地址也是以0开头，因此typeofnull被错误判定为object，实际上null本身是单独的基本数据类型，因此本题输出结果为object，选择B选项。CSS中，当元素宽度高度不确定时，可实现垂直水平居中的正确方案是（）A.position:absolute;top:50%;left:50%;margin:-宽一半-高一半;B.position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);C.margin:0auto;D.text-align:center;

答案：B解析：A选项需要知道元素固定的宽度和高度才能计算负外边距，不适用宽高不确定的场景；B选项中top和left将元素左上角定位到父容器中心，transform的translate偏移的百分比是相对于元素自身的宽高，因此不管元素宽高是多少，都可以正好居中，符合要求；margin:0auto只能实现块级元素的水平居中，且需要元素设置固定宽度，不能实现垂直居中；text-align:center只能实现行内内容的水平居中，因此本题选择B选项。下列哪个是CSS3新增的弹性布局模型（）A.标准流B.浮动C.flexD.定位答案：C解析：标准流、浮动、定位都是CSS早期就存在的布局方式，flex弹性布局是CSS3新增的布局模型，解决了传统布局实现居中、等分等需求的繁琐问题，因此本题选择C选项。JavaScript中，Promise对象的三种标准状态不包括（）A.pendingB.fulfilledC.rejectedD.resolved答案：D解析：Promise对象有三种固定状态：pending（进行中，初始状态）、fulfilled（已成功，操作完成成功）、rejected（已失败，操作失败）；resolved一般用来指代Promise已经从pending状态变为settled（稳定）状态，不是Promise的标准状态名称，因此本题选择D选项。HTML中，哪个标签用于定义HTML文档的主体内容部分（）A.B.C.D.答案：B解析：是HTML文档的根标签，包含头部和主体两个部分，用于存放页面的元数据、标题、样式等内容，用于存放页面可见的主体内容，用于定义页面标题，因此本题选择B选项。下列关于JavaScript闭包的说法，正确的是（）A.闭包一定会导致内存泄漏，完全没有用处B.闭包是指有权访问另一个函数作用域中变量的函数C.闭包只能访问全局变量不能访问局部变量D.JavaScript中不存在闭包特性答案：B解析：闭包是JavaScript的核心特性之一，标准定义为：闭包是指有权访问另一个函数作用域中变量的函数，合理使用闭包可以实现模块化、变量缓存等功能，只有不合理使用才会导致不必要的内存占用，因此B选项表述正确，其余选项表述错误。CSS中，属性display:none;和visibility:hidden;的区别，说法正确的是（）A.两者没有任何区别B.display:none;占据原有空间，visibility:hidden;不占据空间C.visibility:hidden;占据原有空间，只是不可见，display:none;不占据原有空间D.两者都不占据原有文档流空间答案：C解析：display:none会让元素完全脱离文档流，不占据任何空间，页面布局会重新排布；visibility:hidden只是修改元素的可见性，让元素不可见，元素仍然保留在文档流中，占据原来的空间，页面布局不会发生变化，因此C选项表述正确。HTTP协议中，GET和POST方法的区别，说法错误的是（）A.GET参数会拼接显示在URL中，POST参数不会放在URL中B.GET对参数长度有大小限制，POST理论上没有大小限制C.GET比POST更安全，适合传输敏感数据D.GET一般用于获取服务器资源，POST一般用于向服务器提交数据答案：C解析：GET方法会将参数拼接在URL中，会被浏览器记录、保存在历史日志中，敏感数据会直接暴露，因此GET比POST更不安全，不适合传输敏感数据，因此C选项表述错误，其余选项表述均正确。HTML中，下列哪个属性可以实现脚本的异步加载（）A.asyncB.deferC.async和defer都是D.async和defer都不是答案：C解析：async和defer都是HTML5新增的用于异步加载脚本的属性，二者的区别是：async加载完成后立即执行脚本，会阻断DOM解析；defer加载完成后会等到DOM解析完成再按顺序执行脚本，二者都属于异步加载，因此本题选择C选项。HTML5中，新增的用于持久化存储离线数据的本地存储API是（）A.cookieB.sessionStorageC.localStorageD.以上都不对答案：C解析：cookie是早期客户端存储方案，存储容量只有4KB左右，每次请求都会携带cookie，增加请求体积；sessionStorage是会话存储，仅在当前会话下有效，关闭浏览器后数据就会被清除；localStorage是HTML5新增的本地存储API，存储容量可达5MB左右，数据持久化保存在客户端，除非手动清除否则不会消失，适合存储离线数据，因此本题选择C选项。二、基本操作题（共18分）真题题目：考生文件夹下存有文件名为Web1.html的文件，试修改该文件，完成以下要求：1.在页面的注释<!--此处添加标题区域标题-->位置，添加一级标题，标题文本为“春日踏青攻略”，设置标题的类名为title，文字颜色为#2c5e2e；2.在注释<!--此处插入图片-->位置，插入考生文件夹下的图片spring.jpg，设置图片的替代文本为“春日踏青”，宽度为100%，高度自适应；3.设置页面的背景颜色为#f0f9eb，所有段落文本的字体大小为16px，行高为1.8；4.将页面底部的超链接文字“查看更多攻略”的链接地址设置为，目标设置为在新窗口打开。

参考答案：本题得分点共四个部分，每个部分4.5分，修改后核心代码如下：标题位置修改后代码：

<!--此处添加标题区域标题-->

<h1class="title">春日踏青攻略</h1>在head区域的style标签中补充样式：

.title{

color:#2c5e2e;

}评分标准：标题标签正确、文本内容正确、类名正确、颜色设置正确，全部符合得满分，任意错误扣对应分数。图片位置修改后代码：

<!--此处插入图片-->

<imgsrc="spring.jpg"alt="春日踏青"style="width:100\%;height:auto;">评分标准：src路径正确、alt属性文本正确、宽度高度设置正确，全部符合得满分。全局样式补充，在head的style标签中添加：

body{

background-color:#f0f9eb;

}

p{

font-size:16px;

line-height:1.8;

}评分标准：页面背景颜色正确、段落字体大小和行高设置正确，得满分。超链接修改后代码：

<ahref=""target="_blank">查看更多攻略</a>评分标准：href地址正确、target属性值为_blank，实现新窗口打开，得满分。三、简单应用题（共24分）真题题目：考生文件夹下存有文件Web2.html和js文件fun.js，要求补全js代码，实现计算1-100之间所有偶数和的功能，具体要求：1.补全fun.js中缺失的代码，定义变量sum，初始值为0；2.通过循环遍历1-100的所有整数，判断是否为偶数，如果是偶数则累加到sum中；3.计算完成后将结果输出到页面中id为result的元素中。

参考答案：完整可运行的fun.js代码如下：

//初始化求和变量，本题满分24分，变量初始化正确得6分

letsum=0;

//循环遍历逻辑正确得8分，判断偶数逻辑正确得5分，以下两种实现都为正确

//实现方式一：遍历所有数字判断

for(leti=1;i<=100;i++){

if(i\%2===0){

sum+=i;

}

}

//实现方式二：直接遍历偶数，逻辑也正确

//for(leti=2;i<=100;i+=2){

//sum+=i;

//}

//输出结果正确得5分，最终计算结果为2550，结果错误不得分

document.getElementById('result').innerText='1\-100之间所有偶数的和为：'+sum;评分说明：只要逻辑正确，使用var声明变量也得分，最终sum值为2550，结果正确即可得分。四、综合应用题（共38分）真题题目：考生文件夹下存有头像素材head.jpg，要求制作一个完整的个人简历页面，完成以下要求：1.页面整体结构分为头部、基本信息、教育经历、技能特长、联系方式五个模块，整体宽度设置为1200px，水平居中，页面主体背景为白色，页面整体背景为#f5f7fa；2.头部模块高度120px，背景颜色为#2d5bcc，文字颜色为白色，标题文字为“个人简历”，字体大小32px，水平居中，行高120px；3.基本信息模块设置为flex布局，分为左右两部分，左侧放置头像，使用素材head.jpg，宽度150px，高度150px，border-radius设置为50%实现圆形头像，右侧放置姓名、性别、年龄信息，每行字体大小18px，行高2倍；4.每个模块标题使用二级标题，文字颜色为#2d5bcc，下边框为1pxsolid#eee，padding-bottom为10px，margin-bottom为20px；5.技能特长模块使用无序列表展示，去掉列表默认的圆点标记，每个列表项背景颜色为#e8f0fe，margin为10px0，padding为10px，圆角为5px；6.添加交互效果：鼠标悬停在技能列表项上，背景颜色变为#2d5bcc，文字颜色变为白色；7.联系方式中，点击邮箱地址可以打开默认邮件客户端发送邮件。

参考答案：完整符合要求的页面代码如下，评分标准对应每个要求给出：

<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<title>个人简历</title>

<style>

*{

margin:0;

padding:0;

box-sizing:border-box;

}

/*要求1：整体样式，满分6分*/

body{

background-color:#f5f7fa;

font-family:"微软雅黑",sans-serif;

}

.container{

width:1200px;

margin:0auto;

background-color:#ffffff;

padding:020px30px;

}

/*要求2：头部模块，满分6分*/

header{

height:120px;

background-color:#2d5bcc;

color:#ffffff;

margin-bottom:30px;

}

headerh1{

font-size:32px;

line-height:120px;

text-align:center;

}

/*要求4：模块标题公共样式，满分4分*/

sectionh2{

color:#2d5bcc;

border-bottom:1pxsolid#eee;

padding-bottom:10px;

margin-bottom:20px;

}

/*要求3：基本信息模块，满分8分*/

.basic-info{

display:flex;

align-items:center;

gap:40px;

margin-bottom:30px;

padding-left:50px;

}

.avatarimg{

width:150px;

height:150px;

border-radius:50\%;

object-fit:cover;

}

.info-textp{

font-size:18px;

line-height:2;

}

/*教育经历基础样式*/

.education{

margin-bottom:30px;

}

.education-itemp{

line-height:1.8;

font-size:16px;

}

/*要求5：技能列表样式，满分6分*/

.skills{

margin-bottom:30px;

}

.skillsul{

list-style:none;

}

.skillsli{

background-color:#e8f0fe;

margin:10px0;

padding:10px;

border-radius:5px;

transition:all0.3s;

}

/*要求6：悬停交互效果，满分4分*/

.skillsli:hover{

background-color:#2d5bcc;

color:#ffffff;

}

/*联系方式基础样式*/

.contactp{

font-size:16px;

line-height:1.8;

}

</style>

</head>

<body>

<divclass="container">

<header>

<h1>个人简历</h1>

</header>

<sectionclass="basic-info">

<divclass="avatar">

<im