2025年web中级证书考试题库及答案

2025年web中级证书考试题库及答案一、单项选择题（每题2分，共30分）1.以下关于HTML5语义化标签的描述，错误的是（）。A.`<article>`标签表示文档、页面或应用中的独立结构B.`<section>`标签用于划分文档的不同区域或主题块C.`<nav>`标签仅用于页面顶部的主导航菜单D.`<aside>`标签通常用于侧边栏或补充内容答案：C（`<nav>`标签可用于任何需要导航链接的区域，不仅限于顶部主导航）2.关于CSS3的Flexbox布局，以下说法正确的是（）。A.`justify-content:space-between`会使项目两端对齐，中间间隔相等B.`align-items`属性控制主轴上的对齐方式C.`flex-wrap:nowrap`是默认值，项目会强制在一行显示D.`flex:1`等价于`flex-grow:1,flex-shrink:0,flex-basis:auto`答案：C（`flex-wrap`默认值为`nowrap`；A选项中`space-between`两端对齐，中间间隔相等，但首尾项目贴边；B选项`align-items`控制交叉轴对齐；D选项`flex:1`等价于`flex-grow:1,flex-shrink:1,flex-basis:0%`）3.以下JavaScript代码的输出结果是（）。```javascriptconstobj={a:1};functionfn(x){x.a=2;x={a:3};}fn(obj);console.log(obj.a);```A.1B.2C.3D.报错答案：B（函数参数传递为引用传递，修改`x.a`会影响原对象；但`x={a:3}`是重新赋值参数，不影响原对象）4.关于Vue3的组合式API，以下说法错误的是（）。A.`setup()`函数在组件实例创建前调用B.`reactive()`用于为对象创建响应式数据C.`ref()`通常用于基本类型数据的响应式处理D.组合式API通过`defineProps`声明组件props答案：A（`setup()`在组件实例创建后、`beforeCreate`钩子之后调用）5.以下HTTP状态码中，属于客户端错误的是（）。A.404NotFoundB.500InternalServerErrorC.301MovedPermanentlyD.204NoContent答案：A（4xx为客户端错误；5xx为服务端错误；3xx为重定向；2xx为成功）6.关于Web性能优化，以下措施中主要用于减少首屏加载时间的是（）。A.使用`async`或`defer`加载非关键JavaScriptB.对图片进行懒加载（LazyLoad）C.启用Gzip/Brotli压缩D.配置HTTP/2的多路复用答案：A（`async`/`defer`可让关键HTML优先渲染；B用于后续内容加载；C减少传输体积；D提升并发效率）7.以下CSS选择器中，优先级最高的是（）。A.`.containerp`B.`maindiv`C.`div:nth-child(2)`D.`p[data-type="info"]`答案：B（ID选择器优先级高于类、属性和伪类选择器；B包含ID选择器，优先级最高）8.关于JavaScript的`Promise`，以下代码的输出顺序是（）。```javascriptconsole.log('1');setTimeout(()=>console.log('2'),0);Promise.resolve().then(()=>console.log('3'));console.log('4');```A.1432B.1342C.1423D.4132答案：A（同步代码先执行：1、4；微任务（Promise）在同步后执行：3；宏任务（setTimeout）最后执行：2）9.以下React组件中，属于纯函数组件的是（）。A.`classCompextendsReact.Component{render(){...}}`B.`constComp=()=><div>...</div>`C.`constComp=React.forwardRef((props,ref)=>...)`D.`constComp=React.memo(()=>...)`答案：B（纯函数组件指无状态、无副作用的函数组件；D是记忆化组件，本质仍为函数组件，但严格来说纯函数需满足输入相同输出相同，`React.memo`是优化手段）10.关于Web安全，以下攻击类型中，利用用户会话凭证的是（）。A.XSS（跨站脚本攻击）B.CSRF（跨站请求伪造）C.SQL注入D.DDoS（分布式拒绝服务）答案：B（CSRF利用用户已登录的会话，伪造请求；XSS通过注入脚本窃取凭证；SQL注入针对数据库；DDoS攻击服务可用性）11.以下关于CSS变量（CSSCustomProperties）的描述，错误的是（）。A.变量名需以`--`开头（如`--main-color`）B.变量作用域由CSS选择器决定（如`:root`定义全局变量）C.可通过JavaScript的`getPropertyValue`方法读取D.变量值只能是颜色、长度等具体值，不能是CSS声明（如`display:flex`）答案：D（CSS变量值可以是任意有效的CSS值，包括声明片段，例如`--flex:display:flex;`，但使用时需通过`var(--flex)`插入）12.以下JavaScript代码中，`x`的最终值是（）。```javascriptletx=0;[1,2,3].forEach((num)=>{x+=num;if(num===2)break;});```A.1B.3C.6D.报错答案：D（`forEach`不支持`break`语句，会抛出语法错误）13.关于Vue3的`computed`和`watch`，以下说法正确的是（）。A.`computed`用于监听特定数据变化并执行副作用B.`watch`适合处理需要缓存的复杂计算逻辑C.`computed`的返回值会被缓存，依赖不变时直接取缓存D.`watch`只能监听单个响应式数据答案：C（`computed`用于缓存计算结果；`watch`用于执行副作用，可监听多个数据）14.以下HTTP请求头中，用于指定客户端可接受的内容类型的是（）。A.`User-Agent`B.`Accept-Encoding`C.`Accept-Language`D.`Accept`答案：D（`Accept`指定MIME类型；`Accept-Encoding`指定压缩格式；`Accept-Language`指定语言；`User-Agent`标识客户端）15.关于Webpack的配置，以下说法错误的是（）。A.`mode`选项设置为`production`时会自动启用代码压缩B.`module.rules`用于配置不同文件类型的加载器（loader）C.`resolve.alias`可用于设置路径别名，简化导入语句D.`devServer`配置仅在开发环境生效，构建生产包时会被忽略答案：D（`devServer`用于开发服务器，生产构建时不涉及，但配置本身不会被忽略，只是不执行）二、多项选择题（每题3分，共15分，少选得1分，错选不得分）1.以下属于HTML5新增特性的有（）。A.`<video>`和`<audio>`标签B.语义化标签如`<header>`、`<footer>`C.`localStorage`和`sessionStorage`D.`contenteditable`属性答案：ABC（`contenteditable`在HTML4中已存在）2.以下JavaScript代码中，会导致内存泄漏的有（）。A.全局作用域中声明未使用的变量`varunusedVar=123;`B.未移除的事件监听器（如`element.addEventListener('click',handler)`后未调用`removeEventListener`）C.`setInterval`定时器未清除（如`consttimer=setInterval(fn,1000)`后未调用`clearInterval(timer)`）D.使用`闭包`引用了已销毁的DOM元素答案：BCD（A中未使用的全局变量可能被垃圾回收；B、C、D均可能导致无法回收的引用）3.关于CSS的盒模型，以下说法正确的有（）。A.标准盒模型的`width`仅包含内容区（content）B.`box-sizing:border-box`会使`width`包含内容区、内边距（padding）和边框（border）C.内边距（padding）和边框（border）的背景色由父元素继承D.外边距（margin）在垂直方向会发生折叠（collapse）答案：ABD（C中padding和border的背景色与元素本身背景色一致）4.以下Vue3组件通信方式中，适用于非父子组件的有（）。A.`props`和`$emit`B.`provide`和`inject`C.全局事件总线（如使用`mitt`库）D.`vuex`或`pinia`状态管理答案：BCD（A仅适用于父子组件）5.关于Web性能指标（CoreWebVitals），以下属于2023年核心指标的有（）。A.LCP（最大内容渲染时间）B.FID（首次输入延迟）C.CLS（累积布局偏移）D.FCP（首次内容渲染时间）答案：ABC（2023年CoreWebVitals包括LCP、FID、CLS；FCP为辅助指标）三、简答题（每题8分，共40分）1.简述CSS中`position`属性的常见值及其作用。答案：`static`（默认值）：元素按文档流正常排列，不脱离文档流；`relative`：相对定位，相对于自身原始位置偏移，保留文档流空间；`absolute`：绝对定位，相对于最近的非`static`定位祖先元素定位，脱离文档流；`fixed`：固定定位，相对于视口（viewport）定位，脱离文档流，滚动时位置不变；`sticky`：粘性定位，结合`relative`和`fixed`，在滚动到指定阈值前相对定位，超过后固定定位（需配合`top`/`bottom`等属性）。2.说明JavaScript中`call`、`apply`和`bind`的区别，并举例说明。答案：三者均用于改变函数的`this`指向：`call(context,arg1,arg2...)`：立即执行函数，参数以逗号分隔传递；`apply(context,[args])`：立即执行函数，参数以数组形式传递；`bind(context,arg1,arg2...)`：返回一个新函数，原函数的`this`被绑定为`context`，参数可部分预传，需手动调用执行。示例：```javascriptconstobj={name:'Alice'};functiongreet(age){console.log(`Hello,${},age${age}`);}greet.call(obj,25);//输出：Hello,Alice,age25greet.apply(obj,[25]);//输出同上constboundGreet=greet.bind(obj,25);boundGreet();//输出同上```3.简述Vue3中`v-model`的实现原理，以及如何在自定义组件中实现双向绑定。答案：Vue3中`v-model`是语法糖，默认对应子组件的`modelValue`prop和`update:modelValue`事件。父组件通过`v-model="value"`将`value`传递给子组件的`modelValue`，子组件通过触发`update:modelValue`事件通知父组件更新`value`。自定义组件实现双向绑定步骤：1.子组件通过`defineProps`声明`modelValue`（或自定义prop名，如`foo`）；2.子组件通过`defineEmits`声明`update:modelValue`（或`update:foo`）事件；3.当子组件内部值变化时，调用`emit('update:modelValue',newValue)`通知父组件。示例（子组件）：```vue<scriptsetup>constprops=defineProps(['modelValue']);constemit=defineEmits(['update:modelValue']);</script><template><input:value="modelValue"@input="emit('update:modelValue',$event.target.value)"/></template>```4.说明HTTP/1.1与HTTP/2的主要区别，并列举HTTP/2的三个特性。答案：主要区别：HTTP/1.1是文本协议，基于请求-响应模型，同一连接同一时间只能处理一个请求（队头阻塞）；HTTP/2是二进制协议，支持多路复用、头部压缩、服务器推送等，提升了性能。HTTP/2的特性：多路复用（Multiplexing）：通过帧（Frame）在一个TCP连接上并发处理多个请求，解决队头阻塞；头部压缩（HPACK）：压缩请求/响应头部，减少传输体积；服务器推送（ServerPush）：服务器主动向客户端推送关联资源（如HTML所需的CSS/JS）；流优先级（StreamPriorities）：为不同请求分配优先级，优化资源加载顺序。5.简述前端性能优化中“懒加载”的实现原理及常见应用场景。答案：懒加载（LazyLoad）的核心是延迟加载非首屏资源，仅当资源进入视口（或接近视口）时再加载，减少首屏加载时间和带宽消耗。实现原理：图片/视频等资源的`src`属性替换为`data-src`（或其他自定义属性），初始不加载；监听页面滚动事件（或使用IntersectionObserverAPI），检测元素是否进入视口；当元素进入视口时，将`data-src`的值赋给`src`，触发资源加载。常见场景：长列表页面（如社交动态、商品列表）的图片加载；页面底部的广告或推荐内容；无限滚动（InfiniteScroll）页面的内容加载。四、编程题（共15分）请使用Vue3组合式API实现一个待办事项（TodoList）组件，要求：（1）支持添加待办项（输入框+按钮，输入内容非空时可添加）；（2）支持勾选完成状态（勾选后文字显示为灰色并添加删除线）；（3）支持删除单个待办项；（4）显示当前待办项总数（如“剩余3项未完成”）。答案：```vue<template><divclass="todo-list"><divclass="add-todo"><inputv-model="newTodo"@keyup.enter="addTodo"placeholder="输入待办事项"/><button@click="addTodo":disabled="!newTodo.trim()">添加</button></div><ulv-if="todos.length"><liv-for="(todo,index)intodos":key="index"><inputtype="checkbox"v-model="todo.done"/><span:class="{done:todo.done}">{{todo.text}}</span><button@click="deleteTodo(index)">删除</button></li></ul><pv-else>暂无待办事项</p><divclass="stats">剩余{{remaining}}项未完成</div></div></template><scriptsetup>import{ref,computed}from'vue';constnewTodo=ref('');consttodos=ref([//示例初始数据//{text:'学习Vue3',do