Html5
- 1. HTML 历史与 HTML5 的介绍 什么是 HTML5 • HTML5 是前者的升级版本。 HTML5 也并不是从一开始就确定的，早些时候 W3C 的 XHTML 工作组，他们希望用具有更严格语义和语法的 XHTML 2.0 ，同时也是一个彻底重构的激进版本，来替换 HTML4 。 • 狭义上的 HTML5 常常指 HTML 本身 。 • 广义上的 HTML5 则包括网页的前端技术，即：狭义的 HTML5 + CSS3 + JavaScript + Web Application API ，可能还包括对 SVG 、插件等的支持。 目前支持 html5 的浏览器有 IE9 、 ff4 、 safari5 、 chrome10 、 opera11 ， 但是各大浏览器对 html5 具体的某个应用的支持不是很统 一。 有点不靠谱？废话少说： 当前浏览器对 html5 各个特性的兼容性检查： http://www.html5test.com/ http://fmbip.com/#target-selector http://www.caniuse.com/
- 2. HTML5 包含的新特性 • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 对 html 5 ， <!DOCTYPE html> 这样的格式就行了。 • <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8"> • html5 里属性值可以不加引号 <img src=foo alt=bar> <p class=foo>Hello world</p> 百度、淘宝都已经用了！各位，加油吧 ~
- 3. HTML 5 中新的语义元素 • HTML 5 中新的语义元素就是遵循求真务实原理的反映。新增的元素不算多，谈不上无限的 扩展性，但却不失为一件好事。尽管数量屈指可数，但意义却非同一般。这些新元素涉及头 部 (header) 、脚部 (footer) 、分区 (section) 、文章 (article)…… ，相信大家都不会觉得陌 生。 • 例如：以前的文档： • <body> • <div id="header">...</div> • <div id="navigation">...</div> • <div id="main">...</div> • <div id="sidebar">...</div> • <div id="footer">...</div> • </body> • 现在可以改成： • <body> • <header>...</header> • <nav>...</nav> • <div id="main">...</div> • <aside>...</aside> • <footer>...</footer> • </body>
- 4. 使用 audio 和 video • <audio controls="controls"> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio> • <video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video> Test: http://www.w3school.com.cn/tiy/t.asp? f=html5_audio_all http://www.w3school.com.cn/tiy/t.asp? f=html5_video_all
- 5. 使用 audio 和 video • 但是各大浏览器，对音、视频源文件的格式支持不 统一，如 ff 支持 .ogg ， webM, 但又不支持 .mp3 。 而 ie9 却正好相反 , 如此很麻烦。所以想着用 flash ，兼容性好。可是乔布斯又宣布 iphone ， ipad 不支持 flash 。怎么办？ • 解决兼容性只能是 html5 与 flash 并存，让不支持 html5 的较低版本的浏览器用 flash ，在新版本浏览 器或者 iphone ， ipad 用 html5 。 • 推荐使用 videojs 。解决这个问题： http://videojs.com/
- 6. Canvas • Canvas 嘛，就是个浏览器上画图的东东，配合 javascirpt 拥有多种绘制路径、矩形、圆形、字符以 及添加图像的方法。用 js 每划一根线就要写行代码 ，感觉麻烦，效率也不高。（干脆做个图得了） • 但是现在很多 javascript 小游戏都是基于 canvas 做 的，不可小估呀。这就是对你算法能力的要求了。 去看看吧： http://www.cnblogs.com/lhb25/archive/2011/04/1 2/1964343.html • 在浏览器上绘图的插件太多了，可以用 flash 、甚至
- 7. Canvas 简单示例 • <script type="text/javascript"> • function drawShape(){ – // get the canvas element using the DOM – var canvas = document.getElementById('tutorial'); – // Make sure we don't execute when canvas isn't supported – if (canvas.getContext){ – // use getContext to use the canvas for drawing – var ctx = canvas.getContext('2d'); – // Draw shapes – //left,top,width,height – ctx.fillRect(25,25,100,100); // 绘制矩形，并以 fillStyle 填充 – ctx.clearRect(45,45,60,60); // 清除制定矩形区域 – ctx.strokeRect(50,50,50,50); // 绘制矩形，以 strokeStyle 绘制边界 • } • } • </script>
- 8. Web application -new features 1. location storge---session storge 客户端 session 和本地持久化 (亦即 DOM 存储) 2. Firefox 中的离线资源 3. web 应用程序中使用文件 ( 注：除新的 DOM 存储特性外，其它目前只有 ff 支 持) 重点看下 location storge---session storge, 最新浏览器 都实现了对它的支持 ~
- 9. location storge---session storge 实现客户端存储的方式，最多且兼容性最好的就是 cookie. cookie 的缺点： • Cookie 的大小有 4096 字节的限制 • 用户禁用 • 安全性 ( 基于 cookie 的攻击 ) 解决方案： HTML5 新增客户端存储 ： Web Database ： 可以像客户端程序一样使用 SQL （不过 Web Database 标准当前正陷于僵局之中，而且目前已经 实现的浏览器实在是很有限）
- 10. location storge---session storge Web Storage ： sessionStorage 与 localStorage • sessionStorage 用于本地存储一个会话 （ session ）中的数据，这些数据只有在同一个会 话中的页面才能访问并且当会话结束后数据也随之 销毁。因此 sessionStorage 不是一种持久化的本地 存储，仅仅是会话级别的存储。 • localStorage 用于持久化的本地存储，除非主动删 除数据，否则数据是永远不会过期的。
- 11. location storge---session storge Web Storage ： sessionStorage 与 localStorage • sessionStorage 用于本地存储一个会话 （ session ）中的数据，这些数据只有在同一个会 话中的页面才能访问并且当会话结束后数据也随之 销毁。因此 sessionStorage 不是一种持久化的本地 存储，仅仅是会话级别的存储。 • localStorage 用于持久化的本地存储，除非主动删 除数据，否则数据是永远不会过期的。
- 12. location storge---session storge 优势： • 1. 存储空间更大： IE8 下每个独立的存储空间为 10M ，其他浏览器实现略有不同，但都比 Cookie 要大很多。 Key--value • 2. 存储内容不会发送到服务器：当设置了 Cookie 后， Cookie 的内容会随着请求一并发送的服务器 ，这对于本地存储的数据是一种带宽浪费。而 Web Storage 中的数据则仅仅是存在本地，不会与服务 器发生任何交互。 • 3. 更多丰富易用的接口： Web Storage 提供了一 套更为丰富的接口，使得数据操作更为简便。 • 4. 独立的存储空间：每个域（包括子域）有独立的 存储空间，各个存储空间是完全独立的，因此不会 造成数据混乱。
- 13. location storge---session storge 使用： key-value 的形式 <script type="text/javascript"> localStorage.lastname="Smith"; document.write(localStorage.lastname); </script> <script type="text/javascript"> sessionStorage.lastname="Smith"; document.write(sessionStorage.lastname); </script> W3c 小例一看就明白 ： http://www.w3school.com.cn/tiy/t.asp? f=html5_webstorage_session_pagecount
- 14. DOM new fetures • getElementsByClassName Document 和 元素结点对象支持 getElementsByClassName 方法。有了它，就可以通过 class 或者一组 class 来查找 元素。 • 拖拽 HTML5 的拖拽 API 支持页面内甚至跨站点拖拽对象。同时 ，也为扩展和基于 Mozilla 的应用提供了一些更简单的 API 。 • HTML 的焦点管理 支持新的 activeElement 和 hasFocus 属性。 document.activeElement document.hasFocus • 基于 web 协议的处理器 你可以用 navigator.registerProtocolHandler() 方法将 web
- 15. DOM new fetures 前三个大家一看就明白 ，重点说下 Web-based protocol handlers ： <a href="mailto:[email protected]">Web Master</a> navigator.registerProtocolHandler("mailto", " https://www.example.com/?uri=%s", "Example Mail“ ); navigator.registerProtocolHandler("fake", " http://localhost/html5/testProcol.php?value=%s", "Fake Protocol“ );
- 16. 被认为不是 HTML5 组成部分的技 术 Mozzila 说它们不是 html5 的组成部分 ： 其它几大浏览器产商可没出此言 ，但对这些技术 的支持也是各有千秋 。 （是与不是 ，尽管去学习吧 ！） • Web worker • Web Sockets • WebGL • Geolocation • CSS3
- 17. Web worker 以前模拟多线程 ： setTimeout/setInterval Ajax: 浏览器新开一个线程请求 ，但原理还是单线 程运 行 onreadystatechange 所设置的函数 。 And now: Web Worker — javascript 的 “多核 ”时代来了 ！ 原理 ： 当前 javascript 的主线程中 ，使用 Worker 类来独 辟一个新的线程 ，来处理外联的一个 javascript 文件 ， 起到互不阻塞执行的效果 ，并且提供主 线程和新线程之间数据交换的接口 ： postMessage ， onmessage 。区别 ： Ajax 是客户 端和服务器端通讯 ，而 Web Worker 和界面线程 是在同一个客户端进程中
- 18. Web worker 例： //main thread var w = new Worker(“worker.js”);// 不能是 js 代码字符串 w.postMessage("javascript"); w.onmessage = function(evt){ alert(evt.data);// 获取新线程的 js 发送来的数据 } //worker.js //onmessage 方法的声明方式千万别带上 var, 否则在 Chrome,Safari,Opera 下会失效 onmessage = function (evt){ var d = evt.data;// 通过 evt.data 获得发送来的数据 postMessage(d+" 双核时代来啦 ");// 再发送回去 ，礼尚往 来 }
- 19. Web Sockets 支持情况 ： chrome 10 、 safari 5 WebSockets 是在一个 (TCP) 接口进行双向通信的 技术 Websocket 就是借着 HTML5 在浏览器中加了一 个 socket 通信程序的客户端 。你在安装浏览器 的时候 ，默认装了一个客户端 ，可以向服务端 请求 ，并建立链接 。然后再像原先的 socket 应 用程序一样来回互相发送消息 。 优点： • 一个 WEB 客户端只有一个 TCP 连接 • Websocket 服务端可以推送数据到 web 客户端 ，替代以前的 long polling • 轻量级的头 ，减少数据传送量
- 20. Web Sockets • REQUEST: • GET /Channel HTTP/1.1 • Upgrade: WebSocket //Upgrade 头提供了简单的机制来将 HTTP 协 议转换为其他的不兼容的协议 • Connection: Upgrade • Host: myServer:8876 • Origin: http://myServer:8876 • WebSocket-Protocol: mySubprotocol.example.org • // 数据都会根据 WebSocket 协议进行转换 • RESPONSE: • HTTP/1.1 101 Web Socket Protocol Handshake • Upgrade: WebSocket • Connection: Upgrade • WebSocket-Origin: http://myServer:8876 • WebSocket-Location: ws://myServer:8876/Channel • WebSocket-Protocol: mySubprotocol.example.org websocket 协议的握手部分根本就是个类 http 的协议 ，所不同的是 http 每次都会有这样子的头信息交互
- 21. Web Sockets Websocket 客户端开发接口 • onopen ： 当接口打开时 • onmessage ： 当收到信息时 • onclose ： 当接口关闭时 Websocket 服务端 ：推荐 php websocket Demo: file:///C:/Documents%20and%20Settings/Administrator
- 22. Web GL Web 3D is coming! Web gl = JavaScript+OpenGL ES 2.0+canvas !!! 不需要 Flash ，不需要 Silverlight !!! OpenGL :3D 图形 API 。这些 API 是通过 HTML 5 的 canvas 标签来使用的 . 定义了一个跨编程语言 、跨平台的编程接口的规格 ，它 用于三维图象 （二维的亦可 ） 从 HTML 的脚本标签中加载 Shader （渲染器 ） ： <script id="shader-fs" type="x-shader/x-fragment">
- 23. Web GL • http://learningwebgl.com/blog/ ：一个学习 WebGL 的网站 , 里面有教程等 , 用来画图的 API • http://learningwebgl.com/blog/?page_id=1217 ： 一个 WebGL 的教程 • http://www.c3dl.org/ ： C3DL 官网 ，里面有教 程 、 API 等 • http://code.google.com/p/o3d/ ： O3D WEBGL 版官网 • http://code.google.com/intl/zh- CN/apis/o3d/docs/devguideintro.html ： O3D 核 心 、有教程 、例子 、 API 等 • http://energize.cc/ ： energize • http://www.glge.org/ ： GLGE
- 24. Web GL • Demo: http://learningwebgl.com/lessons/example02/ http://www.ibiblio.org/e-notes/webgl/deflate/ship.html 尚只有 mozzila 和 safari 支持 (chrome 都不行 ？ ) Mozzila 超炫 ： http://videos.mozilla.org/serv/mozhacks/flight-of-the- navigator/ 3D 这么火的今天 ，要图形与高结度算法的整合 ，实乃不易 把 web gl 学会了 ，还用愁吃饭 ？ Flash 平台开发者看了都 要望尘莫及吧 ！
- 25. Geolocation • Geoloaction 的作用就是通过浏览器感知用户的 地理位置 • 1. 公共数据 ：目前的地理位置探测，其资料往往 来源于服务商各自的数据，而使用浏览器内置的统 一接口，将高效整合这一信息。 2. 精确定位 ： 原来： IP 的定位能力差， 原理：底层的浏览器，它将有权利支配其他有助 于定位的设备，比如 GPS 和 WIFI （热点）
- 26. Geolocation Geolocation 对象 ： if (navigator.geolocation) { alert( ' 你的浏览器支持 geolocation ' ); }else{ alert( ' 你的浏览器不支持 geolocation ' ) } 获取当前地理位置 --- getCurrentPosition navigator.geolocation.getCurrentPosition( getPositionSuccess , getPositionError ); error 对象下面，存放了 3 个常量： TIMEOUT 表示获取信息超时。 PERMISSION_DENIED 表示用户选择了拒绝了位置服务。 POSITION_UNAVAILABLE 表示位置不可知。 而每一次出错时 error.code 将指向 3 个常量之中的一个。
- 27. css3 • 1.border-radius:25px 圆角边框背景 具体的 • border-bottom-left-radius:40px • • 2. 多背景图片 • background:url(rose.png) no-repeat 150px 应该让 -20px; • url(driedrose.png) no-repeat; • url(fieldsky.jpg) no-repeat; 我们的 • 3. 阴影效果 • box-shadow :10px 10px 0px #fff; • 4. 转变 （ Transitions Transform ） builder • -o-transition:all 0.3s ease-in-out • • 移动 ： -o-transform:translate(50px,100px) 开课啦 • • 大小 ： -o-transform:scale(2.5) • ！ • 歪斜 ： -o-transform:skew(10deg,20deg) • • 转动 ： -o-transform:rotate(30deg) • • 5. 文字阴影 （ text-shadow ） • 6.opacity • 7.rgba/hsla( 透明 )
- 28. 总结 总的来说 ， HTML5 现在还是个不 靠谱 的家伙 ！ 虽然各种新特性令人眼花瞭乱 ，但是由于各个浏器 器 支持不统一 。尚没有一个统一的标准 。所以要真是 运 用到实际当中 ，还需假以 X 日 。 但是现在能透过这些新技术的简单介绍 ，应该能猜 测 到下一代互联网 web3.0 的趋势 ~ 期待 html5 的各项新技术趋渐成熟
- 29. 谢谢~ （如有雷同 ，实 属巧合 ） （版权归曹智峰所有 ）