2025年计算机二级web考试题库及答案

2025年计算机二级web考试题库及答案按照2025年全国计算机等级考试二级Web程序设计新版大纲要求，以下不属于Web前端开发核心三要素技术栈的是（）A.HTMLB.CSSC.PythonD.JavaScript答案：C解析：Web前端开发核心三要素为超文本标记语言HTML、层叠样式表CSS、脚本语言JavaScript，Python属于后端开发常见编程语言，不属于前端核心三要素范畴，因此选C。以下关于线性表顺序存储结构的特点描述，正确的是（）A.插入、删除操作不需要移动元素B.可随机访问任意下标位置的元素C.存储空间不要求连续D.空间复杂度一定为O(1)答案：B解析：线性表顺序存储结构依托连续的内存空间实现，支持通过下标直接定位元素，具备随机访问特性；插入删除元素时需要移动后续所有元素，时间复杂度为O(n)，存储空间要求连续，存储n个元素时空间复杂度为O(n)，因此选B。Web开发中常使用的HTTP状态码401代表的含义是（）A.请求资源不存在B.服务器内部错误C.未授权，身份验证失败D.请求方法不被允许答案：C解析：HTTP状态码401的标准语义为未授权，用户需要完成身份验证才能获取对应资源；404对应请求资源不存在，500对应服务器内部错误，405对应请求方法不被允许，因此选C。以下HTML标签中，不属于HTML5新增语义化标签的是（）A.B.C.D.答案：D解析：标签属于HTML早期版本就支持的内联框架标签，不属于HTML5新增语义化范畴；、、均为HTML5新增的用于标识页面不同功能区块的语义化标签，可有效提升页面可访问性与搜索引擎爬虫解析效率，因此选D。下列关于栈结构的叙述，正确的是（）A.栈遵循“先进先出”的操作规则B.栈只能在栈底执行插入删除操作C.栈遵循“先进后出”的操作规则D.栈不需要分配连续内存空间答案：C解析：栈属于操作受限的线性表，仅允许在栈顶位置执行插入和删除操作，遵循“先进后出”的核心规则，栈可以采用顺序存储也可以采用链式存储，不是必须分配连续内存空间，但操作规则的描述中仅C选项完全正确。CSS选择器的优先级计算中，以下四类选择器的优先级从高到低排序正确的是（）A.类选择器>ID选择器>标签选择器>行内样式B.行内样式>ID选择器>类选择器>标签选择器C.ID选择器>行内样式>类选择器>标签选择器D.行内样式>类选择器>ID选择器>标签选择器答案：B解析：CSS选择器优先级的官方排序为：行内样式（style属性直接定义）优先级权重为1000，ID选择器权重为100，类选择器/伪类选择器/属性选择器权重为10，标签选择器/伪元素选择器权重为1，权重数值越大优先级越高，因此B选项排序正确。以下JavaScript运算符中，可用于检测变量数据类型并返回对应字符串结果的是（）A.instanceofB.typeofC.===D.in答案：B解析：typeof运算符可检测变量的基础数据类型，返回”string”“number”“boolean”“undefined”“object”“function”“symbol”“bigint”共8种结果；instanceof用于检测引用类型变量是否属于某个构造函数的实例，===是全等比较运算符，in用于检测对象是否包含某个指定属性，因此选B。下列关于黑盒测试技术的描述，正确的是（）A.黑盒测试需要完全了解程序内部的代码实现逻辑B.黑盒测试也被称为结构测试C.黑盒测试将程序视为无法打开的黑盒，仅通过输入输出的对应关系验证功能正确性D.黑盒测试仅适用于单元测试环节答案：C解析：黑盒测试也被称为功能测试，测试过程不需要关注程序内部代码逻辑，仅以产品需求文档为依据，校验输入对应的输出是否符合预期；白盒测试才需要遍历内部代码逻辑，也被称为结构测试，黑盒测试可用于单元测试、集成测试、系统测试全流程，因此C选项描述正确。以下CSS3属性中，可用于实现元素2D旋转效果的是（）A.transformB.transitionC.animationD.filter答案：A解析：transform属性支持设置rotate（旋转）、scale（缩放）、translate（位移）、skew（倾斜）等2D/3D变换效果；transition用于定义属性变化的过渡动画时长，animation用于定义关键帧动画，filter用于设置元素的滤镜效果，因此选A。Web安全防护中，为了避免Cookie数据被恶意窃取，需要设置哪个属性让Cookie仅在HTTPS请求中传输（）A.HttpOnlyB.SecureC.SameSiteD.Domain答案：B解析：Cookie的Secure属性开启后，Cookie仅能通过HTTPS加密协议传输，无法在HTTP明文请求中携带，可避免明文网络环境下的Cookie窃取风险；HttpOnly属性可禁止JavaScript读取Cookie内容，防范XSS攻击窃取Cookie，SameSite属性用于限制第三方Cookie的携带，防范CSRF攻击，Domain属性用于指定Cookie的生效域名，因此选B。以下关于数据库三级模式结构的叙述，正确的是（）A.外模式也被称为物理模式B.模式是数据库用户能够看见和使用的局部数据的逻辑结构C.内模式也被称为存储模式，是数据库物理存储结构的描述D.一个数据库可以存在多个内模式答案：C解析：数据库三级模式中，内模式对应最底层的物理存储结构描述，也被称为存储模式，一个数据库仅能有一个内模式；外模式是面向普通用户的局部数据逻辑结构视图，也被称为用户模式，一个数据库可以有多个外模式；模式是全局数据逻辑结构的统一描述，也被称为概念模式，一个数据库仅能有一个模式，因此C选项描述正确。以下关于Flex弹性布局的描述，错误的是（）A.设置display:flex即可将当前元素转为弹性容器B.弹性容器内的子元素默认从垂直方向排列C.justify-content属性用于设置主轴方向上的子元素对齐方式D.align-items属性用于设置交叉轴方向上的子元素对齐方式答案：B解析：Flex布局默认主轴方向为水平向右，弹性容器内的子元素默认从左到右水平排列，通过设置flex-direction属性才能将主轴切换为垂直方向，因此B选项描述错误。以下JavaScript特性中，属于ES6标准新增的语法是（）A.var变量声明B.函数C.Promise异步对象D.parseInt方法答案：C解析：Promise异步处理对象是ES6标准正式纳入的核心语法，用于解决传统异步回调模式的回调地狱问题；var声明、普通函数定义、parseInt类型转换方法均属于ES5及更早版本就支持的原生语法，因此选C。以下HTTP请求方法中，用于向服务器提交表单数据、新增资源的标准方法是（）A.GETB.POSTC.DELETED.HEAD答案：B解析：POST方法的标准语义为向指定资源提交数据，用于新增服务器端资源；GET方法用于从服务器获取资源，DELETE方法用于删除服务器端指定资源，HEAD方法用于仅获取响应头信息、不获取响应体内容，因此选B。以下关于CSS32025大纲新增容器查询（ContainerQueries）的描述错误的是（）A.容器查询允许元素根据父容器的尺寸而非视口尺寸调整样式B.需要为父容器设置container-type属性开启容器上下文C.@container语法优先级高于同级别的@media视口查询D.容器查询完全不能和媒体查询同时使用答案：D解析：容器查询可与媒体查询叠加使用，通过组合判断父容器尺寸与视口尺寸两个维度的参数，实现更灵活的组件级响应式适配，避免传统响应式仅基于视口尺寸的局限性，因此D选项描述错误。软件生命周期中，确定软件系统必须做什么、具备哪些功能需求的阶段是（）A.需求分析阶段B.概要设计阶段C.详细设计阶段D.代码实现阶段答案：A解析：需求分析阶段的核心目标是梳理用户的真实业务诉求，明确软件的功能边界、性能指标、交互要求等核心参数，确定软件系统需要实现的全部功能，后续的概要设计、详细设计、代码实现阶段都以需求文档为核心依据，因此选A。以下Web存储方式中，数据生命周期仅为当前会话，浏览器关闭后数据自动清除的是（）A.LocalStorageB.SessionStorageC.CookieD.IndexedDB答案：B解析：SessionStorage属于会话级存储，存储的数据仅在当前浏览器标签页的会话周期内有效，标签页关闭或浏览器退出后数据会被自动清空；LocalStorage属于永久存储，除非手动调用API清除或者用户清空浏览器缓存，否则数据会永久存储；Cookie可手动设置过期时间，IndexedDB属于大容量本地数据库，数据也会持久化存储，因此选B。以下关于闭包特性的描述中，不属于闭包核心作用的是（）A.可以在函数外部访问函数内部定义的局部变量B.可以让局部变量的生命周期延长，不被垃圾回收机制回收C.可以实现私有变量的封装，避免全局变量污染D.可以大幅提升JavaScript代码的执行速度答案：D解析：闭包会持有外部函数的作用域引用，延长局部变量的生命周期，一定程度上会增加内存占用，无法提升代码执行速度，其余三项均是闭包的典型特性与使用场景，因此选D。以下HTML5新增的表单输入类型中，可用于限制用户输入内容为邮箱格式的是（）A.B.C.D.答案：B解析：type属性设置为email的输入框会触发移动端邮箱专属键盘，浏览器原生会自动校验输入内容是否符合邮箱格式规则，其余选项中tel对应手机号输入、url对应网址输入、number对应纯数字输入，因此选B。结构化程序设计原则不包含以下哪一项（）A.自顶向下B.逐步求精C.模块化D.面向对象答案：D解析：结构化程序设计的三大核心原则为自顶向下、逐步求精、模块化，通过顺序、选择、循环三种基础控制结构实现全部业务逻辑，面向对象是另一套完全独立的程序设计思想，不属于结构化程序设计的范畴，因此选D。以下关于Grid网格布局的描述，正确的是（）A.Grid布局仅能实现二维的行+列的复杂布局，无法替代传统浮动布局B.grid-template-columns属性用于定义网格容器的列数量与每列的宽度C.Grid布局的子元素不可以设置为Flex布局D.Grid布局目前仍未被主流浏览器兼容答案：B解析：grid-template-columns是Grid布局的核心属性，可通过px、百分比、fr单位等参数定义网格的列数以及每一列的宽度，Grid布局是原生二维布局方案，完全可以替代传统浮动布局实现复杂页面排版，Grid容器的子元素可以继续设置为Flex布局实现嵌套布局，2017年之后所有主流浏览器均已全面兼容Grid语法，因此B选项描述正确。以下关于原型链的描述，属于JavaScript核心特性的是（）A.所有函数都拥有prototype属性，指向对应的原型对象B.原型链无法实现属性和方法的共享C.原型链是ES6之后才新增的特性D.原型对象不存在constructor属性答案：A解析：JavaScript的每一个普通函数默认都拥有prototype属性，指向该函数对应的原型对象，原型对象上的属性和方法可以被所有该构造函数生成的实例共享，是ES5之前就已存在的核心继承机制，原型对象默认存在constructor属性指向对应的构造函数，因此A选项描述正确。以下HTTP状态码中，代表请求已被服务器成功处理的是（）A.200B.301C.403D.502答案：A解析：200是请求成功的标准状态码，代表服务器已正常完成请求逻辑、返回对应响应内容；301代表永久重定向，403代表服务器拒绝访问资源，502代表网关错误、上游服务器无合法响应，因此选A。算法的有穷性是指（）A.算法程序的运行时间是有限的，执行有限步骤后一定会终止B.算法程序处理的数据量是有限的C.算法程序的长度是有限的D.算法只能被有限的用户使用答案：A解析：算法的五大特性中，有穷性的核心定义就是算法必须在执行有限个操作步骤之后终止，且每一步的执行时间都在可接受的有限范围内，其余选项描述均不符合有穷性的官方定义。以下CSS单位中，属于相对视口高度单位的是（）A.vhB.vwC.remD.em答案：A解析：1vh等于视口高度的1%，是基于视口高度的相对单位；vw是基于视口宽度的相对单位，rem是基于根元素font-size的相对单位，em是基于当前元素父元素字号的相对单位，因此选A。

