HTML5 小结

HTML5
支持了视频和音频的播放.<video></video>视频 <audio></audio>
<video>支持MP4.WebM和OGG音频格式.各浏览器之间没有格式的统一标准.
为此提供了source标签提供了备选的视频资源.
src为url 资源路径、 width/height视频播放器的样式
controls播放按钮(进度条)/autoplay自动播放/loop播放完成后会再次开始播放

HTML5中新的表单控件
date  格式 year-month-date //<input type="date" />
time         hour:mintue
datetime
email 输入@的邮箱
search
number 只能输入数字
color
url

input新的属性.
placeholder 提示信息 输入信息时提示信息消失，没有输入时为默认信息.
required 必填 required="required"
pattern 验证用户输入 pattern(正则or匹配表达式)
form 关联 form (form id.)
autofocus 自动获得焦点 true or false
multiple 是否可选中多个文件 multiple="multiple"代表可以
accept 指定上传文件时也许的文件类型
accept="image/*"代表只能接受图片

上传文件的处理.
File表示被选中的文件.可以调用文件的属性.
file.size/file.type/file.name/
filelist=element.files表示所选中的文件.文件列表
FileReader是HTML里面的一个类.
var i=new FileReader();
i.readAsTest(file,encoding)以文本形式读取文件数据
i.readAsDateURL(file);base64编码的形式读取文件数据 可以直接

var img=document.createElement("img");img.src=i.result;然后添加img元素
i.result;读取被处理过的文件数据.
i.onloas 文件读取成功时触发.

HTML5之前文档中布局和结构都采用div标签.
HTML5为文档内容的结构布局定义了一些新的标签
header LOGO或者菜单栏

新的注册事件
beforeunload 页面关闭前或刷新前触发 function(){return str;}ruturn "" 后面为弹出内容(不支持其他的代码.)
scroll 页面滚动时触发
resize 页面尺寸调整时触发
mousewheel 鼠标滚轮滚动时触发

元素拖动 三步曲
darggable 是否可以被拖动.首先要保证element.darggable="true";
1.dragstart 拖动开始时触发 element1.ondragstart=function(){}
2.dragover 拖动元素1经过元素2(拖动时鼠标进入元素2时触发)
元素2为事件源.element2.ondragover=function
3. drop 拖动停止事件 element2.ondrop=function
图片和超链接是默认可以被拖动的元素.
拖动过程中用event.dataTransfer.setData(key,value) 来保存数据.
event.dataTransfer.getData(key)来获取数据.

HTML绘画功能
<canvas></canvas>画布标签.
var canvas=document.getElementById();
context=canvas.getContext("2d")/获得绘图上下文
2d这里表示图画是2d效果.
context.strokeStyle="" 设置画笔颜色
context.fillStyle="" 设置填充颜色
context.fillRect(x, y , width , height); //绘制并填充矩形
context.strokeRect(x, y , width , height); //绘制矩形
context.clearRect(x, y , width , height); // 清除矩形区域内的图形
//绘制图片
var img = new Image(); //创建图片对象
img.src="resource/1.png"; //设置图片的src，设置后即开始加载图片数据
img.onload=function(){ context.drawImage(img,230,10);
//图片数据加载完成后才可以绘制此图片

本地存储 HTML5之前浏览器存储只有4KB HTML5 提供了5MB.
window.localStorage.key=="value" 然后这个页面要点开才能保存.
var value=window.loaclStorage.key;就可以取出来