Web前端上机期末考试试题（含详细答案）

Web前端上机期末考试试题（含详细答案）考试说明：1.本试卷满分100分，考试时间90分钟，上机闭卷完成；2.考试环境：VSCode/HBuilderX+Chrome浏览器；3.所有代码需手写完成，保证可正常运行、无报错，页面效果与题目要求一致；4.答题结束后保存完整HTML、CSS、JS文件，按要求提交。一、单项选择题（共10题，每题3分，共30分）1.以下哪个标签是HTML5新增的语义化结构标签？（）A.<div>  B.<span>  C.<article>  D.<font>2.CSS中，设置元素圆角的属性是？（）A.border-shadow  B.border-radius  C.border-style  D.border-outline3.下列关于HTML表单标签说法正确的是？（）A.<input>标签必须有闭合标签B.type="password"为密码输入框，输入内容会隐藏C.type="checkbox"为单选按钮D.form表单不需要action属性即可提交数据4.JavaScript中，以下哪个变量声明方式存在变量提升且无块级作用域？（）A.let  B.const  C.var  D.import5.CSS选择器中，优先级最高的是？（）A.类选择器  B.标签选择器  C.ID选择器  D.通配符选择器6.以下哪种方式可以实现CSS内部样式表？（）A.在标签内写style属性  B.在<head>中写<style>标签C.引入外部.css文件  D.在JS中设置样式7.JavaScript中，console.log(typeofnull)的输出结果是？（）A.null  B.undefined  C.object  D.number8.想要让块级元素水平居中，标准CSS写法是？（）A.text-align:center;  B.margin:0auto;  C.float:center;  D.position:center;9.下列不属于JavaScript数据类型的是？（）A.string  B.boolean  C.float  D.undefined10.HTML中，超链接标签的target属性取值_blank表示？（）A.在当前页面打开链接  B.在新窗口打开链接C.在父窗口打开链接  D.禁止打开链接二、填空题（共5题，每题2分，共10分）1.HTML中，________标签用于定义网页主体内容，所有可见页面内容均写在该标签内。2.CSS盒子模型由内容区、________、边框、外边距四部分组成。3.JavaScript中，________方法可以获取页面中指定ID的元素。4.实现网页自适应适配移动端，需要在头部添加________视口标签。5.JS中，________语句可以终止当前循环，跳出循环体。三、简答题（共2题，每题5分，共10分）1.简述行内元素和块级元素的核心区别，各列举3个常用标签。2.简述JS中==和===的区别。四、上机实操编程题（共3题，共50分）题目1：基础静态页面搭建（15分）需求：编写完整HTML页面，实现以下效果：1.页面标题为“我的个人主页”；2.页面包含一级标题（内容：欢迎来到我的主页）、一段简介文字、一个无序列表（爱好：读书、运动、编程）；3.引入内部CSS，设置页面整体字体为微软雅黑，标题文字居中、红色，列表文字大小14px；4.页面代码规范，缩进整齐，无语法错误。题目2：CSS布局实操（15分）需求：基于题目1页面，新增CSS样式，实现以下布局效果：1.定义一个盒子容器，宽度600px，高度300px，灰色背景，10px圆角；2.容器整体页面水平居中，设置20px内边距；3.鼠标悬浮在容器上时，背景色变为浅蓝色，添加0.3秒过渡动画；4.列表取消默认小圆点，行高设置为2倍。题目3：JavaScript交互效果（20分）需求：在上述页面基础上，添加JS代码，实现两个交互功能：1.页面加载完成后，弹出提示框，显示“页面加载成功！”；2.新增一个按钮（文字：点击修改标题），点击按钮后，页面一级标题文字变为“前端上机考试完成”，字体颜色变为绿色；3.代码书写规范，函数封装合理，交互无报错。参考答案及详细解析一、单项选择题答案及解析1.答案：C解析：<article>是HTML5新增语义化标签，用于定义文章、独立内容块；<div>、<span>为传统通用标签，<font>为HTML废弃标签。2.答案：B解析：border-radius专门用于设置元素圆角；border-shadow为阴影属性，border-style为边框样式，border-outline为外轮廓属性。3.答案：B解析：<input>是单标签无需闭合；type="checkbox"是复选框，单选按钮为type="radio"；form表单必须设置action属性指定提交地址。4.答案：C解析：var声明的变量存在变量提升，无块级作用域；let、const具备块级作用域，无变量提升。5.答案：C解析：CSS选择器优先级排序：ID选择器>类选择器>标签选择器>通配符选择器。6.答案：B解析：内部样式表是在<head>标签内通过<style>标签书写CSS；标签内style为行内样式，外部css文件为外部样式表。7.答案：C解析：JS中存在经典bug，typeofnull的返回值为object，null属于空对象类型。8.答案：B解析：margin:0auto;是块级元素水平居中的标准写法；text-align:center仅用于文本、行内元素居中。9.答案：C解析：JS基本数据类型包含string、number、boolean、undefined、null、symbol，无float类型，小数属于number类型。10.答案：B解析：_blank新窗口打开；_self当前窗口打开；_parent父窗口打开。二、填空题答案1.<body>2.内边距（padding）3.getElementById()4.<metaname="viewport"content="width=device-width,initial-scale=1.0">5.break三、简答题答案1.行内元素与块级元素区别及常用标签核心区别：①块级元素独占一行，默认宽度占满父容器，可设置宽、高、内外边距；②行内元素不独占一行，同行并排显示，宽高由内容撑开，无法直接设置宽高，上下边距不生效。常用块级标签：<div>、<p>、<h1>-<h6>、<ul>、<li>常用行内标签：<span>、<a>、<b>、<i>、<input>2.JS中==和===的区别①==是宽松相等比较，比较时会自动进行隐式类型转换，仅判断数值是否相等，不判断数据类型；②===是严格相等比较，不会进行类型转换，必须数值和数据类型完全一致才会返回true；③日常开发中优先使用===，避免隐式转换带来的逻辑漏洞。四、上机实操题完整参考答案代码可直接复制运行，完全满足题目所有需求，代码规范、功能完整html

<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<!--移动端视口适配-->

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<title>我的个人主页</title>

<style>

/*全局样式*/

body{

font-family:"微软雅黑";

}

/*标题样式*/

h1{

text-align:center;

color:red;

}

/*列表样式*/

ul{

font-size:14px;

/*取消默认小圆点*/

list-style:none;

/*设置行高*/

line-height:2;

}

/*容器盒子样式*/

.box{

width:600px;

height:300px;

background-color:#ccc;

border-radius:10px;

/*水平居中*/

margin:0auto;

/*内边距*/

padding:20px;

/*过渡动画*/

transition:all0.3s;

}

/*鼠标悬浮效果*/

.box:hover{

background-color:#def3ff;

}

/*按钮样式优化*/

button{

display:block;

margin:20pxauto;

padding:6px15px;

cursor:pointer;

}

</style>

</head>

<body>

<divclass="box">

<h1id="title">欢迎来到我的主页</h1>

<p>大家好，这是我的个人前端练习页面，用于完成上机考试实操任务。</p>

<h3>我的爱好</h3>

<ul>

<li>读书</li>

<li>运动</li>

<li>编程</li>

</ul>

</div>

<!--交互按钮-->

<buttonid="btn">点击修改标题</button>

<script>

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

window.onload=function(){

alert("页面加载成功！");

}

//获取元素

vartitle=document.getElementById("title");

varbtn=document.getElementById("btn");

//按钮点击事件

btn.onclick=function(){

//修改标题文字和颜色

title.innerText="前端上机考试完成";

title.style.color="green";