26.以下关于async/await异步语法的描述，正确的是（）A.async函数的返回值一定是一个字符串类型B.await关键字可以脱离async函数单独使用C.async/await是基于Promise实现的语法糖，可让异步代码书写逻辑接近同步逻辑D.async/await语法仅能用于网络请求场景答案：C解析：async/await是ES2017标准新增的异步处理语法，底层基于Promise封装，可将异步回调的嵌套逻辑改写为线性同步的书写顺序，大幅提升异步代码的可维护性；async函数的返回值默认是Promise对象，await关键字必须在async函数内部使用，async/await可用于定时器、文件读写、异步任务等待等全部异步场景，并非仅支持网络请求，因此选C。以下Web攻击类型中，属于跨站脚本攻击的简称是（）A.XSSB.CSRFC.SQL注入D.DDoS答案：A解析：XSS全称为CrossSiteScripting，即跨站脚本攻击，攻击者通过在页面注入恶意脚本代码窃取用户本地数据；CSRF是跨站请求伪造攻击，SQL注入是针对数据库的攻击方式，DDoS是分布式拒绝服务攻击，因此选A。以下关于软件耦合性的描述，正确的是（）A.耦合性越高，模块的独立性越强B.耦合性指模块之间的互相连接和影响程度C.内容耦合是最低程度的耦合D.耦合性和内聚性没有任何关联关系答案：B解析：耦合性用于衡量软件系统不同模块之间的依赖程度，耦合性越高代表模块之间关联越紧密，模块的独立性越差，设计优秀的软件系统应当追求高内聚、低耦合；内容耦合是耦合程度最高的类型，模块之间直接修改内部数据，完全不具备独立性，因此B选项描述正确。以下关于标签的属性描述中，用于设置移动端页面视口属性、实现禁止页面缩放的代码是（）A.B.C.D.答案：A解析：该段viewport配置代码是移动端开发的标准配置，将页面视口宽度设置为等于设备屏幕宽度，初始缩放比例、最大缩放比例均为1，禁止用户双指缩放页面，后三个选项分别对应关键词配置、页面字符集配置、页面描述配置，因此选A。以下二维数组初始化语句中，符合PHP语法规则的是（）A.$arr=array([1,2],[3,4]);B.arr=newArray(1,2,3);

C.intarr[][]={{1,2},{3,4}};D.$arr={1,2,3};

答案：A解析：PHP数组初始化需要以$符号定义变量名，通过array()构造函数或者[]字面量声明数组，B选项是JavaScript数组初始化语法，C选项是Java语言二维数组定义语法，D选项语法完全错误，因此选A。

31.下列关于队列结构的叙述，正确的是（）A.队列遵循“先进后出”的操作规则B.队列只能在队头插入元素、队尾删除元素C.队列遵循“先进先出”的操作规则D.队列的操作没有任何限制答案：C解析：队列是操作受限的线性表，仅允许在队尾插入元素，在队头删除元素，核心操作规则为“先进先出”，常用于任务排队场景，因此C选项描述正确。以下CSS3属性中，能够实现元素内容超出容器边界时自动显示滚动条的是（）A.overflow:autoB.display:noneC.visibility:hiddenD.opacity:0答案：A解析：设置overflow:auto后，元素内部内容超出容器尺寸时自动显示对应方向的滚动条，未超出时正常显示；后三个选项分别是隐藏元素不占位置、隐藏元素保留占位、元素完全透明仍可交互的属性设置，因此选A。以下关于ES2023新增的Array.fromAsync方法的描述，正确的是（）A.该方法可用于将异步可迭代对象转换为普通数组B.该方法是ES5就已存在的数组方法C.该方法执行过程永远是同步的D.该方法不支持传入回调函数处理数组元素答案：A解析：Array.fromAsync是2025版二级大纲新增考点对应的ES2023数组新方法，核心作用是将异步可迭代对象直接转换为Promise包装的普通数组，执行过程是异步的，也支持传入自定义映射回调函数对每一个元素做转换处理，因此A选项描述正确。以下关系数据库的SQL语句中，用于数据查询操作的是（）A.SELECTB.INSERTC.UPDATED.DELETE答案：A解析：SELECT语句用于从数据表中查询符合条件的记录，是最常用的查询类SQL语句；其余三个选项分别对应数据新增、数据更新、数据删除操作。以下Web无障碍规范（WCAG2.1）要求中，属于A级必须满足的基础要求是（）A.所有非装饰类图片必须配置alt属性说明图片含义B.页面文字与背景对比度必须大于7:1C.所有动画时长不得超过10sD.页面必须支持深色模式切换答案：A解析：为所有功能类图片配置alt属性，保障屏幕阅读器可以向视障用户播报图片含义，属于WCAG2.1A级的强制要求，是Web无障碍的基础实现要点，其余选项均不属于A级强制要求范畴。以下关于NginxWeb服务器的核心功能描述，错误的是（）A.可以实现静态资源直接分发，动态请求转发给后端应用服务器B.不支持配置HTTPS证书服务C.可以配置反向代理，实现负载均衡分发请求到多台后端服务器D.可以配置访问控制规则，拦截恶意IP的非法请求答案：B解析：Nginx原生支持SSL模块，可直接配置HTTPS证书实现加密服务，是目前主流Web服务器的标准能力，因此B选项描述错误。以下关于JavaScript事件冒泡机制的描述，正确的是（）A.事件冒泡指事件触发后会从最外层父元素向内层子元素依次传递B.可以通过event.stopPropagation()方法阻止事件冒泡传递C.事件冒泡机制完全没有实用价值D.事件冒泡是浏览器的严重缺陷，所有场景都必须禁止答案：B解析：事件冒泡机制指元素触发事件后，事件会从当前触发的目标元素向外层祖先元素依次传递，开发者可以通过event.stopPropagation()方法终止冒泡流程；利用事件冒泡机制可以实现事件委托优化，减少事件监听器的数量，大幅提升DOM操作性能，并非完全没有价值，也不需要在所有场景都禁止，因此B选项描述正确。以下HTTP/3协议采用的底层传输协议是（）A.UDP协议B.TCP协议C.FTP协议D.SMTP协议答案：A解析：HTTP/3是最新一代HTTP协议，底层基于QUIC协议实现，QUIC协议依托UDP协议的底层传输能力，解决了TCP协议队头阻塞的问题，可大幅提升弱网环境下的请求响应速度，是2025年二级Web大纲新增考察内容，因此选A。下列关于内聚性的描述，正确的是（）A.内聚性是衡量模块之间互相依赖程度的指标B.内聚性越高代表模块内部各个元素之间的关联程度越强，模块独立性越好C.偶然内聚是程度最高的内聚D.优秀的软件设计应当追求低内聚高耦合答案：B解析：内聚性是衡量单个模块内部元素聚合程度的指标，高内聚意味着一个模块仅负责单一的业务功能，所有内部逻辑都围绕该功能展开，模块可维护性、独立性更好；偶然内聚是内聚程度最低的类型，模块内部逻辑完全没有关联，优秀的设计应当追求高内聚低耦合，因此B选项描述正确。以下关于CSS定位属性的描述，position:fixed对应的定位类型是（）A.相对定位，相对于元素自身原本的位置偏移B.绝对定位，相对于最近的非static定位的祖先元素偏移C.固定定位，相对于浏览器视口偏移，页面滚动时元素位置保持不变D.静态定位，元素按照正常文档流排列答案：C解析：fixed即固定定位，元素的定位基准是浏览器视口，即使页面滚动元素也会固定在视口的指定位置，常用于顶部悬浮导航、侧边悬浮工具栏等场景，其余选项分别对应position:relative、position:absolute、position:static的特性。基本操作题（18分）需求说明：某电商平台需要实现移动端适配的商品展示卡片，要求使用HTML5语义化标签结合CSS3完成开发，具体要求：1.整体卡片圆角8px，阴影为02px12pxrgba(0,0,0,0.1)，宽度自适应父容器，最大宽度320px；2.卡片顶部展示商品图片，宽度100%，高度200px，object-fit为cover避免图片拉伸；3.图片下方展示商品名称，字号16px，字重500，行高1.5，上下内边距12px，超出2行显示省略号；4.下方展示商品价格，字号20px，字重700，颜色#ff4400，价格后标注“包邮”小字，字号12px，颜色#666，左外边距8px；5.卡片底部设置立即购买按钮，宽度100%，高度44px，背景色#ff4400，文字白色居中，圆角4px，点击后有0.2s的背景色变深过渡效果。参考答案代码：

