H5前端开发测试题（含详细答案解析）

H5前端开发测试题（含详细答案解析）适用人群：前端初级开发、H5页面制作、移动端页面开发从业者考试说明：满分100分，答题时间60分钟；题型包含单选题、判断题、简答题，所有题目均贴合实际项目开发场景，无理论空话。一、单项选择题（共15题，每题3分，合计45分）1.以下不属于HTML5新增语义化标签的是？（）A.headerB.footerC.divD.article2.H5页面中，想要实现原生视频自动播放，且静音播放适配移动端，正确的配置是？（）A.autoplay+mutedB.autoplayC.loop+autoplayD.controls+autoplay3.移动端H5页面适配中，viewportmeta标签里initial-scale的作用是？（）A.禁止页面缩放B.设置页面初始缩放比例C.限制最大缩放值D.适配屏幕宽度4.以下哪种存储方式，数据会在浏览器关闭后自动清除？（）A.localStorageB.sessionStorageC.cookieD.indexedDB5.H5拖拽功能中，用来监听元素拖拽开始的事件是？（）A.dragendB.dragstartC.dragoverD.dragleave6.移动端H5开发中，为防止页面出现双击缩放问题，需要在viewport中添加哪个属性？（）A.user-scalable=noB.viewport-fit=coverC.maximum-scale=1D.minimum-scale=17.以下关于H5新增表单属性说法错误的是？（）A.required用于设置表单必填项B.placeholder用于设置输入框默认提示文字C.readonly让输入框不可编辑且无法提交D.autofocus页面加载自动聚焦输入框8.适配苹果手机刘海屏、灵动岛屏幕，让页面铺满全屏的viewport属性是？（）A.width=device-widthB.initial-scale=1C.viewport-fit=coverD.user-scalable=no9.H5中canvas画布的默认宽高是？（）A.300px*150pxB.200px*200pxC.400px*300pxD.自适应屏幕10.以下哪个方法可以实现H5页面刷新？（）A.history.back()B.location.reload()C.history.go(1)D.location.href11.移动端H5页面出现1px细线变粗问题，核心原因是？（）A.代码书写错误B.设备像素比dpr大于1C.浏览器缓存问题D.屏幕分辨率过低12.H5新增的音频标签默认是否带控制栏？（）A.默认显示B.默认不显示C.手机端显示，电脑端不显示D.随机显示13.以下哪项不属于H5新增特性？（）A.语义化标签B.画布绘图C.浮动布局D.本地存储14.阻止移动端H5页面滑动穿透（弹窗滑动带动底层页面滚动）的核心处理方式是？（）A.阻止默认事件B.清除定时器C.重置页面样式D.刷新页面15.localStorage单个域名下的存储容量大概为？（）A.2KBB.5MBC.20MBD.无限制二、判断题（共10题，每题2分，合计20分）1.HTML5不需要书写DTD文档声明，页面也能正常渲染。（）2.sessionStorage的数据可以跨页面、跨标签页共享。（）3.canvas绘制的图形是位图，放大后会模糊，svg是矢量图，放大不失真。（）4.H5的video标签可以直接播放所有格式的视频文件。（）5.viewport标签只对移动端浏览器生效，PC端浏览器无效果。（）6.readonly和disabled属性效果一致，都能让表单输入框不可编辑。（）7.H5新增的geolocation接口可以获取用户设备地理位置，无需用户授权。（）8.百分比布局、rem、vw/vh都是H5移动端常用适配方案。（）9.浏览器关闭后，localStorage的数据会自动清空。（）10.语义化标签可以提升页面可读性和搜索引擎收录效果。（）三、简答题（共3题，合计35分）1.简述H5移动端页面常用的3种适配方案，并说明各自的优缺点。（12分）2.开发H5活动页面时，常见的兼容性问题有哪些？至少列举4种，并给出简单解决方案。（12分）3.简述sessionStorage、localStorage、cookie三者的核心区别。（11分）四、详细答案解析（一）单选题答案及解析1.答案：C解析：div是HTML传统通用块级标签，并非HTML5新增标签。header（头部）、footer（底部）、article（文章区块）均为H5核心语义化新增标签。2.答案：A解析：移动端浏览器为了节省流量和权限，禁止有声视频自动播放，必须搭配muted静音属性，autoplay自动播放才能生效。loop为循环播放，controls为显示控制栏，均不影响自动播放权限。3.答案：B解析：initial-scale用于定义页面初始加载的缩放比例，常规设置为1.0，代表不缩放、正常展示。禁止缩放由user-scalable控制，最大最小缩放由max/min-scale控制。4.答案：B解析：sessionStorage是会话级存储，仅当前标签页生效，关闭浏览器或标签页数据自动清除；localStorage永久存储，手动清除才会失效；cookie有过期时间，可手动设置；indexedDB为本地数据库，长期存储。5.答案：B解析：dragstart：拖拽开始触发；dragend：拖拽结束触发；dragover：拖拽元素悬浮在目标区域触发；dragleave：拖拽元素离开目标区域触发。6.答案：A解析：user-scalable=no禁止用户手动缩放页面，可彻底解决移动端双击缩放、双指缩放问题。maximum-scale=1仅限制最大缩放，无法完全杜绝双击缩放。7.答案：C解析：readonly设置输入框只读、不可编辑，但表单提交时该字段数据可以正常提交；disabled会让输入框失效，数据无法提交，且样式会置灰。8.答案：C解析：viewport-fit=cover适配异形屏（刘海屏、灵动岛、挖孔屏），让页面内容铺满整个屏幕，避免顶部、底部出现黑边。9.答案：A解析：canvas标签默认自带宽高300px、高150px，若仅通过css修改宽高，会导致画布拉伸变形，需通过标签属性或JS设置画布尺寸。10.答案：B解析：location.reload()强制刷新当前页面；history.back()返回上一页；history.go(1)前进一页；location.href用于页面跳转。11.答案：B解析：移动端设备像素比dpr=设备像素/物理像素，大部分手机dpr为2或3，1px的css线条会被渲染为2-3个物理像素，导致线条变粗，是移动端经典适配问题。12.答案：B解析：audio音频标签默认不显示控制播放栏，需要添加controls属性，才会展示播放、暂停、进度条、音量等控制功能。13.答案：C解析：浮动布局是传统CSS布局方式，在HTML4中就已存在，并非H5新增特性。H5核心新增：语义化标签、canvas绘图、本地存储、多媒体标签、拖拽等。14.答案：A解析：移动端弹窗滑动穿透，是因为弹窗滑动事件冒泡到根页面，通过阻止touchmove默认事件，即可禁止底层页面滚动，解决穿透问题。15.答案：B解析：浏览器规范中，localStorage单域名存储容量约5MB，cookie容量仅4KB左右，indexedDB容量较大，可达到数百MB。（二）判断题答案及解析1.答案：错误解析：HTML5有专属简洁的文档声明<!DOCTYPEhtml>，不写声明会导致浏览器进入怪异模式，页面样式错乱、布局失效，无法正常渲染。2.答案：错误解析：sessionStorage是单标签页会话存储，同一浏览器不同标签页、不同窗口无法共享数据，关闭当前标签数据即清空。3.答案：正确解析：canvas为像素位图，依赖分辨率，放大失真；svg为矢量图形，通过坐标绘制，无限放大不会模糊，适合图标、简单图形展示。4.答案：错误解析：video标签仅支持mp4、webm、ogg等主流格式，不支持avi、mov、flv等视频格式，需要后台转码后才能播放。5.答案：正确解析：viewport是专为移动端适配设计的meta标签，PC端浏览器会自动忽略该配置，无任何渲染效果。6.答案：错误解析：readonly只读可提交、样式正常；disabled失效不可提交、样式置灰、无法聚焦，二者功能效果完全不同。7.答案：错误解析：地理位置接口属于用户隐私权限，页面调用时必须获取用户授权，用户拒绝则无法获取定位信息。8.答案：正确解析：百分比布局、rem适配、vw/vh视口适配是目前H5移动端最主流的三种适配方案，各有适用场景。9.答案：错误解析：localStorage为永久本地存储，浏览器关闭、重启设备数据都不会清除，只能通过代码手动删除或清空浏览器缓存。10.答案：正确解析：语义化标签结构清晰，便于开发者维护代码，同时利于搜索引擎抓取页面内容，提升页面收录和SEO效果。（三）简答题详细答案1.H5移动端三种主流适配方案及优缺点（1）rem适配方案原理：根据屏幕宽度动态设置html根字体大小，页面所有元素使用rem单位，随根字体大小自适应缩放。优点：适配精准，兼容所有移动端机型，适配效果统一，是传统项目最常用方案；缺点：需要编写JS动态计算根字体，代码有冗余，大屏设备会出现元素过度放大问题。（2）vw/vh视口适配方案原理：vw为屏幕视口宽度百分比，1vw等于屏幕宽度的1%，vh为屏幕高度百分比，所有元素直接使用vw/vh单位。优点：纯CSS适配，无需JS代码，配置简单、维护方便，适配流畅；缺点：低版本安卓机型兼容性较差，高度适配容易出现屏幕留白、内容溢出问题。（3）百分比布局方案原理：父级元素固定布局，子元素使用百分比宽度自适应屏幕。优点：上手简单、无兼容性问题，代码轻量化，适合简单静态页面；缺点：高度、内边距、边框无法精准适配，复杂页面容易出现布局错乱，适配精度低。2.H5开发常见兼容性问题及解决方案（1）移动端1px线条变粗问题原因：设备dpr大于1，CSS1px对应多个物理像素；解决方案：通过transform缩放、伪元素缩放或者使用border-image实现细线条。（2）视频无法自动播放问题原因：移动端浏览器权限限制，禁止有声自动播放；解决方案：添加muted静音属性，或引导用户手动点击触发播放。（3）页面滑动穿透、弹窗滚动冲突问题原因：弹窗滑动事件冒泡至底层页面；解决方案：弹窗显示时阻止touchmove默认事件，隐藏时恢复。（4）异形屏顶部底部黑边问题原因：未适配刘海屏、挖孔屏；解决方案：在viewport中添加viewport-fit=cover属性，铺满全屏。（5）低版本安卓样式错乱问题原因：不支持vw、flex新特性；解决方案：降级使用rem适配，补充flex兼容前缀，规避新CSS特性。3.sessionStorage、localStorage、cookie核心区别（1）存储生命周期不同cookie：可手动设置过期时间，默认关闭浏览器失效；localStorage：永久存储，手动清除才失效；sessionStorage：仅当前会话有效，关闭标签/浏览器立即失效。（2）存储容量不同cookie容量最小，仅4KB；sessionStorage和localStorage容量一致，约5MB。（3）请求携带方式不同cookie会随每一次HTTP请求自动发送到服务器；sessionStorage、localStorage仅