目录一、面试里的标准回答二、语义化标签常见语义化标签好处例子三、表单增强1. 新增 input 类型2. 新增表单属性优势四、音视频支持标签示例优点五、Canvas 和 SVG1. Canvas2. SVG六、本地存储1. localStorage2. sessionStorage相比 Cookie 的优势七、地理定位应用场景八、拖拽 API常见事件应用场景九、Web Worker作用示例十、WebSocket特点场景十一、其他常见新特性1. style="margin-left:40px">2. 更好的文档声明3. 字符集声明更简洁4. 历史管理相关十二、面试高分回答模板十三、简洁背诵版十四、一句话总结这是前端面试里非常高频的一道题。如果只回答几个标签面试官一般会觉得你答得不够系统。一、面试里的标准回答HTML5 的新特性主要可以从几个方面来讲语义化标签增强型表单音视频支持Canvas / SVG 图形能力本地存储地理定位拖拽 APIWeb WorkerWebSocket其中最常用、最容易落地的是语义化标签、表单增强、音视频、本地存储和 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 typeemail / input typedate / input typerange /2. 新增表单属性placeholderrequiredpatternautofocusautocompletemultipleminmaxstep例如input typetext placeholder请输入用户名 required /优势浏览器自带基础校验提升用户体验减少手写 JS 校验四、音视频支持HTML5 提供了原生的音视频标签不再必须依赖 Flash。标签audiovideo示例audio controls srcmusic.mp3/audio video controls width600 source srcmovie.mp4 typevideo/mp4 / /video优点原生支持播放不依赖第三方插件更安全、更高效五、Canvas 和 SVGHTML5 提供了更强的图形绘制能力。1. Canvas用于通过 JS 动态绘图适合游戏图表动画画板canvas idmyCanvas width300 height150/canvasconst canvas document.getElementById(myCanvas) const ctx canvas.getContext(2d) ctx.fillStyle red ctx.fillRect(10, 10, 100, 100)2. SVG适合矢量图图标可缩放图形流程图svg width100 height100 circle cx50 cy50 r40 fillblue / /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) } )应用场景地图定位外卖 / 打车附近门店推荐八、拖拽 APIHTML5 原生支持拖拽操作。常见事件dragstartdragdragenterdragoverdropdragend应用场景拖拽上传看板排序列表拖动九、Web Worker用于在浏览器中开启后台线程处理任务避免阻塞主线程。作用做复杂计算数据处理提升页面流畅度示例const worker new Worker(worker.js) worker.postMessage(start) worker.onmessage function (e) { console.log(e.data) }十、WebSocketHTML5 提供了 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 html3. 字符集声明更简洁meta charsetUTF-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 的核心提升是语义化更强、表单更丰富、多媒体更原生、存储和交互能力更完善。