Web技术基础期末考试试题及详细答案

Web技术基础期末考试试题及详细答案考试时长：90分钟满分：100分适用专业：计算机相关专业考试说明：本试卷分为选择题、填空题、简答题、代码实操题四个部分，所有答案均写在答题区域内，严禁抄袭。一、单项选择题（每题2分，共20分）1.以下不属于Web前端三层结构的是（）A.结构层HTMLB.样式层CSSC.交互层JavaScriptD.数据层Java2.HTML中，用于定义网页主体内容的标签是（）A.<head>B.<body>C.<html>D.<title>3.以下CSS选择器中，优先级最高的是（）A.类选择器B.ID选择器C.标签选择器D.通配符选择器4.在JavaScript中，以下哪个关键字用于声明常量（）A.varB.letC.constD.static5.HTML5新增的用于播放视频的标签是（）A.<media>B.<video>C.<audio>D.<movie>6.CSS中，设置元素水平居中对齐（块级元素）的正确属性是（）A.text-align:centerB.margin:0autoC.float:centerD.position:center7.以下不属于JavaScript数据类型的是（）A.StringB.NumberC.FloatD.Boolean8.HTML中，超链接标签的target属性值中，用于在新窗口打开页面的是（）A._selfB._blankC._topD._parent9.CSS盒模型中，从内到外的正确顺序是（）A.内容、内边距、边框、外边距B.内边距、内容、边框、外边距C.内容、边框、内边距、外边距D.外边距、边框、内边距、内容10.JavaScript中，console.log(typeofnull)的输出结果是（）A.nullB.undefinedC.objectD.number二、填空题（每空2分，共20分）1.网页的核心三大技术是________、________、JavaScript。2.HTML标签分为块级标签和________标签两类。3.CSS中，________属性可以清除元素浮动带来的布局影响。4.JavaScript中，数组添加末尾元素的方法是________，删除末尾元素的方法是________。5.HTML表单中，________属性用于指定表单数据提交的地址。6.CSS弹性布局的开启属性是display:________。7.JavaScript中，________语句可以终止当前循环。8.实现网页跳转的超链接标签是________。三、简答题（每题6分，共30分）1.简述HTML、CSS、JavaScript三者的作用及分工。2.简述CSS盒模型的组成，以及标准盒模型和怪异盒模型的区别。3.简述JavaScript中var、let、const的区别。4.简述块级元素和行内元素的核心区别，并各列举3个常用标签。5.简述前端页面布局中浮动（float）的作用及常见问题。四、代码实操题（共30分）1.基础页面搭建（10分）：编写完整HTML代码，实现一个包含标题、段落、图片、超链接的简单网页。要求代码规范、结构完整。2.CSS样式美化（10分）：基于第一题的网页，添加CSS样式，实现以下效果：（1）页面整体字体为微软雅黑，字号16px；（2）标题居中、字体加粗、颜色为深蓝色；（3）图片居中显示，设置轻微圆角；（4）超链接默认黑色，鼠标悬浮时变为红色且无下划线。3.JavaScript交互实现（10分）：编写JS代码，实现页面加载完成后，弹出欢迎提示框；点击页面段落文本时，弹出“你点击了文本内容”的提示。参考答案及详细解析一、单项选择题答案及解析1.D解析：Web前端三层为HTML结构、CSS样式、JS交互，Java属于后端开发语言，不属于前端三层。2.B解析：<body>标签承载网页所有可见主体内容，<head>为头部配置，<html>为网页根标签，<title>为网页标题。3.B解析：选择器优先级排序：ID选择器>类选择器>标签选择器>通配符选择器。4.C解析：const用于声明常量，值不可修改；let声明块级变量，var声明函数级变量。5.B解析：HTML5新增<video>视频标签、<audio>音频标签，无<media>、<movie>标签。6.B解析：text-align:center用于行内内容居中；块级元素水平居中需设置margin:0auto。7.C解析：JS基础数据类型包含字符串、数字、布尔、空、未定义、符号，无Float类型，小数统一为Number类型。8.B解析：_blank新窗口打开，_self当前窗口打开，_top顶级窗口打开，_parent父窗口打开。9.A解析：CSS盒模型由内至外依次是内容区、内边距（padding）、边框（border）、外边距（margin）。10.C解析：JS中null的typeof检测结果为object，属于语言设计的历史遗留问题。二、填空题答案1.HTML、CSS2.行内3.clear4.push()、pop()5.action6.flex7.break8.<a>三、简答题详细答案1.HTML、CSS、JavaScript三者的作用及分工三者是Web前端开发的核心基础，分工明确、相互配合：（1）HTML（超文本标记语言）：负责网页结构搭建，相当于网页的骨架，用于定义网页的标题、段落、图片、按钮、表单等所有页面元素，确定页面的基本架构；（2）CSS（层叠样式表）：负责网页样式美化，相当于网页的妆容和服饰，用于设置元素的颜色、字体、大小、边距、布局、动画等视觉效果，让页面美观规整；（3）JavaScript：负责网页交互动态效果，相当于网页的行为大脑，用于实现页面弹窗、点击事件、表单验证、数据更新、动态布局调整等交互功能，让静态页面具备动态响应能力。2.CSS盒模型组成及标准、怪异盒模型区别（1）盒模型组成：所有块级元素都包含四个部分，分别是内容区（content）、内边距（padding）、边框（border）、外边距（margin）。内容区为元素实际展示内容的区域，内边距是内容与边框的间距，边框是元素的边界线条，外边距是元素与其他元素的间距。（2）核心区别：两者的差异在于元素宽度计算方式不同：①标准盒模型（box-sizing:content-box）：元素设置的width/height仅为内容区尺寸，元素整体宽度=width+padding+border+margin；②怪异盒模型（box-sizing:border-box）：元素设置的width/height包含内容区、内边距和边框，元素整体宽度=width+margin，日常开发中更常用怪异盒模型，布局更精准可控。3.JavaScript中var、let、const的区别（1）作用域不同：var是函数级作用域，在整个函数内有效，存在变量提升；let和const是块级作用域，仅在当前大括号{}内有效，不存在变量提升；（2）重复声明：var允许重复声明同一变量；let和const不允许重复声明；（3）值修改：var、let声明的变量值可随意修改；const声明的是常量，值一旦定义不可修改（引用类型数据的内部属性可修改）；（4）初始化：var、let声明变量可不初始化；const声明必须同时初始化赋值。4.块级元素和行内元素核心区别及常用标签核心区别：（1）排列方式：块级元素独占一行，默认从上到下排列；行内元素横向排列，多个元素可在同一行显示；（2）尺寸设置：块级元素可设置宽、高、边距、浮动等所有样式；行内元素无法设置宽高，仅能设置水平方向边距，垂直边距无效；（3）嵌套规则：块级元素可嵌套块级、行内元素；行内元素只能嵌套文本或其他行内元素。常用标签：块级：<div>、<p>、<h1>-<h6>、<ul>、<li>（任选3个即可）；行内：<span>、<a>、<em>、<strong>（任选3个即可）。5.浮动（float）的作用及常见问题（1）作用：浮动用于打破元素默认的文档流布局，让块级元素脱离标准流，实现元素横向排列，是传统网页多列布局的核心方式，支持左浮动、右浮动、无浮动三种状态。（2）常见问题：①高度塌陷：父元素未设置固定高度时，子元素全部浮动会脱离文档流，导致父元素高度变为0，布局错乱；②浮动溢出：浮动元素会超出父元素范围，影响下方正常文档流布局；③相邻元素错位：未清除浮动的相邻元素会被浮动元素挤压，出现排版偏移问题。常用解决方式：设置overflow:hidden、添加空标签清除浮动、使用伪元素清除浮动。四、代码实操题参考答案完整可运行代码（整合三小问）html

<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<title>简单Web页面</title>

<style>

/*全局样式*/

body{

font-family:"微软雅黑";

font-size:16px;

}

/*标题样式*/

h1{

text-align:center;

font-weight:bold;

color:#003366;

}

/*图片样式*/

img{

display:block;

margin:0auto;

border-radius:8px;

}

/*超链接样式*/

a{

color:#000;

text-decoration:none;

}

a:hover{

color:red;

}

</style>

</head>

<body>

<h1>Web技术基础页面</h1>

<pid="text">Web前端开发核心包含HTML结构、CSS样式、JavaScript交互三大模块，是制作精美动态网页的基础。</p>

<imgsrc="https://picsum.photos/400/200"alt="网页配图">

<p>点击查看更多教程：<ahref="#">Web技术学习指南</a></p>

<script>

//页面加载完成弹出欢迎提示

window.onload=function(){

alert("欢迎访问Web技术测试页面！");

}

//点击段落弹出提示

lettext=document.getElementById("text");