自总结 HTML5 新添加编程及特点.docx

自总结 HTML5 新添加编程及特点.docx

《自总结 HTML5 新添加编程及特点.docx》由会员分享，可在线阅读，更多相关《自总结 HTML5 新添加编程及特点.docx（12页珍藏版）》请在冰豆网上搜索。

自总结HTML5新添加编程及特点

HTML5特性

表单输入新类型：

一般网页点击拖拽后释放，会在新的浏览器页面打开类似搜索词条之类的情况。

H5中任何元素都能拖放。

Step设置后（其实就是从Min起以step为增加等差的数才有效）

可添加属性同Number一样

允许从日历中选取一个日期

也可直接设定为只能选取month,week,time,datetime,datetime-local（IE中无效）

表单新元素：

表单新属性：

可以一次选择多个文件加入

即输入前背景提示语

表单提交时输入框不能为空

视屏块：

音屏块：

点击拖放（Drag和Drop）：

一般网页点击拖拽后释放，会在新的浏览器页面打开类似搜索词条之类的情况。

H5中任何元素都能拖放。

首先设置元素的draggable=‘true’，ondragstart=‘调用JS函数’。

再设置目标区域元素块的ondrop=‘JS函数’，ondragover=‘JS函数’。

再在JS相关函数里添加功能：

Ondragstart：

利用dataTransfer.setData（“Text”,ev.target.id）以键值对存入拖动的元素ID。

Ondragover:

利用preventDefault（）屏蔽浏览器拖动后自动开新窗口搜索词条的情况。

Ondrop:

preventDefault（）屏蔽，通过getData获取拖拽的元素ID，并target.appendChild（getById）将元素控件放进此区域。

SVG矢量块：

WEB页面定位块：

点击按钮浏览器下方会出现：

跟踪移动时的位置：

WEB存储块：

本地不过期Localstorage存储方法（清空浏览器缓存则消失）：

sessionStorage存储方法（session过期则消失）：

WEB缓存块：

如果编辑图片或者修改JS函数不会被重新缓存，可以通过修改注释的方式让浏览器更新缓存。

WEBWORKER对象：

JS中可以写：

变量名=new…（“文件名”）；

变量名.onmessage=function（event）{执行功能};

获取对应New文件名的postMessage（i）传递过来的消息，利用event.data获取i值。