跳到主要内容

HTML5 新特性

面试速答（30 秒版 TL;DR）​

  • 面试语境里说的 HTML5 新特性，通常不是只指“新标签”，而是指一整组前端基础能力升级。
  • 最常答的 6 组：
    1. 语义化标签：header、nav、main、article、section、footer
    2. 多媒体：audio、video
    3. 图形绘制：canvas、SVG 的普及应用
    4. 表单增强：新 input type、新属性、新校验能力
    5. 存储与离线能力：localStorage、sessionStorage、IndexedDB、离线缓存思路
    6. 浏览器 API 升级：历史管理、消息通信、拖拽、定位、Worker 等
  • 面试加分点：主动补一句，很多能力常被统称为 HTML5，但严格说不全是“HTML 语言本体”新增标签，还包含同时代浏览器标准能力。

一张图记住 HTML5 的面试答法​

1）语义化标签​

典型标签：

  • header
  • nav
  • main
  • article
  • section
  • aside
  • footer

示例：

<header>站点头部</header>
<nav>主导航</nav>
<main>
  <article>
    <h1>文章标题</h1>
    <section>正文分节</section>
  </article>
</main>
<footer>版权信息</footer>

价值：

  • 结构更清晰
  • SEO 更友好
  • 可访问性更好

面试里不要只说“代码更规范”，要说出 语义、SEO、辅助技术识别 这三个收益。

2）多媒体标签：audio / video​

以前网页播放音视频常依赖 Flash；HTML5 之后浏览器原生支持：

<video controls width="640">
  <source src="/intro.mp4" type="video/mp4" />
</video>

<audio controls>
  <source src="/podcast.mp3" type="audio/mpeg" />
</audio>

优点：

  • 原生支持
  • 不再依赖 Flash 插件
  • 能配合字幕、播放控制、懒加载等能力

3）图形能力：Canvas 与 SVG​

代表性提升是：

  • canvas：脚本绘图、像素处理、动画渲染
  • SVG：矢量图、可缩放图形、图标与图表
<canvas id="board" width="300" height="150"></canvas>

这类能力使浏览器不再只是“展示静态文档”，而能承载更丰富的图形和交互。

4）表单增强​

新的输入类型​

<input type="email" />
<input type="url" />
<input type="number" />
<input type="date" />
<input type="range" />
<input type="color" />

新属性​

<input type="text" placeholder="请输入用户名" required autocomplete="username" autofocus />

新能力​

  • 原生校验：required、pattern、min、max
  • 更适合移动端的键盘提示：inputmode
  • 更丰富的用户体验：占位文本、自动完成等

面试里可以总结成：HTML5 让表单从“纯输入框”升级为“带基础交互和校验语义的输入系统”。

5）本地存储与离线能力​

典型代表：

  • localStorage
  • sessionStorage
  • IndexedDB
  • 现代离线缓存思路：Service Worker + Cache API
localStorage.setItem('theme', 'dark')
const theme = localStorage.getItem('theme')

常见答法要点：

  • localStorage 持久化，除非主动清除
  • sessionStorage 会话级存储，标签页关闭通常失效
  • IndexedDB 更适合结构化、大体量数据

如果被追问“HTML5 离线存储”，要主动区分：

  1. 离线缓存资源
  2. 本地存业务数据

6）浏览器 API 升级​

面试里常被归到 HTML5 新特性的还有：

  • History API：pushState、replaceState
  • postMessage：跨窗口/iframe 通信
  • Drag and Drop：拖拽 API
  • Geolocation：地理定位
  • Web Worker：后台线程
  • WebSocket：全双工通信

这里的加分点不是全背下来，而是知道：

  • 前端单页应用、富交互页面的很多基础能力，都依赖这一代浏览器标准升级

面试时怎么组织回答更稳？​

推荐顺序：

  1. 先一句话定义：HTML5 是一代更强调语义、多媒体、表单、存储和应用能力的 Web 标准演进
  2. 再按分类答 5 到 6 组
  3. 最后补工程价值：更好的语义、交互、可访问性和富应用能力

一个可直接复述的答法：

HTML5 新特性我一般分 6 类回答：语义化标签、多媒体、图形绘制、表单增强、本地存储与离线能力、浏览器 API 升级。比如语义化标签让 SEO 和可访问性更好，audio/video 让音视频不再依赖 Flash，canvas 和 SVG 提升了图形能力，表单有了更多输入类型和原生校验，存储方面有 localStorage、IndexedDB，应用能力上有 History API、postMessage、Worker 等。

典型题 & 标准答法​

Q1：HTML5 新特性有哪些？​

答法建议：

  • 不要散点罗列，按分类答。
  • 至少覆盖：语义化、多媒体、表单增强、存储、图形、API。

Q2：HTML5 语义化标签有什么好处？​

答法建议：

  • 结构清晰
  • SEO 更友好
  • 屏幕阅读器和辅助技术更容易理解页面结构

Q3：HTML5 为什么对前端发展很重要？​

答法建议：

  • 它把浏览器从“文档浏览器”进一步推进成“应用运行平台”。
  • 很多今天习以为常的 SPA、富媒体、PWA、可视化能力都建立在这代标准升级上。

常见追问​

  • HTML5 是不是只是一堆新标签？
    • 不是。新标签只是其中一部分，更大的变化是浏览器能力整体增强。
  • HTML5 离线存储就是 localStorage 吗？
    • 不完全是。还要区分资源离线缓存和数据本地存储。
  • Canvas、WebSocket、Geolocation 都算 HTML5 吗？
    • 面试语境里通常会算进“HTML5 相关新能力”，但严格说它们属于同时代 Web 平台能力集合。

易错点 / 坑​

  • 只回答语义化标签，显得覆盖面太窄。
  • 把 HTML5 新特性说成“只是为了移动端”，这个结论过窄。
  • 把 localStorage 和 Cookie 混为一谈。两者用途、大小、传输方式都不同。
  • 只背名词，不说价值。面试官更想听“为什么重要”。

速记要点（可背诵）​

  • HTML5 新特性不是只指新标签，而是一整代 Web 能力升级。
  • 六大类：语义化、多媒体、图形、表单、存储、API。
  • 核心价值：更语义、更可交互、更适合构建 Web 应用。