H5 基础测试题及详细答案

H5基础测试题及详细答案本次测试题适用于前端入门、H5页面开发岗位基础考核，包含单选题、多选题、判断题、简答题，覆盖H5核心语法、新特性、适配规则、开发常见问题，题目贴合实际开发场景，无理论空话，答案附带详细解析。一、单项选择题（共15题，每题3分，共45分）1.以下哪一个是HTML5标准的文档声明？（）A.<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">B.<!DOCTYPEhtml>C.<html5>D.<!DOCTYPEHTML5>2.HTML5新增的用于绘制图形的标签是以下哪一个？（）A.<svg>B.<canvas>C.<graph>D.<draw>3.以下哪个标签不属于HTML5新增的语义化标签？（）A.<header>B.<footer>C.<div>D.<article>4.关于HTML5本地存储，说法正确的是？（）A.localStorage数据会在页面关闭后自动清除B.sessionStorage数据仅在当前会话有效，关闭页面失效C.localStorage最大存储容量远小于cookieD.sessionStorage可以跨浏览器窗口共享数据5.HTML5中，用于播放视频的标准标签是？（）A.<media>B.<video>C.<movie>D.<play>6.以下哪个属性可以让H5页面适配移动端设备，实现视口适配？（）A.content="width=device-width,initial-scale=1.0"B.content="max-width:100%"C.content="viewport-fit=cover"D.content="scale=1"7.HTML5新增的表单属性中，用于限制输入框必填的是？（）A.readonlyB.disabledC.requiredD.placeholder8.以下关于<audio>标签说法错误的是？（）A.支持autoplay自动播放属性B.支持loop循环播放C.必须嵌套<source>标签才能使用D.支持controls显示播放控件9.H5页面中，touchstart事件触发的时机是？（）A.手指离开屏幕时B.手指触摸屏幕时C.手指在屏幕滑动时D.触摸动作结束后10.以下哪项不是HTML5废弃的标签？（）A.<font>B.<center>C.<section>D.<strike>11.localStorage存储数据的格式是？（）A.仅字符串B.仅对象C.仅数组D.任意数据类型12.HTML5中，用于定义页面导航区域的语义标签是？（）A.<nav>B.<menu>C.<guide>D.<sidebar>13.移动端H5开发中，viewport视口的initial-scale=1.0代表？（）A.页面最大缩放比例1倍B.页面初始加载缩放比例为1倍，无缩放C.页面最小缩放比例1倍D.强制页面适配100%屏幕宽度14.以下哪个输入类型是HTML5新增的表单类型？（）A.textB.passwordC.telD.button15.关于HTML5拖拽API，说法正确的是？（）A.所有元素默认开启拖拽功能B.draggable="true"可开启元素拖拽C.拖拽过程无法监听事件D.仅图片和文本支持拖拽二、多项选择题（共5题，每题4分，共20分，多选、少选、错选均不得分）1.以下属于HTML5新增语义化标签的有？（）A.<section>B.<aside>C.<main>D.<span>2.HTML5本地存储包含以下哪些方式？（）A.localStorageB.sessionStorageC.cookieD.indexedDB3.移动端H5常用的触摸事件包含？（）A.touchstartB.touchmoveC.touchendD.touchcancel4.以下哪些属性是<video>标签支持的属性？（）A.autoplayB.mutedC.posterD.loop5.H5页面开发中，常用的适配方案有？（）A.百分比适配B.rem适配C.vw/vh视口单位适配D.固定像素适配三、判断题（共10题，每题2分，共20分）1.HTML5不需要严格区分大小写，标签大小写均可正常渲染。（）2.localStorage可以跨页面、跨浏览器窗口共享数据。（）3.<article>标签用于定义页面的侧边栏辅助内容。（）4.HTML5表单中，pattern属性可以自定义正则表达式验证输入内容。（）5.canvas绘制的图形是矢量图，放大不会模糊。（）6.sessionStorage数据关闭浏览器标签页后会自动清空。（）7.H5页面中，meta标签的viewport属性仅对移动端生效。（）8.<inputtype="date">是HTML5新增的日期选择输入类型。（）9.所有浏览器都完全兼容HTML5所有新特性。（）10.HTML5新增的语义化标签主要作用是优化页面结构，提升可读性和搜索引擎识别能力。（）四、简答题（共2题，第一题7分，第二题8分，共15分）1.简述localStorage和sessionStorage的核心区别，以及各自的适用场景。2.移动端H5开发中，为什么必须设置viewport视口标签？核心作用是什么？参考答案及详细解析一、单项选择题答案及解析1.答案：B解析：HTML5简化了文档声明，统一使用极简的<!DOCTYPEhtml>，不再需要HTML4复杂的DTD声明，C、D为错误写法，无对应标准。2.答案：B解析：<canvas>是H5新增的画布标签，用于通过JS动态绘制位图图形；<svg>是矢量图形标签，并非H5新增，C、D无此标准标签。3.答案：C解析：<div>是传统通用块级标签，无语义性；<header>、<footer>、<article>均为H5新增语义化标签，分别代表头部、底部、文章主体内容。4.答案：B解析：localStorage数据永久存储，手动清除才会失效，A错误；localStorage存储容量远大于cookie，C错误；sessionStorage仅当前标签页会话有效，无法跨窗口共享，D错误。5.答案：B解析：H5标准视频播放标签为<video>，<audio>用于音频播放，其余选项均非标准标签。6.答案：A解析：移动端适配核心meta视口属性，width=device-width适配设备屏幕宽度，initial-scale=1.0禁止初始缩放，是H5移动端开发必备配置。7.答案：C解析：required为表单必填属性，提交表单时会自动校验输入内容；readonly只读、disabled禁用、placeholder输入提示文字，均无必填校验功能。8.答案：C解析：<audio>标签可直接通过src属性绑定音频地址，无需嵌套<source>，<source>多用于适配多格式音频兼容场景。9.答案：B解析：touchstart：手指触摸屏幕触发；touchmove：手指滑动触发；touchend：手指离开屏幕触发。10.答案：C解析：<section>是H5新增语义化标签，<font>、<center>、<strike>均为H5废弃的表现类标签，不再推荐使用。11.答案：A解析：localStorage仅支持存储字符串格式数据，存储对象、数组时，需通过JSON.stringify转换为字符串，读取时用JSON.parse还原。12.答案：A解析：<nav>是H5专属导航语义标签，用于定义页面导航栏区域，其余选项非标准语义标签。13.答案：B解析：initial-scale代表页面初始缩放值，设置为1.0时，页面加载后默认无缩放，完美适配设备视口尺寸。14.答案：C解析：tel、email、number、date等均为H5新增表单输入类型，text、password、button为传统输入类型。15.答案：B解析：HTML5拖拽功能需要通过draggable="true"手动开启，大部分元素默认不可拖拽，拖拽全程可监听dragstart、dragend等事件，支持所有标签元素拖拽。二、多项选择题答案及解析1.答案：ABC解析：<section>（区块）、<aside>（侧边栏）、<main>（主体内容）均为H5新增语义标签；<span>是传统行内通用标签，无语义。2.答案：ABD解析：H5专属本地存储为localStorage、sessionStorage、indexedDB；cookie是早期存储方式，不属于H5新特性。3.答案：ABCD解析：移动端四大基础触摸事件：touchstart（触摸开始）、touchmove（触摸滑动）、touchend（触摸结束）、touchcancel（触摸中断，如滑动时弹出弹窗）。4.答案：ABCD解析：<video>支持autoplay自动播放、muted静音播放、poster视频封面图、loop循环播放、controls显示控件等常用属性。5.答案：ABC解析：H5主流适配方案为百分比、rem、vw/vh适配；固定像素适配无法适配不同尺寸手机屏幕，会出现错位、留白问题，不推荐使用。三、判断题答案及解析1.答案：正确解析：HTML语法不区分大小写，大小写标签均可正常渲染，开发中统一小写是行业规范。2.答案：正确解析：localStorage是域名级存储，同一域名下的所有页面、窗口均可共享数据，永久保存。3.答案：错误解析：<article>用于定义独立的文章、内容模块；<aside>才是侧边栏辅助内容标签。4.答案：正确解析：H5表单新增pattern属性，可写入正则表达式，实现手机号、邮箱、密码格式等自定义校验。5.答案：错误解析：canvas绘制的是位图，基于像素渲染，放大后会模糊；svg才是矢量图，放大无失真。6.答案：正确解析：sessionStorage是会话级存储，仅当前标签页有效，关闭标签页或浏览器后数据立即清空。7.答案：正确解析：viewport视口标签是为解决移动端适配问题设计，电脑端浏览器无视口适配需求，该属性不生效。8.答案：正确解析：<inputtype="date">是H5新增类型，移动端会自动唤起原生日期选择器，提升交互体验。9.答案：错误解析：老旧浏览器（如低版本IE）不兼容部分H5新特性，开发中需要做兼容处理。10.答案：正确解析：语义化标签让页面结构分层清晰，便于开发者维护，同时方便搜索引擎抓取页面内容，优化SEO。四、简答题参考答案1.核心区别与适用场景（1）数据生命周期：localStorage数据永久存储，不会随页面、浏览器关闭失效，需手动清除；sessionStorage仅当前浏览器标签会话有效，关闭标签页数据立即清空。（2）共享范围：localStorage同一域名下所有页面、窗口可共享数据；sessionStorage仅当前标签页内页面可共享，跨标签无法使用。适用场景：localStorage适合存储长期有效数据，如用户本地偏好设置、登录状态、缓存静态数据等；sessionStorage适