Web前端开发期末考试题（含详细答案）

Web前端开发期末考试题（含详细答案）考试说明：1.本试卷满分100分，考试时间90分钟；2.考试题型包含选择题、判断题、填空题、简答题、编程题；3.答题规范：简答题条理清晰，编程题代码完整、可运行。一、单项选择题（每题2分，共20分）1.HTML中，用于定义网页文档主体内容的标签是（）A.<head>B.<body>C.<html>D.<title>2.以下不属于CSS盒子模型组成部分的是（）A.contentB.floatC.paddingD.border3.在CSS中，设置元素文本水平居中的属性是（）A.text-align:centerB.vertical-align:centerC.align:centerD.font-align:center4.JavaScript中，以下哪个关键字用于声明常量（）A.varB.letC.constD.static5.下列选择器中，优先级最高的是（）A.类选择器B.标签选择器C.ID选择器D.通配符选择器6.HTML5中新增的用于播放视频的标签是（）A.<media>B.<video>C.<movie>D.<audio>7.JavaScript中，获取页面中ID为box的元素的正确代码是（）A.document.getElementById(box)B.document.getElementById('box')C.document.getElementsById('box')D.document.querySelector(box)8.CSS中，display:none和visibility:hidden的区别正确的是（）A.两者无区别B.display:none保留占位，visibility:hidden不保留占位C.display:none不保留占位，visibility:hidden保留占位D.都保留占位9.以下不属于JavaScript数据类型的是（）A.StringB.NumberC.FloatD.Boolean10.实现网页跳转、页面重定向的JS方法是（）A.location.hrefB.window.alertC.document.writeD.console.log二、判断题（每题1分，共10分，对的打√，错的打×）1.HTML标签不区分大小写，<DIV>和<div>效果一致。（）2.CSS样式中，margin是内边距，padding是外边距。（）3.JavaScript是一门弱类型、解释型脚本语言。（）4.ID选择器在页面中可以重复使用。（）5.HTML5新增了语义化标签，如<header>、<footer>、<nav>。（）6.JS中var声明的变量存在变量提升，let和const不存在。（）7.CSS浮动（float）会让元素脱离标准文档流。（）8.console.log()可以在网页页面中输出内容。（）9.超链接标签<a>中，target="_blank"表示在新窗口打开页面。（）10.JS中null和undefined含义完全相同。（）三、填空题（每空2分，共20分）1.网页三层架构中，HTML负责________、CSS负责________、JavaScript负责________。2.CSS三大引入方式分别是：行内样式、________、________。3.JS中定义函数的两种方式：函数声明、________。4.清除CSS浮动的常用方法有：________、________（写出两种即可）。5.HTML中，________标签可以实现换行，________标签可以实现水平分隔线。四、简答题（每题6分，共30分）1.简述HTML语义化标签的作用和优点。2.简述CSS盒子模型的具体构成，并说明标准盒模型和怪异盒模型的区别。3.简述var、let、const三个变量声明关键字的区别。4.简述JS中数组常用的三个方法及各自作用。5.简述什么是文档流，以及浮动脱离文档流带来的影响和解决办法。五、编程题（每题10分，共20分）1.编写代码，实现一个简单页面：包含标题、一段文字、一个按钮，点击按钮弹出“前端考试成功”提示框。（HTML+JS）2.编写CSS样式，实现一个宽200px、高200px的正方形，实现：红色背景、圆角10px、黑色1px实线边框、水平居中、鼠标悬浮时背景变为蓝色。参考答案及详细解析一、单项选择题（20分）1.B解析：<html>是根标签，<head>存放头部信息，<title>设置网页标题，<body>为网页主体内容区域。2.B解析：CSS盒子模型核心为content（内容）、padding（内边距）、border（边框）、margin（外边距），float为浮动属性，不属于盒子模型。3.A解析：text-align专门设置文本水平对齐方式，center为居中；vertical-align用于垂直对齐，无font-align属性。4.C解析：var、let用于声明变量，const用于声明常量，常量赋值后不可修改。5.C解析：选择器优先级：ID选择器>类选择器>标签选择器>通配符选择器。6.B解析：HTML5新增<video>视频标签、<audio>音频标签，无<media>、<movie>标签。7.B解析：getElementById参数为字符串，需加引号；getElementsById为错误写法，querySelector参数也需字符串格式。8.C解析：display:none完全隐藏元素，不占页面空间；visibility:hidden仅隐藏视觉效果，保留原有占位空间。9.C解析：JS基础数据类型包含String、Number、Boolean、Null、Undefined、Symbol，无Float类型，浮点数值属于Number类型。10.A解析：location.href可修改页面地址，实现跳转；alert弹出提示框，document.write页面输出，console.log控制台输出。二、判断题（10分）1.√解析：HTML语法宽松，标签不区分大小写，业界统一推荐小写标签。2.×解析：margin是元素与外部的外边距，padding是元素内部的内边距。3.√解析：JS无需编译直接运行，变量无固定类型，属于弱类型解释型语言。4.×解析：ID具有唯一性，同一页面中ID值不可重复，类名class可重复使用。5.√解析：HTML5新增大量语义化标签，优化页面结构、提升可读性和搜索引擎适配性。6.√解析：var存在变量提升，存在函数作用域；let、const存在块级作用域，无变量提升。7.√解析：元素设置float后脱离标准文档流，不再占据常规页面空间，会导致父元素高度塌陷。8.×解析：console.log()仅在浏览器控制台输出内容，不会展示在网页页面中。9.√解析：target="_self"当前窗口打开，target="_blank"新窗口打开。10.×解析：undefined表示变量未定义、未赋值；null表示空对象，二者数据类型和含义不同。三、填空题（20分）1.结构、样式、行为2.内部样式、外部样式（顺序可互换）3.函数表达式4.伪类清除浮动、父元素设置overflow:hidden（或新增空标签清除浮动，任意两种即可）5.<br/>、<hr/>四、简答题（30分）1.简述HTML语义化标签的作用和优点（6分）答：HTML语义化标签是指带有明确语义、能描述标签内容用途的标签，如<header>、<nav>、<main>、<footer>等，替代了传统无意义的<div>布局。优点：①结构清晰，代码可读性强，便于团队开发和后期维护；②有利于搜索引擎抓取页面内容，提升网页SEO优化效果；③适配浏览器辅助设备，方便残障人士使用读屏工具浏览网页；④页面结构层级明确，代码规范性更高。2.简述CSS盒子模型的具体构成，并说明标准盒模型和怪异盒模型的区别（6分）答：盒子模型由四部分构成：内容区content、内边距padding、边框border、外边距margin。核心区别：尺寸计算规则不同。①标准盒模型（box-sizing:content-box）：元素整体宽度=内容宽度+padding+border+margin，设置的宽高仅作用于内容区；②怪异盒模型/IE盒模型（box-sizing:border-box）：元素整体宽度=设置的宽度，padding和border会向内压缩内容区，不会改变元素整体尺寸。3.简述var、let、const三个变量声明关键字的区别（6分）答：①作用域：var为函数作用域，let、const为块级作用域，仅在当前代码块生效；②变量提升：var存在变量提升，可先使用后声明；let、const无变量提升，必须先声明后使用；③重复声明：var允许重复声明变量；let、const禁止同一作用域内重复声明；④赋值特性：var、let声明的是变量，值可修改；const声明常量，声明时必须赋值，且值不可修改（引用类型可修改内部属性）。4.简述JS中数组常用的三个方法及各自作用（6分）答：①push()：向数组末尾添加一个或多个元素，返回新数组长度，会修改原数组；②pop()：删除数组最后一个元素，返回被删除的元素，会修改原数组；③splice()：可实现数组的增、删、改操作，通过参数指定起始位置、删除个数、新增元素，灵活修改原数组；（补充：也可写shift()头部删除、unshift()头部添加、forEach()遍历数组等常用方法）5.简述什么是文档流，以及浮动脱离文档流带来的影响和解决办法（6分）答：文档流是网页元素默认的排列规则，块级元素从上到下垂直排列，行内元素从左到右水平排列，是页面默认的布局状态。浮动脱离文档流影响：元素设置float后悬浮于普通文档流之上，不占据页面空间，会导致父元素高度塌陷，后续正常文档流元素会向上占位，造成页面布局错乱。解决办法：①给父元素设置overflow:hidden；②使用伪类:after清除浮动；③在浮动元素末尾添加空标签清除浮动。五、编程题（20分）1.弹窗交互页面代码（10分）html

<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<title>前端考试页面</title>

</head>

<body>

<h2>Web前端期末考试</h2>

<p>点击下方按钮完成交互测试</p>

<buttonid="btn">点击验证</button>

<script>

//获取按钮元素

letbtn=document.getElementById('btn');

//绑定点击事件

btn.onclick=function(){

alert('前端考试成功');

}

</script>

</body>

</html>评分标准：结构完整（4分）、标签规范（2分）、JS获取元素正确（2分）、点击弹窗功能实现（2分）2.悬浮变色方块CSS代码（10分）html

<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<title>CSS样式方块</title>

<style>

.box{

width:200px;

height:200px;

background-color:red;/*红色背景*/

border:1pxsolid#000;/*黑色实线边框*/

border-radius:10px;/*圆角*/

margin:0auto;/*水平居中*/