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

H5+C3前端面试题及详细答案（实战完整版）一、HTML5基础核心面试题1、说说你理解的HTML5，和传统HTML4有什么核心区别？参考答案：HTML5不是简单的版本升级，是新一代网页标准，主要优化了结构、功能和原生能力，和HTML4相比核心区别有四点：第一，新增语义化标签。HTML4基本全是div、span这类无语义标签，结构混乱；HTML5新增了header、nav、main、section、footer、article等标签，标签自带语义，代码结构清晰，利于团队维护和搜索引擎收录。第二，原生多媒体支持。HTML4播放音视频必须依赖Flash插件，兼容性差、加载慢；HTML5提供audio、video标签，原生支持音视频播放，无需插件，适配移动端。第三，新增原生交互能力。新增画布Canvas、SVG、地理定位、本地存储、拖拽、文件上传等功能，以前需要借助第三方插件实现的效果，现在原生就能完成。第四，简化语法。HTML5摒弃了复杂的DTD声明，doctype写法极简，同时兼容大小写混写、省略部分闭合标签，编写效率更高。2、什么是HTML5语义化标签？好处有哪些？常用标签有哪些？参考答案：语义化标签就是标签名能直观体现内容功能和位置，不是单纯用来承载样式的盒子。核心好处：1、结构清晰：代码可读性高，新人接手项目能快速看懂页面结构，降低维护成本；2、利于SEO：搜索引擎爬虫可以精准识别页面头部、导航、正文、底部模块，提升网页收录和排名；3、适配无障碍访问：屏幕阅读器可以识别语义标签，方便视障用户浏览网页；4、移动端适配更友好，结构层级规范，减少布局错乱问题。常用语义标签：页面结构类：header（头部）、nav（导航）、main（主体）、section（区块）、article（独立文章/模块）、aside（侧边栏）、footer（底部）；文本语义类：mark（高亮标记）、time（时间）、address（地址）。3、HTML5本地存储有哪些？区别是什么？参考答案：HTML5主流本地存储分为三种：localStorage、sessionStorage、cookie，另外还有IndexedDB用于大数据存储。核心区别：1、存储周期：localStorage永久存储，手动删除或清空浏览器缓存才会失效；sessionStorage是会话级存储，关闭当前页面/浏览器标签就清空；cookie默认过期时间为会话结束，可手动设置过期时间。2、存储大小：cookie最大4KB，容量极小；localStorage和sessionStorage一般为5MB，存储空间更大。3、请求携带：cookie每次HTTP请求都会自动携带到服务端，适合存登录态、token；localStorage、sessionStorage仅存在客户端，不会参与网络请求。4、作用域：sessionStorage严格隔离标签页，不同标签页无法共享；localStorage、cookie在同域名下所有页面可以共享。实际开发中，小型临时数据用sessionStorage，长期本地缓存数据用localStorage，服务端需要校验的登录信息用cookie，大量结构化数据用IndexedDB。4、video/audio标签常用属性和兼容问题怎么处理？参考答案：常用属性：controls：显示播放控件（播放、暂停、进度条）；autoplay：自动播放（现代浏览器需要配合muted静音才能生效）；loop：循环播放；muted：静音播放；poster（video专属）：视频占位封面。兼容处理：不同浏览器支持的音视频格式不同，比如Chrome支持mp4、webm，部分老旧浏览器不兼容mp4。开发时可以在标签内部配置多个source标签，设置不同格式的资源，浏览器会自动识别兼容的格式加载，同时添加兜底文本，适配低版本浏览器。5、Canvas和SVG的区别？各自适用场景？参考答案：1、绘制原理：Canvas是像素画布，通过JS逐帧绘制像素点，属于位图；SVG是矢量图形，通过XML标签描述图形路径。2、缩放效果：Canvas放大后会模糊失真；SVG无限缩放不会模糊，画质无损。3、事件交互：Canvas整体是一个画布标签，无法给单个图形绑定事件，需要手动计算坐标；SVG每个图形都是独立标签，可直接绑定点击、悬浮事件。4、性能：图形数量少、频繁刷新动画用Canvas性能更好；静态图形、图标、图表数量少的场景，SVG更流畅。适用场景：Canvas：游戏画面、动态涂鸦、大数据量动画、视频图像处理；SVG：网站图标、LOGO、静态图表、自适应矢量图形、简单交互图形。二、CSS3核心面试题1、CSS3新增了哪些核心特性？参考答案：CSS3在布局、样式、动画、选择器上做了全面升级，核心常用特性如下：1、选择器升级：新增属性选择器、伪类选择器（nth-child、nth-of-type）、伪元素选择器，精准筛选元素，减少class命名。2、圆角、阴影、透明：border-radius圆角、box-shadow盒子阴影、text-shadow文字阴影、rgba透明色，无需图片就能实现精美样式。3、变形、过渡、动画：transform2D/3D变形、transition过渡动画、@keyframes自定义帧动画，实现流畅交互效果。4、弹性布局Flex：替代传统浮动布局，轻松实现水平垂直居中、自适应布局，解决浮动塌陷问题。5、网格布局Grid：二维布局系统，适合整体页面栅格布局，比Flex更适合复杂页面排版。6、其他：背景渐变、背景裁剪、字体自定义、多列布局、盒子模型调整等。2、详细说说Flex布局，常用属性有哪些？参考答案：Flex是CSS3弹性伸缩布局，是一维布局模型，专门用来解决元素居中、自适应排列、自适应适配问题，目前是移动端、自适应页面的主流布局方案。使用时给父元素设置display:flex，子元素自动成为弹性项目。父容器常用属性：1、flex-direction：设置主轴方向，row水平横向、column垂直纵向；2、justify-content：主轴对齐方式，center居中、space-between两端对齐、space-around均分间距；3、align-items：侧轴对齐方式，center垂直居中、stretch拉伸铺满；4、flex-wrap：是否自动换行，nowrap不换行、wrap自动换行；5、align-content：多行元素的侧轴对齐方式。子元素常用属性：1、flex：简写属性，控制元素伸缩比例；2、flex-grow：放大比例，默认0，剩余空间自动分配；3、flex-shrink：缩小比例，默认1，空间不足自动压缩；4、flex-basis：元素基础尺寸；5、align-self：单独设置当前子元素的侧轴对齐方式。3、CSS3过渡transition和动画animation的区别？参考答案：两者都是用来实现动态效果，但使用场景和功能差异很大：1、触发方式不同：transition是状态过渡，需要依赖鼠标悬浮、点击、类名切换等事件触发，无法自动执行；animation可以页面加载自动执行，无需人为触发。2、动画帧数不同：transition只有初始和结束两个状态，是简单的渐变效果；animation可以通过@keyframes定义多帧状态，实现复杂、多阶段的动画。3、循环能力不同：transition只能执行一次，无法循环；animation支持无限循环、设置循环次数、动画延迟、速度曲线、暂停播放。4、使用场景：简单的hover变色、缩放、位移用transition；复杂的轮播动画、加载动画、持续动态效果用animation。4、transform的常用属性有哪些？会脱离文档流吗？参考答案：transform是CSS3变形属性，支持2D和3D变换，常用方法：位移：translate()水平/垂直移动；缩放：scale()放大缩小；旋转：rotate()旋转角度；倾斜：skew()倾斜变形。核心特性：transform不会脱离标准文档流，元素原本占据的空间会保留，不会挤压其他元素布局，只会改变元素的视觉展示效果。这也是它比定位、浮动更适合做动画的原因，不会造成页面布局抖动。5、CSS3新增的选择器有哪些？优先级如何？参考答案：常用新增选择器：1、属性选择器：[class*="box"]匹配包含指定字符的类名；2、结构伪类：:nth-child(n)、:nth-of-type(n)、:first-child、:last-child，筛选指定位置元素；3、状态伪类：:hover、:active、:focus、:checked，匹配元素交互状态；4、伪元素：::before、::after、::first-letter、::first-line，创建虚拟元素。优先级：属性选择器、伪类选择器优先级等同于类选择器；伪元素选择器优先级等同于标签选择器，整体遵循：内联样式>ID选择器>类/伪类/属性选择器>标签/伪元素选择器。三、移动端适配与兼容面试题1、H5移动端适配常用方案有哪些？各自优缺点？参考答案：日常开发最常用三种方案：1、百分比布局：简单易用，适配基础页面，缺点是无法精准控制尺寸，复杂布局容易错乱，适合简单活动页。2、rem布局：根据根字体大小适配，统一换算设计稿尺寸，适配绝大多数移动端页面，兼容性好；缺点是需要设置根字体，少量样式需要单独适配。3、vw/vh视口单位：CSS3新增单位，1vw等于屏幕宽度的1%，无需JS适配，纯CSS实现，适配精准、代码简洁；缺点是低版本安卓机型兼容一般。目前主流项目优先用vw/vh，老旧兼容项目用rem布局。2、什么是视口viewport？移动端必须配置的meta标签是什么？参考答案：视口就是浏览器用来展示网页的可视区域，移动端默认会用桌面端视口渲染页面，导致页面缩小、错位，必须手动配置viewport。移动端核心meta标签：<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">参数释义：width=device-width让视口宽度等于设备屏幕宽度；initial-scale=1初始缩放比例1倍；禁止缩放保证页面展示稳定，是所有H5移动端项目的必备配置。3、H5常见兼容问题及解决方案？参考答案：1、移动端点击300ms延迟：原因是老旧浏览器双击缩放机制，解决方案：设置viewport禁止缩放、使用fastclick插件、改用tap事件。2、Flex布局老旧机型错乱：低版本安卓不兼容新版Flex，解决方案：添加兼容前缀、使用经典Flex写法。3、图片模糊问题：高清屏屏幕像素比高，普通图片放大模糊，解决方案：使用2倍图、3倍图适配不同设备。4、圆角、阴影卡顿：大量元素使用border-radius、box-shadow会造成页面卡顿，解决方案：减少大面积阴影、开启硬件加速。四、实战高频面试题1、如何实现元素水平垂直居中？写出3种以上方法参考答案：方法一：Flex布局（最常用）父元素设置display:flex;justify-content:center;align-items:center;适配所有场景，简单稳定。方法二：绝对定位+transform子元素绝对定位，top:50%;left:50%;transform:translate(-50%,-50%);无需知道元素宽高，通用性极强。方法三：绝对定位+四边0+margin:auto子元素absolute;top/left/right/bottom:0;margin:auto;适合固定宽高元素。方法四：Grid布局父元素display:grid;place-items:center;一行代码实现居中，简洁高效。2、什么是BFC？触发条件和作用是什么？参考答案：BFC是块级格式化上下文，是网页的独立渲染区域，内部元素的布局不会影响外部元素，外部布局也不会干扰内部。常用触发条件：元素设置浮动、绝对定位、overflow不为visible、display为inline-block/flex/grid均可触发BFC。核心作用：1、解决浮动塌陷问题：父元素高度塌陷时，触发BFC可让父元素自适应子元素高度；2、解决margin外边距重叠问题；3、阻止浮动元素覆盖，实现自适应两栏、三栏布局。3、CSS硬件加速是什么？怎么开启？有什么利弊？参考答案：硬件加速就是让GPU代替CPU渲染动画、变形样式，提升页面流畅度，避免页面卡顿。开启方式：给元素添加transform:translateZ(0)、opacity:0.99等属性，浏览器会自动开启GPU加速。利弊：优点：动画流畅、渲染速度快，解决低端机型动画卡顿问题；缺点：过度使用会占用设备G