全国计算机等级考试二级web程序设计习题及答案

全国计算机等级考试二级web程序设计习题及答案1.在HTML5中，以下哪个标签是用于定义页面独立的内容区块，比如论坛帖子、博客文章等，并且语义化优先级高于普通div容器？A.`<section>`B.`<article>`C.`<aside>`D.`<div>`答案：B解析：HTML5的语义化标签中，`<article>`标签用于定义独立的、完整的可外部引用的内容块，符合题目描述；`<section>`定义文档中的节，一般用于成块的主题内容分组；`<aside>`定义侧边栏，存放和主内容相关的附属信息；div是无语义的通用块容器，因此选B。2.在HTML中，若要实现点击文字就可以选中对应单选框，以下写法正确的是？A.`<inputtype="radio"name="gender"id="male"><label>男</label>`B.`<inputtype="radio"name="gender"id="male"><labelfor="male">男</label>`C.`<labelfor="male"><inputtype="radio"name="gender"id="male">男</label>`D.以上B和C都正确答案：D解析：label标签绑定表单元素有两种合法方式，一种是将for属性设置为对应表单元素的id，通过id关联匹配；另一种是直接将表单元素嵌套在label标签内部，此时不需要额外设置for属性，两种方式都可以实现点击label触发对应表单元素的选中状态，因此B和C都正确，选D。3.现有CSS样式规则：`#nav>.active*{color:red;}`，以下哪个元素会被匹配到，颜色设置为红色？A.id为nav的元素下所有class为active的后代元素B.id为nav的元素的子元素中class为active的元素本身C.id为nav的元素的子元素中class为active元素的所有后代元素D.id为nav的元素的所有后代元素中class为active的元素的子元素答案：C解析：CSS选择器中`>`代表子元素选择器，仅匹配父元素的直接子元素，`.`代表类选择器，`#`代表id选择器，`*`代表通配符，匹配所有元素。因此该规则的含义是：选中id为nav元素的直接子元素中，class为active的元素的所有后代元素，因此C选项描述正确。4.在标准W3C盒模型下，一个div的样式设置为：`width:100px;padding:10px15px;border:5pxsolid#000;margin:15px;`，该元素占据的总水平宽度为？A.100pxB.150pxC.170pxD.190px答案：C解析：标准W3C盒模型中，width属性仅定义内容区域的宽度，元素整体占据的页面水平宽度=内容宽度(width)+左内边距+右内边距+左边框+右边框+左外边距+右外边距，本题计算为：`100+(15×2)+(5×2)+(15×2)=100+30+10+30=170px`，如果设置了`box-sizing:border-box`（IE怪异模式规则），总宽度为`100+30=130px`，题目明确为标准W3C盒模型，因此选C。5.在CSS中，若要将元素相对于浏览器视口进行定位，滚动页面时元素位置保持不变，应该设置position属性值为？A.staticB.relativeC.absoluteD.fixed答案：D解析：position各属性含义：static是默认值，元素遵循正常文档流，不做特殊定位；relative是相对定位，相对于元素自身在正常文档流中的原位置偏移，元素仍占据原文档流空间；absolute是绝对定位，相对于最近的非static定位的父元素偏移，脱离正常文档流；fixed是固定定位，相对于浏览器视口定位，滚动页面时位置不变，脱离文档流，符合题目描述，因此选D。6.执行以下JavaScript代码后，变量result的值是？```javascriptvara=10;varb="20";result=a+b;```A.30B."30"C.1020D."1020"答案：D解析：JavaScript中不同类型数据运算时，会进行隐式类型转换，当数字和字符串相加时，数字会自动转换为字符串，再进行字符串拼接操作，因此本代码中a是数字10，转换为字符串"10"，和字符串"20"拼接得到结果为字符串"1020"，因此选D。7.执行以下JavaScript代码，控制台输出结果是？```javascriptvarnum=10;functiontest(){console.log(num);varnum=20;}test();```A.10B.20C.undefinedD.报错答案：C解析：JavaScript存在变量提升机制，函数内部声明的var变量会提升到函数作用域的顶端，但是赋值操作不会提升，因此代码实际执行顺序为：函数进入作用域后，首先声明内部变量`varnum`，此时num的值为undefined，然后执行`console.log(num)`输出undefined，之后才给num赋值20，因此输出结果是undefined，多数考生误选A是忽略了函数内部的变量声明提升规则。8.在JavaScript中，若要在原生DOM环境中阻止事件冒泡传播，以下写法正确的是？A.`event.stopPropagation()`B.`event.preventDefault()`C.`event.stopBubble()`D.`event.cancelBubble`答案：A解析：标准DOM规范中阻止事件冒泡的方法是`event.stopPropagation()`，IE8及更早版本中使用`event.cancelBubble=true`，但cancelBubble是属性不是方法，题目问的是原生标准写法，因此A正确；`preventDefault()`方法的作用是阻止元素的默认事件行为，比如阻止a标签的默认跳转行为，不是阻止冒泡，因此选A。9.在HTTP协议中，以下哪个状态码表示"资源未找到"？A.200B.301C.404D.500答案：C解析：HTTP常见状态码含义：200表示请求成功；301表示永久重定向；404表示请求的资源在服务器不存在，即未找到；500表示服务器内部错误，因此选C。10.在HTTP协议中，GET方法和POST方法的区别，以下描述错误的是？A.GET请求参数会拼接显示在URL中，POST参数不会显示在URL中B.GET对参数长度有大小限制，POST理论上没有大小限制C.GET会被浏览器主动缓存，POST默认不会被缓存D.GET只能发送文本类型数据，POST只能发送二进制类型数据答案：D解析：GET和POST都是HTTP请求方法，都可以发送任意类型的数据，核心区别仅在于数据传输位置：GET数据放在URL中，POST数据放在请求体中，ABC选项描述都正确，D选项描述错误，因此本题选D。多项选择题1.以下属于HTML5新增特性的有？A.语义化标签B.Canvas绘图C.本地存储D.表单新增input类型答案：ABCD解析：HTML5相对于HTML4新增了大量实用特性，包括`<article>`、`<section>`等语义化标签，新增Canvas画布用于客户端绘图，新增`localStorage`、`sessionStorage`本地存储方案，新增email、date、number、range等多个新的input类型，因此四个选项都正确。2.以下关于CSS选择器优先级的说法，正确的有？A.`!important`修饰的样式优先级最高B.内联样式优先级高于内部样式表和外部样式表C.选择器优先级计算中，id选择器优先级高于类选择器D.相同优先级的样式，后定义的会覆盖先定义的同名样式答案：ABCD解析：CSS优先级规则：`!important`修饰的样式优先级高于所有普通样式；优先级权重从高到低为：内联样式(权重1000)>id选择器(权重100)>类选择器/伪类选择器/属性选择器(权重10)>标签选择器(权重1)，通配符优先级最低；相同优先级的同名样式遵循后来居上原则，后定义的会覆盖先定义的样式，因此四个选项都正确。3.以下关于JavaScript中闭包的描述，正确的有？A.闭包是指有权访问另一个函数作用域中变量的函数B.闭包会导致函数内部变量长期保存在内存中，使用不当会造成内存泄漏C.闭包可以实现封装私有变量，实现模块化开发D.定时器、事件处理器中的回调函数常用到闭包特性答案：ABCD解析：闭包是JavaScript中核心特性，基于作用域链规则实现，当内部函数引用了外部函数作用域的变量，会导致外部函数执行完后变量不会被垃圾回收机制回收，从而形成闭包，以上四个选项对闭包的描述都正确。4.以下关于浏览器同源策略的描述，正确的有？A.同源策略要求协议、域名、端口三者必须全部相同，才算同源B.同源策略限制了不同源页面之间的DOM操作、Cookie读取和Ajax请求C.JSONP、CORS都是常用的合法跨域解决方案D.所有跨域请求都被浏览器同源策略禁止，没有例外答案：ABC解析：同源策略是浏览器的核心安全机制，要求协议、域名、端口三者都相同才是同源，不同源的页面之间不能互相操作DOM、读取Cookie和发送Ajax请求，但是实际开发中可以通过JSONP、CORS、反向代理等方式实现合法跨域，同时script、img、iframe等标签本身不受同源策略限制，可以加载不同源资源，因此D选项错误，ABC正确。综合应用题请补全以下代码，实现点击切换Tab栏的交互效果，需求：页面有三个Tab选项卡，点击任意Tab，当前Tab变为激活状态，显示对应内容区域，其他Tab和内容隐藏。代码空缺处请补全并说明功能：```html<!DOCTYPEhtml><html><head><metacharset="utf-8"><style>*{margin:0;padding:0;list-style:none;}.tab-box{width:500px;margin:30pxauto;}.tab-header{overflow:hidden;border-bottom:1pxsolid#eee;}.tab-item{float:left;padding:10px20px;border:1pxsolid#eee;border-bottom:none;margin-right:10px;cursor:pointer;}.tab-item.active{background:#fff;color:red;}.tab-content{padding:20px0;display:none;}.tab-content.active{①;/*让激活的内容显示*/}</style></head><body><divclass="tab-box"id="tabBox"><divclass="tab-header"><divclass="tab-itemactive"data-index="0">首页</div><divclass="tab-item"data-index="1">产品</div><divclass="tab-item"data-index="2">关于我们</div></div><divclass="tab-contentactive">首页内容区域</div><divclass="tab-content">产品内容区域</div><divclass="tab-content">关于我们内容区域</div></div><script>vartabItems=document.querySelectorAll('.tab-item');varcontents=document.querySelectorAll('.tab-content');for(vari=0;i<tabItems.length;i++){tabItems[i].addEventListener('click',function(){for(varj=0;j<tabItems.length;j++){tabItems[j].②('active');//移除active类名contents[j].classList.remove('active');}this.classList.add('active');varindex=this.getAttribute('data-index');contents[index].classList.③;//给对应内容添加active类})}</script></html>```参考答案：①处填入：`display:block`解析：原有CSS规则中`.tab-content`设置了`display:none`即默认隐藏，只有添加active类的激活内容需要显示，块级元素默认显示使用`display:block`即可符合需求，也可根据布局需要填写`display:flex`等其他显示属性，标准考核写法为`display:block`。②处填入：`classList.remove`解析：DOM元素的classList属性提供了标准的类名操作方法，remove方法用于移除指定名称的类，本题需要在激活新Tab前清除所有Tab项的active类，因此调用`classList.remove`移除active类名，符合原生DOM的标准写法要求。③处填入：`add('active')`解析：获取当前点击Tab对应的内容项索引后，需要给对应内容项添加active类，触发CSS的显示规则，classList的add方法用于添加指定类名，因此此处填`add('active')`。本题是全国计算机等级考试二级Web程序设计的高频交互考点，考察了CSS基础样式控制、DOM操作、事件绑定的核心知识，属于必考题型。编程简答题1.请简述实现数组去重的常见方法，写出至少两种实现的示例代码。参考答案：数组去重是JavaScript部分的高频考点，常见实现方法如下：方法一：使用ES6的Set数据结构实现，代码简洁高效，是目前最常用的方法。示例代码：```javascriptfunctionuniqueArr(arr){returnArray.from(newSet(arr));}//简写版本：constuniqueArr=arr=>[...newSet(arr)];```原理：Set对象本身要求存储的所有值都是唯一的，会自动去除重复元素，将数组传入Set后再转换回数组，即可得到去重后的结果，性能优秀，代码量少，适合现代开发场景。方法二：使用indexOf判断实现，逻辑简单易理解，兼容ES5环境。示例代码：```javascriptfunctionuniqueArr(arr){varnewArr=[];for(vari=0;i<arr.length;i++){if(newArr.indexOf(arr[i])===-1){newArr.push(arr[i]);}}returnnewArr;}```原理：新建一个空数组，遍历原数组，只有当原数组的当前元素在新数组中不存在时，才将其添加到新数组中，最终新数组就是去重后的结果，逻辑清晰，容易掌握，是考试中常见的得分写法。2.请编写CSS代码，实现一个块元素在父容器中水平垂直居中，写出至少两种常见实现方式。参考答案：水平垂直居中是CSS布局的高频考点，常见实现方法如下：方法一：flex布局实现，写法简单，适配任意宽高的子元素：```css.parent{display:flex;justify-content:center;/*控制水平居中*/align-items:center;/*控制垂直居中*/width:100%;min-height:500px;}.child{width:200px;height:200px;}```方法二：绝对定位加transform偏移实现，适配未知宽高的子元素：```css.parent{position:relative;width:100%;min-height:500px;}.child{position:absolute;top: