HTML5新增用法

HTML5 引入了许多新的元素和属性，以下是一些常见的 HTML5 新用法示例：

1. 用于绘图的 <canvas> 元素：

<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>

2. 嵌入视频和音频的 <video> 和 <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>
 
<!-- 音频 -->
<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

3. 用于绘制表单的新输入类型：

<form>
  <!-- 电子邮件输入 -->
  <input type="email" name="userEmail" required>
  
  <!-- 数值输入，带有范围限制 -->
  <input type="number" name="userAge" min="1" max="100">
  
  <!-- 搜索框 -->
  <input type="search" name="userSearch">
  
  <!-- 网址输入 -->
  <input type="url" name="userUrl">
  
  <!-- 日期选择 -->
  <input type="date" name="userDate">
  
  <!-- 时间选择 -->
  <input type="time" name="userTime">
  
  <!-- 月份选择 -->
  <input type="month" name="userMonth">
  
  <!--  week选择 -->
  <input type="week" name="userWeek">
  
  <!-- 提交按钮 -->
  <input type="submit">
</form>

4. 用于定义文档章节和节的 <section> 和 <article> 元素：

<section>
  <article>
    <h1>文章标题</h1>
    <p>这是一个文章段落。</p>
  </article>
  
  <article>
    <h1>文章标题</h1>
    <p>这是另一个文章段落。</p>
  </article>
</section>

5. 用于导航的 <nav> 元素：

<nav>
  <ul>
    <li><a href="index.html">首页</a></li>
    <li><a href="about.html">关于</a></li>
    <li><a href="contact.html">联系</a></li>
  </ul>
</nav>

6. 用于定义微数据的 <div> 元素（与搜索引擎优化SEO相关）：

<div itemscope itemtype="http://schema.org/Person">
  <span itemprop="name">张三</span>
  <img itemprop="image" src="profile.jpg" alt="张三的照片">
  <span itemprop="jobTitle">软件工程师</span>
</div>

这些只是 HTML5 新用法的一小部分，HTML5 还引入了许多其他功能，如地理位置API、离线应用存储、Web Workers 等。