计算机二级《Web程序设计》练习试题及答案

计算机二级《Web程序设计》练习试题及答案单项选择题1.在HTML5中，以下哪个标签是用于定义页面独立的内容区块（比如博客文章、论坛帖子）？A.`<section>`B.`<article>`C.`<div>`D.`<aside>`答案：B解析：HTML5新增语义化标签中，`<article>`标签用于定义独立的、完整的可复用内容块，比如一篇文章、一个帖子、一条新闻；`<section>`用于定义文档中的节，对相关内容进行分组；`<div>`是无语义的块级容器；`<aside>`用于定义和页面主内容弱相关的侧边栏内容，因此选B。2.以下CSS选择器的优先级，从高到低排序正确的是？A.内联样式>ID选择器>类选择器>标签选择器B.ID选择器>内联样式>类选择器>标签选择器C.内联样式>类选择器>ID选择器>标签选择器D.内联样式>ID选择器>标签选择器>类选择器答案：A解析：CSS优先级权重规则为：内联样式（写在元素style属性中，权重1000）>ID选择器（权重100）>类选择器/伪类选择器/属性选择器（权重10）>标签选择器/伪元素选择器（权重1），继承样式优先级最低，因此正确排序是A选项。3.在JavaScript中，下列哪个方法可以用于向数组的末尾添加一个或多个元素，并返回新的数组长度？A.unshift()B.pop()C.push()D.shift()答案：C解析：unshift()方法是向数组开头添加元素，返回新数组长度；pop()是删除数组末尾元素，返回被删除的元素；push()是向数组末尾添加元素，返回新数组长度；shift()是删除数组开头元素，返回被删除元素，因此选C。4.以下哪个HTTP状态码表示"资源未找到"？A.301B.403C.404D.500答案：C解析：HTTP状态码分类中，1xx是信息提示，2xx是请求成功，3xx是重定向，4xx是客户端错误，5xx是服务器错误；其中301表示永久重定向；403表示服务器拒绝访问；404表示请求的资源不存在、未找到；500表示服务器内部错误，因此选C。5.在CSS标准W3C盒子模型中，默认情况下元素的属性为：border-width:10px，padding:10px，width:200px，该元素实际占据的总宽度为？A.200pxB.220pxC.240pxD.260px答案：C解析：标准W3C盒子模型中，元素的总宽度=width（内容宽度）+左右padding+左右border，本题中width=200，左右padding是10×2=20，左右border是10×2=20，总宽度为200+20+20=240px；如果设置box-sizing:border-box（怪异盒模型），总宽度就是width设置的200px，默认情况下浏览器使用标准W3C盒子模型，因此选C。6.HTML中，哪个属性用于给元素指定页面内唯一标识？A.classB.nameC.idD.data-id答案：C解析：id属性规定HTML元素的唯一标识，同一个页面中不能出现两个相同id值的元素；class属性用于给元素归类，多个元素可以共用同一个class；name属性多用于表单元素，同名控件可以成组实现多选一；data-id是自定义数据属性，用于存储元素私有数据，因此选C。7.JavaScript中，typeof运算符返回结果不为"object"的是下列哪个值？A.nullB.[]C.{}D.123答案：D解析：typeof123返回"number"；typeofnull返回"object"，这是JavaScript的历史遗留bug；typeof数组、普通对象都返回"object"，如果要精准判断数组可以使用Array.isArray()方法，因此本题选D。8.以下关于CSS定位的描述，错误的是？A.static是默认定位，元素遵循正常文档流B.relative定位是相对于自身原本位置偏移，不脱离正常文档流C.absolute定位是相对于最近的非static定位父元素偏移，脱离正常文档流D.fixed定位是相对于父元素窗口偏移，滚动页面时元素位置不变答案：D解析：fixed定位是相对于浏览器视口（当前可见窗口）定位，不是相对于父元素，无论页面怎么滚动，元素位置保持不变，因此D选项描述错误，选D。9.以下哪个是CSS3新增的弹性布局模块，专门用于实现灵活的一维响应式页面布局？A.GridB.FlexC.FloatD.Position答案：B解析：Flex（弹性盒布局）是CSS3新增的一维布局模型，适合响应式布局中处理元素对齐、空间分配等问题；Grid是CSS3新增的二维网格布局，不是弹性布局；Float是早年实现页面布局的浮动属性，Position是定位属性，因此选B。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主要用于向服务器提交大量数据或敏感数据，D选项描述刚好相反，因此选D，其他选项描述都正确。11.JavaScript中，关于闭包的描述，正确的是？A.闭包一定会导致内存泄漏，绝对不能使用B.闭包是指可以访问外部函数作用域变量的内部函数C.闭包只能在全局作用域中创建D.闭包会在外部函数执行结束后立即释放所有变量答案：B解析：闭包的定义为：函数嵌套函数，内部函数引用外部函数作用域的变量或函数，使得外部函数执行结束后，其作用域不会被销毁，外部可以通过闭包访问内部的私有变量；不合理使用闭包会导致内存泄漏，但合理使用闭包可以实现模块化、变量私有化、柯里化等功能，不是绝对不能使用，因此A错，B对；闭包是在外部函数内部创建，不是全局作用域，C错；闭包会保留变量的引用，不会立即释放，D错，因此选B。12.HTML表单中，哪个input类型用于创建单选按钮？A.type="text"B.type="checkbox"C.type="radio"D.type="button"答案：C解析：radio类型是单选按钮，同一组单选按钮需要设置相同的name属性，实现多选一；checkbox是复选框，text是单行文本输入框，button是普通按钮，因此选C。13.在JavaScript中，下列不属于异步编程实现方式的是？A.回调函数B.PromiseC.async/awaitD.for循环答案：D解析：for循环是同步迭代语句，按照顺序依次执行，不会异步执行，不是异步编程实现方式；回调函数、Promise、async/await都是JavaScript常用的异步编程方案，用于解决异步IO、网络请求等操作的阻塞问题，因此选D。14.以下CSS属性中，哪个可以用于实现元素整体透明效果？A.opacityB.overflowC.visibilityD.display答案：A解析：opacity属性设置元素的整体透明度，取值范围为0~1，0为完全透明，1为完全不透明，父元素设置opacity后所有子元素都会继承透明度；overflow用于处理溢出内容的显示方式；visibility:hidden是隐藏元素但保留元素占位；display:none是隐藏元素不保留占位，因此选A。15.下列关于DOM的描述，错误的是？A.DOM是文档对象模型，是HTML和XML文档的编程接口B.DOM把文档解析为一系列节点组成的树型结构C.document.getElementById()是DOM中获取元素的原生方法D.DOM节点只能读取不能修改答案：D解析：DOM定义了访问和操作HTML文档的标准方法，允许开发者对DOM节点进行增删改查操作，可以修改节点的内容、属性、样式，动态更新页面，因此D描述错误，选D。多项选择题1.以下属于HTML5新增特性的有？A.语义化标签B.本地存储localStorageC.Canvas绘图D.表单新增input类型（如email、date）答案：ABCD解析：以上四个选项都是HTML5推出后新增的核心特性，除此之外HTML5还新增了地理定位、`<video>`/`<audio>`原生视频音频标签等，因此全选。2.以下属于JavaScript基本数据类型的有？A.NumberB.StringC.UndefinedD.Object答案：ABC解析：JavaScript中，基本数据类型包括Number、String、Boolean、Undefined、Null、Symbol、BigInt共7种，Object属于引用数据类型，不属于基本数据类型，因此D不选，选ABC。3.CSS中，能够让元素脱离正常文档流的定位方式有？A.position:staticB.position:relativeC.position:absoluteD.position:fixed答案：CD解析：static是默认定位，遵循正常文档流，不脱离文档流；relative相对定位，相对于自身原位置偏移，保留原本在文档流中占据的空间，不脱离文档流；absolute绝对定位和fixed固定定位都会脱离正常文档流，原本占据的空间会被其他元素填充，因此选CD。4.以下关于Cookie、localStorage、sessionStorage的区别，描述正确的有？A.Cookie会随每次HTTP请求自动发送到服务器，localStorage和sessionStorage不会自动发送B.localStorage存储的数据永久存在，除非用户手动清除或代码清除，sessionStorage关闭浏览器标签页后就会清除C.Cookie的存储容量远小于localStorageD.三者都只能存储同源网站下的本地数据答案：ABCD解析：四种描述都符合三种存储方式的特性：Cookie最早用于服务端识别用户会话，因此每次请求都会携带，容量一般限制在4KB以内；localStorage和sessionStorage是HTML5新增的本地存储方案，容量一般可达5MB以上，不会自动随请求发送，localStorage是持久化存储，sessionStorage是会话级存储，关闭标签页即清除，三者都遵循同源策略，只能访问同源存储的数据，因此全选。5.以下关于flex布局的描述，正确的有？A.给父容器设置`display:flex`即可开启弹性布局B.`flex-direction`属性用于设置弹性布局主轴的方向C.`justify-content`属性用于设置主轴方向上元素的对齐方式D.`align-items`属性用于设置交叉轴方向上元素的对齐方式答案：ABCD解析：以上描述都符合flex布局的规则，flex布局由父容器和子元素配合，父容器负责设置布局方向、对齐方式等规则，子元素负责控制自身的占比、顺序等，因此全选。填空题1.HTML5中，用于定义页面导航链接区块的语义化标签是____。答案：`<nav>`解析：nav是HTML5新增的语义化标签，专门用于定义页面的导航区块，符合语义化开发要求。2.CSS中，____属性用于修改盒子模型的计算规则，将padding和border的宽度包含在设置的width之内。答案：box-sizing解析：设置`box-sizing:border-box`后，元素设置的width就包含了内容区、padding和border的总宽度，不需要开发者手动计算，简化了响应式布局的开发流程。3.JavaScript中，关键字____用于声明块级作用域的变量，同一作用域下不能重复声明。答案：let（const也符合要求）解析：ES6规范新增了let和const关键字，二者声明的变量都拥有块级作用域，仅在当前代码块中有效，不允许同一作用域重复声明，不存在var的变量提升问题；var声明的变量为函数级作用域，存在变量提升，可重复声明。4.HTTP协议默认的端口号是____，HTTPS协议默认端口号是443。答案：80解析：HTTP是超文本传输协议，默认使用80端口；HTTPS是基于SSL/TLS加密的超文本传输协议，默认使用443端口。5.JavaScript数组中，____方法会创建并返回一个新数组，结果是原数组每个元素经过指定回调处理后的结果，不会修改原数组。答案：map解析：map是数组的迭代方法，适合对原数组做统一转换，不改变原数组，返回新数组；forEach方法仅遍历数组，没有返回值，注意二者的区别。6.CSS中，____伪类选择器用于匹配鼠标悬停在其上的元素，常用于实现交互样式修改。答案：:hover解析：:hover是最常用的交互类伪类选择器，可以实现按钮悬停变色、下拉菜单展示等效果。7.DOM中，____方法用于根据标签名创建一个新的元素节点。答案：document.createElement()解析：原生DOM提供`document.createElement(tagName)`方法，传入标签名称即可创建新的元素节点，添加到文档后即可渲染显示。8.CSS中，实现响应式布局，根据视口尺寸应用不同样式规则的关键字是____。答案：@media解析：CSS3提供的@media媒体查询规则，可以根据设备的视口宽度、设备类型、分辨率等特性应用不同的CSS规则，是响应式布局的核心技术。综合应用题阅读下列代码，按要求补全空缺并回答问题：某开发者需要实现一个点击切换的轮播图效果，核心代码如下，请补全空缺并回答后续问题。HTML部分：```html<divclass="banner"><divclass="img-box"><imgsrc="img1.jpg"id="mainImg"①><!--要求设置图片的替代描述属性--></div><divclass="btn-box"><buttonid="prevBtn">上一张</button><buttonid="nextBtn">下一张</button></div></div>```CSS部分：```css.img-boximg{width:800px;/*去掉图片底部默认的空白缝隙*/②:block;}```JavaScript部分：```javascriptconstimgList=["img1.jpg","img2.jpg","img3.jpg","img4.jpg"];constmainImg=document.getElementById("mainImg");constprevBtn=document.getElementById("prevBtn");constnextBtn=document.getElementById("nextBtn");letcurrentIndex=0;//切换下一张functionnext(){③;//修改当前索引if(currentIndex>=imgList.length){currentIndex=0;}mainImg.src=imgList[currentIndex];}//切换上一张functionprev(){currentIndex--;if(④){//判断是否需要循环到最后一张currentIndex=imgList.length-1;}mainImg.src=imgList[currentIndex];}//绑定点击事件⑤.addEventListener('click',next);prevBtn.addEventListener('click',prev);```问题1：补全代码中①~⑤的空缺答案：①`alt="轮播图"`（格式正确，属性为alt即可，描述内容合理即可）解析：img标签的alt属性用于图片加载失败时显示替代文本，同时提升可访问性，符合题目要求。②`display`解析：图片默认是行内块元素，底部会默认留有3px左右的空白缝隙，设置`display:block`即可消除该空隙。③`currentIndex++`（或`currentIndex=currentIndex+1`，写法正确即可）解析：切换下一张需要将当前索引自增，才能读取数组中下一张图片的地址。④`currentIndex<0`解析：当当前索引小于0时，说明已经在第一张，点击上一张需要循环切换到最后一张图片，因此判断条件为`currentIndex<0`。⑤`nextBtn`解析：需要给下一张按钮绑定点击事件，之前获取的下一张按钮DOM对象为nextBtn，因此填入nextBtn。问题2：如果要实现自动轮播，每3秒自动切换下一张，请写出开启自动轮播和停止自动轮播的核心代码。答案：开启自动轮播核心代码：```javascript//3秒=3000毫秒，每3秒调用一次next切换函数letautoTimer=setInterval(next,3000);```停止自动轮播核心代码：```javascriptclearInterval(autoTimer);```解析：JavaScript中`setInterval`方法可以实现周期性调用函数，返回值为定时器的编号，传入`clearInterval`即可停止定时器，实现停止自动轮播。简答题1.请简述CSS高度塌陷的产生原因，以及常用的解决方法。答案：高度