2026年《前端Web开发》软件技术期末解析试题

2026年《前端Web开发》软件技术期末解析试题一、单项选择题（每题2分，共30分）1.下列HTML5语义化标签中，用于定义页面导航区域的是？A.<header>B.<nav>C.<aside>D.<footer>答案：B解析：<header>定义页眉，<aside>定义侧边栏，<footer>定义页脚，<nav>专门用于包裹导航链接区域。2.在CSS盒模型中，padding属性的作用是？A.设置元素外边距B.设置内容区与边框之间的内边距C.设置元素边框样式D.设置元素背景颜色答案：B解析：外边距对应margin，内边距对应padding，两者是盒模型中的一对易混概念。3.在Flex布局中，用于设置主轴方向的属性是？A.flex-wrapB.justify-contentC.flex-directionD.align-items答案：C解析：flex-direction决定主轴方向（row/column）；justify-content控制主轴对齐，align-items控制交叉轴对齐。4.下列哪一项不属于JavaScript的基本数据类型？A.stringB.numberC.booleanD.Array答案：D解析：Array属于引用类型（对象）。JavaScript基本数据类型包括string、number、boolean、null、undefined、symbol、bigint。5.在JavaScript中，typeofnull的返回结果是？A."null"B."undefined"C."object"D."number"答案：C解析：这是JavaScript语言历史遗留问题，null被typeof判断为object，属于高频考点。6.关于let关键字，下列说法正确的是？A.没有块级作用域，可以重复声明B.具有块级作用域，同一作用域内不可重复声明C.声明的变量会自动挂载到window对象上D.与var的作用域规则完全一致答案：B解析：let是ES6新增的声明方式，具备块级作用域且不允许重复声明；var声明的全局变量才会挂载到window。7.下列CSS单位中，相对于根元素<html>字体大小的是？A.emB.remC.pxD.vh答案：B解析：em相对于当前元素字体大小，rem固定相对于根元素，vh相对于视口高度。8.下列方法中，用于将JSON字符串解析为JavaScript对象的是？A.JSON.stringify()B.JSON.parse()C.JSON.toString()D.Object.parse()答案：B解析：JSON.stringify()方向相反，是将对象转换为JSON字符串，二者切勿混淆。9.在HTML中，引入外部样式表的正确写法是？A.<scriptsrc="style.css"></script>B.<linkrel="stylesheet"href="style.css">C.<stylesrc="style.css"></style>D.<csshref="style.css">答案：B解析：外部样式表使用<link>标签引入，外部脚本使用<scriptsrc="">，两者标签不可混用。10.关于box-sizing:border-box，下列说法正确的是？A.元素width只包含内容区宽度B.元素width包含内容区、内边距和边框C.元素width会自动撑满父容器D.元素将无法设置margin答案：B解析：border-box下padding与border被包含在width内；默认的content-box才是width只计算内容区。11.移动端适配中，下列哪个meta标签用于设置视口（viewport）？A.<metacharset="utf-8">B.<metaname="viewport"content="width=device-width,initial-scale=1.0">C.<metahttp-equiv="refresh"content="5">D.<metaname="keywords"content="web">答案：B12.JavaScript中，Atotype.filter()方法返回的是？A.一个新数组，包含所有通过测试的元素B.原数组的引用C.第一个通过测试的元素D.所有未通过测试的元素答案：A解析：filter()不会修改原数组，而是返回新数组；返回第一个通过测试元素的是find()。13.下列选择器中，能够选中id为app的元素的是？A.*appB..appC.#appD.app答案：C解析：#表示id选择器，.表示class选择器。14.HTTP状态码404表示？A.请求成功B.服务器内部错误C.请求的资源未找到D.请求被重定向答案：C解析：200表示请求成功，500表示服务器内部错误，301/302表示重定向。15.在Vue3生命周期中，组件挂载完成后调用的钩子函数是？A.onCreatedB.onMountedC.onUpdatedD.onBeforeUnmount答案：B解析：Vue3组合式API中，onMounted对应组件挂载完成阶段；onUpdated对应响应式数据更新后触发。二、判断题（每题2分，共10分）1.HTML中<span>是块级元素，<div>是行内元素。答案：错误解析：说反了。<div>是块级元素，<span>是行内元素。2.在CSS中，position:fixed的元素相对于浏览器视口进行定位。答案：正确3.在JavaScript中，表达式3==="3"的结果为true。答案：错误解析：===为严格相等运算，比较值的同时比较数据类型，数字3与字符串"3"类型不同，结果为false。4.Flex容器默认主轴方向为水平方向，即从左到右排列。答案：正确解析：默认flex-direction:row，主轴水平、交叉轴垂直。5.Vue中v-if与v-show都能控制元素显示与隐藏，两者的性能消耗完全相同。答案：错误解析：v-if是真正的条件渲染，条件不成立时元素不渲染，切换时开销大；v-show仅切换display属性，元素始终保留在DOM中。频繁切换时应优先使用v-show。三、填空题（每题2分，共10分）1.HTML5中用于绘制图形的元素是<______>。答案：canvas2.CSS3中用于设置元素圆角效果的属性是______。答案：border-radius3.在JavaScript中，声明常量的关键字是______。答案：const4.Flex布局中，flex-wrap属性的默认值是______。答案：nowrap5.Vue3组合式API中，用于定义响应式数据的函数有______和reactive。答案：ref（两个函数写出一个即可）四、简答题（每题5分，共20分）1.简述CSS盒模型的基本组成，并说明标准盒模型与box-sizing:border-box盒模型的区别。答案：盒模型由内容区（content）、内边距（padding）、边框（border）和外边距（margin）四部分组成。标准盒模型（content-box）中，width仅表示内容区宽度，元素实际占用的宽度为width+padding+2.简述DOM事件流包含哪几个阶段，并说明如何阻止事件冒泡。答案：DOM事件流包含三个阶段：捕获阶段（事件从window向下逐层传播至目标元素）、目标阶段（事件到达目标元素）和冒泡阶段（事件从目标元素向上逐层传播至window）。阻止事件冒泡使用event.stopPropagation()方法；若需要阻止浏览器默认行为则调用event.preventDefault()。3.简述localStorage与sessionStorage的异同。答案：两者都是HTML5提供的WebStorage存储方式，以键值对形式存储字符串数据，存储容量约为5MB，且数据不会随HTTP请求发送至服务器。区别在于生命周期：localStorage持久保存在浏览器中，在手动清除前一直有效，关闭浏览器后数据依然保留；sessionStorage仅在当前标签页会话期间有效，关闭标签页后数据即被清除。4.简述Vue3中computed与watch的区别。答案：computed用于根据已有响应式数据派生新值，具有缓存性，只有依赖的响应式数据变化时才会重新计算，使用时像普通值一样被读取；watch用于监听指定响应式数据的变化，在变化时执行副作用逻辑（如异步请求、手动DOM操作），本身不产生返回值。简言之，computed负责「计算新值」，watch负责「监听变化并响应」。五、编程题（每题15分，共30分）1.使用原生JavaScript编写一个简易计数器。要求：•页面包含一个数字显示区域，以及「加一」「减一」「归零」三个按钮•初始数字为0，点击「加一」数字加1，点击「减一」数字减1，点击「归零」数字恢复为0•数字小于0时数字显示为红色，否则显示为黑色请写出完整代码（HTML+CSS+JavaScript）。<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<title>简易计数器</title>

