HTML5 - Web 开发新阶段


HTML5 – Web开发步入新阶段 演变历程 1991 HTML 1994 HTML 2 1996 CSS 1 + Javascript 1997 HTML 4 1998 CSS 2 2000 XHTML 1 2002 Tableless 2005 AJAX 2009 HTML5 91 94 96 97 98 00 02 05 09 HTML5是什么 ì  广义上:一套技术标准的集合 语义化 SEMANTICS 语义化标签

HTML5

Web开发步入新阶段

......

HTML5

Web开发步入新阶段

......

语义化标签

文章标题

文章内容

语义化标签

以下代码展示了如何通过JS创建一个元素。

语义化标签 语义化标签 应用相关标签 A+ 正在处理 另存为...
fileInfo metadata camera data
表单标签 表单标签 表单标签 移动平台上的表单标签 type="email" type="tel" 离线存储 OFFLINE & STORAGE Once upon a time⋯ Cookies的问题 ì  速度 ì  安全 ì  容量 Web Storage sessionStorage.setItem("username", document.getElementById ("name").value) alert(sessionStorage.getItem("username")) Web Storage localStorage.setItem('lng', map.getCenter().lng); localStorage.setItem('lat', map.getCenter().lat); localStorage.setItem('mapZoom', map.getZoom()); Web SQL Database var db = window.openDatabase('MyDB', '1.0', 'my database', 5 * 1024 * 1024); db.transaction(function(tx){ tx.executeSql("CREATE TABLE IF NOT EXISTS test (id unique, text)"); tx.executeSql("INSERT INTO test (id, text) VALUES (1, 'my data')"); tx.executeSql("SELECT * FROM test", [], successCallback); }); 但是⋯ ì  W3C已经停止了规范更新 Indexed Database var idbReq = window.indexedDB.open("My Database"); idbReq.onsuccess = function(event){ var db = event.srcElement.result; // do something here } Application Cache cache.appcache文件内容(MIME Type:text/cache-manifest): CACHE MANIFEST index.html style.css images/logo.png scripts/main.js 设备访问 DEVICE ACCESS 设备访问 ì  与操作系统集成的更紧密 ì  文件、硬件信息访问 Geolocation if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(pos){ alert(pos.coords.latitude + ',' + pos.coords.longitude); }) } Geolocation Native Drag & Drop span.addEventListener("dragstart", function(e){ e.dataTransfer.setData("text", this.innerHTML); }); drop.addEventListener('drop', function(e){ this.innerHTML = e.dataTransfer.getData('text'); }, false); File API(Desktop Drag-In) holder.ondrop = function (e) { e.preventDefault(); var file = e.dataTransfer.files[0], reader = new FileReader(); reader.onload = function (event) { holder.style.background = 'url(' + event.target.result + ') no-repeat center'; }; reader.readAsDataURL(file); return false; }; File API(Desktop Drag-In) holder.ondrop = function (e) { e.preventDefault(); var file = e.dataTransfer.files[0], reader = new FileReader(); reader.onload = function (event) { holder.innerHTML = event.target.result; }; reader.readAsText(file); return false; }; File API(Desktop Drag-Out) A Picture var file = document.getElementById('dragout'); file.ondragstart = function(e){ e.dataTransfer.setData('DownloadURL', file.dataset.downloadurl); } Device Orientation window.addEventListener("deviceorientation", function(e){ var a = e.alpha; var b = e.beta; var g = e.gamma; }, false); Speech Input 数据连通 CONNECTIVITY 数据连通 ì  改善前后数据交互 WebSocket ì  减少header traffic ì  不需要轮询 ì  全双工 WebSocket var socket = new WebSocket(host); socket.send(message); socket.onmessage = function(message){alert(message.data);} WebSocket Web Workers ì  浏览器单线程工作 ì  background thread Web Workers var worker = new Worker('worker.js'); worker.onmessage = function(event){ document.getElementById('result').text = event.data; }; worker.js var n = 1; search: while(true) { n += 1; for (var i = 2; i <= Math.sqrt(n); i += 1) { if (n % i == 0) continue search; } postMessage(n); } Notifications function RequestPermission (callback) { window.webkitNotifications.requestPermission(callback); } function showNotification(){ if (window.webkitNotifications.checkPermission() > 0) { RequestPermission(showNotification); } else { window.webkitNotifications.createNotification ("header.png", "Title", "Body").show(); } } Notifications 新消息提示 新邮 件提示 多媒体 MULTIMEDIA Audio & Video
还剩82页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 10 金币 [ 分享pdf获得金币 ] 3 人已下载

下载pdf

pdf贡献者

taichimi

贡献于2012-05-25

下载需要 10 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf