二级Web程序设计样题及参考答案

二级Web程序设计样题及参考答案选择题（每题1.5分，共30分）下列叙述中正确的是（）A.线性表的链式存储结构与顺序存储结构都需要连续的存储空间B.栈是“先进先出”的线性表C.队列是“先进后出”的线性表D.双向链表有两个指针域某二叉树的前序遍历序列为ABDECFG，中序遍历序列为DBEAFCG，则后序遍历序列为（）A.DEBFGCAB.DAEBCGFC.ABCDEFGD.DEFCGAB下列排序方法中，最坏情况下时间复杂度最低的是（）A.冒泡排序B.快速排序C.希尔排序D.堆排序结构化程序设计的基本原则不包括（）A.多态性B.自顶向下C.模块化D.逐步求精软件需求分析阶段的工作不包括（）A.需求评审B.需求获取C.编写概要设计说明书D.需求分析与建模数据库管理系统能实现对数据库中数据的查询、插入、修改和删除操作，这种功能称为（）A.数据定义功能B.数据管理功能C.数据操纵功能D.数据控制功能实体-联系模型中，实体与实体之间的联系不可能是（）A.一对一B.多对多C.一对多D.一对零软件测试的目的是（）A.发现程序中的错误B.改正程序中的错误C.评估软件可靠性D.证明软件正确在关系数据库中，能唯一标识一个元组的属性或属性组称为（）A.关键字B.数据项C.关系D.元组数据流图中，带箭头的线段表示的是（）A.控制流B.数据流C.模块调用D.事件流在HTML中，以下标签属于块级元素的是（）A.B.C.D.以下CSS选择器优先级最高的是（）A.内联样式B.ID选择器C.类选择器D.标签选择器在JavaScript中，下列变量命名合法的是（）A.123varB.var_123C.varD.var-123HTML5新增的语义化标签不包括（）A.B.C.D.若要在HTML页面中引入外部CSS样式文件，正确的标签是（）A.B.

综合应用题（共28分）

考生文件夹下存有test3.html、test3.css、test3.js三个文件，需要实现一个可交互的响应式商品展示卡片布局，请按照要求补充缺失代码，实现对应功能：

(1)在<!--1-->注释位置，补充viewport元标签，适配移动端显示，要求设置视口宽度等于设备宽度，初始缩放比例为1，最大缩放比例为1，禁止用户手动缩放页面。

(2)在CSS/*1*/注释位置，补充grid布局代码，要求在屏幕宽度大于等于1000px时，商品列表展示为3列等宽网格，行间距为25px，列间距为20px。

(3)在CSS/*2*/注释位置，补充媒体查询断点，要求屏幕宽度在769px到999px之间时，商品列表展示为2列等宽网格，补全断点代码。

(4)在JavaScript//1注释位置，补充代码，实现点击商品卡片切换选中状态的功能：如果商品当前没有选中类`selected`，则添加该类；如果已经有该类，则移除该类，选中样式已经预设完成，只需实现切换逻辑即可。

test3.html初始代码：<!DOCTYPEhtml><metacharset="UTF-8">

<!--1补充viewport标签-->

_________________________

<!--1结束-->

<title>响应式商品展示</title>

<linkrel="stylesheet"href="test3.css"><divclass="container">

<h2>商品列表</h2>

<divclass="goods-list"id="goodsList">

<divclass="goods-item">商品1</div>

<divclass="goods-item">商品2</div>

<divclass="goods-item">商品3</div>

<divclass="goods-item">商品4</div>

<divclass="goods-item">商品5</div>

<divclass="goods-item">商品6</div>

</div>

</div>

<scriptsrc="test3.js"></script>

test3.css初始代码：{margin:0;padding:0;box-sizing:border-box;}.container{width:90\%;

margin:30pxauto;}h2{text-align:center;

margin-bottom:30px;

color:#333;}.goods-item{height:200px;

border:1pxsolid#ddd;

border-radius:8px;

display:flex;

align-items:center;

justify-content:center;

font-size:18px;

cursor:pointer;

transition:all0.3s;

background:#fff;}.goods-item.selected{background-color:#f0f8ff;

border:2pxsolid#007bff;

color:#007bff;}/*大屏幕布局>=1000px*/@mediascreenand(min-width:1000px){.goods-list{

/*1补充grid布局代码*/

_________________________

_________________________

_________________________

/*1结束*/

}}/*中等屏幕布局769px~999px*/@mediascreenand(min-width:769px)and/*2补充断点*/_________________________{.goods-list{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

}}/*小屏幕布局<=768px*/@mediascreenand(max-width:768px){.goods-list{

display:grid;

grid-template-columns:1fr;

gap:15px;

}}

test3.js初始代码：window.addEventListener(‘load’,function(){constgoodsItems=document.querySelectorAll('.goods-item');

goodsItems.forEach(function(item){

item.addEventListener('click',function(){

//1补充类切换代码

_________________________

//1结束

})

})})

---

参考答案

选择题参考答案（每题1.5分，共30分）

