html5中的新增知识点

HTML5 在原有的 HTML 4.01 基础上增加了许多新的元素和属性，以下是一些常见的 HTML5 新增知识点：

1. 语义化标签：HTML5 引入了一些语义化的标签，如 <header>, <nav>, <section>, <article>, <aside>, <footer> 等，这有助于改善代码的可读性和搜索引擎的优化。

<header>头部信息</header>
<nav>导航链接</nav>
<section>一个章节</section>
<article>一篇文章</article>
<aside>侧边内容</aside>
<footer>底部信息</footer>

2. 画布（Canvas）：HTML5 的 <canvas> 元素可以通过 JavaScript 来创建图形，这是一个强大的新工具，常用于游戏开发和复杂图形的处理。

<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, 150, 75);
</script>

3. 本地存储：HTML5 提供了本地存储功能，可以在客户端存储数据（通常是在浏览器中）。

// 存储数据
localStorage.setItem('key', 'value');
// 获取数据
var data = localStorage.getItem('key');
// 删除数据
localStorage.removeItem('key');
// 清除所有数据
localStorage.clear();

4. 音频和视频：HTML5 引入了 <audio> 和 <video> 标签，用于在网页中播放音频和视频文件。

<!-- 音频 -->
<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
 
<!-- 视频 -->
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

5. 表单控件：HTML5 增加了一些新的表单控件，如日期选择器、时间选择器、数字输入框等。

<!-- 日期选择器 -->
<input type="date">
<!-- 时间选择器 -->
<input type="time">
<!-- 数字输入框 -->
<input type="number" min="0" max="100">
<!-- 邮箱输入框 -->
<input type="email">
<!-- 搜索框 -->
<input type="search">
<!-- 电话输入框 -->
<input type="tel">
<!-- URL 输入框 -->
<input type="url">

6. 地理位置（Geolocation）API：HTML5 提供了地理位置 API，可以通过该 API 获取用户的地理位置信息。

navigator.geolocation.getCurrentPosition(function(position) {
  console.log("纬度: " + position.coords.latitude + 
  " 经度: " + position.coords.longitude);
});

7. Canvas 2D 上下文的新特性：HTML5 对 Canvas 2D 上下文进行了增强，提供了更多的绘图功能。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
 
// 创建一个渐变色
var grd = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
grd.addColorStop(