1.html5主要的设计目的： 互联网语义化，以便更好地被人类和机器阅读 更好的在移动设备上支持web应用 https://www.w3.org/TR/html5 新增内容： 新的语义标签 <header>、<footer>、<article>、<nav> .... 新增表单控件(标签) data 、time 、email 、url 、number ... 新增视频/音频标签 video 、audio 新增画布标签 canvas 更好支持本地离线数据存储 二 新的语义标签 <section> 定义页面中的区域 <article> 定义页面中独立的内容区域 三 新增输入input标签 <label for="userEmail"> 输入邮件： <input type="email" name="userEmail" id="userEmail" required> </label> <input type="number" name="age" min="1" max="200"> color tel url data range 补充一下label的用法：有for属性，需要添加id 或者直接不要for属性，包裹元素 四 video标签 使用方式：1. <video src="video.mp4" controls> 您的浏览器不支持 </video> 2. <video width="600" height="350" controls> <source src="video.mp4" type="video/mp4" <source src="video.webm" type="video/webm" <source src="video.ogg" type="video/ogg" 您的浏览器不支持html5 video </video> video 标签属性 src 设置视频url controls 是否显示播放按钮（菜单） autoplay 视频显示后，自动播放 loop 是否循环播放 muted 视屏静音 height width JS中控制视屏播放 <video id="movie"> var movie = $("#movie"); movie.play() 播放 movie.pause() 暂停 //监听事件 开始播放的时候触发 movie.onplay=function(){ } movie.onplay=function(){ } movie.onend=function(){ } 五、audio 音频 MP3, type:mpeg wav, type:wav ogg type ogg 六、本地存储 WebStorage cookie本地限制存储限制 1.不同浏览器对Cookie大小限制不同，大多数浏览器支持最大为4094（4k)的Cookie数据。 2.浏览器会限制网站可以在用户计算机上存储的Cookie的数量，大多数浏览器只允许每个20个cookie, 如果试图存储更多的Cookie,则最旧的Cookie便会被丢弃。 3.部分浏览器会对其接受的来自所有站点的Cookie 总数做出限制，通常为300个。 html5 本地存储数据通常大小限制在5M（不同浏览器大小限制不同） 1.Local Storage 永久性的本地存储，没有时间限制。（持久化本地） 2.Session Storage:会话级别的本地存储（内存方式存储），关闭浏览器后，数据消失 3.Local Database:支持SQL的本地数据库 LocalStorage Session Storage setItem(key,value),添加 getItem(key)//获取z值 clear() key(0) //获得下标为0的key removeItem(key) 七、canvas 在web绘制图形（基于js） 应用领域：制作Web游戏 绘制统计图标 字体设计 图形编辑器 echart.js canvas 编程的方法 定义：<canvas id="" height="" width=""> 你的浏览器不支持...canvas标签 </canvas> 画图形，写文字，加载图片
写一个canvas的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<canvas id="canvasDemo" width="700" height="500" style="border:1px solid #000">
你的浏览器不支持canvas
</canvas>
<script>
var canvasDemo = document.getElementById("canvasDemo");
var context = canvasDemo.getContext('2d');
//起点
context.moveTo(0,0);
//终点
context.lineTo(100,200);
//颜色
context.strokeStyle = "red";
//宽度
context.lineWidth = 5;
//开始绘制
context.stroke();
//绘制正方形
context.fillStyle = 'green';
context.fillRect(200,200,400,200);
context.beginPath();
context.arc(600,300,60,90*Math.PI/180,270*Math.PI/180);
context.strokeStyle = "white";
context.fillStyle = 'white';
context.fill();
context.stroke();
context.closePath();
</script>
</body>
</html>
运行显示：