全国计算机等级考试(二级Web程序设计)试题及答案

全国计算机等级考试(二级Web程序设计)试题及答案1.下列关于Web技术的描述中，正确的是（）A.Web基于B/S模式，客户端必须安装专门的客户端软件才能访问服务B.HTML是Web应用的标准标记语言，用于描述网页的结构和样式C.HTTP协议是应用层协议，默认使用TCP的80端口进行通信D.动态网页就是指包含动画效果的网页，本质和静态网页没有区别答案：C解析：A选项，Web基于B/S模式，客户端只需要浏览器即可访问服务，不需要安装专门的客户端软件，A错误；B选项，HTML用于描述网页的结构，CSS才用于描述网页样式，B错误；C选项，HTTP是应用层传输协议，默认使用TCP的80端口通信，HTTPS默认使用443端口，C正确；D选项，动态网页指内容由服务器端程序动态生成，可根据用户请求返回不同内容，并非仅指包含动画的网页，和静态网页（内容固定存储在服务器）有本质区别，D错误。2.HTML5中新增的语义化标签，用于定义页面导航区块的是（）A.<article>B.<nav>C.<aside>D.<footer>答案：B解析：<article>用于定义页面中独立完整的内容区块，<nav>用于定义页面的导航链接区块，<aside>用于定义和主内容相关的侧边栏内容，<footer>用于定义页面或区块的底部区域，因此选B。3.下列CSS选择器中，优先级最高的是（）A.#container.contentpB.div.contentpspanC.#main#titleD.p:first-child答案：C解析：CSS优先级遵循权重计算规则：ID选择器权重为100，类/伪类/属性选择器权重为10，元素选择器权重为1，内联样式优先级高于所有选择器，!importan优先级最高。计算得：选项A权重为100+10+1=111，选项B权重为10+1+1=12，选项C权重为100+100=200，选项D权重为10+1=11，因此优先级最高的是选项C。4.在JavaScript中，下列代码执行后输出结果是（）```javascriptvara=1;functiontest(){a=2;vara;console.log(a);}test();console.log(a);```A.21B.22C.11D.12答案：A解析：JavaScript存在变量提升机制，函数内部声明的变量`vara`会提升到函数作用域顶部，函数内部先声明局部变量a，再赋值为2，因此第一次输出结果为2；函数内的a是局部变量，不会修改全局作用域中a的值，全局a仍然为1，因此第二次输出结果为1，选A。5.下列关于HTTP请求方法的描述中，错误的是（）A.GET方法请求的数据会附加在URL之后，长度受浏览器和服务器限制B.POST方法将请求数据放在请求体中，没有明确的长度限制C.PUT方法用于向服务器上传资源，DELETE方法用于删除服务器上的指定资源D.HEAD方法和GET方法完全相同，都会返回完整的响应体内容答案：D解析：HEAD方法仅请求响应头信息，不会返回响应体内容，通常用于验证链接有效性、获取资源元信息，和GET方法功能不同，因此D错误，其余选项描述均正确。6.CSS中，`float:none;clear:both;`的作用是（）A.仅清除左浮动B.仅清除右浮动C.清除左右浮动，解决父元素高度塌陷问题D.设置元素允许同时左右浮动答案：C解析：CSS的clear属性用于指定元素不允许周围存在浮动元素，`clear:left`清除左浮动，`clear:right`清除右浮动，`clear:both`清除左右浮动，是开发中清除浮动、解决父元素高度塌陷问题的常用写法，因此选C。7.在JavaScriptDOM操作中，下列哪种方法可以向指定父节点末尾添加新的子节点（）A.appendChild()B.removeChild()C.replaceChild()D.setAttribute()答案：A解析：appendChild()用于向父节点的子节点列表末尾添加新子节点，removeChild()用于删除指定子节点，replaceChild()用于替换指定子节点，setAttribute()用于修改元素的HTML属性，因此选A。8.下列关于AJAX技术的描述中，正确的是（）A.AJAX必须同步发送请求，无法实现异步请求B.AJAX可以实现页面不刷新的情况下与服务器交换数据C.AJAX只能发送GET请求，不能发送POST请求D.AJAX不需要JavaScript支持即可运行答案：B解析：AJAX全称是异步JavaScript和XML，核心依赖XMLHttpRequest对象，支持异步请求，核心优势就是可以在不刷新整个页面的情况下与服务器交换数据，支持GET、POST等多种请求方法，必须依赖JavaScript运行，因此B正确，其余选项错误。9.HTML中，哪个属性用于设置元素的唯一标识，同一个页面中不能重复（）A.classB.idC.nameD.data-id答案：B解析：id属性规定HTML元素的唯一标识符，在同一个HTML文档中id值不能重复；class用于定义元素的类名，多个元素可以共用同一个class名；name多用于表单元素的名称标识；data-id是自定义数据属性，用于存储自定义数据，没有唯一性要求，因此选B。10.JavaScript中，`typeofnull`的输出结果是（）A.nullB.objectC.undefinedD.number答案：B解析：这是JavaScript的经典历史设计问题，JavaScript最初实现中，对象类型的底层存储标志位为0，而null的二进制表示全为0，因此typeof检测null会返回object，实际上null本身是独立的基本数据类型，因此选B。11.下列CSS单位中，属于相对单位，适合用于响应式布局适配不同屏幕的是（）A.pxB.ptC.emD.mm答案：C解析：px是像素固定单位，pt是印刷点单位，mm是毫米物理单位，三者都是固定单位，无法根据屏幕或基准字体自适应；em是相对单位，相对于父元素或根元素的字体大小缩放，适合响应式布局适配不同屏幕，因此选C。12.HTML表单中，哪个属性用于指定表单提交后处理请求的服务器URL地址（）A.methodB.actionC.targetD.enctype答案：B解析：action属性指定表单提交的目标URL，method属性指定提交请求的HTTP方法（GET/POST），target指定打开响应结果的窗口，enctype指定表单数据的编码类型，因此选B。13.在JavaScript中，下列哪个不属于JavaScript的基本数据类型（）A.StringB.NumberC.ArrayD.Undefined答案：C解析：JavaScript的基本数据类型包括Undefined、Null、Boolean、Number、String、Symbol（ES6新增），Array、Object、Function都属于引用数据类型，因此选C。14.下列关于Cookie和Session的描述中，错误的是（）A.Cookie存储在客户端浏览器中，Session存储在服务器端B.Session的工作必须依赖Cookie，无法通过其他方式实现C.Cookie可以设置过期时间，Session也可以设置过期时间D.Cookie存储数据大小有限制，Session存储大小不受客户端限制答案：B解析：Session默认通过Cookie存储SessionID，但如果浏览器禁用Cookie，可以通过URL重写的方式传递SessionID，因此Session不是必须依赖Cookie，B错误，其余选项描述正确。15.CSS中，要实现宽度固定的块级元素在父容器中水平居中，正确的写法是（）A.text-align:centerB.margin:0autoC.line-height:centerD.align:center答案：B解析：text-align:center用于让块级元素内部的行内元素或行内块元素水平居中，margin:0auto用于让块级元素本身在父容器中水平居中，因此选B。16.JavaScriptDOM中，哪个属性用于获取当前元素的父节点（）A.parentNodeB.childNodesC.nextSiblingD.previousSibling答案：A解析：parentNode获取当前节点的父节点，childNodes获取当前节点的所有子节点，nextSibling获取当前节点的下一个兄弟节点，previousSibling获取当前节点的上一个兄弟节点，因此选A。17.HTML5中，专门用于播放视频文件的标签是（）A.<audio>B.<video>C.<embed>D.<frame>答案：B解析：<audio>是HTML5专门用于播放音频的标签，<video>是专门用于播放视频的标签，<embed>用于嵌入外部插件内容，<frame>是早期框架标签，已经被淘汰，因此选B。18.下列关于JavaScript闭包的描述中，正确的是（）A.闭包一定会导致内存泄漏，永远不能被垃圾回收B.闭包是指有权访问另一个函数作用域中变量的函数C.闭包只能读取外部函数的变量，不能修改D.闭包不能在实际开发中使用，仅用于理论考察答案：B解析：闭包的定义就是：能够访问另一个函数作用域变量的函数就是闭包；闭包既可以读取也可以修改外部函数的变量，合理使用闭包不会造成内存泄漏，开发中经常用闭包实现模块化、数据私有、柯里化等功能，因此B正确，其余选项错误。19.HTTP状态码中，表示服务器找不到请求资源的状态码是（）A.200B.301C.404D.500答案：C解析：200表示请求成功，301表示永久重定向，404表示资源未找到，500表示服务器内部错误，因此选C。20.Bootstrap栅格系统中，用于表示中等屏幕（宽度≥992px）的列类前缀是（）A..col-xs-B..col-sm-C..col-md-D..col-lg-答案：C解析：Bootstrap栅格系统中，`.col-xs-`对应超小屏（宽度<768px），`.col-sm-`对应小屏（宽度≥768px），`.col-md-`对应中屏（宽度≥992px），`.col-lg-`对应大屏（宽度≥1200px），因此选C。21.下列关于JavaScript原型继承的描述中，正确的是（）A.JavaScript是基于类的继承，不是基于原型的继承B.每个对象都拥有__proto__属性，指向它的原型对象C.原型继承不能实现代码复用，必须使用class实现继承D.原型对象上的属性不能被所有实例共享答案：B解析：JavaScript是基于原型的继承，ES6引入的class只是原型继承的语法糖，本质还是原型继承；每个实例对象的__proto__属性都指向构造函数的prototype原型对象，原型对象上的属性和方法可以被所有实例共享，天然实现代码复用，因此只有B选项正确。22.CSSposition属性的哪个值，可以让元素固定在浏览器视口的指定位置，滚动页面时位置保持不变（）A.staticB.relativeC.absoluteD.fixed答案：D解析：static是默认值，元素按照正常文档流排版；relative是相对定位，相对于元素自身的原始位置偏移；absolute是绝对定位，相对于最近的非static定位父元素偏移；fixed是固定定位，相对于浏览器视口定位，滚动页面时位置不变，常用于固定导航、悬浮按钮，因此选D。23.HTMLa标签的target属性值为（）时，点击链接会在新窗口打开页面（）A._selfB._blankC._parentD._top答案：B解析：_self表示在当前窗口打开链接，_blank表示在新窗口打开链接，_parent表示在父框架打开链接，_top表示在整个顶层窗口打开链接，因此选B。24.JavaScript中，下列哪种写法是最简洁的数组去重方法（）A.[...newSet(arr)]B.arr.filter()C.arr.map()D.arr.sort()答案：A解析：ES6中Set数据结构不允许存储重复值，因此通过`newSet(arr)`会自动去除数组中的重复值，再通过扩展运算符转为数组，是当前最简洁的数组去重方法；filter用于过滤数组元素，map用于遍历生成新数组，sort用于数组排序，都不能直接实现数组去重，因此选A。25.下列关于响应式布局的描述中，错误的是（）A.响应式布局可以适配不同尺寸的移动设备和桌面设备B.媒体查询是实现响应式布局的核心技术之一C.响应式布局需要为每个不同尺寸的设备开发独立的页面D.弹性栅格布局是响应式布局常用的实现方式答案：C解析：响应式布局的核心优势就是一套代码适配多种尺寸的设备，不需要为不同设备开发独立页面，降低开发和维护成本，因此C错误，其余选项描述正确。26.JavaScript中，字符串`"HelloWeb"`的length属性值是（）A.7B.8C.9D.10答案：C解析：字符串`"HelloWeb"`包含的字符依次为：H、e、l、l、o、空格、W、e、b，共9个字符，因此length为9，选C。27.CSS中，`box-sizing:border-box`的作用是（）A.元素的宽度仅包含内容区域，不包含内边距和边框B.元素的宽度包含内容、内边距和边框，方便布局计算整体尺寸C.给元素添加圆角边框D.设置元素的盒子模型为默认的标准盒子模型答案：B解析：默认的box-sizing是content-box，元素宽度仅包含内容区域，不包含内边距和边框，给元素添加内边距或边框会撑大整体尺寸；border-box的元素宽度包含内容、内边距和边框，给元素设置的width就是元素的整体宽度，方便布局计算，是开发中常用的盒子模型设置，因此选B。28.下列关于本地存储localStorage的描述中，正确的是（）A.localStorage存储的数据会在关闭浏览器后自动清除B.localStorage单个域名存储数据大小一般在5MB左右C.localStorage存储的数据只能是字符串，不能存储对象D.localStorage的数据会每次随HTTP请求发送到服务器答案：B解析：sessionStorage存储的数据会在关闭浏览器后自动清除，localStorage永久存储在客户端，除非手动清除，A错误；目前主流浏览器对localStorage的容量限制一般为单个域名5MB左右，远大于Cookie的4KB限制，B正确；虽然localStorage只能存储字符串，但可以将对象通过JSON.stringify序列化为JSON字符串存储，读取后通过JSON.parse反序列化为对象，因此可以间接存储对象，C错误；localStorage是客户端本地存储，数据不会自动随HTTP请求发送到服务器，D错误。29.下列HTML标签中，属于行内元素的是（）A.<div>B.<p>C.<span>D.<h1>答案：C解析：div、p、h1都是块级元素，默认独占一行，span是行内元素，默认不会换行，常用于对文本进行局部样式修饰，因此选C。30.下列关于浏览器跨域问题的描述中，错误的是（）A.跨域问题是浏览器同源策略导致的，是浏览器的安全限制B.协议不同、域名不同、端口不同都会产生跨域C.JSONP是解决跨域的常用方法，支持GET和POST请求D.CORS（跨域资源共享）是W3C推荐的跨域解决方案，支持GET和POST请求答案：C解析：JSONP本质是利用script标签不受同源策略限制的特点实现跨域，script标签加载资源只能发送GET请求，因此JSONP仅支持GET请求，不支持POST请求，C错误，其余选项描述正确。基本操作题（共18分）题目：现有一个空白HTML框架，要求按照以下要求修改代码，不改变原有结构：1.在网页head区域添加网页标题，内容为“二级Web练习页”；2.设置网页页面背景颜色为#f0f0f0；3.在body区域现有内容的最上方添加一个h1标题，内容为“考生个人信息”；4.给该h1标题添加样式，设置文字颜色为#333，字体大小为24px，居中对齐。参考答案：```html<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>二级Web练习页</title><style>body{background-color:#f0f0f0;}h1{color:#333;font-size:24px;text-align:center;}</style></head><body><h1>考生个人信息</h1><formaction="#"method="post"><p>姓名：<inputtype="text"name="username"></p><p>性别：<inputtype="radio"name="gender"value="male">男<inputtype="radio"name="gender"value="female">女</p><p><inputtype="submit"value="提交"></p></form></body></html>```评分说明：标题添加正确得3分，背景颜色设置正确得3分，h1内容和位置正确得6分，h1样式全部正确得6分，共18分。简单应用题（共24分）题目：需要实现两个整数加法计算功能，补全代码中的空缺（1）（2）（3）（4），要求：用户输入两个数，点击按钮后输出和，结果大于100时文字显示红色，否则显示黑色。原有代码框架：```html<inputtype="text"id="num1"placeholder="第一个数"><inputtype="text"id="num2"placeholder="第二个数"><buttonid="btn">计算和</button><p>计算结果：<spanid="result"></span></p><script>window.onload=function(){varbtn=document.getElementById(（1）);btn.onclick=function(){varn1=parseFloat(document.getElementById("num1").value);varn2=parseFloat(document.getElementById("num2").value);varsum=（2）;varresultSpan=document.getElementById("result");resultSpan.innerHTML=（3）;if(sum>100){resultSpan.style.color=（4）;}else{resultSpan.style.color="#000000";}}}</script>```参考答案：(1)`"btn"`，解析：按钮的id属性为`btn`，getElementById需要传入id值才能获取DOM对象，完成事件绑定，分值6分；(2)`n1+n2`，解析：功能要求计算两个数的和，因此将两个输入的数值相加得到结果，分值6分；(3)`sum`，解析：需要将计算结果插入到`result`元素中显示给用户，因此将innerHTML赋值为sum，分值6分；(4)`"red"`或`"#ff0000"`，解析：题目要求结果大于100时文字为红色，两种写法都符合CSS规范，都正确，分值6分。补全后功能符合要求：输入30和50输出80黑色，输入60和70输出130红色，符合题目要求。综合应用题（共18分）题目：实现网页常见的Tab栏切换效果，要求：初始状态显示第一个Tab内容，点击不同Tab标题时切换对应内容，当前选中的Tab标题背景为蓝色、文字白色，其他Tab为默认样式，仅当前对应内容显示，其他内容隐藏。编写完整代码实现功能。参考答案：```html<!--HTML结构--><divclass="tab-container"><divclass="tab-header"><divclass="tab-itemactive">商品介绍</div><divclass="tab-item">规格参数</div><divclass="tab-item">用户评价</div></div><divclass="tab-content"><divclass="tab-panelactive">本商品是全新一代智能笔记本，搭载最新处理器，续航可达12小时，满足日常办公和娱乐需求。</div><divclass="tab-panel">处理器：i7-13700H，内存：16GLPDDR5，硬盘：1TPCIe4.0SSD，屏幕：14英寸2.5K100%sRGB高色域屏。</div><divclass="tab-panel">累计评价10万+，好评率98%，用户反馈：续航强劲，性能足够，外观轻薄，适合日常通勤使用。</div></div></div