<articleclass="goods-card">

<imgclass="goods-img"src="./demo.jpg"alt="商品展示图">

<divclass="goods-name">2025新款大容量无线蓝牙耳机超长续航降噪无损音质</div>

<divclass="goods-price">

<span>¥99</span>

<spanclass="tag">包邮</span>

</div>

<buttonclass="buy-btn">立即购买</button>

</article>

<style>

.goods-card{

max-width:320px;

width:100%;

border-radius:8px;

box-shadow:02px12pxrgba(0,0,0,0.1);

overflow:hidden;

}

.goods-img{

width:100%;

height:200px;

object-fit:cover;

}

.goods-name{

font-size:16px;

font-weight:500;

line-height:1.5;

padding:12px12px0;

overflow:hidden;

text-overflow:ellipsis;

display:-webkit-box;

-webkit-line-clamp:2;

-webkit-orientation:vertical;

}

.goods-price{

padding:8px12px12px;

font-size:20px;

font-weight:700;

color:#ff4400;

}

.tag{

font-size:12px;

color:#666;

margin-left:8px;

font-weight:400;

}

.buy-btn{

width:100%;

height:44px;

background-color:#ff4400;

color:#fff;

text-align:center;

line-height:44px;

border:none;

border-radius:4px;

margin-bottom:16px;

cursor:pointer;

transition:background-color0.2slinear;

}