<style>

.container{

width:320px;

margin:80pxauto;

text-align:center;

}

#num{

font-size:48px;

margin-bottom:20px;

}

.red{

color:#f00;

}

button{

margin:06px;

padding:6px16px;

cursor:pointer;

}

</style>

</head>

<body>

<divclass="container">

<divid="num">0</div>

<buttonid="increase">加一</button>

<buttonid="decrease">减一</button>

<buttonid="reset">归零</button>

</div>

<script>

letnum=0;

constnumEl=document.getElementById('num');

constincreaseBtn=document.getElementById('increase');

constdecreaseBtn=document.getElementById('decrease');

constresetBtn=document.getElementById('reset');

functionrender(){

numEl.textContent=num;

if(num<0){

numEl.classList.add('red');

}else{

numEl.classList.remove('red');

}

}

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

num+=1;

render();

});

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

num-=1;

render();

});

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

num=0;

render();

});

</script>

</body>

</html>解析：本题核心考察DOM元素获取、addEventListener事件绑定、textContent修改文本内容以及classList切换样式。评分要点：①HTML结构完整，三个按钮id正确；②三个按钮的事件绑定与数字运算逻辑正确；③数字小于0时正确添加红色样式类，否则移除。2.使用Vue3组合式API实现一个待办事项列表组件。要求：•包含输入框与「添加」按钮，可将输入内容添加到待办列表•每条待办事项右侧提供「删除」按钮，点击可删除对应事项•使用ref定义待办列表与输入框数据•输入内容为空时点击「添加」不生效请写出完整的.vue组件代码。<template>

<divclass="todo">

<h3>待办事项</h3>

<divclass="input-row">

<input

v-model="newTodo"

placeholder="请输入待办事项"

@keyup.enter="addTodo"

/>

<button@click="addTodo">添加</button>

</div>

<ulclass="todo-list">

<liv-for="(item,index)intodos":key="item.id">

<span>{{item.content}}</span>

<button@click="removeTodo(index)">删除</button>

</li>

</ul>

<pv-if="todos.length===0"class="empty-tip">暂无待办事项</p>

</div>

</template>

<scriptsetup>

import{ref}from'vue';

constnewTodo=ref('');

consttodos=ref([]);

functionaddTodo(){

constcontent=newTodo.value.trim();

if(content===''){

return;

}

todos.value.push({

id:Date.now(),

content:content

});

newTodo.value='';

}

functionremoveTodo(