学习笔记之-----H5API

语义标签

<nav>网站导航块
<section>表示页面中的一个内容块
<article>表示页面中的一块与上下文不相关的内容块
<aside>元素表示当前页面或文章的附属信息部分
<header>表示页面中一个标题区域
<footer>底部标签
<hgroup>用于页面中与标题区域组合
<figure>一段独立的流内容
<address>用来在文档中呈现联系信息

新添元素

带标题的组合元素< figure>< figcaption>
	强调标签< mark>
	软换行< wbr> 对中文无效，仅当浏览器不够显示内容时生效
	进度条< progress min="0" max="100" value=""  >
	进度条< meter  min="0" max="100" value="" >
		属性（度量）：low最低 high最高 optimun最优
	细节信息< details>
		配合< summary>标题
	注音注释< ruby>
		配合< rt>

删除的标签

< font >	< center>	< basefont>	< big>
< s>		< strike>	< tt>		< u>
< bgsound>	< marquee>	< applet>	< rb>
< acronym>	< dir>	< isiindex>	< xmp>
< nextid>	< plaintext>
HTML5以后也不再支持框架了

添加的其他属性

在< ol>中添加了reversed属性，指定列表倒序显示
	为< style>元素新添属性scoped,使这个style局部有效（火狐有效）
	为< script>元素添加属性async，使js代码异步传输
	注意：async只有使用src引入文件时有效

全局属性（所有标签有效）：
contentEditable是否可以编辑
hidden隐藏元素
spellcheck拼写检查（false/true）

自定义属性

在HTML中，允许为HTML元素自定义属性：data-，可以通过JS进行获取或者操作

多媒体播放

注意：需要使用流媒体文件格式（如mp4、webm、ogg等）
       在HTML5问世之前，要在网络上展示视频，音频，动画，除了使用第三方自主开发的播放器之外，使用得最多的工具就是Flash,但是需要在浏览器上安装各种插件，并且有时速度很慢。HTML5新增了两个与媒体相关的标签，让开发人员不必依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容，这两个标签是 < audio> < video>

1. 嵌入视/音频：

<video src="" id="" width="640" height="360">视频播放器无法使用</video>
<audio src="" id="">音频播放器无法使用</audio>
标签之间的元素表示后备内容，在浏览器不支持这两个媒体元素的情况下显示。

2. source,指定不同媒体来源

并不是所有的浏览器都支持所有媒体格式，可以指定多个不同的媒体来源。由于不同的浏览器支持不同的编解码器，一般要指定多种格式的媒体来源。
	src 	指播放媒体的URL地址
	type 	媒体类型，属性值为播放文件的MIME类型，该属性值中的codes参数表示所使用的媒体的编码格式。
属性：
   src:播放文件的路径
   width,height:播放控件的宽度和高度
   controls:默认播放控制条是否显示
	autoplay:自动播放
	preload:预加载（缓冲）
		auto - 当页面加载后载入整个视频
		meta - 当页面加载后只载入元数据
		none - 当页面加载后不载入视频
	poster:视频预览图（视频不用或者不可用时）
	loop:循环播放
	currentTime:当前播放时间 00:00/30:00
	duration:文件总的播放时间
	palyed:是否播放中
	paused:是否暂停
	ended:是否播放完毕
	defaultPlaybackRate:设置视频的默认播放速度 1
	playbackRate:设置视频的播放速度 1
	volume:音量 0-1
	muted:静音  ture/false
方法：
	play();播放
	pause();暂停 

canvas元素（画图）

canvas元素
	属性 width height
	兼容性元素内容
	
canvas配套API
	获取canvas元素
	var Mycanvas = document.getElementById('Mycanvas');
	获取canvas元素操作上下文getContext对象
	var c = Mycanvas.getContext("2d");

用实例学习canvas的基本使用

	开始绘制：beginPath();
	结束绘制：closePath();//闭合路径
	清除画布：clearRect(x,y,width,height);
	1.绘制线段
		涉及属性：
			strokeStyle线条颜色
			lineWidth线条粗细
		设计方法：
			moveTo(x,y)
			lineTo(x,y)
			stroke()//绘制动作
	2.绘制矩形
		涉及属性：
			fillStyle
		涉及方法
			fillRect(x,y,width,height)实心矩形
			strokeRect(x,y,width,height)空心矩形
			fill();
	3.绘制圆形
		涉及方法：
			arc(x,y,r,beginAngle,endAngle,anticlockwise)
			圆心、半径、弧度、顺逆时针。
 			0*Math.PI/180,180*Math.PI/180
			stroke()空心圆
			fill()实心圆			
	4.绘制文字
		涉及属性：
			font="50px Arial"
		涉及方法：
			strokeText(str,x,y);空心字
			fillText(str,x,y);实心字
	5.图像翻转
		设计方法：
			save();//产生一个与原图相同的一个异次元空间
			translate(x,y);设置旋转点
			rotate(angle);设置弧度
			restore();//把旋转后的异次元空间映入原图
	6.绘制渐变图形
		涉及方法：			
			var color = c.createLinearGradient(0,0,0,500);//创建渐变
			color.addColorStop(0,"blue");
			color.addColorStop(1,"yellow");//追加颜色
			c.fillStyle=color;
			c.fillRect(0,0,500,500);

7.canvas存储

function down(){
   
//流的方式
//window.location=mymc.toDataURL("image/png").replace("image/png","image/octet-stream");
//A标签模拟的方式
var data = mymc.toDataURL("image/png")
var link = document.createElement('a');
link.href =</