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

web中级证书考试题库及答案一、单项选择题（每题2分，共30分）1.以下哪项是HTML5新增的语义化标签？A.`<div>`B.`<section>`C.`<span>`D.`<p>`答案：B2.CSS中，以下选择器优先级最高的是？A.内联样式B.ID选择器C.类选择器D.标签选择器答案：A3.JavaScript中，`typeofnull`的返回值是？A."null"B."object"C."undefined"D."boolean"答案：B4.关于Vue.js的生命周期钩子，在实例被创建之后、数据观测和事件配置之前调用的是？A.`beforeCreate`B.`created`C.`beforeMount`D.`mounted`答案：A5.以下哪个HTTP状态码表示“请求成功但无内容返回”？A.200B.204C.301D.404答案：B6.响应式设计中，媒体查询（MediaQuery）的正确语法是？A.`@mediascreenand(max-width:768px)`B.`@media(screen)and[max-width:768px]`C.`@mediascreen(max-width=768px)`D.`@media{screen,max-width:768px}`答案：A7.JavaScript中，`[1,2,3].map(x=>x2)`的执行结果是？A.[2,4,6]B.[1,2,3]C.undefinedD.报错答案：A8.以下哪项不是CSS3的新特性？A.圆角（border-radius）B.弹性盒布局（Flexbox）C.内联元素（inline）D.渐变（gradient）答案：C9.在HTTP请求中，用于提交表单数据并可能修改服务器资源的方法是？A.GETB.POSTC.PUTD.DELETE答案：B10.关于Web存储，`sessionStorage`和`localStorage`的主要区别是？A.存储容量不同B.`sessionStorage`数据在页面会话结束后清除，`localStorage`永久保存（需手动删除）C.`localStorage`仅支持字符串类型，`sessionStorage`支持对象D.`sessionStorage`可以跨标签页共享答案：B11.以下哪种方式可以实现CSS的垂直居中？A.`margin:0auto`B.`position:absolute;top:50%;transform:translateY(-50%)`C.`text-align:center`D.`float:left`答案：B12.JavaScript中，`let`和`var`的主要区别是？A.`let`声明的变量是全局作用域，`var`是块级作用域B.`let`存在变量提升，`var`不存在C.`let`在块级作用域内有效，`var`在函数作用域内有效D.`let`可以重复声明，`var`不能答案：C13.Vue组件中，父组件向子组件传递数据的方式是？A.`$emit`B.`props`C.`$refs`D.`provide/inject`答案：B14.以下哪项是前端性能优化的常见手段？A.减少HTTP请求数量B.增加DOM节点层级C.禁用CSS雪碧图（Sprite）D.不使用异步加载脚本答案：A15.关于跨域资源共享（CORS），正确的说法是？A.仅需前端配置即可解决跨域B.服务器需在响应头中添加`Access-Control-Allow-Origin`字段C.所有浏览器都不支持CORSD.跨域请求只能使用GET方法答案：B二、多项选择题（每题3分，共30分，多选、少选、错选均不得分）1.HTML5的新特性包括？A.语义化标签（如`<header>`、`<footer>`）B.本地存储（localStorage、sessionStorage）C.画布（Canvas）和SVGD.表单验证（required、pattern属性）答案：ABCD2.CSS盒模型的组成部分包括？A.内容（content）B.内边距（padding）C.边框（border）D.外边距（margin）答案：ABCD3.JavaScript中，属于引用数据类型的有？A.对象（Object）B.数组（Array）C.字符串（String）D.函数（Function）答案：ABD4.以下哪些是HTTP1.1相比HTTP1.0的改进？A.长连接（PersistentConnections）B.分块传输编码（ChunkedTransferEncoding）C.缓存控制（Cache-Control）D.二进制协议答案：ABC5.响应式设计的实现方式包括？A.媒体查询（MediaQuery）B.弹性布局（Flexbox）C.百分比布局D.固定宽度布局答案：ABC6.Vue的计算属性（computed）和方法（methods）的区别是？A.计算属性基于依赖缓存，方法每次调用都会执行B.计算属性可以直接在模板中使用，方法需要调用C.计算属性不能修改，方法可以修改数据D.计算属性适用于复杂逻辑，方法适用于简单操作答案：AB7.前端安全常见的攻击类型包括？A.XSS（跨站脚本攻击）B.CSRF（跨站请求伪造）C.SQL注入D.点击劫持（Clickjacking）答案：ABD8.以下哪些是JavaScript异步编程的实现方式？A.回调函数（Callback）B.PromiseC.async/awaitD.同步函数答案：ABC9.Webpack的核心功能包括？A.模块打包（Bundle）B.代码分割（CodeSplitting）C.热更新（HMR）D.类型检查（TypeChecking）答案：ABC10.移动端适配的常用方案有？A.使用视口元标签（`<metaname="viewport">`）B.基于rem的弹性布局（配合媒体查询或js动态计算）C.固定像素（px）布局D.响应式图片（srcset属性）答案：ABD三、判断题（每题1分，共10分，正确填“√”，错误填“×”）1.HTML5中`<input>`标签的`type`属性新增了`email`、`number`等类型。（）答案：√2.CSS中，`!important`规则会覆盖所有其他样式，包括内联样式。（）答案：×（内联样式的`!important`优先级更高）3.JavaScript中，`const`声明的变量值不可修改。（）答案：×（对象属性可以修改，变量引用不可变）4.Vue的`v-if`和`v-show`都能控制元素的显示隐藏，性能无差异。（）答案：×（`v-if`是条件渲染，频繁切换时`v-show`更高效）5.HTTP2使用二进制分帧层，实现了多路复用。（）答案：√6.所有浏览器都支持ES6的`let`和`const`声明。（）答案：×（旧版IE不支持）7.跨域请求中，`XMLHttpRequest`和`fetch`都可以通过CORS解决。（）答案：√8.CSS的`flex:1`等同于`flex-grow:1;flex-shrink:1;flex-basis:0%`。（）答案：√9.JavaScript的事件冒泡是指事件从目标元素向上传播到根元素，事件捕获则相反。（）答案：√10.前端性能优化中，`defer`属性使脚本在DOM加载完成后执行，`async`属性使脚本异步加载并立即执行。（）答案：√四、简答题（每题6分，共30分）1.简述CSS3弹性盒布局（Flexbox）的核心概念及常用属性。答案：弹性盒布局通过设置父容器为`display:flex`，将子元素变为弹性项目（flexitems）。核心概念包括主轴（mainaxis）和交叉轴（crossaxis）。常用属性：父容器属性有`flex-direction`（主轴方向）、`justify-content`（主轴对齐）、`align-items`（交叉轴对齐）、`flex-wrap`（换行方式）；子元素属性有`flex-grow`（放大比例）、`flex-shrink`（缩小比例）、`flex-basis`（初始大小）、`align-self`（单独对齐）。2.说明JavaScript中`call()`、`apply()`和`bind()`的区别及应用场景。答案：三者均用于改变函数的`this`指向。`call()`和`apply()`立即执行函数，区别在于参数传递：`call()`接收逗号分隔的参数列表，`apply()`接收数组形式的参数。`bind()`返回一个新函数，不会立即执行，可用于预先绑定`this`和部分参数（柯里化）。应用场景：`call()`用于需要明确参数的场景；`apply()`适用于参数为数组（如Math.max.apply(null,arr)求数组最大值）；`bind()`用于事件处理函数绑定实例`this`（如React类组件中的方法绑定）。3.解释Vue.js的双向数据绑定原理（以Vue2为例）。答案：Vue2使用`Object.defineProperty`对数据对象的每个属性添加`getter`和`setter`。`getter`在属性被访问时收集依赖（将当前Watcher加入依赖列表），`setter`在属性被修改时触发依赖更新（通知所有Watcher重新渲染）。模板编译时，会将动态绑定的属性转换为Watcher，监听对应数据的变化。当用户输入（如`v-model`）触发数据修改时，`setter`被调用，通知视图更新；视图更新后，用户输入又会同步到数据，实现双向绑定。4.列举至少5种前端性能优化的方法，并简要说明原理。答案：（1）合并压缩资源：合并CSS/JS文件减少HTTP请求，压缩代码（如UglifyJS、CSSNano）减小文件体积；（2）图片优化：使用WebP/AVIF格式替代PNG/JPG（同等质量体积更小），雪碧图（CSSSprite）合并小图标；（3）懒加载（LazyLoad）：图片/视频在进入视口时再加载（通过`IntersectionObserver`或`scroll`事件监听）；（4）异步加载脚本：使用`async`或`defer`属性，避免阻塞HTML解析；（5）服务端渲染（SSR）：在服务器提供HTML，减少客户端渲染时间，提升首屏加载速度；（6）缓存策略：设置`Cache-Control`、`ETag`等HTTP头，利用浏览器缓存减少重复请求。5.说明跨域的概念及常见解决方案（至少4种）。答案：跨域指浏览器同源策略限制下，不同源（协议、域名、端口任意不同）的资源无法相互访问。常见解决方案：（1）CORS（跨域资源共享）：服务器在响应头中添加`Access-Control-Allow-Origin`等字段，允许指定源访问；（2）JSONP（JSONwithPadding）：利用`<script>`标签无跨域限制的特性，通过回调函数传递数据；（3）代理服务器：前端请求同源的代理服务器，由代理服务器转发至目标接口；（4）`postMessage`：用于窗口间通信（如父窗口与iframe），通过`window.postMessage`和`onmessage`事件传递数据；（5）WebSocket：基于TCP的全双工通信协议，不受同源策略限制。五、综合题（每题10分，共20分）1.要求使用HTML、CSS和JavaScript实现一个简单的待办事项列表（TodoList），功能包括：输入待办项并添加、点击项标记为已完成、删除待办项。请写出关键代码并说明实现逻辑。答案：关键HTML结构：```html<divclass="todo-container"><inputtype="text"id="todoInput"placeholder="输入待办事项"><buttononclick="addTodo()">添加</button><ulid="todoList"></ul></div>```关键CSS样式：```css.todo-container{max-width:500px;margin:20pxauto;}todoInput{padding:8px;width:300px;}button{padding:8px16px;}.todo-item{padding:8px;margin:5px0;border:1pxsolidddd;cursor:pointer;}.pleted{text-decoration:line-through;color:888;}.delete-btn{margin-left:10px;color:red;cursor:pointer;}```关键JavaScript逻辑：```javascriptfunctionaddTodo(){constinput=document.getElementById('todoInput');consttext=input.value.trim();if(!text)return;constlist=document.getElementById('todoList');constli=document.createElement('li');li.className='todo-item';li.innerHTML=`<span>${text}</span><spanclass="delete-btn"onclick="deleteTodo(this)">×</span>`;//点击标记完成li.addEventListener('click',function(e){if(e.target.classList.contains('delete-btn'))return;this.classList.toggle('completed');});list.appendChild(li);input.value='';}functiondeleteTodo(btn){constli=btn.parentElement;li.remove();}```实现逻辑：通过输入框获取待办项文本，点击添加按钮时创建新的列表项（li），并绑定点击事件切换完成状态（通过类名控制样式）。每个列表项包含删除按钮，点击删除按钮时移除对应的li元素。CSS控制已完成项的样式（文字删除线、灰色），确保交互直观。2.假设某电商网站首页加载缓慢，需要进行性能优化。请从前端角度提出至少5个具体优化方案，并说明每个方案的实施方法和预期效果。答案：（1）图片懒加载优化：实施方法：将非首屏图片的`src`替换为`data-src`，使用`IntersectionObserver`API监听图片进入视口时，将`data-src`赋值给`src