HTML5学习笔记
2015-11-24 23:10
543 查看
参考资料:http://www.runoob.com/html/html-tutorial.html
HTML5拖动实例
注:需要给可拖动的元素添加属性:draggable=”true",
ondragstart:拖动什么
ondragover:放在何处
ondrop:进行放置
event.dataTransfer.setData("type值",event.target.id) :设置被拖放的数据的类型
event.dataTransfer.getData("type值") :获得被拖放的数据的类型
sessionStorage - 针对一个 session 的数据存储;//针对一个 session 进行数据存储。当用户关闭当前页面后,数据会被删除
使用时需要在<html>标签中添加manifest属性,并配置manifest文件;
总会好的。
1、html5声明、将此html文档标记为html5文档
<!DOCTYPE html>
2、html5定义了8个新的块级元素,要让旧版本的浏览器正确显示这些元素,可以设置 CSS 的 display 属性值为 block;
header, section, footer, aside, nav, main, article, figure { display: block; }
<!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1, #div2 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;} </style> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"></div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </body> </html>
HTML5拖动实例
注:需要给可拖动的元素添加属性:draggable=”true",
ondragstart:拖动什么
ondragover:放在何处
ondrop:进行放置
event.dataTransfer.setData("type值",event.target.id) :设置被拖放的数据的类型
event.dataTransfer.getData("type值") :获得被拖放的数据的类型
7、新的 Input 类型
新的类型包含:color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week8、WEB存储
localStorage - 没有时间限制的数据存储;//对象存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。sessionStorage - 针对一个 session 的数据存储;//针对一个 session 进行数据存储。当用户关闭当前页面后,数据会被删除
if(typeof(Storage)!=="undefined"){//判断是否可以使用web存储 localStorage.Name="one"; }
9、应用程序缓存
特点:离线浏览 - 用户可在应用离线时使用它们,速度 - 已缓存资源加载得更快,减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。使用时需要在<html>标签中添加manifest属性,并配置manifest文件;
10、Web Worker
特点:运行在后台的 JavaScript,不会影响页面的性能;总会好的。
相关文章推荐
- WebGL实现HTML5贪吃蛇3D游戏
- 基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效
- HTML5 手写板签名
- 解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
- 利用html5新增geolocation对象加百度地图API获取用户详细地址
- html5 plus 拍照并显示
- html5,html5教程
- HTML5的WebSocket
- WebGL实现HTML5贪吃蛇3D游戏
- 推荐WEB开发者最佳HTML5和CSS3代码生成器
- HTML5画布游戏基础框架代码解析:屌丝追女神
- html5慢
- HTML5:使用Autocomplete属性提高表单的交互性
- html5+css3实现抽奖活动的效果
- html5之我見
- 关于h5页面,在手机上测试,可配host
- HTML5安全攻防详析之八:Web Socket攻击
- HTML5安全攻防详析之七:新标签攻击
- HTML5安全风险详析之六:API攻击
- HTML5安全风险详析之五:劫持攻击