HTML5+CSS3 前端面试题及详细答案（实战完整版）

HTML5+CSS3前端面试题及详细答案（实战完整版）一、HTML5基础面试题1、说说HTML5相比HTML4的主要新增特性？参考答案：HTML5不是简单的标签新增，而是对前端页面结构、功能、交互能力的全面升级，核心改动分为五大类，都是日常开发高频用到的：1.语义化标签：新增header、nav、main、section、article、aside、footer等标签，替代传统的div堆砌，让页面结构清晰，利于搜索引擎抓取和代码维护。2.多媒体标签：新增audio、video标签，原生支持音视频播放，无需依赖Flash插件，支持循环播放、静音、进度控制等属性。3.表单增强：新增input类型（email、tel、number、date、url等）、表单验证属性（required、pattern、maxlength）、占位符placeholder、自动聚焦autofocus等，简化表单校验开发。4.本地存储能力：新增localStorage、sessionStorage、indexedDB，替代传统的cookie，存储容量更大、操作更灵活，实现前端数据本地持久化。5.新增交互与图形能力：新增canvas画布、svg矢量图形、拖拽API、地理位置API、Web存储、WebSocket双向通信等，支持复杂可视化和实时交互场景。除此之外，HTML5还弱化了过时标签，摒弃了font、center等样式标签，统一由CSS控制样式，实现结构与样式分离。2、什么是HTML5语义化？语义化的好处是什么？参考答案：HTML5语义化指的是使用具备明确含义的标签搭建页面结构，让标签本身可以描述内容的作用和层级，而非全部使用无意义的div、span。核心好处有四点：1.代码可读性更高：开发者通过标签名就能快速识别模块功能，比如nav是导航、footer是页脚，团队协作维护更便捷。2.利于SEO优化：搜索引擎爬虫可以精准识别页面模块权重，区分主体内容、导航、侧边栏、页脚，提升页面收录和搜索排名。3.适配无障碍访问：屏幕阅读器可以识别语义标签，为视障用户朗读页面结构，提升网页的无障碍兼容性。4.结构更规范：彻底区分页面结构、样式、行为，符合前端标准化开发规范。3、localStorage、sessionStorage、cookie的区别？参考答案：三者都是前端本地存储方案，核心差异集中在存储周期、容量、作用域、请求携带、兼容性五个维度：1.存储生命周期cookie：默认临时存储，关闭浏览器失效，可手动设置过期时间实现持久化；sessionStorage：会话级存储，关闭当前标签页立即清空；localStorage：永久存储，手动删除或清空浏览器缓存才会失效。2.存储容量cookie容量极小，仅4KB左右；sessionStorage、localStorage容量约5MB，远大于cookie。3.作用域限制cookie：同域名下所有页面共享；sessionStorage：仅当前标签页、当前会话有效，跨标签不共享；localStorage：同域名下所有页面、所有标签共享。4.请求携带cookie：每次HTTP请求都会自动携带到服务端；sessionStorage、localStorage：仅前端本地存储，不会参与网络请求。5.使用场景cookie：存储登录令牌、用户验证信息；sessionStorage：临时存储当前页面操作数据（表单临时数据、弹窗状态）；localStorage：长期存储用户偏好设置、本地缓存数据。4、canvas和SVG的区别？参考答案：两者都是前端绘图方案，但底层原理和适用场景完全不同：1.原理不同SVG是矢量图形，基于XML标签绘制，图形由点、线、面数学公式构成；canvas是位图绘图，基于JS脚本在画布上逐像素绘制，最终生成像素图像。2.缩放效果SVG无限缩放不失真，适合图标、logo、简单图形；canvas缩放会出现像素模糊，和图片缩放原理一致。3.事件交互SVG每个图形标签都是独立DOM节点，可单独绑定点击、悬浮事件；canvas整体是一个画布DOM，内部图形无法单独绑定事件，只能通过坐标判断交互。4.性能场景SVG适合图形数量少、需要频繁修改、需要交互的静态图形；canvas适合图形数量多、动态渲染、动画频繁刷新的场景，比如游戏、数据大屏、动态图表。5、HTML5拖拽API了解吗？核心事件有哪些？参考答案：HTML5原生支持元素拖拽，只需给元素设置draggable="true"即可开启拖拽功能，核心分为拖拽元素事件和目标容器事件。1.拖拽元素触发事件：dragstart（开始拖拽）、drag（拖拽过程持续触发）、dragend（拖拽结束）2.目标容器触发事件：dragenter（拖拽元素进入容器）、dragover（在容器内悬浮，必须阻止默认事件才能触发drop）、dragleave（拖拽元素离开容器）、drop（松开鼠标放下元素）日常开发中最常用的是：阻止dragover默认事件，配合drop事件实现拖拽落地、文件上传等功能。二、CSS3基础与核心特性面试题1、CSS3新增了哪些核心特性？参考答案：CSS3在原有CSS基础上新增大量实用特性，彻底优化了页面样式和动画开发，高频核心特性如下：1.选择器升级：新增属性选择器、伪类选择器（nth-child、nth-of-type）、伪元素（before、after），精准匹配页面元素，减少class命名。2.圆角与阴影：border-radius圆角、box-shadow盒子阴影、text-shadow文字阴影，实现磨砂、卡片质感样式。3.变形与动画：transform2D/3D变形（平移、缩放、旋转、倾斜）、transition过渡动画、animation关键帧动画。4.布局体系升级：新增Flex弹性布局、Grid网格布局，替代传统浮动布局，完美适配自适应、居中、等分布局场景。5.样式增强：透明度opacity、rgba透明色、background多背景、渐变背景（linear-gradient、radial-gradient）、文字溢出省略、自定义字体@font-face。2、transition和animation的区别？各自适用场景？参考答案：两者都是CSS3动画方案，核心差异在触发方式、动画复杂度、循环能力：1.transition过渡动画是状态过渡动画，只能实现「初始状态→结束状态」的一次性过渡，无中间关键帧；必须依靠外部触发：hover、点击、class切换等；不支持自动循环、不支持暂停、不能设置多段动画。适用场景：按钮悬浮、卡片缩放、弹窗淡入、简单状态切换。2.animation关键帧动画通过@keyframes定义多段关键帧，可设置任意阶段的样式状态；支持自动执行、无限循环、延迟执行、动画暂停、速度曲线调节；无需外部触发，页面加载即可运行。适用场景：loading动画、轮播滚动、心跳动画、持续动态效果、复杂多段动画。3、CSS伪类和伪元素的区别？常用的有哪些？参考答案：核心区别：伪类修饰元素状态，伪元素创建虚拟DOM节点1.伪类（单冒号:）作用：匹配元素的不同状态，不会生成新节点，只是修改元素样式；常用：hover、active、focus、visited、nth-child、first-child、disabled。2.伪元素（双冒号::）作用：创建虚拟的行内元素，属于页面DOM的一部分，可以设置宽高、内容；常用：::before、::after（最常用，用于清除浮动、添加图标、装饰元素）、::first-letter、::selection。补充：CSS2伪元素支持单冒号写法，CSS3规范统一双冒号，开发中优先使用双冒号区分。4、rgba和opacity的区别？参考答案：两者都能实现透明效果，但透明范围和作用机制完全不同：1.rgba()：是颜色属性，仅让当前设置的颜色透明（背景色、文字色、边框色），元素内部的子元素、图片、内容不受影响。2.opacity：是元素整体透明度属性，作用于整个元素及所有子元素，设置后元素内部所有内容全部透明，无法单独控制局部透明。实战场景：卡片背景透明、文字不透明用rgba；整体弹窗淡化、全局遮罩用opacity。三、CSS3布局核心面试题（高频必考）1、详细说说Flex弹性布局？常用属性有哪些？参考答案：Flex是CSS3推出的一维弹性布局，专门解决传统浮动布局的排版难题，适配移动端、自适应布局，兼容性极好。开启方式：给父元素设置display:flex，父元素为容器，子元素为弹性项。父容器常用属性：1.flex-direction：设置主轴方向，row（水平默认）、column（垂直）；2.justify-content：主轴对齐方式，居中、两端对齐、均分间距；3.align-items：侧轴单行对齐方式，垂直居中必备；4.flex-wrap：是否自动换行，默认nowrap不换行，wrap自动换行；5.align-content：多行侧轴对齐，仅换行后生效。子元素常用属性：1.flex：简写属性，控制缩放比例；2.flex-grow：剩余空间分配比例，默认0不放大；3.flex-shrink：空间不足时收缩比例，默认1可收缩；4.flex-basis：元素基础宽度，优先级高于width；5.align-self：单独控制单个子元素对齐方式。2、如何用Flex实现水平垂直居中？参考答案：这是开发最常用的居中方案，代码简洁、适配所有尺寸元素：PlainText

