HTML5中的新增的内容

HTML5 是 HTML 的第五次重大修改版本，带来了许多新的特性和功能，以下是一些主要新增内容：

语义化标签

新增标签 ：如<header>、<nav>、<article>、<section>、<aside>、<footer>等。这些标签使网页的结构更加清晰，易于理解和维护，同时也有利于搜索引擎的优化，提升网页在搜索结果中的排名。
示例：使用<header>标签定义页面的头部区域，通常包含网站的标题、导航栏等；使用<article>标签包裹独立的文章内容，使内容的组织更加有条理。

多媒体支持

新增标签 ：<audio>和<video>标签，使得在网页中嵌入音频和视频变得更加容易，无需依赖第三方插件。
示例：在 HTML5 中，要在网页中嵌入一个视频，可以使用以下代码：

html 复制代码

<video src="video.mp4" controls autoplay></video>

表单增强

新增输入类型 ：如email、url、number、range、date、time、color等，这些新的输入类型为用户提供了更便捷的输入方式，同时也增强了表单的验证功能。
示例：使用email类型的输入框时，浏览器会自动验证用户输入的内容是否为有效的电子邮件地址格式。

html 复制代码

<input type="email" placeholder="请输入您的电子邮件地址">

Canvas 绘图

绘图功能 ：HTML5 新增的<canvas>元素提供了一个可以使用 JavaScript 在网页上绘制图形、图像和动画的区域，为网页带来了更丰富的视觉效果和交互性。
示例：以下是一个简单的使用<canvas>绘制矩形的示例：

html 复制代码

<canvas id="myCanvas" width="200" height="100"></canva>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 50);
</script>

本地存储

存储方式 ：HTML5 提供了两种在客户端存储数据的新方法：localStorage和sessionStorage。localStorage用于长期存储数据，数据在浏览器关闭后仍然存在；sessionStorage用于临时存储数据，数据在浏览器关闭后会被清除。
示例：使用localStorage存储用户的登录信息：

html 复制代码

<script>
localStorage.setItem('username', 'John');
localStorage.setItem('password', '123456');
var username = localStorage.getItem('username');
var password = localStorage.getItem('password');
console.log(username, password);
</script>