1. 新的结构元素
HTML5 引入了一些新的结构元素，如 、、、 和 等，用于更好地描述页面内容和结构。通过使用这些元素，可以使页面更加语义化，并提高搜索引擎优化（SEO）的效果。
<header> <h1>网站标题</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于我们</a></li> </ul> </nav> </header> <section> <h2>产品介绍</h2> <article> <h3>产品 A</h3> <p>产品 A 的详细介绍。</p> </article> <article> <h3>产品 B</h3> <p>产品 B 的详细介绍。</p> </article> </section> <footer> <p>© 2023, All rights reserved.</p> </footer>
2. 新的表单元素
HTML5 中引入了一些新的表单元素，如 input 标签的属性 type="email"、type="url" 和 type="tel" 等，使表单更加易于验证和输入。
<label for="email">电子邮件地址：</label> <input type="email" id="email" name="email"> <label for="website">个人网站：</label> <input type="url" id="website" name="website"> <label for="phone">电话：</label> <input type="tel" id="phone" name="phone">
3. 多媒体支持
HTML5 改进了多媒体支持，在不需要使用插件或第三方库的情况下集成音频和视频。可以通过 和
标签轻松地将媒体添加到页面中，并使用 JavaScript 控制其行为和外观。
<audio controls> <source src="music.mp3" type="audio/mpeg"> <source src="music.ogg" type="audio/ogg"> 您的浏览器不支持 HTML5 音频。 </audio> <video controls width="640" height="360"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> 您的浏览器不支持 HTML5 视频。 </video>
4. Canvas 绘图
HTML5 中引入了 canvas 元素，使得在网页中进行绘图变得更加容易。通过使用 JavaScript，可以绘制图形、创建动画和处理用户交互等。
<canvas id="myCanvas" width="800" height="600"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 150, 75); </script>
结论
HTML5 中引入了许多新的特性和改进，如结构元素、表单元素、多媒体支持和 Canvas 绘图等，使前端开发变得更加强大和易用。同时，它还提高了页面的语义性和 SEO 效果。熟练掌握 HTML5 的用法，能够帮助开发者更好地打造出现代化、优雅的网站。
