HTML5（H5)的前生今世

HTML5（简称H5）是HTML的第五个版本，于2014年被W3C推荐为标准。它在原有的基础上增加了新的特性，如Canvas、本地存储、多媒体、表单控件等，旨在简化Web开发并提高Web应用的用户体验。

以下是一些HTML5的关键特性和用法示例：

1. Canvas：用于绘图的标签，可以通过JavaScript进行编程绘制。

<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. 本地存储：使用JavaScript可以在用户的浏览器中本地保存数据。

localStorage.setItem('key', 'value');
var data = localStorage.getItem('key');

3. 多媒体：支持视频和音频标签。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
 
<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

4. 新的表单控件：如日期选择器、时间选择器等。

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="birthday">Birthday:</label><br>
  <input type="date" id="birthday" name="birthday"><br>
  <input type="submit" value="Submit">
</form>

5. 绘图标签：使用<svg>标签进行矢量图形的绘制。

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

6. 新的语义标签：如<header>, <nav>, <section>, <article>, <footer>等，有利于搜索引擎优化和代码的可维护性。

<header>
  <h1>My First HTML5 Document</h1>
</header>
<nav>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>
<section>
  <h2>W3C</h2>
  <p>The World Wide Web Consortium (W3C) is a community of companies, governments, and individuals that work together to develop open standards for the Web.</p>
</section>
<footer>
  <p>© W3C, 2023</p>
</footer>

以上是HTML5的一些关键特性和用法示例，HTML5的发展为Web开发带来了前所未有的灵活性和功能丰富性。