Html5

924 views

Published on

it's my own ppt

  • Be the first to comment

  • Be the first to like this

Html5

  1. 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-selectorhttp://www.caniuse.com/
  2. 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. 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. 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_allhttp://www.w3school.com.cn/tiy/t.asp? f=html5_video_all
  5. 5. 使用 audio 和 video• 但是各大浏览器,对音、视频源文件的格式支持不 统一,如 ff 支持 .ogg , webM, 但又不支持 .mp3 。 而 ie9 却正好相反 , 如此很麻烦。所以想着用 flash ,兼容性好。可是乔布斯又宣布 iphone , ipad 不支持 flash 。怎么办?• 解决兼容性只能是 html5 与 flash 并存,让不支持 html5 的较低版本的浏览器用 flash ,在新版本浏览 器或者 iphone , ipad 用 html5 。• 推荐使用 videojs 。解决这个问题: http://videojs.com/
  6. 6. Canvas• Canvas 嘛,就是个浏览器上画图的东东,配合 javascirpt 拥有多种绘制路径、矩形、圆形、字符以 及添加图像的方法。用 js 每划一根线就要写行代码 ,感觉麻烦,效率也不高。(干脆做个图得了)• 但是现在很多 javascript 小游戏都是基于 canvas 做 的,不可小估呀。这就是对你算法能力的要求了。去看看吧:http://www.cnblogs.com/lhb25/archive/2011/04/1 2/1964343.html• 在浏览器上绘图的插件太多了,可以用 flash 、甚至
  7. 7. Canvas 简单示例• <script type="text/javascript">• function drawShape(){ – // get the canvas element using the DOM – var canvas = document.getElementById(tutorial); – // Make sure we dont execute when canvas isnt 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. 8. Web application -new features 1. location storge---session storge 客户端 session 和本地持久化 (亦即 DOM 存储) 2. Firefox 中的离线资源 3. web 应用程序中使用文件 ( 注:除新的 DOM 存储特性外,其它目前只有 ff 支 持) 重点看下 location storge---session storge, 最新浏览器 都实现了对它的支持 ~
  9. 9. location storge---session storge 实现客户端存储的方式,最多且兼容性最好的就是 cookie. cookie 的缺点:• Cookie 的大小有 4096 字节的限制• 用户禁用• 安全性 ( 基于 cookie 的攻击 )解决方案:HTML5 新增客户端存储 :Web Database : 可以像客户端程序一样使用 SQL (不过 Web Database 标准当前正陷于僵局之中,而且目前已经 实现的浏览器实在是很有限)
  10. 10. location storge---session storge Web Storage : sessionStorage 与 localStorage • sessionStorage 用于本地存储一个会话 ( session )中的数据,这些数据只有在同一个会 话中的页面才能访问并且当会话结束后数据也随之 销毁。因此 sessionStorage 不是一种持久化的本地 存储,仅仅是会话级别的存储。 • localStorage 用于持久化的本地存储,除非主动删 除数据,否则数据是永远不会过期的。
  11. 11. location storge---session storge Web Storage : sessionStorage 与 localStorage • sessionStorage 用于本地存储一个会话 ( session )中的数据,这些数据只有在同一个会 话中的页面才能访问并且当会话结束后数据也随之 销毁。因此 sessionStorage 不是一种持久化的本地 存储,仅仅是会话级别的存储。 • localStorage 用于持久化的本地存储,除非主动删 除数据,否则数据是永远不会过期的。
  12. 12. location storge---session storge 优势: • 1. 存储空间更大: IE8 下每个独立的存储空间为 10M ,其他浏览器实现略有不同,但都比 Cookie 要大很多。 Key--value • 2. 存储内容不会发送到服务器:当设置了 Cookie 后, Cookie 的内容会随着请求一并发送的服务器 ,这对于本地存储的数据是一种带宽浪费。而 Web Storage 中的数据则仅仅是存在本地,不会与服务 器发生任何交互。 • 3. 更多丰富易用的接口: Web Storage 提供了一 套更为丰富的接口,使得数据操作更为简便。 • 4. 独立的存储空间:每个域(包括子域)有独立的 存储空间,各个存储空间是完全独立的,因此不会 造成数据混乱。
  13. 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. 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. 15. DOM new fetures前三个大家一看就明白 ,重点说下Web-based protocol handlers :<a href="mailto:webmaster@example.com">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. 16. 被认为不是 HTML5 组成部分的技 术 Mozzila 说它们不是 html5 的组成部分 : 其它几大浏览器产商可没出此言 ,但对这些技术 的支持也是各有千秋 。(是与不是 ,尽管去学习吧 !)• Web worker• Web Sockets• WebGL• Geolocation• CSS3
  17. 17. Web worker以前模拟多线程 : setTimeout/setIntervalAjax: 浏览器新开一个线程请求 ,但原理还是单线 程运 行 onreadystatechange 所设置的函数 。And now:Web Worker — javascript 的 “多核 ”时代来了 !原理 : 当前 javascript 的主线程中 ,使用 Worker 类来独 辟一个新的线程 ,来处理外联的一个 javascript 文件 , 起到互不阻塞执行的效果 ,并且提供主 线程和新线程之间数据交换的接口 : postMessage , onmessage 。区别 : Ajax 是客户 端和服务器端通讯 ,而 Web Worker 和界面线程 是在同一个客户端进程中
  18. 18. Web worker例://main threadvar 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. 19. Web Sockets支持情况 : chrome 10 、 safari 5 WebSockets 是在一个 (TCP) 接口进行双向通信的 技术 Websocket 就是借着  HTML5 在浏览器中加了一 个 socket 通信程序的客户端 。你在安装浏览器 的时候 ,默认装了一个客户端 ,可以向服务端 请求 ,并建立链接 。然后再像原先的 socket 应 用程序一样来回互相发送消息 。优点:• 一个 WEB 客户端只有一个 TCP 连接• Websocket 服务端可以推送数据到 web 客户端 ,替代以前的 long polling• 轻量级的头 ,减少数据传送量
  20. 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. 21. Web SocketsWebsocket 客户端开发接口• onopen : 当接口打开时• onmessage : 当收到信息时• onclose : 当接口关闭时Websocket 服务端 :推荐 php websocketDemo:file:///C:/Documents%20and%20Settings/Administrator
  22. 22. Web GLWeb 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. 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. 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. 25. Geolocation• Geoloaction 的作用就是通过浏览器感知用户的 地理位置• 1. 公共数据 :目前的地理位置探测,其资料往往 来源于服务商各自的数据,而使用浏览器内置的统 一接口,将高效整合这一信息。 2. 精确定位 : 原来: IP 的定位能力差, 原理:底层的浏览器,它将有权利支配其他有助 于定位的设备,比如 GPS 和 WIFI (热点)
  26. 26. GeolocationGeolocation 对象 :if (navigator.geolocation) { alert( 你的浏览器支持 geolocation );}else{ alert( 你的浏览器不支持 geolocation )}获取当前地理位置 --- getCurrentPositionnavigator.geolocation.getCurrentPosition( getPositionSuccess , getPositionError );error 对象下面,存放了 3 个常量: TIMEOUT 表示获取信息超时。 PERMISSION_DENIED 表示用户选择了拒绝了位置服务。 POSITION_UNAVAILABLE 表示位置不可知。 而每一次出错时 error.code 将指向 3 个常量之中的一个。
  27. 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. 28. 总结总的来说 , HTML5 现在还是个不 靠谱 的家伙 !虽然各种新特性令人眼花瞭乱 ,但是由于各个浏器 器支持不统一 。尚没有一个统一的标准 。所以要真是 运用到实际当中 ,还需假以 X 日 。但是现在能透过这些新技术的简单介绍 ,应该能猜 测到下一代互联网 web3.0 的趋势 ~期待 html5 的各项新技术趋渐成熟
  29. 29. 谢谢~ (如有雷同 ,实属巧合 ) (版权归曹智峰所有 )

×