Html5
29
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/
description
it's my own ppt
Transcript of Html5
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/
HTML5 包含的新特性• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E
N" "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>
百度、淘宝都已经用了！各位，加油吧 ~
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>
使用 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
使用 audio 和 video • 但是各大浏览器，对音、视频源文件的格式支持不
统一，如 ff 支持 .ogg，webM, 但又不支持 .mp3 。而 ie9 却正好相反 , 如此很麻烦。所以想着用 flash ，兼容性好。可是乔布斯又宣布 iphone， ipad 不支持 flash 。怎么办？
• 解决兼容性只能是 html5与 flash 并存，让不支持html5 的较低版本的浏览器用 flash ，在新版本浏览器或者 iphone， ipad用 html5 。
• 推荐使用 videojs 。解决这个问题： http://videojs.com/
Canvas• Canvas嘛，就是个浏览器上画图的东东，配合
javascirpt拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。用 js每划一根线就要写行代码，感觉麻烦，效率也不高。（干脆做个图得了）
• 但是现在很多 javascript小游戏都是基于 canvas做的，不可小估呀。这就是对你算法能力的要求了。去看看吧：http://www.cnblogs.com/lhb25/archive/
2011/04/12/1964343.html
• 在浏览器上绘图的插件太多了，可以用 flash 、甚至php 。仁者见仁了。
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>
Web application -new features1. location storge---session storge
客户端 session 和本地持久化 ( 亦即 DOM 存储)
2. Firefox 中的离线资源
3. web 应用程序中使用文件
(注：除新的 DOM存储特性外，其它目前只有 ff 支持 )
重点看下 location storge---session storge,最新浏览器都实现了对它的支持 ~
location storge---session storge实现客户端存储的方式，最多且兼容性最好的就是cookie.
cookie 的缺点：• Cookie 的大小有 4096 字节的限制 • 用户禁用 • 安全性 (基于 cookie 的攻击 )解决方案：
HTML5 新增客户端存储 ：Web Database ： 可以像客户端程序一样使用 SQL（不过Web
Database标准当前正陷于僵局之中，而且目前已经实现的浏览器实在是很有限）
location storge---session storgeWeb Storage ： sessionStorage与 localStorage • sessionStorage 用于本地存储一个会话（ session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储。
• localStorage 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
location storge---session storgeWeb Storage ： sessionStorage与 localStorage • sessionStorage 用于本地存储一个会话（ session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储。
• localStorage 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
location storge---session storge优势：• 1. 存储空间更大： IE8下每个独立的存储空间为
10M ，其他浏览器实现略有不同，但都比 Cookie要大很多。 Key--value
• 2. 存储内容不会发送到服务器：当设置了 Cookie后， Cookie 的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage 中的数据则仅仅是存在本地，不会与服务器发生任何交互。
• 3. 更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，使得数据操作更为简便。
• 4. 独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。
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
DOM new fetures• getElementsByClassName Document 和 元素结点对象支持
getElementsByClassName 方法。有了它，就可以通过 class 或者一组 class 来查找元素。
• 拖拽 HTML5 的拖拽 API 支持页面内甚至跨站点拖拽对象。同时
，也为扩展和基于 Mozilla 的应用提供了一些更简单的 API 。
• HTML 的焦点管理 支持新的 activeElement 和 hasFocus 属性。document.activeElement document.hasFocus
• 基于web 协议的处理器 你可以用 navigator.registerProtocolHandler() 方法将
web 应用注册成为协议处理器。
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“);
被认为不是 HTML5 组成部分的技术 Mozzila 说它们不是 html5 的组成部分： 其它几大浏览器产商可没出此言，但对这些技术的支
持也是各有千秋。（是与不是，尽管去学习吧！）• Web worker• Web Sockets • WebGL• Geolocation• CSS3
Web worker以前模拟多线程： setTimeout/setIntervalAjax: 浏览器新开一个线程请求，但原理还是单线程
运 行 onreadystatechange 所设置的函数。And now: Web Worker — javascript 的“多核”时代来了
！原理： 当前 javascript 的主线程中，使用 Worker 类来
独辟一个新的线程，来处理外联的一个javascript 文件， 起到互不阻塞执行的效果，并且提供主线程和新线程之间数据交换的接口：postMessage， onmessage 。区别： Ajax是客户端和服务器端通讯，而 Web Worker 和界面线程是在同一个客户端进程中
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+" 双核时代来啦 ");// 再发送回去，礼尚往来
}
Web Sockets支持情况： chrome 10、 safari 5 WebSockets 是在一个 (TCP) 接口进行双向通信的
技术 Websocket 就是借着 HTML5 在浏览器中加了一个 socket 通信程序的客户端。你在安装浏览器的时候，默认装了一个客户端，可以向服务端请求，并建立链接。然后再像原先的 socket 应用程序一样来回互相发送消息。
优点：• 一个 WEB 客户端只有一个 TCP 连接 • Websocket 服务端可以推送数据到 web 客户端，
替代以前的 long polling• 轻量级的头，减少数据传送量
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 每次都会有这样子的头信息交互
Web SocketsWebsocket 客户端开发接口
• onopen ： 当接口打开时• onmessage ： 当收到信息时• onclose ： 当接口关闭时Websocket 服务端：推荐 php websocket
Demo:file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/html5/test/testWebSocket.html
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">
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
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 平台开发者看了都要望尘莫及吧！
Geolocation• Geoloaction 的作用就是通过浏览器感知用户的地理位置
• 1. 公共数据：目前的地理位置探测，其资料往往来源于服务商各自的数据，而使用浏览器内置的统一接口，将高效整合这一信息。 2. 精确定位：
原来： IP 的定位能力差，原理：底层的浏览器，它将有权利支配其他
有助于定位的设备，比如 GPS 和 WIFI（热点）
GeolocationGeolocation 对象 ：if (navigator.geolocation) { alert( ' 你的浏览器支持 geolocation ' ); }else{ alert( ' 你的浏览器不支持 geolocation ' ) }
获取当前地理位置 --- getCurrentPosition navigator.geolocation.getCurrentPosition( getPositionSu
ccess , getPositionError ); error 对象下面，存放了 3 个常量：
TIMEOUT 表示获取信息超时。 PERMISSION_DENIED 表示用户选择了拒绝了位置服务。 POSITION_UNAVAILABLE 表示位置不可知。 而每一次出错时 error.code 将指向 3 个常量之中的一个。
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）
• -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(透明 )
具体的应该让我们的builder开课啦！
总结总的来说， HTML5现在还是个不靠谱的家伙！虽然各种新特性令人眼花瞭乱，但是由于各个浏器器支持不统一。尚没有一个统一的标准。所以要真是运用到实际当中，还需假以 X 日。
但是现在能透过这些新技术的简单介绍，应该能猜测到下一代互联网web3.0 的趋势~
期待 html5 的各项新技术趋渐成熟W3C 组织尽早定完稿，统一标准~
（以上内容纯属原创哈）
谢 谢~（如有雷同，实
属巧合）（版权归曹智峰所有）
![[MS-HTML5]: Microsoft Edge / Internet Explorer HTML5 ......2.1.55 [HTML5] Section 4.9.5 The tbody element ..... 55 2.1.56 [HTML5] Section 4.9.8 The tr element..... 55 2.1.57 [HTML5]](https://static.fdocuments.net/doc/165x107/5fb29d840f1bb936bf5a22fb/ms-html5-microsoft-edge-internet-explorer-html5-2155-html5-section.jpg)
