探索HTML5

关于我网名：三桥（sankyu） Blog：www.imsankyu.com 新浪微博: @三桥sankyu Twitter: @imsankyu 热衷于Web前端技术苹果控

关于今天的分享 HTML5现状如何理解HTML5 HTML5能做什么如何学习HTML5 移动应用：Weibo Touch HTML5优秀作品 HTML5存在问题

HTML5历史 HTML5是一个全新的html标准前身是：Web Application 1.0 2004年被WHATWG提出，於2007年被W3C接纳，并成立了新的HTML工作团队。 2008年1月22日，第一份正式草案发布；

6月份主流浏览器全球市场份额数据

浏览器使用情况分析报告

IE6的问题中国IE6的用户使用率忽略IE6问题：Canvas游戏、手机应用 http://www.ie6countdown.com/

HTML5化繁为简以浏览器原生能力替代复杂的JavaScript代码简化的DOCTYPE 简化字符集声明简单、强大的HTML5 API

HTML5不是JavaScript HTML5是HTML4的进化版本，也是JavaScript作为一个整体的进化版本 HTML5描述了如何适用HTML和XHTML标记文档，还对BOM和DOM做了相关的变更并添加特定的JavaScript的扩展，丰富Web应用的交互

HTML5不是JavaScript 定义新HTML标签，废除部分旧标签语义化定义新的通信协议全新的HTML5标准协议API

HTML5游戏 <canvas> Canvas 2D绘图 ExplorerCanvas一个开源的JavaScript类库，实现IE所不支持canvas的API。基于WebGL的3D绘图

移动应用程序移动设备的浏览器基于WebKit内核。如IOS、Android Form API Safari浏览器移动开发框架最佳代表者：jQuery Mobile和Sencha Touch

HTML5新API 离线应用本地存储(sessionStorage和localStorage) 视频和音频viedo audio postMessage API XMLHttpRequest Level 2 WebSocket API Web Worker API Geolocation API

新的文档类型（Doctype） HTML4.01 <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> HTML5 <!DOCTYPE html>

字符集声明过去的： <meta http-equiv=“Content-Type” content=“text/html;charset=utf-8”> 现在： <meta charset=“utf-8”>

一个最基本HTML5文档 <!DOCTYPE html> <html> <head> <meta charset=“utf-8”> <title>一个最基本HTML5文档</title> </head> <body> </body> </html>

HTML4布局 <div class=“header”></div> <div class=“footer”></div> <div class=“article”></div> <div class=“nav”></div> <div class=“slidebar”></div>

语义化 HTML5的语义化标签包括： <section> 代表文档中的一段或者一节 <nav> 用于构建导航 <article> 表示文档、页面、应用程序或网站中一体化的内容 <aside> 代表与页面内容相关、有别于主要内容的部分 <hgroup> 代表段或者节的标题 <header> 页面的页眉 <footer> 页面的页脚 <time> 表示日期和时间 <mark> 文档中需要突出的文字

20 Things http://www.20thingsilearned.com/ 这是一个使用HTML5实现的电子书应用，非常简洁清爽，效果非常流通。图片有动画，还自动生成书签功能。

创建基本游戏界面 <canvas id=“canvas” height=“200” width=“200”></canvas>

创建基本游戏界面 <script> function draw(){ var canvas=document.getElementById(‘canvas’); var context = canvas.getContext(‘2d’); //创建一条路径 context.beginPath(); context.moveTo(70,140); context.lineTo(140,70); //将一条线绘制到canvas context.stroke(); } window.addEventListener(“load”,draw,true); </script>

Weibo Touch 移动应用程序

账族Mobile 首个HTML5个人记账应用支持各种时尚移动设备，如iPhone、iPad上的Safari，Android上的Chrome lite Web App无需安装，打开浏览器即用

Weibo Touch http://weibotouch.sinaapp.com/ Lite版本 http://www.imsankyu.com/weibolite/ WeiboTouch是使用HTML5+CSS3开发的一套Web App微博应用。无需在客户端安装软件 Chrome谷歌浏览器 Android设备内置浏览器模仿新浪微博客户端

Weibo Touch Lite 支持iphone、iPad、android等设备支持chrome、safari等浏览器 Sencha Touch CSS3 新浪微博接口API

Weibo Touch Sencha Touch CSS3 支持chrome、safari等浏览器新浪微博接口API 模仿新浪微博客户端

CSS3 -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADw…………'); text-shadow: rgba(0, 0, 0, 0.5) 0 -0.08em 0; background-image: -webkit-gradient(linear,0% 0%, 0% 100%, from(#2CC4F5), to(#017DB1)); -webkit-border-radius: 0.2em; -webkit-box-shadow: 0px 2px 4px #222;

跳跃的小鸡（小胖讲座案例）

坦克大战HTML5版 @06wj同学的作品 http://weibo.com/06wj

3D 俄罗斯方块 3D 俄罗斯方块游戏采用 HTML5+JavaScript 代码编写游戏采用的是俯视的视角，游戏有点难度，可玩性比较高

HTML5存在问题 IE6的问题影响到HTML5在中国的发展浏览器的兼容性性能问题，如HTML5手机应用缺少成熟的开发框架和环境 HTML5标准的完善

探索HTML5

Recommended

Recommended

More Related Content

Similar to 探索HTML5

Similar to 探索HTML5 (20)

探索HTML5