HTML+CSS基础测试题（含详细答案）

HTML+CSS基础测试题（含详细答案）考试说明：满分100分，考试时长60分钟，题型包含选择题、填空题、简答题、实操题，考察HTML结构规范、CSS样式布局、兼容性及常用技巧等核心知识点。一、单项选择题（共15题，每题3分，共45分）1.以下标签中，属于HTML5新增语义化标签的是（）A.<div>B.<section>C.<font>D.<b>2.HTML中，以下属性中可实现元素独占一行的是（）A.display:inline;B.display:block;C.display:inline-block;D.display:none;3.关于CSS优先级，以下选择器优先级最高的是（）A.类选择器B.标签选择器C.ID选择器D.通配符选择器4.以下哪个属性可以清除浮动带来的高度塌陷问题（）A.floatB.clearC.overflowD.position5.想要让文本水平居中，以下正确的CSS属性是（）A.text-align:center;B.vertical-align:center;C.margin:0auto;D.padding:center;6.HTML中，超链接的目标窗口在新页面打开的属性是（）A.target="_self"B.target="_blank"C.target="_top"D.target="_parent"7.CSS中，box-sizing:border-box;的作用是（）A.元素宽度仅包含内容区B.元素宽度包含内容、内边距、边框C.元素宽度包含外边距D.元素自适应屏幕宽度8.以下不属于块级元素的是（）A.<p>B.<span>C.<h1>D.<ul>9.CSS定位中，固定定位的属性值是（）A.relativeB.absoluteC.fixedD.static10.列表默认无序列表的标签是（）A.<ol>B.<ul>C.<li>D.<dl>11.想要让元素隐藏但保留占位空间，正确的写法是（）A.display:none;B.visibility:hidden;C.opacity:0;D.overflow:hidden;12.CSS中，设置字体加粗的属性值是（）A.font-style:bold;B.font-weight:bold;C.text-weight:bold;D.font-size:bold;13.外边距合并（塌陷）现象主要发生在什么定位的元素上（）A.普通文档流B.浮动元素C.绝对定位元素D.固定定位元素14.HTML5中，用于播放视频的标签是（）A.<media>B.<video>C.<audio>D.<movie>15.CSS3中，实现元素圆角的属性是（）A.border-shadowB.border-radiusC.border-styleD.border-width二、填空题（共5空，每空2分，共10分）1.HTML文档的根标签是__________。2.CSS中，设置元素水平居中，对于定宽块级元素可以使用__________属性。3.绝对定位（absolute）的元素，默认相对于__________定位。4.实现文字垂直居中单行文本的常用方式是设置__________和高度一致。5.HTML中，表单提交按钮的type属性值为__________。三、简答题（共3题，每题7分，共21分）1.简述行内元素、块级元素、行内块元素的区别。2.简述浮动产生的问题及三种常用的清除浮动方法。3.简述相对定位和绝对定位的核心区别。四、实操题（共2题，每题12分，共24分）1.编写完整代码，实现一个居中卡片模块：卡片宽300px，高200px，白色背景，10px圆角，灰色阴影，水平垂直居中显示在页面中。2.编写HTML结构+CSS样式，实现一个简单的无序列表导航栏：横向排列、无默认圆点、文字居中、鼠标悬浮文字变色。参考答案及详细解析一、单项选择题答案及解析1.B解析：<section>是HTML5新增语义化区块标签，用于划分页面结构；<div>是传统通用区块标签，无语义；<font>、<b>是旧版表现型标签，非HTML5新增。2.B解析：block块级元素独占一行；inline行内元素同行显示；inline-block兼具两者特性，同行显示且可设置宽高；none为隐藏元素。3.C解析：CSS优先级排序：!important>行内样式>ID选择器>类/伪类选择器>标签选择器>通配符选择器。4.C解析：父元素设置overflow:hidden;是最常用的简易清浮动方式，可解决子元素浮动导致的父级高度塌陷；clear属性仅用于清除当前元素浮动，无法解决父级塌陷。5.A解析：text-align:center;用于文本、行内元素水平居中；margin:0auto;用于定宽块级元素整体居中，不控制文本。6.B解析：target="_blank"新窗口打开链接；_self当前窗口打开（默认）；_top顶层窗口打开；_parent父窗口打开。7.B解析：box-sizing:border-box;为怪异盒模型，元素设置的宽高包含内容、内边距、边框，不会撑大元素；默认content-box仅内容区为设置的宽高。8.B解析：<span>是典型行内元素，无法独占一行，默认不能设置宽高；其余选项均为块级元素。9.C解析：fixed固定定位，相对于浏览器窗口定位，滚动页面位置不变；relative相对定位、absolute绝对定位、static默认定位无固定效果。10.B解析：<ul>无序列表，默认带圆点；<ol>有序列表，默认带序号；<li>为列表项标签。11.B解析：visibility:hidden;隐藏元素，保留页面占位；display:none;彻底隐藏，不占位；opacity:0;透明可见，可点击交互。12.B解析：font-weight控制字体粗细，bold为加粗；font-style控制字体斜体，无text-weight属性。13.A解析：外边距塌陷仅发生在普通文档流中的块级元素，浮动、绝对定位元素会脱离文档流，不会出现外边距合并问题。14.B解析：HTML5新增<video>视频标签、<audio>音频标签，无media、movie标签。15.B解析：border-radius实现圆角；border-shadow阴影；border-style边框样式；border-width边框宽度。二、填空题答案及解析1.<html>解析：所有HTML文档的根顶级标签，所有页面内容均嵌套在该标签内。2.margin:0auto解析：仅适用于设置了固定宽度的块级元素，可实现元素整体水平居中。3.浏览器窗口（文档根节点）解析：绝对定位元素默认相对于根元素定位，若父级设置relative/absolute/fixed，则相对于最近的已定位父级。4.line-height解析：单行文本设置行高与元素高度一致，即可实现垂直居中，是最简单的文本垂直居中方案。5.submit解析：input标签type="submit"为表单提交按钮，type="button"为普通按钮无提交功能。三、简答题详细答案1.行内元素、块级元素、行内块元素的区别（1）块级元素：独占一行，默认宽度100%父级宽度，可设置宽、高、内外边距、外边距，常见标签：div、p、h1-h6、ul、ol；（2）行内元素：同行排列，不独占一行，默认宽高由内容决定，无法设置宽高、上下内外边距，仅可设置左右间距，常见标签：span、a、em、i；（3）行内块元素：兼具两者优势，同行排列不独占一行，同时可以自由设置宽高、内外边距，常见标签：img、input，可通过display:inline-block;转换。2.浮动产生的问题及三种清浮动方法浮动核心问题：子元素设置float后脱离普通文档流，导致父元素无法被撑开，出现高度塌陷，后续页面布局错乱。三种常用清除浮动方法：（1）父级添加overflow:hidden;简洁高效，适合大多数场景，缺点是无法显示溢出内容；（2）伪元素清浮动：给父元素添加clearfix类，通过::after伪元素设置clear:both;无副作用，企业常用标准写法；（3）底部空标签清浮动：在浮动子元素末尾添加空div，设置clear:both;简单但会产生冗余空标签，不推荐大规模使用。3.相对定位和绝对定位的核心区别（1）文档流差异：相对定位（relative）不脱离普通文档流，保留原有占位空间；绝对定位（absolute）脱离文档流，不保留原有占位；（2）定位基准差异：相对定位相对于自身原始位置偏移；绝对定位相对于最近的已定位父级元素，无已定位父级则相对于浏览器窗口；（3）使用场景差异：相对定位多用于微调元素位置、作为绝对定位元素的父级容器；绝对定位多用于弹窗、悬浮按钮、布局叠加场景。四、实操题完整代码答案1.居中卡片模块完整代码html

<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<title>居中卡片</title>

<style>

*{

margin:0;

padding:0;

box-sizing:border-box;

}

.card{

width:300px;

height:200px;

background:#fff;

border-radius:10px;

box-shadow:0010px#ccc;

/*水平垂直居中*/

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

}

</style>

</head>

<body>

<divclass="card"></div>

</body>

</html>2.横向导航栏完整代码html

<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<title>横向导航栏</title>

<style>

*{

margin:0;

padding:0;

list-style:none;/*清除列表默认圆点*/

}

.nav{

width:500px;

margin:50pxauto;

}

.navli{

float:left;/*横向排列*/

width:100px;

text-align:center;/*文字居中*/

}

.navlia{

text-decoration:none;

color:#333;

font-size:16px;

}

/*鼠标悬浮文字变红*/

.navlia:hover{

color:red;

}

</style>

</head>

<body>

<ulclass="nav">

<li><ahref="#"