html5特性简要概括

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>