前端HTMLCSS题库及答案

前端HTMLCSS题库及答案一、单项选择题（共10题，每题1分，共10分）下列HTML标签中，属于整个网页根标签的是？A.是网页头部信息的容器标签B.是包裹整个网页所有内容的根标签C.是网页可见内容的容器标签D.是前端框架自定义的非原生标签答案：B解析：HTML页面的标准结构中，是唯一的根标签，所有其他标签都要包裹在内部；和是的直接子标签，分别承载页面配置信息和可见内容；原生HTML中没有标签，因此其余选项错误。下列CSS选择器中，优先级最高的是？A.标签选择器，直接匹配对应HTML标签B.类选择器，匹配带有指定class属性的元素C.ID选择器，匹配带有指定id属性的元素D.通配符选择器，匹配页面所有元素答案：C解析：CSS选择器基础优先级从高到低为ID选择器>类选择器>标签选择器>通配符选择器，因此优先级最高的是ID选择器。下列引入CSS的方式中，优先级最高的是？A.外部样式表，通过标签引入独立CSS文件B.内部样式表，写在页面标签内的样式C.行内样式，直接写在标签style属性中的样式D.导入式样式，通过@import规则引入的外部样式答案：C解析：行内样式直接作用于单个标签，优先级高于所有写在样式表中的样式；外部样式表、内部样式表、导入式样式优先级取决于权重和书写顺序，都低于行内样式。下列关于块级元素的特点描述错误的是？A.块级元素默认独占一行显示，不会和其他元素排在同一行B.块级元素默认宽度撑满父容器的可用宽度C.块级元素可以直接设置width和height属性调整尺寸D.多个块级元素默认会排列在同一行显示答案：D解析：多个块级元素默认每行只显示一个，排在同一行是行内元素、行内块元素的特点，因此D选项描述错误，其余选项都是块级元素的正确特性。要让元素隐藏且不占据页面空间，应该设置display属性的哪个值？A.display:none，元素从渲染树中移除B.visibility:hidden，元素视觉隐藏但保留占据的空间C.opacity:0，元素透明但保留占据的空间和交互能力D.overflow:hidden，仅裁剪元素溢出的部分，不会隐藏整个元素答案：A解析：display:none会让元素完全从页面渲染结果中消失，不占据任何空间；其余三个选项的设置都会保留元素原本的页面空间，因此不符合要求。下列HTML标签中，属于语义化标签的是？A.是无特定语义的通用块级容器B.是无特定语义的通用行内容器C.是专门表示页面或模块头部的语义化标签D.是小程序平台自定义的非原生HTML标签答案：C解析：语义化标签是指标签本身就带有明确的含义，能直接说明承载内容的功能，符合这个定义；其余三个标签都没有明确语义或不属于原生HTML标签。标准W3C盒模型中，width属性包含的区域是？A.仅元素的内容区（content）B.内容区+内边距（padding）C.内容区+内边距+边框（border）D.内容区+内边距+边框+外边距（margin）答案：A解析：标准盒模型的width和height属性仅定义内容区的尺寸，元素实际占据的页面宽度需要额外加上padding、border的数值；包含padding和border的是怪异盒模型的特性。CSSposition属性的哪个取值，会让元素相对于浏览器视口定位？A.relative，相对于元素自身原本的位置定位B.absolute，相对于最近的非static定位的父元素定位C.fixed，相对于浏览器视口固定定位，滚动页面也不会改变位置D.static，默认的静态定位，遵循标准文档流排版答案：C解析：fixed固定定位的参考系就是浏览器视口，其余三个定位方式的参考系都不是视口，因此正确选项是C。HTML中引入外部CSS文件的专用标签是？A.标签，用于引入JavaScript文件或写JS代码B.标签，专门用于引入外部CSS、字体等资源C.标签，用于写页面内部样式D.标签，用于定义超链接答案：B解析：标签的rel属性设置为stylesheet时，就是用来引入外部CSS文件的专用标签，其余选项的标签功能与引入CSS无关。下列CSS颜色表示方式中，写法错误的是？A.fff，十六进制短写法表示白色B.rgb(255,255,255)，rgb三原色表示白色C.rgba(255,255,255,1)，带透明度的rgba表示不透明白色D.rgb(255,255,255,1)，rgb格式携带第四个透明度参数答案：D解析：rgb颜色格式只有三个参数，分别对应红、绿、蓝三个通道的数值，第四个透明度参数需要用rgba格式表示，因此D选项写法错误。二、多项选择题（共10题，每题2分，共20分）下列标签中，属于HTML行内元素的有？A.，用于包裹行内文本的行内元素B.，用于定义超链接的行内元素C.，用于定义段落的块级元素D.，用于定义一级标题的块级元素答案：AB解析：行内元素默认不会独占一行，多个行内元素可以排在同一行，和都符合这个特性；和都是块级元素，因此错误。下列选择器中，属于CSS基本选择器的有？A.标签选择器，直接匹配HTML标签的选择器B.类选择器，匹配class属性的选择器C.后代选择器，匹配指定元素后代的复合选择器D.ID选择器，匹配id属性的选择器答案：ABD解析：CSS基本选择器包括标签选择器、类选择器、ID选择器、通配符选择器四种；后代选择器属于复合选择器，是多个基本选择器组合而成的，因此不属于基本选择器。下列关于CSS浮动元素的描述，正确的有？A.浮动元素会脱离标准文档流，不再占据原本的文档流位置B.多个设置了左浮动的元素，宽度足够的情况下会排在同一行C.浮动元素不会影响后面标准流元素的排版D.浮动元素可以直接设置width和height属性调整尺寸答案：ABD解析：浮动元素脱离文档流后，会造成父元素高度塌陷，后面的标准流元素会跑到浮动元素的下方，因此C选项描述错误；其余三个选项都是浮动元素的正确特性。下列关于HTML语义化标签作用的描述，正确的有？A.提升代码可读性，开发者可以快速判断内容结构，便于团队协作和后期维护B.有利于搜索引擎爬虫识别页面内容结构，提升SEO效果C.语义化标签自带丰富的样式，可以直接实现页面设计效果，不需要写CSSD.便于屏幕阅读器等辅助设备识别内容结构，提升网页的无障碍访问体验答案：ABD解析：语义化标签仅定义内容的结构含义，本身只有非常基础的默认样式，无法直接实现复杂的页面设计效果，必须配合CSS使用，因此C选项错误；其余三个选项都是语义化标签的核心作用。下列方法中，可以实现块级元素水平居中的有？A.给宽度固定的块级元素设置margin:0autoB.给块级元素的父元素设置text-align:centerC.给开启了定位的块级元素设置left:50%，再设置margin-left为负的自身宽度的一半D.给块级元素的父元素设置display:flex，再设置justify-content:center答案：ACD解析：text-align:center仅能让内部的行内内容、行内块元素水平居中，对块级元素无效，因此B选项错误；其余三个选项都是常用的块级元素水平居中实现方式。CSS盒模型的组成部分包括？A.内容区content，承载元素内部文本、图片等内容的区域B.内边距padding，内容区和边框之间的间距C.边框border，包裹内边距和内容区的边框D.外边距margin，元素和其他元素之间的外部间距答案：ABCD解析：CSS盒模型由内容区、内边距、边框、外边距四个部分共同组成，四个选项都正确。下列CSS属性中，属于可以继承的属性有？A.color，文本颜色属性B.font-size，字体大小属性C.border，边框属性D.margin，外边距属性答案：AB解析：CSS中字体相关、文本颜色相关的属性大多可以继承给子元素，边框、外边距、背景等属性不会自动继承，因此正确选项是AB。下列标签中，属于HTML表单相关标签的有？A.，表单输入框、单选、复选等组件的通用标签B.，表单多行文本输入标签C.，表单下拉选择框标签D.，表示导航区域的语义化标签答案：ABC解析：、、都是表单中用于收集用户输入的专用标签；是语义化结构标签，和表单功能无关，因此错误。下列特性中，属于CSS3新增的有？A.border-radius，圆角属性B.box-shadow，盒子阴影属性C.float，浮动属性D.animation，关键帧动画属性答案：ABD解析：float是CSS2就已经存在的布局属性，不属于CSS3新增；圆角、阴影、动画都是CSS3新增的特性，因此正确选项是ABD。下列方法中，属于常用的清除浮动解决方案的有？A.给浮动元素的父元素设置overflow:hidden，触发父元素BFC包裹浮动元素B.在浮动元素的末尾添加一个空的块级元素，设置clear:bothC.给浮动元素的父元素设置固定高度，直接撑起父容器D.给浮动元素的父元素添加::after伪元素，设置clear:both答案：ABCD解析：四个选项都是实际开发中常用的清除浮动方法，各自适用不同场景：设置固定高度适合子元素高度固定的场景，overflow:hidden适合无溢出内容的场景，空div适合需要兼容极老旧浏览器的场景，伪元素法是目前最通用的无冗余DOM的解决方案。三、判断题（共10题，每题1分，共10分）HTML的单行注释写法是//注释内容。答案：错误解析：HTML的注释语法是<!-注释内容–>，//是JavaScript的单行注释语法，不能在HTML中使用。CSS中类选择器的前缀是。答案：错误解析：CSS类选择器的前缀是.，是ID选择器的前缀。块级元素可以包含行内元素和其他块级元素。答案：正确解析：块级元素的内容模型允许嵌套块级元素、行内元素等各类子元素，只有行内元素不允许嵌套块级元素。设置opacity:0的元素会完全透明，且不会响应点击事件。答案：错误解析：opacity:0仅让元素视觉上透明，元素仍然占据页面空间，且可以正常响应点击、hover等交互事件。HTML的标签属于单标签，不需要成对闭合。答案：正确解析：是自闭合标签，只需要写或即可，不需要成对的闭合标签，类似的自闭合标签还有、等。CSS中垂直方向相邻的两个块级元素的上下外边距会发生合并，也就是外边距塌陷现象。答案：正确解析：这是CSS的默认渲染规则，垂直方向的相邻外边距会取两者中较大的数值作为最终间距，水平方向的外边距不会发生合并。语义化标签只能在移动端网页中使用，PC端网页不能使用。答案：错误解析：语义化标签是HTML标准规定的通用标签，没有使用场景限制，PC端和移动端网页都可以正常使用。CSS中的z-index属性可以给任意元素设置，用来调整元素的堆叠顺序。答案：错误解析：z-index属性仅对position属性取值不是static的定位元素生效，给默认静态定位的元素设置z-index不会产生任何效果。HTML的标签是写在标签内部的。答案：错误解析：标签用于定义网页的标题，属于页面配置信息，必须写在头部标签内部。CSS中的padding属性可以设置负值，用来调整元素的位置。答案：错误解析：padding是元素的内边距，只能设置非负值，只有margin属性可以设置负值来调整元素位置。四、简答题（共5题，每题6分，共30分）简述HTML语义化的核心意义。答案：第一，提升代码的可读性与可维护性，开发者不需要看样式就能通过标签快速判断内容的功能和结构，团队协作时开发效率更高，后期修改也更容易定位内容位置；第二，提升搜索引擎优化（SEO）效果，搜索引擎爬虫可以通过语义化标签快速识别页面内容的层级和重要程度，更准确地抓取页面核心信息，提升页面在搜索结果中的排名；第三，提升网页的无障碍访问体验，屏幕阅读器等辅助设备可以根据语义化标签的含义，为视障用户准确朗读页面的结构和内容，让特殊群体也能正常使用网页。解析：HTML语义化的核心是让结构和内容分离，不要为了实现样式而乱用标签，也不要过度使用无语义的、包裹内容，合理的语义化还能减少CSS的代码量，降低维护成本。简述CSS盒模型的两种模式及区别。答案：第一，标准W3C盒模型，通过box-sizing:content-box设置，该模式下设置的width和height属性仅包含元素的内容区，元素实际占据的页面宽度为content+padding+border的总和；第二，怪异IE盒模型，通过box-sizing:border-box设置，该模式下设置的width和height属性已经包含了内容区、padding和border，元素实际占据的页面宽度就是设置的width值；第三，两种模式可以通过box-sizing属性自由切换，没有优劣之分，分别适用不同的开发场景。解析：实际开发中很多开发者会全局设置box-sizing:border-box，这样给元素加padding和border的时候不会撑破容器，不需要额外计算元素宽度，大幅提升布局效率。简述CSS选择器的优先级计算规则。答案：第一，基础优先级从高到低的顺序为：行内样式>ID选择器>类选择器/属性选择器/伪类选择器>标签选择器/伪元素选择器>通配符选择器；第二，优先级可以通过权重叠加计算，比如两个类选择器的权重要高于一个类选择器，相同权重的选择器，后写的样式会覆盖先写的样式，后引入的样式文件中的样式会覆盖先引入的样式；第三，!important声明可以把对应样式的优先级提升到最高，会覆盖所有其他同属性的样式，非特殊情况不建议使用，会破坏正常的优先级规则，导致后期样式维护困难。解析：优先级也可以换算为数值计算，行内样式权重为1000，ID选择器为100，类选择器为10，标签选择器为1，叠加后数值越高优先级越高，但注意权重不会跨级，比如10个类选择器的权重也不会超过1个ID选择器。简述什么是CSS的BFC，以及触发BFC的常用条件。答案：第一，BFC全称是块级格式化上下文，是CSS中的一种渲染规则，触发BFC的元素会生成一个独立的渲染区域，区域内部的元素排版不会影响到区域外部的元素；第二，常用的触发BFC的条件包括：元素设置float属性不为none、元素设置position为absolute或fixed、元素的display属性设置为inline-block、flex、grid等非默认块级值、元素设置overflow属性不为visible；第三，BFC的常用作用包括解决垂直外边距塌陷问题、清除浮动导致的父元素高度塌陷问题、阻止元素被浮动元素覆盖。解析：实际开发中最常用的触发BFC的方式是给父元素设置overflow:hidden或者display:flex，代码量少且不会产生其他副作用，适合绝大多数布局场景。简述水平垂直居中一个宽高固定的块级元素的三种常用方法。答案：第一，定位自适应法：给父元素设置position:relative，给需要居中的子元素设置position:absolute，同时设置top、bottom、left、right都为0，再设置margin:auto，即可实现水平垂直居中；第二，负边距法：给父元素设置position:relative，给子元素设置position:absolute，设置left:50%、top:50%，再设置margin-left为负的自身宽度的一半，margin-top为负的自身高度的一半，即可实现居中；第三，flex布局法：给父元素设置display:flex，再设置justify-content:center和align-items:center，即可让内部的子元素自动水平垂直居中。解析：三种方法各有适用场景，flex布局写法最简单，兼容性已经覆盖绝大多数用户群体，是目前最常用的居中方式；定位法和负边距法适合需要兼容IE等老旧浏览器的场景。五、论述题（共3题，每题10分，共30分）结合实际开发经验，论述CSS浮动的特性、带来的问题以及对应的解决方案。答案：论点浮动是CSS早期为了实现文字环绕效果推出的特性，后来被广泛用于多列布局，虽然现在有flex、grid等更先进的布局方式，但浮动的特性和相关问题仍然是前端开发者必须掌握的核心知识点。论据首先是浮动的核心特性：浮动元素会脱离标准文档流，向左或者向右对齐，直到碰到父容器的边界或者其他浮动元素，多个浮动元素宽度足够的情况下会自动排在同一行，同时浮动元素不会被父元素的overflow:hidden裁剪之外的属性影响，还能实现文字环绕图片的效果，这是其他布局方式很难简单实现的。其次是浮动带来的典型问题：最常见的就是父元素高度塌陷，因为浮动元素脱离了标准文档流，父元素如果没有设置固定高度，就不会被浮动的子元素撑开，高度会变成0，导致后面的标准流元素跑到浮动元素的位置，造成布局混乱。比如做导航栏的时候，所有菜单项都设置了左浮动，导航栏的父容器如果没有处理浮动，高度就会塌陷，后面的banner区域会直接和导航栏重叠，严重影响页面显示。最后是对应的解决方案，也就是清除浮动的常用方式：第一种是给父元素设置固定高度，优点是写法简单，缺点是不灵活，如果子元素高度变化就要手动修改父元素高度，适合子元素高度固定的场景，比如高度固定的导航栏；第二种是给父元素设置overflow:hidden，触发父元素的BFC，让父元素自动包裹内部的浮动元素，优点是代码量少，缺点是如果父元素有超出边界需要显示的内容会被裁剪，适合没有溢出内容的容器；第三种是在浮动元素末尾添加一个空的块级元素，设置clear:both，优点是兼容性极好，可以兼容非常老旧的浏览器，缺点是会增加无用的DOM节点，不符合结构和样式分离的原则；第四种是给父元素添加::after伪元素，设置content为空字符串、display为block、clear为both，这种方法是目前最通用的解决方案，不会增加多余的DOM节点，兼容性也足够覆盖绝大多数使用场景。结论浮动现在虽然很少用来做整体布局，但在实现文字环绕图片等特定场景下仍然是最优选择，同时很多老旧项目的布局仍然依赖浮动，掌握浮动的特性和问题解决方案，既能避免布局bug，也能更好地维护存量项目。结合实例论述响应式布局的核心实现思路，以及HTML和CSS层面的常用实现技术。答案：论点响应式布局是目前前端开发的主流布局方案，可以让同一套代码在PC、平板、手机等不同尺寸的设备上都有良好的显示效果，大幅降低多端开发和维护的成本。论据响应式布局的核心思路是，根据设备的屏幕尺寸、分辨率、操作方式等特性，动态调整页面的布局结构、元素尺寸和样式，保证不同设备下的用户体验都符合设备的使用习惯，不需要为不同设备单独开发多套代码。具体的实现技术分为HTML和CSS两个层面：HTML层面首先要设置viewport元标签，必须在页面的head中添加，让网页的宽度等于设备的物理屏幕宽度，避免移动端浏览器自动缩放页面。如果不设置这个标签，移动端浏览器会默认把页面按照980px的宽度渲染，用户需要手动缩放才能看清内容，体验非常差。其次要使用语义化标签构建清晰的页面结构，方便后续在不同尺寸下调整内容的显示顺序和位置，比如用、、、划分页面结构，调整的时候直接修改这些模块的样式即可，不需要修改DOM结构。CSS层面的核心技术有四个：第一是媒体查询，也就是@media规则，可以根据不同的屏幕宽度断点设置不同的样式，比如设置断点为768px，当屏幕宽度小于768px的时候，把原本横向排列的导航栏改成纵向排列，原本三列的内容布局改成单列布局，示例代码为@media(max-width:768px){.nav{flex-direction:column;}.content{width:100%;}}；第二是flex弹性布局，flex布局本身就具有弹性，元素可以自动填充父容器的剩余空间，自动换行，非常适合响应式排列，比如商品列表用flex布局，设置flex-wrap:wrap，屏幕宽的时候一行放4个商品，平板宽度一行放2个，手机宽度一行放1个，不需要写大量的媒体查询代码；第三是相对单位，用rem、vw、vh等相对单位代替固定的px单位，让元素的尺寸可以根据屏幕尺寸自动调整，比如把根元素的字体大小设置为1vw，那么1rem就等于屏幕宽度的1%，设置元素宽度为100rem就等于满屏宽度，自动适配所有设备；第四是流式布局，元素宽度用百分比设置，根据父容器的宽度自动调整，比如内容区宽度设置为80%，左右margin各10%，在所有设备下都有统一的边距效果。结论响应式布局不是单一技术就能实现的，而是多个技术组合的结果，现在主流的开发方案一般是viewport+媒体查询+flex布局+相对单位的组合，已经可以覆盖绝大多数项目的响应式需求，平衡了开发效率和兼容性。论述前端开发中CSS样式冲突的常见原因，以及对应的解决和优化方案。答案：论点CSS样式冲突是前端开发中最常见的问题之一，会导致页面样式不符合预期，开发阶段反复调整浪费大量时间，后期维护也困难，从根源上避免样式冲突是提升开发效率的核心手段。论据常见的样式冲突原因有四个：第一是优先级相同的情况下样式覆盖，相同权重的选择器，后写的样式会覆盖先写的样式，如果是多个CSS文件引入，引入顺序靠后的文件中的样式会覆盖前面的，比如同一个类名先在