前端面试中常见的HTML5新特性问题有哪些？

HTML5新特性高频问题全解析

---

在前端工程师的面试中，HTML5作为现代Web开发的核心技术之一，经常成为技术面试的考察重点。HTML5新特性相关的问题几乎是必考内容，尤其是新语义标签、多媒体支持、表单增强、离线与存储等方向，掌握这些知识点不仅能体现你的技术基础，还能为解决实际问题提供思路，以下整理了前端面试中常见的HTML5新特性问题及解析,助你高效备考。

语义化标签相关问题

1. 问题：HTML5新增了哪些语义化标签？它们的作用是什么？

   • 回答要点：
     HTML5引入了如 <header>、<footer>、<nav>、<article>、<section>、<aside>、<figure> 等语义化标签，替代传统的 <div> 嵌套，使页面结构更清晰，提升代码可读性和SEO优化效果。<article> 用于包裹独立内容（如博客文章），<nav> 定义导航栏。

2. 问题：为什么推荐使用语义化标签而非全部用 <div>？

   • 回答要点：
     语义化标签能明确内容含义，便于屏幕阅读器解析（提升无障碍访问体验），同时帮助开发者快速理解代码结构,减少对CSS样式的依赖。

多媒体支持问题

1. 问题：如何在HTML5中嵌入音频/视频？如何兼容不同浏览器？

   • 回答要点：
     使用 <audio> 和 <video> 标签，并通过 <source> 指定多格式文件（如MP4、WebM、Ogg），利用浏览器对格式的兼容性差异实现回退。

     <video controls>
       <source src="video.mp4" type="video/mp4">
       <source src="video.webm" type="video/webm">
       您的浏览器不支持视频播放。
     </video>

2. 问题：HTML5的音频/视频是否支持自定义控件？如何实现？

   • 回答要点：
     默认控件可通过 controls 属性启用，若需自定义样式或功能，可通过JavaScript操作 play()、pause() 等API，并监听 timeupdate 等事件。

表单增强问题

1. 问题：HTML5新增了哪些表单输入类型和属性？

   • 回答要点：
     • 输入类型：email、url、number、range、date、color 等，提供更精准的输入验证和原生控件。
     • 属性：placeholder（占位提示）、required（必填验证）、autocomplete（自动填充）、pattern（正则验证）等,简化前端验证逻辑。

2. 问题：如何利用HTML5表单特性提升用户体验？

   • 回答要点：
     通过原生验证减少JavaScript代码量（如 required 防止空提交），利用 datalist 提供输入建议，或通过 progress/meter 展示实时数据状态。

离线与存储问题

1. 问题：HTML5的本地存储方案有哪些？区别是什么？

   • 回答要点：
     • localStorage：长期存储键值对，无过期时间，容量约5MB。
     • sessionStorage：会话级存储，页面关闭后数据清除。
     • IndexedDB：支持大量结构化数据存储，适合复杂查询（如离线应用缓存数据）。

2. 问题：如何实现一个离线Web应用？

   • 回答要点：
     使用 Application Cache（已废弃，推荐Service Worker替代）或现代框架（如Workbox）管理缓存，通过 manifest 文件声明需缓存的资源,确保用户离线时仍可访问核心页面。

其他高频问题

1. Canvas与SVG的区别是什么？

   • 回答要点：
     Canvas基于像素绘制（适合动态渲染、游戏），SVG基于XML矢量图形（适合缩放不失真、交互复杂的图表）。

2. Web Workers的作用是什么？如何使用？

   • 回答要点：
     Web Workers允许在后台线程运行脚本，避免主线程阻塞，通过 new Worker('worker.js') 创建，并通过 postMessage 与主线程通信。