目录
一、面试里的标准回答
二、语义化标签
常见语义化标签
好处
例子
三、表单增强
1. 新增 input 类型
2. 新增表单属性
优势
四、音视频支持
标签
示例
优点
五、Canvas 和 SVG
1. Canvas
2. SVG
六、本地存储
1. localStorage
2. sessionStorage
相比 Cookie 的优势
七、地理定位
应用场景
八、拖拽 API
常见事件
应用场景
九、Web Worker
作用
示例
十、WebSocket
特点
场景
十一、其他常见新特性
1. style="margin-left:40px">2. 更好的文档声明
3. 字符集声明更简洁
4. 历史管理相关
十二、面试高分回答模板
十三、简洁背诵版
十四、一句话总结
这是前端面试里非常高频的一道题。
如果只回答几个标签，面试官一般会觉得你答得不够系统。
一、面试里的标准回答
HTML5 的新特性主要可以从几个方面来讲：
- 语义化标签
- 增强型表单
- 音视频支持
- Canvas / SVG 图形能力
- 本地存储
- 地理定位
- 拖拽 API
- Web Worker
- WebSocket
其中最常用、最容易落地的是语义化标签、表单增强、音视频、本地存储和 Canvas。
这段适合先开场。
二、语义化标签
HTML5 增加了很多语义化标签，让页面结构更清晰，也更利于 SEO 和可维护性。
常见语义化标签
headerfooternavsectionarticleasidemainfigurefigcaption
好处
- 结构更清晰
- 代码可读性更好
- 对 SEO 更友好
- 更适合无障碍访问
例子
<header>头部</header> <nav>导航</nav> <main> <article> <h1>文章标题</h1> <section>正文内容</section> </article> </main> <footer>底部</footer>三、表单增强
HTML5 对表单做了很多增强，减少了前端自己写校验的成本。
1. 新增 input 类型
emailurlnumbertelsearchrangecolordatetimemonthweekdatetime-local
例如：
<input type="email" /> <input type="date" /> <input type="range" />2. 新增表单属性
placeholderrequiredpatternautofocusautocompletemultipleminmaxstep
例如：
<input type="text" placeholder="请输入用户名" required />优势
- 浏览器自带基础校验
- 提升用户体验
- 减少手写 JS 校验
四、音视频支持
HTML5 提供了原生的音视频标签，不再必须依赖 Flash。
标签
audiovideo
示例
<audio controls src="music.mp3"></audio> <video controls width="600"> <source src="movie.mp4" type="video/mp4" /> </video>优点
- 原生支持播放
- 不依赖第三方插件
- 更安全、更高效
五、Canvas 和 SVG
HTML5 提供了更强的图形绘制能力。
1. Canvas
用于通过 JS 动态绘图，适合：
- 游戏
- 图表
- 动画
- 画板
<canvas id="myCanvas" width="300" height="150"></canvas>const canvas = document.getElementById('myCanvas') const ctx = canvas.getContext('2d') ctx.fillStyle = 'red' ctx.fillRect(10, 10, 100, 100)2. SVG
适合：
- 矢量图
- 图标
- 可缩放图形
- 流程图
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" fill="blue" /> </svg>六、本地存储
HTML5 提供了更方便的客户端存储方式。
1. localStorage
- 长期保存
- 除非手动删除，否则不会消失
localStorage.setItem('name', 'Tom') localStorage.getItem('name')2. sessionStorage
- 会话级存储
- 浏览器标签页关闭后失效
sessionStorage.setItem('token', '123')相比 Cookie 的优势
- 存储容量更大
- 不会自动携带到请求头
- 操作更方便
七、地理定位
HTML5 提供了 Geolocation API，可以获取用户位置信息。
navigator.geolocation.getCurrentPosition( (position) => { console.log(position.coords.latitude, position.coords.longitude) }, (error) => { console.log(error) } )应用场景
- 地图定位
- 外卖 / 打车
- 附近门店推荐
八、拖拽 API
HTML5 原生支持拖拽操作。
常见事件
dragstartdragdragenterdragoverdropdragend
应用场景
- 拖拽上传
- 看板排序
- 列表拖动
九、Web Worker
用于在浏览器中开启后台线程处理任务，避免阻塞主线程。
作用
- 做复杂计算
- 数据处理
- 提升页面流畅度
示例
const worker = new Worker('worker.js') worker.postMessage('start') worker.onmessage = function (e) { console.log(e.data) }十、WebSocket
HTML5 提供了 WebSocket，支持客户端和服务端的全双工通信。
特点
- 建立连接后可持续通信
- 比轮询效率更高
- 适合实时场景
场景
- 聊天室
- 消息推送
- 实时协作
- 股票 / 监控大屏
const ws = new WebSocket('wss://example.com/socket') ws.onopen = () => { ws.send('hello') } ws.onmessage = (e) => { console.log(e.data) }十一、其他常见新特性
还有一些面试里也可能会提到：
1.data-*自定义属性
<div>2. 更好的文档声明HTML5 的文档声明更简单：
<!DOCTYPE html>
3. 字符集声明更简洁
<meta charset="UTF-8" />
4. 历史管理相关
通常会和前端路由一起提到：
history.pushState()history.replaceState()
这虽然更偏 BOM / Web API，但很多面试里也会顺着 HTML5 一起问。
十二、面试高分回答模板
HTML5 的新特性我一般从几个方面来总结。
第一是语义化标签，比如header、nav、section、article、footer，这样页面结构更清晰，也更利于 SEO。
第二是表单增强，新增了email、date、number等输入类型，以及placeholder、required、pattern等属性。
第三是多媒体能力，原生支持audio和video，不再依赖 Flash。
第四是图形绘制，新增了canvas和对 SVG 的更好支持。
第五是本地存储，提供了localStorage和sessionStorage。
另外还有Geolocation 地理定位、拖拽 API、Web Worker、WebSocket等能力。
所以 HTML5 不只是多了几个标签，而是让前端在结构化、交互能力、存储能力和实时通信能力上都增强了很多。
十三、简洁背诵版
HTML5 新特性主要有：
- 语义化标签：
header、nav、section、article、footer - 表单增强：新的
input类型和校验属性 - 音视频标签：
audio、video - 图形绘制：
canvas、SVG - 本地存储：
localStorage、sessionStorage - 其他：地理定位、拖拽 API、Web Worker、WebSocket
十四、一句话总结
HTML5 的核心提升是：语义化更强、表单更丰富、多媒体更原生、存储和交互能力更完善。
