HTML5 新特性

HTML5 带来了许多强大的新功能。

1. 音频和视频

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

<video controls width="640">
  <source src="video.mp4" type="video/mp4">
</video>

2. Canvas 绘图

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

3. 本地存储

• localStorage - 永久存储（除非手动清除）
• sessionStorage - 临时存储（浏览器关闭后清除）

// 保存数据
localStorage.setItem("name", "张三");

// 读取数据
var name = localStorage.getItem("name");

// 删除数据
localStorage.removeItem("name");

4. 新表单元素

• <datalist> - 输入建议列表
• <progress> - 进度条
• <meter> - 度量器

相关文章：CSS 简介（下一篇）