1.D解析：线性表的顺序存储结构需要连续存储空间，链式存储结构通过指针连接节点，不需要连续存储空间，A选项错误；栈的特点是先进后出，队列的特点是先进先出，B、C选项错误；双向链表的每个节点包含两个指针域，分别指向前驱节点和后继节点，D选项正确。

2.A解析：二叉树遍历规则：前序遍历为根节点→左子树→右子树，中序遍历为左子树→根节点→右子树，后序遍历为左子树→右子树→根节点。根据给定的前序和中序遍历序列，可以还原出二叉树结构：根节点为A，左子树包含节点D、B、E，右子树包含F、C、G；左子树的根为B，左节点D、右节点E；右子树的根为C，左节点F、右节点G。按照后序遍历规则得到的序列为DEBFGCA，因此A选项正确。

3.D解析：冒泡排序、快速排序最坏情况下时间复杂度为O(n²)，希尔排序最坏时间复杂度为O(n^1.3)~O(n²)，堆排序最坏时间复杂度始终为O(nlogn)，是所有选项中时间复杂度最低的，因此D选项正确。

4.A解析：结构化程序设计的核心原则包括自顶向下、逐步求精、模块化、限制使用goto语句，多态性是面向对象程序设计的特性，不属于结构化程序设计的基本原则，因此A选项正确。

5.C解析：软件需求分析阶段的工作内容包括需求获取、需求分析与建模、编写需求规格说明书、需求评审，编写概要设计说明书是软件设计阶段的工作，不属于需求分析阶段，因此C选项正确。

6.C解析：数据库管理系统的数据定义功能用于定义数据库结构、表结构等，数据操纵功能用于实现数据的查询、插入、修改、删除操作，数据控制功能用于权限管理、事务控制，因此C选项正确。

7.D解析：实体-联系模型中，实体之间的联系分为一对一、一对多、多对多三种基础类型，不存在一对零的联系类型，因此D选项正确。

8.A解析：软件测试的核心目的是发现程序中的错误，改正错误是程序调试的目的，因此A选项正确。

9.A解析：关系数据库中，能够唯一标识一个元组的属性或属性组称为关键字（主键），因此A选项正确。

10.B解析：数据流图中带箭头的线段表示数据流，程序流程图中带箭头的线段表示控制流，因此B选项正确。

11.C解析：块级元素默认占据整行，可以设置宽高，常见块级元素包括div、h1-h6、p、ul等；span、a、img属于行内元素，因此C选项正确。

12.A解析：CSS选择器优先级从高到低排序为：内联样式>ID选择器>类选择器/伪类选择器/属性选择器>标签选择器>通配符选择器，因此优先级最高的是内联样式，A选项正确。

13.B解析：JavaScript变量命名规则：只能以字母、下划线、$开头，不能以数字开头，不能包含特殊字符，不能使用保留字和关键字。选项A以数字开头不合法，选项C是关键字不合法，选项D包含横杠不合法，选项B符合规则，因此B选项正确。

14.C解析：div是HTML原生标签，不属于HTML5新增的语义化标签，HTML5新增的语义化标签包括header、footer、section、article、nav、aside等，因此C选项正确。

15.C解析：<link>标签用于引入外部CSS样式文件，<style>用于编写内部CSS，<script>用于引入或编写JavaScript代码，因此C选项正确。

16.D解析：console.log()用于在浏览器控制台输出内容，alert()用于通过弹出框输出内容，document.write()用于直接在HTML页面中写入内容，三种方法都可以实现输出，因此D选项正确。

17.B解析：flex布局中，justify-content属性用于设置项目在主轴方向的对齐方式，align-items属性用于设置项目在交叉轴方向的对齐方式，flex-direction属性用于设置主轴方向，align-content用于设置多根轴线的对齐方式，因此B选项正确。

18.B解析：GET请求将参数拼接在URL中，长度受浏览器和服务器限制，一般不超过2KB，POST请求将参数放在请求体中，长度无限制；GET的安全性低于POST，传输速度快于POST，因此B选项正确。

19.C解析：document对象是BOM的核心对象之一，同时也是DOM模型的根节点，既属于BOM也属于DOM，因此C选项描述错误，符合题意。

20.B解析：event.preventDefault()用于阻止元素的默认事件，event.stopPropagation()是标准DOM中阻止事件冒泡的方法，因此B选项正确。

基本操作题参考答案（共18分，每小问4.5分）

(1)<!--1-->处补充代码：`<html>`

(2)<!--2-->处补充代码：`<metacharset="UTF-8">`

(3)/*1*/处补充CSS代码：

```css

margin:0;

padding:0;

font-size:14px;

font-family:"微软雅黑",sans-serif;/*2*/处补充CSS代码：

width:1200px;

margin:0auto;

overflow:hidden;评分说明：核心代码正确，语法不影响功能实现即可得分，属性顺序不影响得分。简单应用题参考答案（共24分，每小问6分）//1处补充代码：document.getElementById('username').value//2处判断条件：usernameVal.trim()===''（写!usernameVal.trim()也可得分）//3处补充正则表达式：/^\w{6,16}$///4处判断条件：pwdVal.trim()!==repwdVal.tri