.buy-btn:hover{

background-color:#e63900;

}

</style>得分点说明：使用语义化标签得2分，卡片样式配置完全符合要求得3分，商品图片object-fit生效得3分，商品名称2行溢出省略号效果正确得4分，价格样式配置正确得3分，按钮过渡动画效果符合要求得3分。简单应用题（24分）需求说明：使用原生JavaScript实现极简待办事项管理功能，无需引入第三方库，具体要求：1.页面顶部有输入框和“添加待办”按钮，输入非空内容点击按钮后待办事项添加到下方列表；2.每个待办事项默认未完成，文字左侧配复选框，勾选后文字自动添加删除线标记完成；3.每个待办项右侧配“删除”按钮，点击后对应项从列表移除；4.页面加载自动读取LocalStorage中存储的历史待办数据渲染，每次增删改操作后自动同步LocalStorage，刷新页面数据不丢失；5.输入为空时点击添加按钮弹出“请输入待办内容”提示，不执行新增操作。参考答案核心代码：

<divclass="wrap">

<inputtype="text"id="todoInput"placeholder="请输入待办内容">

<buttonid="addBtn">添加待办</button>

<ulid="todoList"></ul>

</div>

<script>

consttodoInput=document.getElementById('todoInput')

constaddBtn=document.getElementById('addBtn')

consttodoList=document.getElementById('todoList')

//初始化读取本地数据

lettodoData=JSON.parse(localStorage.getItem('todoList'))||[]

//渲染函数

functionrender(){

todoList.innerHTML=''

todoData.forEach((item,index)=>{

constli=document.createElement('li')

li.innerHTML=`

<inputtype="checkbox"${item.done?'checked':''}data-index="${index}">

<spanstyle="text-decoration:${item.done?'line-through':'none'}">${item.content}</span>

<buttondata-del-index="${index}">删除</button>

`

todoList.appendChild(li)

})

localStorage.setItem('todoList',JSON.stringify(todoData))

}

//新增操作

addBtn.addEventListener('click',()=>{

constcontent=todoInput.value.trim()

if(!content){

alert('请输入待办内容')

return

}

todoData.push({

content:content,

done:false

})

todoInput.value=''

render()

})

//事件委托处理勾选和删除

todoList.addEventListener('click',(e)=>{

if(e.target.dataset.index!==undefined){

constidx=Number(e.target.dataset.index)

todoData[idx].done=!todoData[idx].done

render()

}

if(e.target.dataset.delIndex!==undefined){

constidx=Number(e.target.dataset.delIndex)

todoData.splice(idx,1)

render()

}

})

//页面初始化渲染

render()

</script>得分点说明：LocalStorage数据读写持久化逻辑正确得8分，非空校验逻辑生效得3分，事件委托机制实现性能优化得4分，勾选后添加删除线的状态切换逻辑正确得5分，新增、删除操作功能正常得4分。综合应用题（18分）需求说明：开发简易学生成绩查询系统，采用前端页面+PHP后端架构，使用二维数组模拟学生成绩存储，具体要求：1.前端提供学号输入框和查询按钮，用户输入学号后点击按钮向后端发送异步GET请求；2.后端PHP接收学号参数，遍历预设成绩数组，匹配到后返回JSON格式的学生学号、姓名、三科成绩，未匹配到返回错误提示；3.前端接收响应后渲染结果，查询成功展示总分、平均分（保留两位小数），查询失败展示错误提示；4.交互全程页面不刷新，请求过程中显示“加载中，请稍后”提示，请求完成后隐藏提示。前端参考代码：

<div>

<inputtype="text"id="stuId"placeholder="请输入学号">

<buttonid="searchBtn">查询成绩</button>

<divid="loading"style="display:none;">加载中，请稍后</div>

<divid="result"></div>

</div>

<script>

constsearchBtn=document.getElementById('searchBtn')

constloading=document.getElementById('loading')

constresult=document.getElementById('result')

searchBtn.addEventListener('click',async()=>{

conststuId=document.getElementById('stuId').value.trim()

if(!stuId)returnalert('请输入学号')

loading.styl