.parent{

display:flex;

justify-content:center;/*水平居中*/

align-items:center;/*垂直居中*/

}优势：无需固定宽高、适配自适应元素、代码极简、兼容性好，替代了传统margin居中、定位居中的复杂写法。3、简单介绍Grid网格布局？和Flex的区别？参考答案：Grid是CSS3二维网格布局，同时控制行和列，适合整体页面栅格排版、复杂多列布局。Flex与Grid核心区别：1.维度不同：Flex是一维布局，只能控制单行或单列；Grid是二维布局，同时控制行列；2.适用场景：Flex适合局部组件排版（按钮组、列表、导航）；Grid适合整体页面布局（页面骨架、卡片栅格、多列均等布局）；3.控制粒度：Flex子元素自适应能力更强；Grid可以精准定义每一行每一列的尺寸和位置。4、什么是BFC？如何触发BFC？BFC的作用？参考答案：BFC全称块级格式化上下文，是浏览器的一块独立渲染区域，区域内部元素的布局不会影响外部元素，外部也不会影响内部。常用触发BFC的条件：1.根元素html；2.浮动元素（float不为none）；3.绝对定位、固定定位元素；4.display为inline-block、flex、grid；5.overflow不为visible（hidden、auto、scroll）。BFC核心作用：1.清除浮动：解决父元素高度塌陷问题；2.防止margin塌陷：解决父子、兄弟元素外边距重叠问题；3.隔绝元素布局：内部布局不会干扰外部，实现元素独立排版。四、CSS3进阶难点面试题1、CSS选择器优先级规则？如何计算？参考答案：CSS优先级遵循权重叠加规则，权重越高，样式优先级越高，权重相同时，后写的样式覆盖先写的。权重等级从低到高：1.通配符、继承样式：权重02.标签选择器、伪元素：权重13.类选择器、伪类、属性选择器：权重104.ID选择器：权重1005.行内样式style：权重10006.!important：最高优先级，覆盖所有样式（开发不建议滥用）计算规则：多选择器组合时，权重直接累加，不会进位，比如11权重小于100权重。2、transform的translate、scale、rotate会不会脱离文档流？影响其他元素吗？参考答案：不会脱离文档流，也不会影响其他元素布局。transform属于视觉样式变换，仅改变元素的渲染位置、大小、角度，不会改变元素在文档流中的原始占位空间。简单说：元素原本占的位置不变，只是视觉上发生了偏移、缩放、旋转，周围元素的布局不会受到任何影响，这也是transform动画性能优于定位动画的核心原因。3、CSS3硬件加速了解吗？如何开启？优缺点是什么？参考答案：硬件加速就是让GPU参与页面渲染，替代CPU渲染，大幅提升动画流畅度，是前端优化动画卡顿的常用方案。开启方式：通过触发3D变形开启，常用代码：transform:translateZ(0)、transform:scale(1)。优点：动画渲染流畅，减少卡顿、掉帧，适合复杂持续动画。缺点：过度使用会占用设备GPU资源，导致页面耗电增加、内存占用过高，低端设备可能出现页面闪烁、白屏问题，需按需使用。4、如何实现单行、多行文本溢出省略？参考答案：是项目高频实用样式，CSS3专属方案：单行文本溢出省略：PlainText

.text{

white-space:nowrap;/*禁止换行*/

overflow:hidden;/*隐藏溢出*/

text-overflow:ellipsis;/*显示省略号*/

}多行文本溢出省略（主流两行）：PlainText

.text{

display:-webkit-box;

-webkit-line-clamp:2;/*控制行数*/

-webkit-box-orient:vertical;

overflow:h