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

HTML+CSS基础笔试真题（含详细答案）考试说明：满分100分，答题时间60分钟，题型包含选择题、填空题、简答题、实操题，考察前端基础核心知识点，侧重日常开发实操能力。一、单项选择题（共15题，每题3分，共45分）1.以下不属于HTML5新增标签的是（）A.articleB.sectionC.divD.nav2.关于HTML语义化标签，下列说法正确的是（）A.语义化标签仅美化页面样式，无实际作用B.有利于浏览器解析、搜索引擎抓取和代码维护C.语义化标签不能嵌套使用D.只有新增的HTML5标签才具备语义化3.以下哪个属性可以实现文本水平居中对齐（）A.text-align:centerB.vertical-align:centerC.align:centerD.text-center:true4.CSS中，设置元素字体大小为14像素的正确写法是（）A.font-size:14px;B.font-size:14PX;C.font:14px;D.fontSize:14px;5.HTML中，超链接标签的target属性，默认值是（）A._blankB._selfC._topD._parent6.以下CSS选择器中，优先级最高的是（）A.类选择器B.标签选择器C.ID选择器D.通配符选择器7.想要清除元素浮动带来的高度塌陷问题，下列方式错误的是（）A.给父元素设置overflow:hiddenB.给父元素添加固定高度C.给子元素设置float:noneD.使用伪元素::after清除浮动8.下列关于块级元素的说法，错误的是（）A.独占一行显示B.可以设置宽高、内外边距C.p、div、h1均为块级元素D.默认宽度为内容宽度9.CSS中，margin:10px20px;代表的含义是（）A.上下10px，左右20pxB.左右10px，上下20pxC.上10px、右20px、下10px、左20pxD.上下左右均10px、20px叠加10.HTML中，input标签的type属性值，用于创建单选框的是（）A.checkboxB.radioC.submitD.text11.想要让元素隐藏，但保留页面占位空间，正确的CSS属性是（）A.display:noneB.visibility:hiddenC.opacity:0D.overflow:hidden12.CSS3中，实现元素圆角效果的属性是（）A.border-shadowB.border-radiusC.border-styleD.border-width13.下列不属于行内元素特点的是（）A.同行显示多个元素B.不能设置上下marginC.默认宽度铺满父元素D.高度由内容撑开14.链接伪类的正确书写顺序是（）A.a:link、a:visited、a:hover、a:activeB.a:hover、a:link、a:visited、a:activeC.a:visited、a:link、a:hover、a:activeD.a:link、a:hover、a:visited、a:active15.以下哪个属性可以改变元素的定位层级（）A.z-indexB.indexC.levelD.stack二、填空题（共5题，每题3分，共15分）1.HTML文档的根标签是________，网页头部标签是________，网页主体标签是________。2.CSS三种引入方式分别是________、________、________。3.元素定位方式中，________定位是默认定位，不脱离文档流；________定位相对于自身原有位置偏移。4.实现文字加粗的CSS属性是________，实现文字倾斜的属性是________。5.弹性布局的开启属性是给父元素设置________，水平居中子元素的属性是________，垂直居中子元素的属性是________。三、简答题（共3题，每题10分，共30分）1.简述行内元素、块级元素、行内块元素的区别，并列举各自3个常用标签。2.详细说明CSS优先级的计算规则，以及不同选择器的优先级排序。3.什么是文档流？浮动的作用是什么？浮动会产生什么问题？常用的清除浮动方法有哪些？四、实操题（共1题，10分）使用HTML+CSS完成一个简单卡片布局，要求：1.卡片整体宽300px，自适应居中，白色背景，10px圆角，轻微阴影；2.卡片内包含标题（居中、18号字体、加粗、黑色）、简介文本（14号字体、灰色、行高1.8）；3.卡片上下左右有20px内边距，与页面顶部有50px间距。参考答案及详细解析一、单项选择题答案及解析1.答案：C解析：div是HTML传统通用容器标签，并非HTML5新增。article、section、nav均为HTML5新增语义化标签，用于规范页面结构。2.答案：B解析：语义化标签可以清晰描述页面结构，方便浏览器解析、搜索引擎优化（SEO）和团队代码维护；语义化标签可以嵌套，部分传统标签如p、h1也具备基础语义化。3.答案：A解析：text-align:center用于设置文本、行内元素水平居中；vertical-align用于垂直对齐，无center取值；align不是标准CSS文本居中属性。4.答案：A解析：CSS属性名小写，单位px小写且不可省略；font为复合属性，单独设置字体大小必须用font-size，JS中才使用驼峰式fontSize。5.答案：B解析：target默认值为_self，代表在当前窗口打开链接；_blank为新窗口打开，_top、_parent用于框架页面跳转。6.答案：C解析：优先级排序：ID选择器>类选择器>标签选择器>通配符选择器。7.答案：C解析：浮动塌陷是父元素高度自适应为0导致，给子元素取消浮动无法解决已有浮动带来的塌陷问题；固定父元素高度、overflow:hidden、伪元素清浮动都是常用解决方案。8.答案：D解析：块级元素默认宽度铺满父元素，高度由内容撑开；独占一行、可设置宽高边距是块级元素核心特点。9.答案：A解析：margin简写规则：两个值时，第一个值控制上下，第二个值控制左右；四个值依次为上右下左。10.答案：B解析：radio为单选框，checkbox为复选框，submit为提交按钮，text为单行文本输入框。11.答案：B解析：visibility:hidden隐藏元素，保留占位；display:none彻底隐藏，不占位；opacity:0透明，可点击且占位。12.答案：B解析：border-radius控制元素圆角；border-shadow为阴影属性，border-style控制边框样式。13.答案：C解析：行内元素宽度由内容撑开，不会铺满父元素；铺满父元素是块级元素的特点。14.答案：A解析：链接伪类必须遵循LVHA顺序：link（未访问）、visited（已访问）、hover（悬浮）、active（点击激活），顺序错误会导致样式失效。15.答案：A解析：z-index用于设置定位元素的堆叠层级，数值越大层级越高，仅对relative、absolute、fixed定位元素生效。二、填空题答案1.html、head、body2.行内样式、内部样式、外部样式3.静态（static）、相对（relative）4.font-weight、font-style5.display:flex、justify-content:center、align-items:center三、简答题详细答案1.行内、块级、行内块元素区别及常用标签（1）块级元素特点：独占一行显示；默认宽度100%铺满父容器；可设置宽、高、内外边距；会自动换行。常用标签：div、p、h1~h6、ul、ol、li（2）行内元素特点：多个元素同行显示；宽高由内容撑开，无法自定义宽高；仅能设置左右内外边距，上下边距无效；不会自动换行。常用标签：span、a、em、i、strong（3）行内块元素特点：兼具两者优势，多个元素同行显示；可以自定义宽高、内外边距；默认宽度由内容撑开。常用标签：img、input、button、textarea、select2.CSS优先级计算规则及排序优先级计算规则：CSS优先级以权重值计算，权重值越高，样式优先级越高，权重值相同则后写的样式覆盖先写的。各选择器权重及排序（从高到低）：①行内样式（权重1000）：直接写在标签style属性中的样式②ID选择器（权重100）：#id名③类选择器、伪类选择器、属性选择器（权重10）：.类名、a:hover④标签选择器、伪元素选择器（权重1）：div、p、::before⑤通配符选择器（权重0）：*补充：!important优先级最高，可强制覆盖所有样式，开发中不建议滥用。3.文档流、浮动作用、问题及清浮动方法（1）文档流：网页默认的元素排列规则，块级元素从上到下排列，行内/行内块元素从左到右排列，是页面默认的正常布局状态。（2）浮动作用：让块级元素脱离正常文档流，实现同行排列效果，常用于传统网页多列布局、图文环绕布局。（3）浮动带来的问题：子元素设置浮动后脱离文档流，父元素无法被浮动子元素撑开，导致父元素高度塌陷；同时后续正常文档流元素会向上偏移，页面布局错乱。（4）常用清浮动方法：①给父元素设置overflow:hidden（简单常用，适配大多数场景）；②伪元素清浮动（推荐，不破坏原有布局，可复用）：给父元素添加clearfix类，通过::after伪元素设置clear:both；③给父元素设置固定高度（局限性大，仅适用于高度固定的布局）；④在浮动子元素末尾添加空标签，设置clear:both（冗余代码多，不推荐）。四、实操题参考答案（完整可运行代码）html

<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<title>基础卡片布局</title>

<style>

*{

margin:0;

padding:0;

box-sizing:border-box;

}

.card{

width:300px;

margin:50pxauto0;/*顶部间距50px，水平居中*/

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

background:#fff;

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

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

}

.card-title{

font-size:18px;

font-weight:bold;

color:#000;

text-align:center;

margin-bottom:15px;

}

.card-desc{

font-size:14px;

color:#666;

line-height:1.8;

}