HTML5 基础测试题（含详细答案）

HTML5基础测试题（含详细答案）适用人群：前端入门学习者、网页基础考核考试时长：60分钟满分：100分一、单项选择题（共15题，每题3分，共45分）1.以下哪一项是HTML5标准的正确文档声明？（）A.<!DOCTYPEHTML5>B.<!DOCTYPEhtml>C.<htmldoctype="html5">D.<!DOCTYPExhtml>2.下列标签中，不属于HTML5新增语义化标签的是？（）A.<header>B.<nav>C.<iframe>D.<article>3.HTML5中，哪个标签用于定义页面的侧边栏内容？（）A.<aside>B.<sidebar>C.<section>D.<content>4.关于HTML5表单新增属性，说法错误的是？（）A.required用于设置表单字段为必填项B.placeholder用于设置输入框默认提示文字C.maxlength是HTML5新增属性，旧版本无此属性D.autofocus可让页面加载时自动聚焦到对应输入框5.HTML5新增的表单输入类型中，用于输入邮箱的是？（）A.textB.emailC.mailD.message6.以下哪个不是HTML5新增的全局属性？（）A.hiddenB.contenteditableC.tabindexD.draggable7.HTML5中，<video>标签不支持的视频格式是？（）A.MP4B.AVIC.WebMD.Ogg8.下列关于HTML5语义化标签的优势，说法错误的是？（）A.提升页面可读性，代码结构更清晰B.便于搜索引擎抓取页面内容C.可以替代CSS实现样式美化D.方便开发者维护和迭代代码9.HTML5中，用于实现本地离线存储、存储容量更大的是？（）A.cookieB.localStorageC.sessionD.cache10.<canvas>标签的主要作用是？（）A.展示图片素材B.绘制图形、动画、游戏画布C.播放视频D.实现页面布局11.HTML5中，哪个属性可以让元素可拖拽？（）A.dragB.moveableC.draggableD.scroll12.以下标签中，属于块级语义化标签的是？（）A.<span>B.<mark>C.<section>D.<time>13.HTML5表单中，pattern属性的作用是？（）A.限制输入框输入长度B.通过正则表达式验证输入内容格式C.设置输入框默认值D.清空输入框内容14.关于sessionStorage和localStorage的区别，说法正确的是？（）A.localStorage页面关闭后数据失效B.sessionStorage仅当前会话有效，页面关闭数据清除C.二者存储容量完全一致D.sessionStorage数据永久保存15.HTML5废弃的标签是？（）A.<p>B.<font>C.<div>D.<a>二、填空题（共10空，每空2分，共20分）1.HTML5中，用于定义文档头部导航区域的标签是__________。2.<audio>标签支持的三种音频格式是MP3、__________、__________。3.HTML5中，__________属性可以让普通文本、div等元素变为可编辑状态。4.实现网页离线缓存的HTML5技术是__________。5.<article>标签用于定义页面中__________、独立的内容模块。6.HTML5新增输入类型中，__________用于选取日期，__________用于选取颜色。7.__________用于存储长期本地数据，手动清除才会失效。8.HTML5中，__________标签用于展示页面底部版权、备案等信息。三、简答题（共3题，每题5分，共15分）1.简述HTML5语义化标签的核心作用。2.简述localStorage和cookie的主要区别。3.简单说明<canvas>和<svg>的核心区别。四、实操题（共2题，每题10分，共20分）1.写出一个完整的HTML5基础页面结构，包含头部、导航、主体内容、侧边栏、底部结构。2.编写一段代码，实现一个带必填校验、占位提示、自动聚焦的邮箱输入表单。详细参考答案一、单项选择题答案及解析1.B解析：HTML5简化了文档声明，统一使用<!DOCTYPEhtml>，无需书写版本号，兼容所有现代浏览器。2.C解析：<iframe>是HTML4就存在的内嵌框架标签，header、nav、article均为HTML5新增语义化标签。3.A解析：<aside>专门用于定义页面侧边栏、辅助内容；sidebar、content并非官方HTML标签，section是通用区块标签。4.C解析：maxlength在HTML4中就已存在，并非HTML5新增属性；其余三项均为HTML5表单新增特性。5.B解析：HTML5新增email输入类型，浏览器会自动校验邮箱格式，提交时触发格式验证。6.C解析：tabindex是旧版HTML就有的属性，用于设置元素聚焦顺序；hidden、contenteditable、draggable均为HTML5新增全局属性。7.B解析：HTML5video标签标准支持MP4、WebM、Ogg格式，不支持AVI格式。8.C解析：语义化标签只用于规范页面结构、提升可读性和SEO优化，无法替代CSS，样式美化仍需依靠CSS实现。9.B解析：cookie存储容量极小（约4KB），HTML5新增的localStorage容量约5MB，用于本地离线持久化存储。10.B解析：<canvas>是画布标签，通过JS动态绘制图形、动画、小游戏等内容。11.C解析：HTML5通过draggable="true"设置元素开启拖拽功能。124">12.C解析：section是块级语义化区块标签；span、mark、time均为行内标签。13.B解析：pattern属性接收正则表达式，用于校验表单输入内容的格式，如手机号、身份证号、密码格式等。14.B解析：sessionStorage为会话存储，浏览器窗口关闭后数据自动清除；localStorage为持久化存储，手动删除才会失效。15.B解析：HTML5废弃了<font>、<center>等样式类标签，统一由CSS控制样式。二、填空题答案1.<nav>2.Ogg、WAV（顺序可互换）3.contenteditable4.应用程序缓存（ApplicationCache）5.完整、独立6.date、color7.localStorage8.<footer>三、简答题答案1.语义化标签核心作用：（1）结构清晰：让代码按照页面功能分区，可读性更强，方便开发者协作和维护；（2）利于SEO：搜索引擎可通过标签语义快速识别页面模块（导航、正文、侧边栏、底部），提升收录和排名；（3）适配设备：方便屏幕阅读器等辅助设备识别页面内容，提升网页无障碍访问体验；（4）规范代码：摒弃单纯用div堆砌页面的写法，统一页面结构规范。2.localStorage和cookie的主要区别：（1）存储容量：cookie容量仅4KB左右，localStorage容量约5MB，存储空间更大；（2）有效期：cookie可设置过期时间，localStorage默认永久存储，需手动清除；（3）请求携带：cookie会随每一次HTTP请求发送到服务器，占用请求带宽，localStorage仅本地存储，不参与网络请求；（4）使用场景：cookie多用于登录验证、身份标识，localStorage多用于本地数据缓存、页面状态保存。3.canvas和svg核心区别：（1）绘制原理：canvas是像素级画布，通过JS动态绘制点阵图形；svg是矢量图形，基于XML标签描述图形；（2）缩放效果：canvas缩放会失真模糊，svg矢量缩放无失真；（3）操作方式：canvas绘制后无法单独修改图形元素，需整体重绘；svg每个图形都是独立DOM节点，可单独修改样式和属性；（4）适用场景：canvas适合动画、游戏、数据可视化大屏；svg适合图标、logo、静态矢量图形。四、实操题参考答案1.完整HTML5结构化页面代码html

<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<title>HTML5结构化页面</title>

</head>

<body>

<!--页面头部-->

<header>

<h1>网站头部标题</h1>

</header>

<!--导航栏-->

<nav>

<ahref="#">首页</a>

<ahref="#">关于我们</a>

<ahref="#">产品中心</a>

</nav>

<!--主体内容区域-->

<main>

<!--核心内容-->

<section>

<article>

<h2>文章标题</h2>

<p>核心正文内容</p>

</article>

</section>

<!--侧边栏-->

<aside>

<p>侧边栏辅助内容、推荐资讯</p>

</aside>

</main>

<!--页面底部-->

<footer>

<p>版权所有©2026网站名称</p>

</footer>

</body>

</html>2.合规邮箱表单代码html

<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<title>邮箱表单校验</title>

</head>

<body>

<formaction=""method="get">

<!--自动聚焦、必填、占位提示、邮箱格式校验