HTML5（简称H5）作为下一代Web标准，自推出以来备受关注。相较于HTML4，H5新增了许多特性，为开发者带来了更多便捷。本文将详细介绍H5的新特性，并通过示例代码帮助您更好地理解和运用这些特性。
- 语义化标签
H5引入了许多语义化标签，如、、、、等，使得页面结构更加清晰，有利于搜索引擎优化和屏幕阅读器解析。
示例代码：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>H5语义化标签示例</title> </head> <body> <header> <h1>网站标题</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">新闻</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> </header> <section> <article> <h2>文章标题</h2> <p>文章内容</p> </article> </section> <footer> <p>版权所有 © 2024</p> </footer> </body> </html> - Canvas绘图
H5新增了Canvas元素，允许开发者使用JavaScript进行绘图操作。Canvas可用于制作图表、游戏、动画等。
示例代码：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>H5 Canvas绘图示例</title> </head> <body> <canvas id="myCanvas" width="200" height="100"></canvas> <script> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = '#FF0000'; ctx.fillRect(0, 0, 150, 75); </script> </body> </html> - 音视频支持
H5原生支持音频和视频，无需依赖第三方插件。通过和 标签，开发者可以轻松实现音视频播放功能。
示例代码：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>H5音视频播放示例</title> </head> <body> <audio controls> <source src="audio.mp3" type="audio/mpeg"> 您的浏览器不支持音频播放。 </audio> <video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> 您的浏览器不支持视频播放。 </video> </body> </html> - 表单新特性
H5对表单元素进行了扩展，新增了多种输入类型，如email、date、range等，以及表单验证功能。
示例代码：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>H5表单新特性示例</title> </head> <body> <form> <label for="email">邮箱：</label> <input type="email" id="email" required> <label for="date">日期：</label> <input type="date" id="date"> <label for="range">范围：</label> <input type="range" id="range" min="0" max="100" step="10"> <input type="submit" value="提交"> </form> </body> </html> 本地存储
H5提供了两种本地存储方式：localStorage和sessionStorage。它们用于存储键值对数据，区别在于localStorage数据永久保存，而sessionStorage数据仅在当前会话有效。
示例代码：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>H5本地存储示例</title> </head> <body> <script> // 存储数据 localStorage.setItem('name', '张三'); sessionStorage.setItem('age', '25'); // 获取数据 console.log(localStorage.getItem('name')); // 输出：张三 console.log(sessionStorage.getItem('age')); // 输出：25 // 删除数据 localStorage.removeItem('name'); sessionStorage.removeItem('age'); </script> </body> </html>- Web Workers
H5引入了Web Workers，允许开发者创建后台线程执行脚本，从而避免阻塞主线程，提高页面性能。
示例代码：
```html
<!DOCTYPE html>
<title
