HTML5通过语义化标签、表单增强、音视频支持、Canvas绘图及本地存储等特性提升开发效率与用户体验，结合polyfill和降级策略可有效兼容旧浏览器，实现跨环境稳定运行。
HTML5 引入了许多新特性，极大提升了网页开发的语义化、交互性和多媒体支持能力。要在项目中有效使用这些特性，同时兼顾旧浏览器的兼容性，需要掌握核心功能和对应的处理策略。
语义化标签的使用
HTML5 提供了更清晰的页面结构标签，如 header、nav、section、article、aside 和 footer，替代了过去大量使用的 div。
示例：
网站标题
文章标题
文章内容...
立即学习“前端免费学习笔记（深入）”；
这些标签让代码更易读，也有利于 SEO 和无障碍访问。
表单增强功能
HTML5 扩展了 input 类型和属性，减少对 JavaScript 验证的依赖。
- input 类型：email、url、number、range、date、color 等，自动触发对应输入控件（如日期选择器）
- 新属性：placeholder、required、autofocus、pattern 等
示例：
注意：移动端会根据类型调起不同键盘，提升用户体验。
音视频与 Canvas 图形
原生支持音频和视频播放，无需插件。
Canvas 可用于绘制图形、动画甚至游戏：
本地存储与离线应用
localStorage 和 sessionStorage 提供比 Cookie 更大容量的数据存储。
- localStorage：数据持久保存，除非手动清除
- sessionStorage：页面会话期间有效
示例：
localStorage.setItem('username', '张三');const name = localStorage.getItem('username');
结合 Application Cache（已废弃）或 Service Worker 可实现离线访问，推荐使用现代 PWA 方案。
兼容性处理策略
老版本 IE（特别是 IE8 及以下）不支持 HTML5 新标签和 API，需采取措施。
- 使用 html5shiv 脚本让旧版 IE 识别语义标签
- 引入 polyfill 模拟缺失功能，如 local storage 或 fetch
- 通过 Modernizr 检测浏览器支持情况，按需加载补丁
- 关键功能应降级处理，保证基础可用性
例如，在页面头部引入 html5shiv：
基本上就这些。HTML5 的优势在于简化开发并提升体验，合理使用新特性并做好兼容兜底，就能在大多数环境中稳定运行。
