HTML+CSS期末考试试题（含详细答案）

HTML+CSS期末考试试题（含详细答案）考试时长：90分钟满分：100分适用对象：前端基础入门学习者考试说明：本试卷分为选择题、填空题、简答题、实操题四个部分，所有答案书写规范、代码格式工整，实操题需保证代码可正常运行。一、单项选择题（每题2分，共20分）1.以下哪个标签是HTML5新增的语义化头部标签？（）A.<head>B.<header>C.<top>D.<section>2.在HTML中，超链接的目标跳转新窗口打开的属性值是？（）A._selfB._blankC._parentD._top3.以下CSS选择器中，优先级最高的是？（）A.类选择器B.标签选择器C.ID选择器D.通配符选择器4.CSS中设置元素文字水平居中的属性是？（）A.text-align:centerB.vertical-align:centerC.align:centerD.float:center5.以下哪个属性可以清除网页浮动带来的布局塌陷问题？（）A.floatB.clearC.overflowD.position6.HTML中，用来定义段落的标签是？（）A.<br>B.<p>C.<div>D.<span>7.CSS盒子模型中，从内到外的正确顺序是？（）A.内容、内边距、边框、外边距B.内容、边框、内边距、外边距C.内边距、内容、边框、外边距D.外边距、边框、内边距、内容8.下列position定位方式中，默认相对于浏览器窗口固定位置，滚动页面不移动的是？（）A.staticB.relativeC.absoluteD.fixed9.给文本设置加粗效果的CSS属性是？（）A.font-styleB.font-weightC.text-decorationD.font-size10.HTML5中，用于播放视频的标签是？（）A.<media>B.<video>C.<audio>D.<movie>二、填空题（每空2分，共20分）1.HTML的全称是________________________。2.CSS的全称是________________________。3.引入CSS样式的三种方式：行内样式、__________、__________。4.列表分为无序列表、__________、__________三种。5.CSS中，__________属性可以设置元素的圆角边框。6.块级元素默认__________独占一行，行内元素默认__________独占一行。（填“会/不会”）7.设置元素隐藏但保留占位空间的属性值是__________。三、简答题（每题10分，共30分）1.简述块级元素和行内元素的核心区别，并分别列举3个常用标签。2.简述CSS浮动（float）的作用，以及浮动布局塌陷的解决方法（至少写出2种）。3.简述relative和absolute定位的区别。四、实操编程题（共30分）需求：编写完整HTML+CSS代码，实现一个简单的网页卡片模块，要求如下：1.页面整体居中，背景颜色为#f5f5f5；2.制作一个卡片盒子：宽度300px，自适应高度，白色背景，10px圆角，轻微阴影；3.卡片内包含：标题（居中、18px、加粗、黑色）、一段正文（14px、行高1.8、灰色）；4.卡片上下左右均有20px内边距，卡片与页面顶部距离50px；5.代码结构规范，语义化标签使用合理，CSS样式外部引入书写。参考答案及详细解析一、单项选择题答案及解析1.B解析：<header>是HTML5新增语义化头部标签，<head>是网页头部配置标签，不属于语义化布局标签。2.B解析：_blank代表新窗口打开链接，_self为当前窗口打开（默认值）。3.C解析：选择器优先级排序：ID选择器>类选择器>标签选择器>通配符选择器。4.A解析：text-align负责文本水平居中，vertical-align负责元素垂直对齐。5.B解析：clear属性用于清除浮动，解决父级元素高度塌陷问题。6.B解析：<p>为段落标签，<br>是换行标签，<div>是通用块容器，<span>是行内容器。7.A解析：CSS盒子模型标准顺序：内容区（content）、内边距（padding）、边框（border）、外边距（margin）。8.D解析：fixed为固定定位，相对于浏览器视口定位，页面滚动时元素位置不变。9.B解析：font-weight控制字体粗细，font-style控制字体是否倾斜，text-decoration控制文本装饰线。10.B解析：<video>为HTML5视频播放标签，<audio>为音频播放标签。二、填空题答案1.超文本标记语言（HyperTextMarkupLanguage）2.层叠样式表（CascadingStyleSheets）3.内部样式、外部样式4.有序列表、自定义列表5.border-radius6.会、不会7.visibility:hidden三、简答题详细答案1.块级元素和行内元素核心区别及常用标签核心区别：①换行特性：块级元素独占一行，默认从上到下排列；行内元素不会独占一行，从左到右排列。②宽高设置：块级元素可以设置宽、高、内外边距；行内元素无法设置宽高，上下内外边距无效，仅左右边距生效。③嵌套规则：块级元素可以嵌套行内元素和部分块级元素；行内元素只能嵌套文本或其他行内元素，不能嵌套块级元素。常用标签：块级：<div>、<p>、<h1-h6>、<ul>、<li>（任意3个即可）行内：<span>、<a>、<b>、<i>、<u>（任意3个即可）2.浮动的作用及布局塌陷解决方法浮动作用：float属性可以让块级元素脱离标准文档流，实现元素横向排列，常用于网页多列布局、导航布局、图文混排等场景。布局塌陷原因：子元素设置浮动后脱离文档流，父元素无法检测到子元素高度，导致父元素高度为0，引发布局错乱。解决方法（任选2种）：①给父元素设置overflow:hidden，自动检测浮动子元素高度，清除浮动；②在所有浮动子元素末尾添加空标签，设置clear:both清除浮动；③定义clearfix公共类，通过伪元素清除浮动（企业常用方法）。3.relative和absolute定位的区别①定位参照物不同：relative是相对元素自身默认位置进行偏移；absolute是相对最近的已定位父级元素偏移，若无已定位父级，则相对浏览器窗口。②文档流影响不同：relative定位后，元素仍保留在标准文档流中，原有占位空间不消失；absolute定位后，元素脱离标准文档流，原有占位空间释放，不会占用页面位置。③适用场景不同：relative常用于微调元素位置、作为absolute子元素的定位父级；absolute常用于悬浮弹窗、图标定位、特殊布局叠加效果。四、实操题标准答案（完整可运行代码）第一步：新建index.html文件html

<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<title>简易卡片模块</title>

<!--外部引入CSS样式-->

<linkrel="stylesheet"href="style.css">

</head>

<body>

<divclass="card">

<h2class="card-title">前端基础学习卡片</h2>

<pclass="card-text">HTML用于搭建网页结构，CSS用于美化网页样式，二者结合可以制作出美观、规整的静态网页，是前端开发的基础核心技能。坚持练习代码，熟练掌握布局技巧，就能快速入门前端开发。</p>

</div>

</body>

</html>第二步：新建style.css文件（与html文件同级目录）css

/*全局样式重置*/

*{

margin:0;

padding:0;

box-sizing:border-box;

}

/*页面整体样式*/

body{

background-color:#f5f5f5;

}

/*卡片容器样式*/

.card{

width:300px;

margin:50pxauto0;/*顶部距离50px，左右居中*/

padding:20px;/*上下左右内边距20px*/

background-color:#fff;

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

box-shadow:0010pxrgba(0,0,0,0.1);/*轻微阴影*/

}

/*卡片标题样式*/

.card-title{

font-size:18px;

font-weight:bold;

color:#000;

text-align:center;

margin-bot