H5前端基础测试题（含详细答案）

H5前端基础测试题（含详细答案）适用人群：前端初级工程师、实习生、H5页面开发人员考试时长：60分钟满分：100分考试说明：题型包含选择题、填空题、简答题、实操题，侧重H5新特性、移动端适配、页面兼容、实战开发场景，无偏题怪题，贴合日常开发工作。一、单项选择题（共15题，每题3分，共计45分）1.以下不属于HTML5新增语义化标签的是？（）A.headerB.footerC.divD.article2.HTML5中用来播放视频的标签是？（）A.mediaB.videoC.audioD.movie3.移动端H5页面适配中，viewport标签里initial-scale的作用是？（）A.禁止页面缩放B.设置页面初始缩放比例C.限制最大缩放比例D.设置设备宽度4.以下哪项是HTML5新增的表单输入类型？（）A.textB.passwordC.telD.button5.关于localStorage和sessionStorage的区别，说法正确的是？（）A.localStorage仅会话有效，关闭页面失效B.sessionStorage永久存储，手动清除才会失效C.localStorage永久存储，sessionStorage仅当前会话有效D.两者无任何区别6.HTML5中可用于拖拽功能的核心属性是？（）A.dragableB.draggableC.moveD.drag7.以下哪种方式不能实现H5页面移动端自适应？（）A.rem适配B.vw/vh适配C.固定px像素D.百分比适配8.HTML5新增的画布元素是？（）A.drawB.canvasC.paintD.graphic9.关于H5地理定位API，说法错误的是？（）A.可获取设备当前经纬度B.使用前需要用户授权C.所有浏览器都支持，无需兼容处理D.可监听设备位置变化10.以下哪个属性可以让H5页面元素实现原生圆角效果？（）A.border-radiusB.border-circleC.roundD.corner11.HTML5表单中，required属性的作用是？（）A.限制输入长度B.设置输入默认值C.设置表单字段为必填项D.限制输入格式12.移动端H5开发中，清除点击延迟的常用方案是？（）A.设置viewport缩放B.使用fastclick插件C.清除页面浮动D.重置默认样式13.以下不属于H5本地存储方式的是？（）A.localStorageB.sessionStorageC.cookieD.webSQL14.HTML5中audio标签默认的播放状态是？（）A.自动播放B.暂停状态C.循环播放D.静音播放15.H5页面中，vw单位的计算标准是？（）A.屏幕高度的1%B.屏幕宽度的1%C.父元素宽度的1%D.根字体大小二、填空题（共10空，每空2分，共计20分）1.HTML5语义化标签中，________用于定义页面侧边栏内容，________用于定义页面主要核心内容。2.移动端viewport视口标签中，________属性可以禁止用户手动缩放页面。3.localStorage的存储容量一般约为________，cookie的存储容量一般不超过________。4.HTML5表单中，________属性可以限制输入框的输入提示文字，________属性可以实现输入内容正则校验。5.Canvas绘图中，________方法用于绘制矩形，________方法用于绘制圆形。6.H5新增的________API可以实现网页离线缓存，让页面无网络也可访问。三、简答题（共3题，每题7分，共计21分）1.简述HTML5语义化标签的作用，以及日常开发中常用的语义化标签有哪些？2.详细说说rem和vw适配的区别，以及各自的适用场景？3.简述localStorage、sessionStorage、cookie三者的核心区别（从存储时长、容量、作用域、是否随请求携带四个维度说明）。四、实操题（共1题，14分）根据需求编写完整H5页面代码：实现一个移动端适配的登录表单页面，要求如下：1.设置标准移动端viewport适配，适配所有手机屏幕；2.包含用户名、手机号两个输入框，均设置为必填项；3.手机号输入框限制仅可输入数字，添加输入提示文字；4.添加登录按钮，简单美化页面样式，适配移动端；5.页面简洁规范，代码注释清晰，符合H5开发规范。详细参考答案一、单项选择题答案1.C解析：div是HTML传统通用块级标签，无语义，header、footer、article均为HTML5新增语义化标签。2.B解析：video为H5视频播放标签，audio为音频标签，无media、movie专属媒体标签。3.B解析：initial-scale用于设置页面初始加载的缩放比例，禁止缩放通过user-scalable=no实现。4.C解析：tel是H5新增表单类型，适配移动端手机号输入，text、password、button均为传统表单类型。5.C解析：localStorage为持久化本地存储，手动清除缓存或代码删除才会失效；sessionStorage为会话存储，关闭页面/浏览器立即失效。6.B解析：draggable是H5标准拖拽属性，大小写严格区分，可实现元素拖拽功能。7.C解析：固定px像素无法适配不同尺寸手机屏幕，会导致小屏溢出、大屏留白严重。8.B解析：canvas是H5新增画布标签，支持JS动态绘制图形、动画、图表等。9.C解析：部分老旧浏览器不支持地理定位API，开发中需要做兼容判断和降级处理。10.A解析：border-radius是CSS3标准圆角属性，为H5页面开发常用样式属性。11.C解析：required属性用于表单校验，设置后提交表单时，对应字段未输入会触发浏览器原生提示。12.B解析：移动端浏览器存在300ms点击延迟，fastclick插件是解决该问题的主流方案。13.C解析：cookie是传统存储方式，不属于H5新增本地存储API。14.B解析：audio标签默认状态为暂停，需添加autoplay属性实现自动播放（部分浏览器需用户交互后才可播放）。15.B解析：vw是视口宽度单位，1vw等于可视屏幕宽度的1%；vh为可视屏幕高度的1%。二、填空题答案1.aside、main2.user-scalable=no3.5MB、4KB4.placeholder、pattern5.fillRect()/strokeRect()、arc()6.ApplicationCache（离线缓存）三、简答题参考答案1.HTML5语义化标签作用及常用标签作用：一是让页面结构更清晰，代码可读性更高，方便团队协作维护；二是利于搜索引擎抓取页面内容，提升网页SEO优化效果；三是适配屏幕阅读器，提升页面无障碍访问性。常用标签：header（页头）、footer（页脚）、main（主体内容）、aside（侧边栏）、article（独立文章内容）、section（区块分区）、nav（导航栏）。2.rem和vw适配的区别及适用场景区别：①原理不同：rem是相对于根标签html的字体大小适配，需要通过JS动态设置根字体尺寸；vw是直接基于屏幕视口宽度适配，纯CSS即可实现，无需JS配合。②适配精度不同：rem适配可灵活控制缩放比例，适配兼容性更好；vw适配更简洁，原生支持所有现代移动端浏览器。③兼容性不同：rem兼容极低版本浏览器，vw仅支持IE9及以上、现代移动端浏览器。适用场景：rem适合需要兼容老旧机型、适配逻辑复杂的H5活动页、商城页面；vw适合开发简单、追求代码简洁、只需适配现代手机浏览器的页面，是目前主流移动端适配方案。3.localStorage、sessionStorage、cookie核心区别①存储时长：localStorage永久存储；sessionStorage页面会话期间有效，关闭页面失效；cookie可设置过期时间，默认关闭浏览器失效。②存储容量：localStorage约5MB；sessionStorage约5MB；cookie仅4KB左右，容量极小。③作用域：localStorage同域名下所有页面共享；sessionStorage仅当前页面会话有效，不同标签页不共享；cookie同域名、同路径下共享。④请求携带：localStorage、sessionStorage仅本地存储，不会随HTTP请求发送；cookie会自动携带到服务端每一次请求中。四、实操题参考答案（完整可运行代码）html

<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<!--标准移动端viewport适配-->

<metaname="viewport"content="width=device-width,initial-scale=1.0,user-scalable=no">

<title>移动端H5登录页面</title>

<style>

*{

margin:0;

padding:0;

box-sizing:border-box;

}

body{

padding:50px20px;

background-color:#f5f5f5;

font-size:14px;

}

.login-box{

max-width:100%;

width:400px;

margin:0auto;

background:#fff;

padding:30px20px;

border-radius:10px;

}

.login-title{

text-align:center;

font-size:18px;

color:#333;

margin-bottom:30px;

}

.input-item{

margin-bottom:20px;

}

.input-iteminput{

width:100%;

height:44px;

padding:015px;

border:1pxsolid#eee;

border-radius:6px;

outline:none;

font-size:14px;

}

.login-btn{

width:100%;

height:44px;

background-color:#1677ff;

color:#fff;

border:none;

border-radius:6px;

font-size:15px;

}

</style>

</head>

<body>

<divclass="login-box">

<h2class="login-title">用户登录</h2>

<divclass="input-item">

<!--用户姓名必填输入框-->

<inputtype="text"placeholder="请输入用户名"required>

</div>

<divclass="input-item">

<!--手机号必填、仅数字输入框-->

<inputtype