前端开发HTMLCSS试题及答案

前端开发HTMLCSS试题及答案一、单项选择题（共10题，每题1分，共10分）以下标签中，不属于HTML5新增语义化标签的是A.header标签B.section标签C.iframe标签D.article标签答案：C解析：iframe标签是HTML早期版本就存在的内嵌框架标签，不属于HTML5新增的语义化标签。A、B、D三个选项都是HTML5专门推出的用于划分页面语义结构的新增标签，用于替代过去无意义的div嵌套结构，提升代码可读性和搜索引擎权重。以下CSS选择器中，优先级最高的是A.类选择器B.ID选择器C.元素标签选择器D.通配符选择器答案：B解析：CSS选择器的常规优先级排序为ID选择器>类选择器>元素标签选择器>通配符选择器，ID选择器唯一标识页面元素，优先级高于其他几种选择器，只有!important标记的样式可以覆盖其效果。标准W3C盒模型中，元素实际占据的总宽度计算方式是A.width+padding+border+marginB.width+padding+borderC.widthD.width+margin答案：A解析：W3C标准盒模型中，width属性仅指代元素内容区域的宽度，内边距padding、边框border会向外撑开元素的可视尺寸，外边距margin属于元素外部占据的空间，三者相加才是元素在文档流中实际占据的总宽度。B选项是盒模型可视尺寸的计算方式，并非实际占据空间的数值。以下属性中，可以让行内元素设置上下边距生效的是A.display:inlineB.display:blockC.visibility:hiddenD.color:transparent答案：B解析：行内元素默认仅支持左右方向的边距设置，将元素的display属性设置为block后，元素会转换为块级元素，完全支持上下左右的边距、宽高设置。A选项是行内元素的默认属性，无法让上下边距生效，C、D选项分别控制元素可见性和文字透明度，和边距生效规则无关。要为元素设置超过容器宽度的内容自动隐藏且不显示滚动条，应该选择的overflow属性值是A.visibleB.scrollC.autoD.hidden答案：D解析：overflow属性值为hidden时，所有超出父容器可视范围的内容都会被直接裁切隐藏，且不会生成任何滚动条。A选项是默认属性，超出内容会直接溢出显示，B选项会强制生成横竖两个方向的滚动条，C选项仅在内容溢出时才自动生成滚动条。以下关于相对定位position:relative的描述，正确的是A.元素会完全脱离正常文档流B.元素原本占据的文档流位置会被其他元素挤占C.元素的偏移参考点是自身原本在文档流中的位置D.元素设置top值后会移动到父元素的左上角位置答案：C解析：相对定位不会让元素脱离文档流，元素原本占据的位置会被保留不会被挤占，偏移的参考基准是元素自身未移动前的初始位置。A、B选项是绝对定位的特征，D选项的描述是固定了偏移基准为父元素的错误表述。以下CSS单位中，属于相对于根元素字体大小的相对单位是A.emB.remC.vwD.px答案：B解析：rem的全称是rootem，其数值始终以页面根元素html的字体大小为基准进行计算，不受父元素字体大小变化影响。em是相对于当前元素父级的字体大小的相对单位，vw是相对于视口宽度的单位，px是固定像素绝对单位。以下CSS属性中，可以实现文字在元素内水平居中的是A.text-align:centerB.vertical-align:middleC.line-height:0D.text-indent:2em答案：A解析：text-align属性专门用于控制行内内容在块级父容器内的水平对齐方式，设置为center时可以实现文字、图片等行内元素的水平居中。B选项用于控制行内元素的垂直对齐，C选项会让文字高度压缩消失，D选项是控制首行文字缩进的属性。清除浮动的核心目的是A.让浮动元素的颜色显示正常B.解决父元素高度塌陷的问题C.提升页面的加载速度D.让浮动元素可以响应鼠标点击事件答案：B解析：当父元素没有设置固定高度、所有子元素全部设置为浮动时，父元素会因为无法识别浮动子元素的高度出现高度塌陷，清除浮动的所有方案本质上都是为了让父元素可以正确包裹所有浮动子元素，恢复正常的文档流高度计算逻辑。其他选项的描述都和清除浮动的核心目标无关。以下关于a标签伪类的书写顺序，符合规范且能正常生效的是A.hover、link、visited、activeB.link、visited、hover、activeC.active、link、hover、visitedD.visited、active、link、hover答案：B解析：a标签的四个伪类有固定的书写顺序要求，遵循“爱恨准则”的顺序：未访问状态link、已访问状态visited、鼠标悬浮状态hover、鼠标按下状态active，错误的顺序会导致部分伪类的样式因为优先级覆盖无法正常生效。一、多项选择题（共10题，每题2分，共20分）以下标签中，属于块级元素的有A.div标签B.p标签C.span标签D.h1标签答案：ABD解析：块级元素默认独占一行空间，可以设置完整的宽高边距属性，A、B、D三个选项都是典型的块级元素。C选项的span是行内元素，默认不会独占一行，也无法直接设置上下方向的边距和宽高。以下属于Flex布局中容器级别的属性有A.flex-directionB.justify-contentC.flex-growD.align-items答案：ABD解析：Flex布局中容器级别的属性是作用于父容器、控制所有子元素整体排列规则的属性，flex-direction用于设置主轴方向，justify-content用于控制主轴方向的对齐方式，align-items用于控制侧轴方向的对齐方式，三者都是容器级属性。C选项的flex-grow是子元素项目级别的属性，用于控制子元素的剩余空间放大比例。以下方式中，可以实现CSS元素垂直居中效果的有A.给单行文字设置和容器高度相等的line-height属性B.利用position绝对定位搭配transform:translate(-50%,-50%)实现C.给父元素设置display:flex，子元素设置align-self:centerD.直接给子元素设置margin:0答案：ABC解析：以上三个选项都是前端开发中常用的垂直居中实现方案，分别适用于单行文本场景、不定宽高元素场景、Flex布局场景。D选项的margin:0仅能实现元素的水平居中，完全无法实现垂直方向的居中效果。以下关于CSS属性color的作用描述，错误的有A.只能给文字设置颜色B.可以控制文字阴影的默认颜色C.可以控制边框的默认颜色D.可以控制背景的颜色答案：AD解析：color属性的作用并非仅给文字设置颜色，它可以作为默认颜色值传递给文字阴影、默认未指定颜色的边框、列表标记等元素继承使用。D选项中背景颜色需要通过background-color属性单独设置，无法通过color属性直接控制，A选项的描述过于绝对不符合CSS规则。以下属性值中，可以隐藏页面元素但仍然让元素占据原有文档流空间的有A.display:noneB.visibility:hiddenC.opacity:0D.transform:translateX(-9999px)答案：BC解析：visibility设置为hidden、opacity设置为0时，元素虽然不可见，但仍然会保留在原来的文档流位置，占据原有的空间，不会对周边其他元素的布局产生影响。A选项的display:none会让元素完全脱离文档流，不占据任何空间，D选项通过位移将元素移出视口，元素实际还是占据原来的空间位置但位置偏移，不属于视觉隐藏还保留原占位的常规方案。以下属于HTML表单相关标签的有A.form标签B.input标签C.nav标签D.textarea标签答案：ABD解析：form是表单的外层容器标签，input是各类表单控件的基础标签，textarea是多行文本输入控件标签，三者都属于表单相关标签。C选项的nav是HTML5的导航语义化标签，不属于表单类标签。以下属于CSS选择器的有A.后代选择器.boxpB.子代选择器.box>pC.相邻兄弟选择器.box+pD.颜色选择器color:red答案：ABC解析：前三个选项都是CSS规范中定义的组合关系选择器，用于选择符合层级关系的目标元素。D选项是一个具体的样式声明，不属于选择器的范畴。以下关于CSS背景属性的描述，正确的有A.background-image可以同时设置多张背景图片B.background-repeat默认值是repeat，会在水平和竖直方向重复平铺图片C.background-position只能用像素值作为位置参数D.background-size可以将背景图设置为cover让其完全覆盖容器不变形答案：ABD解析：CSS3的背景属性已经支持同时叠加多张不同的背景图片，背景重复的默认值是双向平铺，cover参数可以让背景图等比例放大直到完全覆盖整个容器不留空白。C选项的描述错误，background-position的参数除了像素还支持百分比、方位词（top、center等）多种形式。以下属于HTML新增表单输入类型的有A.inputtype=“text”B.inputtype=“date”C.inputtype=“email”D.inputtype=“password”答案：BC解析：HTML5新增了很多专门的输入控件类型，date是日期选择控件，email是专门用于校验邮箱格式的输入控件，二者都是新增类型。A选项的普通文本输入、D选项的密码输入都是HTML早期版本就已经存在的输入类型。以下方法中，可以实现清除浮动解决父元素高度塌陷的有A.给父元素添加overflow:hidden属性B.在所有浮动子元素最后新增一个空的子元素，设置clear:both属性C.给父元素添加官方封装的clearfix类，通过伪元素方式清除浮动D.给父元素设置任意的背景颜色属性答案：ABC解析：前三个选项都是行业内经过广泛验证的清除浮动可行方案，各有不同的适用场景。D选项的背景颜色属性和浮动清除逻辑完全无关，无法解决父元素高度塌陷的问题。一、判断题（共10题，每题1分，共10分）行内元素设置float:left之后，就可以支持设置宽高属性了。答案：正确解析：行内元素设置浮动之后，会自动变为行内块级特性，脱离常规的行内元素规则，原本无法设置的宽高、上下边距属性都可以正常生效。绝对定位position:absolute的偏移参考点永远是页面的根元素body。答案：错误解析：绝对定位的偏移参考点是距离自身最近的、设置了非static定位属性的父级元素，如果所有父级都没有设置定位属性，才会以根元素body作为参考点。HTML中所有的标签都必须有闭合标签，不能单独存在。答案：错误解析：HTML规范中存在部分单标签元素，比如img、input、br等标签，本身不需要闭合就可以正常运行，不需要额外写闭合标签。CSS中设置margin的属性值为负数时，可以实现元素反向位移的效果。答案：正确解析：CSS的margin属性支持设置负数数值，可以实现元素反向移动、合并相邻边框等多种特殊布局效果，是前端实现复杂布局的常用技巧。一个页面中可以重复使用多个相同ID名称的元素，浏览器运行不会报错。答案：正确解析：HTML规范中要求ID在页面中唯一，但是浏览器本身的容错机制支持识别多个同名ID，只是无法保证所有JS和CSS选择器的行为都符合预期，开发规范中不推荐这样使用。设置了z-index属性的元素，层级一定比没有设置z-index的元素更高。答案：错误解析：z-index的生效前提是元素本身设置了非static的定位属性，且层级比较逻辑会受到父元素堆叠上下文的影响，并不是设置了z-index就一定能超过未设置z-index的元素层级。视频video标签是HTML5新增的原生媒体标签，无需依赖第三方插件就可以直接在页面播放视频。答案：正确解析：HTML5新增的video标签实现了原生的视频播放能力，替代了过去需要依赖Flash等第三方插件播放视频的旧方案，现在所有主流浏览器都已经原生支持该标签。CSS中link标签和@import引入样式的效果完全一致，加载顺序也没有区别。答案：错误解析：link标签是HTML提供的标签，会在页面加载时同步引入CSS资源，而@import是CSS提供的语法，需要等页面完全加载完成之后才会开始加载对应的CSS文件，二者的加载顺序和优先级都有差异。盒模型属性box-sizing设置为border-box之后，元素设置的width数值就包含了内容区、内边距和边框的总宽度。答案：正确解析：border-box也就是通常说的IE怪异盒模型，开启该属性之后，元素的width属性直接指定的是元素整体的可视总宽度，内容区的宽度会自动减去内边距和边框的数值，不会被padding和border撑开。语义化标签的唯一作用就是让页面代码更容易被开发者看懂，对搜索引擎没有任何帮助。答案：错误解析：语义化标签可以让搜索引擎的爬虫快速识别页面不同区域的内容权重，提升页面的搜索收录权重，并非仅对开发者可读有帮助。一、简答题（共5题，每题6分，共30分）请简述CSS选择器的优先级排序规则。答案：第一，按照不同选择器的权重数值进行排序，通配符选择器权重为0，元素标签选择器权重为1，类选择器、伪类选择器、属性选择器权重为10，ID选择器权重为100，行内样式权重为1000；第二，相同权重的选择器，后书写的样式会覆盖先书写的样式，遵循后来居上的原则；第三，!important标记的样式权重最高，可以覆盖所有除了同等级!important之外的所有样式规则，使用时需要谨慎避免优先级混乱；第四，权重计算不会出现进位，比如11个类选择器叠加的权重也不会超过一个ID选择器的权重，不会出现10个类选择器等同于ID选择器的进位逻辑。解析：该优先级规则是CSS样式覆盖的核心逻辑，开发者可以借助该规则精准控制不同元素的样式效果，避免出现样式相互覆盖无法调试的问题，是前端开发必须掌握的基础知识点。请简述回流和重绘的核心区别。答案：第一，重绘是指元素的样式发生变化但不会影响布局几何属性的场景，比如修改元素的颜色、透明度、背景色等属性，浏览器只需要重新绘制元素的视觉效果，不需要重新计算页面布局；第二，回流也叫重排，是指元素的布局相关属性发生变化时，浏览器需要重新计算整个页面的元素位置和尺寸的过程，比如修改宽高、边距、显示隐藏元素等操作都会触发回流；第三，回流一定会触发重绘，但是重绘不一定会触发回流，回流的性能消耗远高于重绘，大量频繁的回流操作会导致页面出现卡顿的问题。解析：回流重绘是前端性能优化的核心知识点，开发者开发过程中可以通过集中修改样式、使用类名批量变更、脱离文档流操作元素等方式减少不必要的回流，大幅提升页面的运行流畅度。请简述什么是BFC（块级格式化上下文）及其常见触发条件。答案：第一，BFC是页面中一个独立的渲染区域，该区域内部的元素布局规则不会影响到外部的元素，外部的布局规则也不会侵入BFC内部；第二，常见的BFC触发条件包括：根元素html本身就是一个BFC、元素设置了float非none属性、元素设置了position为absolute或者fixed、元素设置了display为inline-block、flex、table-cell等属性、元素设置了overflow非visible的属性；第三，BFC可以用来解决外边距重叠、父元素高度塌陷、实现两栏自适应布局等常见的开发问题。解析：BFC是CSS布局底层的核心运行机制，理解BFC可以帮助开发者快速解决很多传统布局中遇到的诡异问题，不需要依赖额外的hack代码就能实现稳定的布局效果。请简述HTML的表单提交过程中，get和post两种提交方式的核心区别。答案：第一，get方式的请求参数会直接拼接在浏览器的地址栏url后面，明文展示在地址栏中，而post方式的请求参数会放在HTTP请求的请求体中，不会直接展示在地址栏；第二，get方式的参数长度受到浏览器地址栏长度的限制，无法传递大量的数据，而post方式理论上没有参数长度的限制，可以传递大量的表单数据；第三，get方式提交的参数会被浏览器保存在历史记录中，安全性较低，不适合传递敏感信息，post的参数不会被默认保存在历史记录中，安全性相对更高；第四，get请求可以被浏览器主动缓存，而post请求默认不会被缓存，适合用于提交修改数据的操作。解析：get和post的差异是前后端交互的基础核心知识点，开发者可以根据不同的业务场景选择合适的提交方式，比如查询类接口适合用get提交，写入修改数据的接口适合用post提交。请简述flex布局和传统浮动布局相比，有哪些核心优势。答案：第一，flex布局操作更加简单，不需要专门编写代码清除浮动，从根源上避免了父元素高度塌陷的问题，代码量更少可维护性更强；第二，flex布局天然支持元素的水平和垂直方向的对齐控制，不需要借助额外的定位、伪元素、行内块等复杂技巧就能快速实现各类居中效果；第三，flex布局的自适应能力更强，可以非常方便的实现元素的等分布局、剩余空间分配、元素自动换行等效果，适配不同尺寸的容器更加简单。解析：flex布局现在已经是前端开发的主流布局方案，兼容性也已经覆盖了所有主流浏览器，在移动端开发中几乎完全替代了传统的浮动布局，大幅降低了复杂布局的开发成本。一、论述题（共3题，每题10分，共30分）请结合实际开发场景，分析标准W3C盒模型和IE怪异盒模型的差异，以及两种盒模型分别适合的使用场景。答案：论点部分首先明确两种盒模型的核心计算规则差异，W3C标准盒模型默认width仅代表内容区域的宽度，padding和border会向外撑开元素的整体尺寸，而IE怪异盒模型的width代表的是元素包含内容、内边距、边框的总宽度，padding和border不会撑开元素的总尺寸，只会向内挤压内容区域的空间。论据部分结合实际开发案例说明，比如我们需要实现一个总宽度为百分之百的搜索框，同时需要给搜索框设置20像素的左右内边距、2像素的边框，如果使用默认的标准盒模型，最终计算出来的搜索框实际总宽度会是100%+40px+4px，直接溢出父容器导致布局错乱，这时候将该输入框设置为box-sizing:border-box开启怪异盒模型规则后，不管内边距和边框设置多少，输入框的整体总宽度始终保持为我们指定的100%，不会出现溢出问题。再比如我们开发多个并排的卡片布局，希望卡片的内容宽度统一，这时候就可以使用默认的标准盒模型，给卡片设置统一的width数值作为内容区宽度，不同卡片可以设置不同的padding和边框值，不影响内部内容的排版。最后结论部分说明，现在的前端开发中我们通常会全局给所有元素设置box-sizing:border-box，统一使用怪异盒模型规则，从根源上减少很多布局溢出的问题，降低开发者的计算成本，这也是现在主流CSS重置方案中默认的配置项。解析：该知识点是CSS布局的核心基础，开发者掌握两种盒模型的差异之后，可以灵活选择合适的盒模型规则，避免很多不必要的布局bug，提升开发效率。请结合实例论述常见的响应式布局实现方案，以及不同方案的优缺点和适用场景。答案：论点部分首先说明响应式布局的核心目标是让同一个页面可以在不同尺寸的设备屏幕上都能展示出良好的浏览效果，不需要为不同设备分别开发多套页面。论据部分逐一讲解主流的实现方案：第一种是百分比布局，将所有元素的宽高属性都按照父容器的百分比进行设置，比如两栏布局左侧占30%右侧占70%，这种方案实现简单，但是适配不同尺寸的时候字体大小无法同步自适应，很难实现精细的适配效果，适合简单的活动页面使用；第二种是媒体查询方案，通过CSS的媒体查询语法判断当前设备的屏幕宽度，为不同宽度区间的屏幕编写不同的样式代码，比如屏幕宽度小于768px的时候将多列布局调整为单列布局，这种方案适配效果精准，但是需要编写大量重复的样式代码，维护成本很高，适合项目页面结构简单、适配断点较少的网站；第三种是rem适配方案，通过JS动态计算不同屏幕尺寸下的根元素html的字体大小，页面所有元素的尺寸全部用rem单位设置，所有元素的尺寸会跟随屏幕宽度等比例缩放，这种方案可以实现非常精细的移动端适配效果，之前很长一段时间都是移动端开发的主流适配方案，但是需要引入额外的JS代码计算根字体大小；第四种是现在主流的vw适配方案，直接将所有元素的尺寸用vw单位设置，1vw等于屏幕宽度的百分之一，不需要额外的JS代码就可以实现等比例适配，性能更稳定。最后结论部分