HTML5中的新增的内容

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

语义化标签

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

多媒体支持

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

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

表单增强

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

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

Canvas 绘图

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

<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存储用户的登录信息：

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