HTML5+CSS3 高频面试题及详细答案（实战版）

HTML5+CSS3高频面试题及详细答案（实战版）一、HTML5基础面试题1、说说HTML5的新增特性，日常开发常用哪些？参考答案：HTML5是对HTML4的升级，主要新增了语义化标签、多媒体能力、表单新特性、本地存储、图形绘制、新交互API等，日常开发高频使用的有以下几类：1.语义化标签：解决旧版div布局无结构、可读性差的问题，常用标签：header、nav、main、section、article、aside、footer。能清晰区分页面结构，利于SEO、浏览器解析和团队维护。2.多媒体标签：原生支持音视频播放，无需依赖Flash，核心标签：audio（音频）、video（视频）、track（字幕）。支持循环播放、静音、自动播放等原生属性。3.表单增强：新增输入类型和验证规则，包括email、tel、number、url、date等输入类型；新增required、placeholder、autofocus、pattern验证属性，简化前端表单校验逻辑。4.本地存储：新增localStorage、sessionStorage，替代传统cookie的存储短板，可长期或临时存储前端数据，容量更大、操作更便捷。5.图形与画布：新增canvas画布用于绘制图形、动画、游戏；svg矢量图形用于图标、简单图形，无损缩放。6.其他新增能力：拖拽API、地理定位、全屏API、网页缓存、WebSocket长连接等，适配现代化网页交互需求。2、HTML5语义化标签的作用是什么？为什么不全部用div？参考答案：语义化标签的核心是标签自带含义，结构见名知意，相比纯div布局优势非常明显：1.利于SEO优化：搜索引擎爬虫可以通过语义标签快速识别页面头部、导航、主体内容、侧边栏、页脚，精准抓取有效内容，提升网页收录和排名。纯div无语义，爬虫无法区分内容权重。2.提升可读性与可维护性：代码结构清晰，开发者一眼就能分辨页面模块，多人协作开发、后续迭代修改成本更低。3.适配无障碍访问：屏幕阅读器可以识别语义标签，帮助视障用户读取页面结构，符合网页无障碍开发规范。4.浏览器解析更合理：浏览器会根据语义标签默认优先级解析页面，优化页面渲染结构。补充：div本身没有语义，仅作为容器用于布局，适合存放无特殊结构含义的区块，核心页面结构必须用语义化标签。3、localStorage、sessionStorage、cookie的区别？参考答案：三者都是前端本地存储方案，核心区别体现在存储周期、容量、请求携带、作用域、兼容性上，是开发和面试高频考点：1.Cookie-容量：最大4KB，容量极小；-周期：默认会话级（关闭浏览器失效），可手动设置expires/max-age设置过期时间；-特性：每次HTTP请求都会自动携带到服务端，存在性能浪费；可设置跨域、读写权限；-适用场景：登录凭证、用户标识、服务端校验数据。2.localStorage-容量：约5MB，容量充足；-周期：永久存储，手动清除缓存或代码删除才会失效；-特性：仅客户端存储，请求不携带，同源窗口共享数据；-适用场景：长期存储用户偏好、本地配置、离线数据。3.sessionStorage-容量：约5MB；-周期：会话级存储，关闭当前标签页立即失效；-特性：仅当前标签页生效，不同同源标签不共享数据；-适用场景：临时存储当前页面会话数据、表单临时数据。4、HTML5离线缓存是什么？怎么使用？参考答案：HTML5离线缓存（ApplicationCache）允许网页在断网状态下正常访问，通过缓存页面静态资源，提升离线访问能力和页面加载速度。使用方式：1.在html根标签添加manifest属性，引用缓存清单文件：<htmlmanifest="cache.manifest">2.编写manifest清单文件，分为三个模块：-CACHEMANIFEST：声明需要离线缓存的资源（css、js、图片、html）；-NETWORK：声明必须联网才能访问的资源，支持通配符；-FALLBACK：声明离线时的资源降级替代方案。补充：目前该技术已逐步被ServiceWorker替代，兼容性更好、功能更强，新项目基本使用ServiceWorker实现离线缓存。5、canvas和svg的区别？参考答案：两者都是HTML5图形绘制方案，核心差异是位图与矢量图的区别，适用场景完全不同：1.渲染原理-canvas：位图绘制，通过JS动态绘制像素点，是一个独立的画布整体，绘制后无法单独修改图形；-svg：矢量图形，基于XML标签绘制，每个图形都是独立DOM节点，可单独修改样式、绑定事件。2.缩放效果-canvas：放大缩小会失真、模糊；-svg：矢量无损缩放，任意尺寸都清晰。3.性能与场景-canvas：适合高频绘制、动态动画、游戏、大数据量可视化，像素级操作灵活；-svg：适合静态图标、图标库、简单图形、流程图、自适应页面图形，交互更便捷。4.事件绑定-canvas：只能给整个画布绑定事件，需要手动计算点击区域；-svg：每个图形节点可直接绑定点击、悬浮等事件。二、CSS3基础与核心特性面试题1、CSS3有哪些核心新增特性？参考答案：CSS3在原有CSS2基础上新增了大量实用特性，是现代网页样式开发的核心，主要包括：1.选择器升级：新增属性选择器、伪类选择器（nth-child、nth-of-type、hover、focus等）、伪元素（before、after），精准匹配页面元素，减少多余class命名。2.圆角与阴影：border-radius实现圆角、box-shadow盒子阴影、text-shadow文字阴影，无需图片即可实现精致样式。3.渐变背景：linear-gradient线性渐变、radial-gradient径向渐变，替代渐变图片，提升页面加载速度和适配性。4.变形、过渡与动画：transform位移、缩放、旋转、倾斜；transition过渡动画；animation关键帧动画，实现流畅交互效果。5.弹性布局Flex：一维布局方案，轻松实现居中、等分、自适应、自动换行，替代传统浮动布局。6.网格布局Grid：二维布局方案，同时控制行和列，适合整体页面栅格布局、复杂排版。7.媒体查询：@media实现响应式布局，适配手机、平板、电脑不同设备尺寸。8.其他特性：透明度opacity、rgba透明颜色、box-sizing盒模型、文字溢出省略、多列布局等。2、标准盒模型和怪异盒模型的区别？box-sizing作用？参考答案：盒模型是CSS布局的基础，分为标准盒模型（W3C盒模型）和IE怪异盒模型，由box-sizing属性控制。1.标准盒模型（box-sizing:content-box）元素实际宽度=width+padding+border+margin设置的width属性仅代表内容区宽度，内边距和边框会撑开元素整体尺寸，容易导致布局错位。2.怪异盒模型（box-sizing:border-box）元素实际宽度=width+margin设置的width属性包含内容区、内边距、边框，修改padding和border不会改变元素整体尺寸，布局更稳定。开发规范：实际项目中统一设置*{box-sizing:border-box;}，避免布局塌陷、错位问题。3、CSS居中方式有哪些？分水平居中、垂直居中、水平垂直居中参考答案：居中是布局高频操作，整理项目中最常用、兼容性最好的方式：1、水平居中-行内元素（文字、图片）：父级设置text-align:center；-块级元素：自身设置margin:0auto；-flex布局：父级设置display:flex;justify-content:center。2、垂直居中-单行文字：父级设置line-height=高度；-flex布局：父级设置display:flex;align-items:center；-定位居中：父级相对定位，子级绝对定位，top:50%;transform:translateY(-50%)。3、水平垂直居中（万能常用）方式一（Flex推荐）：父元素{display:flex;justify-content:center;align-items:center;}方式二（定位+变形）：父相对定位，子绝对定位，top/left:50%;transform:translate(-50%,-50%)方式三（Grid）：父元素{display:grid;place-items:center;}4、Flex布局常用属性及详解参考答案：Flex是一维弹性布局，分为父容器属性和子元素属性，日常开发全覆盖：父容器常用属性1.display:flex：开启弹性布局，子元素默认横向排列；2.flex-direction：设置主轴方向，row横向、column纵向；3.justify-content：主轴对齐方式，center居中、space-between两端对齐、space-around均分；4.align-items：侧轴对齐方式，center居中、flex-start顶部对齐、flex-end底部对齐；5.flex-wrap：是否自动换行，nowrap不换行、wrap自动换行；6.align-content：多行元素的侧轴对齐方式。子元素常用属性1.flex-grow：元素放大比例，默认0（不放大）；2.flex-shrink：元素缩小比例，默认1（自动缩小）；3.flex-basis：元素基础尺寸，优先级高于width；4.flex：1；简写，平分剩余空间；5.align-self：单独设置自身侧轴对齐方式，覆盖父级样式。5、flex:1具体代表什么？参考答案：flex是复合属性，完整写法为flex:growshrinkbasis，flex:1是简写等价于：flex-grow:1;flex-shrink:1;flex-basis:0%;含义：1.flex-grow:1：父容器有剩余空间时，该元素自动平分剩余空间；2.flex-shrink:1：空间不足时，元素自动等比例缩小；3.flex-basis:0%：忽略自身width，以剩余空间分配为准。实际作用：多个设置flex:1的子元素，会均分父容器剩余宽度，实现自适应等分布局。6、CSS动画transition、transform、animation的区别参考答案：三者各司其职，是CSS动画体系的核心，很多开发者容易混淆：1.transform（变形）纯样式属性，负责元素形态变换，无动画效果，仅改变元素状态。包括位移translate、缩放scale、旋转rotate、倾斜skew。2.transition（过渡动画）状态过渡效果，需要触发条件（hover、点击、JS修改样式），只能实现简单的从初始状态到结束状态的一次性过渡，无关键帧、无法循环。3.animation（关键帧动画）完整动画方案，通过@keyframes定义多段关键帧，支持自动播放、循环、延迟、暂停、匀速变速，无需触发条件，适合复杂动画、持续动画效果。三、进阶高频面试题（布局、兼容、性能）1、什么是BFC？BFC的作用和触发条件参考答案：BFC即块级格式化上下文，是CSS的独立渲染区域，内部元素的布局不会影响外部元素，外部布局也不会干扰内部。常用触发条件（项目最常用）：1.元素设置浮动float不为none；2.元素设置overflow不为visible（hidden/auto/scroll）；3.元素设置绝对定位、固定定位；4.display为inline-block、flex、grid等。BFC核心作用：1.清除浮动：解决父元素高度塌陷问题（子元素浮动后父级高度为0）；2.解决外边距塌陷：上下块级元素margin重叠问题；3.阻止元素被浮动元素覆盖：实现自适应两栏布局。2、浮动的优缺点？为什么现在少用浮动布局？参考答案：优点：早期主流布局方案，兼容性极好，适配老旧浏览器，可实现简单的横向排列、图文环绕效果。缺点：1.浮动脱离标准文档流，导致父元素高度塌陷，必须手动清除浮动，代码冗余；2.容易出现布局错位、margin失效、元素重叠问题；3.复杂布局实现繁琐，自适应、居中、等分布局代码量大；4.响应式适配难度高，维护成本大。目前开发优先使用Flex、Grid布局，无需脱离文档流、无需清除浮动、适配性更强、代码更简洁，仅图文环绕场景偶尔使用浮动。3、CSS选择器权重优先级？!important慎用原因参考答案：选择器权重从高到低排序：!important>行内样式（style）>ID选择器>类/伪类/属性选择器>标签选择器>通配符选择器>继承样式权重计算规则：1.同权重：后写的样式覆盖先写的；2.权重叠加不进位，多个类选择器权重不会超过ID选择器。!important慎用原因：1.权重最高，无法被常规样式覆盖，后期样式迭代、修改极其困难；2.破坏CSS层级权重规则，导致样式混乱、难以排查bug；3.多人协作时，容易出现样式冲突，增加维护成本。开发原则：优先通过调整选择器权重、调整代码顺序修改样式，尽量不使用!important。4、响应式布局的实现方案有哪些？参考答案：响应式布局核心是一套代码适配多终端，常用四种方案：1.媒体查询@media：最核心方案，根据不同屏幕宽度设置不同样式，适配手机、平板、电脑，精准控制各终端布局。2.百分比布局：宽高使用百分比单位，相对于父元素自适应，适合简单自适应场景。3.rem/em布局：rem基于根字体大小，通过JS动态修改根字体，实现整体等比例缩放，适配移动端。4.vw/vh视口单位：vw为屏幕宽度百分比、vh为屏幕高度百分比，纯CSS实现自适应，无需JS，是目前主流移动端适配方案。5.Flex/Grid弹性布局：配合媒体查询，实现布局自动适配、自动换行、等分缩放。5、CSS性能优化的方式有哪些？参考答案：日常开发中可落地的CSS性能优化手段：1.减少重排重绘：避免频繁修改DOM样式，尽量统一修改class；优先使用transform、opac