2025年html和css基础试题及答案

2025年html和css基础试题及答案一、单项选择题（每题2分，共30分）1.以下关于HTML5文档声明的描述，正确的是（）A.`<!DOCTYPEhtml>`仅用于HTML5文档B.省略文档声明会导致浏览器进入标准模式C.文档声明必须位于HTML文件的第一行D.不同浏览器对文档声明的解析规则完全一致答案：C2.下列哪组标签均为HTML5新增的语义化标签？（）A.`<header>、<nav>、<span>`B.`<article>、<section>、<aside>`C.`<div>、<footer>、<main>`D.`<p>、<figure>、<audio>`答案：B3.关于CSS选择器优先级的计算规则，正确的是（）A.内联样式>ID选择器>类选择器>标签选择器B.类选择器权重为0,1,0，ID选择器权重为1,0,0C.通配符选择器()的优先级高于标签选择器D.继承的样式优先级高于内联样式答案：A4.要实现"当鼠标悬停在链接上时，文字颜色变为红色"的效果，应使用的CSS规则是（）A.`a:visited{color:red;}`B.`a:hover{color:red;}`C.`a:active{color:red;}`D.`a:focus{color:red;}`答案：B5.以下关于CSS盒模型的描述，错误的是（）A.标准盒模型的width属性仅包含内容区域B.border-box盒模型的width包含内容、内边距和边框C.margin属性不会影响盒子的实际占据空间D.padding属性的百分比值相对于父元素的宽度计算答案：C6.要让一个div元素在页面中水平居中显示（父元素宽度固定），最合理的CSS设置是（）A.`margin:0auto;`B.`text-align:center;`C.`position:absolute;left:50%;`D.`display:flex;justify-content:center;`答案：A7.关于Flex布局的属性，以下描述正确的是（）A.`flex-direction:row-reverse`会让子元素垂直排列B.`justify-content:space-around`会在子元素之间平均分配空间C.`align-items:stretch`是弹性容器的默认对齐方式D.`flex:1`等同于`flex-grow:1;flex-shrink:0;flex-basis:auto`答案：B8.要设置元素的背景图片不重复且水平居中显示，正确的CSS声明是（）A.`background:url(img.jpg)no-repeatcenter;`B.`background-image:url(img.jpg);background-repeat:no-repeat;background-position:center;`C.`background:url(img.jpg)repeat-xcenter;`D.`background:url(img.jpg)no-repeat50%0;`答案：B9.以下能正确设置段落首行缩进2个中文字符的CSS代码是（）A.`text-indent:2em;`B.`text-indent:2px;`C.`text-indent:200%;`D.`text-indent:2rem;`答案：A10.关于媒体查询（MediaQuery）的语法，正确的是（）A.`@mediascreenand(max-width:768px){...}`B.`@media(device-width:320px){...}`C.`@mediaprint,(min-width:1024px){...}`D.`@mediaalland(orientation:portrait){...}`答案：D11.要隐藏页面中的某个元素（不保留空间），最合理的CSS属性是（）A.`visibility:hidden;`B.`opacity:0;`C.`display:none;`D.`position:absolute;left:-9999px;`答案：C12.以下关于HTML表单元素的描述，错误的是（）A.`<inputtype="email">`会自动验证输入格式B.`<textarea>`的rows属性定义可见行数C.`<select>`元素必须包含`<option>`子元素D.`<inputtype="date">`在所有浏览器中显示相同答案：D13.要为元素添加圆角效果（左上角半径20px，其他角半径10px），正确的CSS属性是（）A.`border-radius:20px10px10px10px;`B.`border-radius:20px10px;`C.`border-radius:20px10px10px20px;`D.`border-top-left-radius:20px;border-radius:10px;`答案：A14.关于CSS定位（Positioning）的描述，正确的是（）A.`position:relative`会使元素脱离文档流B.`position:fixed`的定位基准是最近的已定位祖先元素C.`position:absolute`的元素默认宽度由内容决定D.`z-index`属性仅对静态定位（static）的元素有效答案：C15.要实现"当屏幕宽度小于600px时，将导航栏的字体大小调整为14px"的响应式效果，正确的媒体查询写法是（）A.`@media(max-width:600px){.nav{font-size:14px;}}`B.`@media(min-width:600px){.nav{font-size:14px;}}`C.`@media(device-width:600px){.nav{font-size:14px;}}`D.`@mediascreenand(orientation:portrait){.nav{font-size:14px;}}`答案：A二、填空题（每空2分，共20分）1.HTML文档的根元素是______。答案：html2.CSS中用于设置元素透明度的属性是______（IE8及以下需使用滤镜属性）。答案：opacity3.要阻止元素内容被选中，应使用的CSS属性是______。答案：user-select:none;4.在Flex布局中，控制子元素在交叉轴上对齐方式的属性是______。答案：align-items5.HTML5中用于定义嵌入内容的通用标签是______。答案：<embed>6.CSS中表示"任意后代元素"的组合器是______。答案：空格（后代选择器）7.要设置元素的下边框为2px实线红色，对应的CSS声明是______。答案：border-bottom:2pxsolidff0000;8.表单元素中，用于定义滑块输入的type属性值是______。答案：range9.CSS中，使用______属性可以实现文字溢出时显示省略号（需配合宽度和溢出隐藏）。答案：text-overflow:ellipsis;10.HTML5中新增的用于定义文档主要内容的标签是______。答案：<main>三、简答题（每题6分，共30分）1.简述HTML语义化的含义及其重要性。答案：HTML语义化指通过使用具有明确含义的标签（如<header>、<nav>、<article>）描述内容结构，而非仅用显示效果标签（如<div>、<span>）。重要性体现在：提升可访问性（屏幕阅读器能正确解析）、优化搜索引擎排名（SEO）、提高代码可维护性、适应未来技术发展（如语音交互）。2.说明CSS盒模型的组成部分，并解释标准盒模型与border-box盒模型的区别。答案：盒模型由内容（content）、内边距（padding）、边框（border）、外边距（margin）组成。标准盒模型（box-sizing:content-box）的width/height仅包含内容区域；border-box盒模型的width/height包含内容、内边距和边框，实际内容区域宽度=设置的widthpaddingborder。3.比较Flex布局和Grid布局的适用场景。答案：Flex布局适用于一维布局（单行/单列），适合处理线性排列的元素（如导航栏、列表）；Grid布局适用于二维布局（行和列同时控制），适合复杂的网格结构（如仪表盘、页面整体布局）。Flex更注重子元素的排列顺序和空间分配，Grid更强调二维空间的精准定位。4.列举三种实现元素垂直居中的方法（需说明具体CSS属性）。答案：（1）Flex布局：父元素设置`display:flex;align-items:center;`（2）绝对定位+变换：子元素设置`position:absolute;top:50%;transform:translateY(-50%);`（3）表格布局：父元素设置`display:table;`，子元素设置`display:table-cell;vertical-align:middle;`5.说明CSS层叠（Cascade）的工作机制，并解释优先级冲突时的解决规则。答案：层叠机制是指当多个CSS规则作用于同一元素的同一属性时，浏览器确定最终应用哪个规则的过程。解决规则：1.来源优先级（!important>作者样式>用户样式>浏览器默认样式）；2.选择器优先级（内联样式(1,0,0,0)>ID选择器(0,1,0,0)>类/伪类选择器(0,0,1,0)>标签/伪元素选择器(0,0,0,1)）；3.源码顺序（后定义的规则覆盖先定义的同优先级规则）。四、综合题（每题10分，共20分）1.请编写HTML和CSS代码，实现一个响应式卡片组件，要求：卡片宽度在桌面端（≥1024px）为300px，移动端（<768px）占满屏幕宽度（左右各留15px边距）卡片包含标题（h3）、内容区（p标签）和底部按钮（button）卡片有阴影效果（box-shadow:02px8pxrgba(0,0,0,0.1)）按钮悬停时背景色变深（使用过渡效果）答案：HTML部分：```html<divclass="card"><h3class="card-title">卡片标题</h3><pclass="card-content">这里是卡片的主要内容区域，展示具体的文本信息。</p><buttonclass="card-btn">查看详情</button></div>```CSS部分：```css.card{box-shadow:02px8pxrgba(0,0,0,0.1);border-radius:8px;padding:20px;background:fff;}/桌面端样式/@media(min-width:1024px){.card{width:300px;}}/移动端样式/@media(max-width:767px){.card{width:calc(100%30px);/100%宽度减去左右各15px边距/margin:015px;}}.card-title{margin:0015px;color:333;font-size:1.2em;}.card-content{margin:0020px;color:666;line-height:1.5;}.card-btn{background:007bff;color:fff;border:none;padding:8px16px;border-radius:4px;cursor:pointer;transition:background-color0.3sease;}.card-btn:hover{background:0056b3;}```2.请使用Flex布局实现一个图文混排模块，要求：包含左图（宽度200px，高度150px）和右侧文字区域文字区域与图片顶部对齐文字区域包含标题（h4）和正文（p），正文文字溢出时显示省略号（单行）容器宽度固定为600px，整体居中显示答案：HTML部分：```html<divclass="container"><divclass="content-wrap"><imgsrc="placeholder.jpg"alt="示例图片"class="content-img"