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>

　　运行显示：

原文地址：https://www.cnblogs.com/moon-yyl/p/11218731.html