SlideShare a Scribd company logo
1 of 78
HTML5 概览

鲁超伍 / Adam Lu
http://adamlu.com/
      @adamlu
Who am I
• Software Engineer at Yahoo! R&D Beijing

• 天地会HTML5/CSS3版版主

• 《 YUI3 Cookbook 》中文版译者

• 我的博客: http://adamlu.com

• 我的微博: http://weibo.com/adamlu
议程
• 什么是 HTML5

• HTML5 能做什么

• HTML5 摘要

• CSS3 新特性

• 移动上的 HTML5
时间轴
•   1995 Nov – HTML 2.0 由 IETF 发布
•   1997 Jan – HTML3.2 发布 , W3C
•   1997, Dec – HTML 4.
•   1999, Dec – HTML 4.01 发布 .
•   2000, Jan – XHTML 1.0
•   2001, May – XHTML 1.1
之后发生了什么?
W3C 和 XHTML2
• 2002 年 W3C 开始工作在 XHTML2 上
• 这是一个灾难
• ……
WHATWG
• W3C 指定的标准完全理论化而与网站设计者的需
  求无关
• 2004 年, Ian Hickson 提议扩展 HTML 来创建
  Web 应用程序
• 提议被否决
• WHATWG 形成 (Web Hypertext Applications
  Working Group)
• Ian Hickson 成为 HTML5 的编辑
• 2006 年, W3C 采用了 WHATWG 所做的工作作
  为基础重新统一了规范
什么是 HTML5




HTML5 是新的 HTML 标准
 !
HTML5


   HTML + CSS + JS
Structure + Presentation + Behavior
为什么 HTML5
•   已存在的网站可以移植到 HTML5
•   渐进增强
•   旧浏览器将仍能使用页面
•   Modernizr: http://www.modernizr.com/
HTML5 技术




语义:作为 HTML5 的前端和中心,语义学能够赋予框架结构
以意义。更详尽的标签组合以及资源描述框架,微型数据和微
型格式将为你和你的用户打造一套数据驱动的网络。
HTML5 技术




离线和存储:在应用缓存,本地存储,索引数据库和文件
应用程序接口的帮助下, HTML5 应用甚至能在没有因特
网连接的情况下工作。
HTML5 技术




设备访问:地理定位只是一个开始, HTML5 能够
让应用程序访问连结到你计算机上的任何设备。
HTML5 技术




连结:更有效率的连结性将能带来更实时的聊天,更
快的游戏速度以及更好的沟通交流。服务器与客户端
之间的网络套接字和邮件摄像头将比以往更加便捷。
HTML5 技术




多媒体:音频和视频可是 HTML5 世界的一等公民,他们
将与你的应用程序和网站和睦共处。灯光,摄影,开始 !
HTML5 技术




平面和三维效果:在 SVG, Canvas, WebGL 和 CSS3
3D 效果这些特性之间,你一定能找到让你的用户眼
花缭乱,美不胜收的创意。
HTML5 技术




性能和集成:使你的应用程序和网络在大量诸如 Web
Workers 和 XMLHttpRequest 2 这样的技术下更加快
速。没有人愿意停下了等你跟进的。
HTML5 技术




CSS3 :在不牺牲你的讲义结构和性能的情况下, CSS3 提供
了大量的样式效果和加强你的网络应用。另外 WOFF(Web
Open Font Format) 提供了前所未有的印刷灵活性控制。
HTML5 能做什么




  http://www.cuttherope.ie/
HTML5 能做什么




  http://read.douban.com
HTML5 能做什么




https://touch.www.linkedin.com
HTML5 能做什么




http://www.thewildernessdowntown.com/
HTML5 摘要
•   语义化标签
•   图像处理
•   媒体支持
•   设备支持
•   改善用户界面
•   网络存储
•   网络通信
语义化标签
• 很少的头代码                   • 不需要 type 属性

<!DOCTYPE HTML>            <script src=”foo.js”></script>
<html>
<head>                     <link href=”foo.css”></link>
<meta charset=”utf-8”>
<title>foo</title>
</head> ...
语义化标签
Section :
<article>
<hgroup>
<h1>Apples</h1>
<h2>Tasty, delicious fruit!</h2>
</hgroup>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
<h1>Red Delicious</h1>
<p>These bright red apples are the most common found in
many supermarkets.</p>
</section>
<section>
<h1>Granny Smith</h1>
<p>These juicy, green apples make a great filling for apple
pies.</p>
</section>
</article>
            Example: https://youzee.com/en/
语义化标签

    不再需要
    <div id=“header”></div>
    <div class=“section”></div>
    <div class=“article”></div>
    <div id=“footer”></div>
语义化标签

<output name="result"></output>


<progress id="p" max=100><span>0</span>%</progress>


<meter value=6 max=8>6 blocks used (out of 8 total)
</meter>
Voter turnout: <meter value=0.75><img alt="75%"
src="graph75.png"></meter>
Tickets sold: <meter min="0" max="100"
value="75"></meter>
语义化标签

Details 和 Summary :

<details>
<summary>
Copying... <progress max="375505392"
value="97543282"></progress> 25%
</summary>
<dl>
<dt>Transfer rate:</dt>
<dd>452KB/s</dd>
<dt>Local filename:</dt>
<dd>/home/rpausch/raycd.m4v</dd>
</dl>
</details>
语义化标签


Address :

<address>
<a href="../People/Raggett/">Dave
Raggett</A>, <a
href="../People/Arnaud/">Arnaud Le Hors</A>,
contacts for the w3c HTML activity </address>

Address 应用于最近的 article 或 body 标签
语义化标签


Data 属性:
<div class="spaceship" data-ship-id="92432" data-
weapons="laser 2" data-shields="50%" data-x="30" data-
y="10" data-z="90"><button class="fire"></div>
<script>
div = document.getElementsByTagName(‘ div’)[0];
spaceships[div.dataset.shipId].fire();
</script>
语义化标签

Figure 和 Figure 标题:
<figure>
<img src="bubbles-work.jpeg" alt="Bubbles, sitting in his
office chair, works on his latest project intently.“ />
<figcaption>Bubbles at work</figcaption>
</figure>
语义化标签
Time 和发布日期属性:
<time pubdate datetime="2009-10-09T14:28-
08:00"></time>

菜单和命令:
<menu type="toolbar">
<command type="radio" radiogroup="alignment"
checked="checked" label="Left" icon="icons/alL.png"
onclick="setAlign('left')">
<command type="radio" radiogroup="alignment"
label="Center" icon="icons/alC.png"
onclick="setAlign('center')">
<command type="radio" radiogroup="alignment"
label="Right" icon="icons/alR.png"
onclick="setAlign('right')">
</menu>
语义化标签

Mark 用户高亮某些东西,
<p><mark>Momentum is preserved across
the wormhole. Electromagnetic radiation
can travel in both directions through a
wormhole, but matter cannot.</mark></p>
而 Strong 则是用来表示重要。
<p>When a wormhole is created, a vortex
normally forms. <strong>Warning: The
vortex caused by the wormhole opening
will annihilate anything in its
path.</strong></p>
语义化标签

并不是所有的导航都要用 <nav>
<nav></nav> 只表示主导航,例如底部的
nav

Article 是页面的唯一内容
<article></article>


Hgroup 最高级别的头部组
<hgroup></hgroup>
语义化标签
Itemscope 和 Itemprop :
<div itemscope>
<p>My name is <span
itemprop="name">Elizabeth</span>.</p>
</div>
<div itemscope>
<p>My name is <span itemprop="name">Daniel</span>.</p>
</div>
<div itemscope>
<p>My name is <span itemprop="name">Neil</span>.</p>
<p>My band is called <span itemprop="band">Four Parts
Water</ span>.</p>
<p>I am <span itemprop="nationality">British</span>.</p>
</div>

http://jsfiddle.net/adamlu/vKurD/
图像处理


Canvas :
<canvas id=”square”> fallback content </canvas>
<script>
var canvas = document.getElementById(‘square’);
context = canvas.getContext(‘2d’);
context.fillStyle = “#000000”;
context.fillRect(0, 0, 100, 100);
</script>

Example: http://mudcu.be/sketchpad/
媒体支持

<audio src=”test.ogg”></audio>   <video controls/>
<audio src=”test.ogg” autoplay   <source src=”cat.mp4” />
controls loop> <a                <source src=”cat.ogg” />
href=”test.ogg”>download</a>     </video>
</audio>


http://html5.grooveshark.com/    http://m.youtube.com/
媒体支持

Video 格式支持:
Ogg Theora/Voribs
- Firefox 3.5+
- Chrome
- Opera
MPEG-4 H.264/AAC
- Safari
- Chrome
- Opera
设备支持
原生地理位置定位:
navigator.geolocation.getCurrentPosition(function(position){
    position.coords.latitude,
    position.coords.longitude;
}, errorCallback, config);

GPS
A-GPS
基站信息
WiFi 位置

DEMO: http://chrome.360.cn/html5_labs/demos/geolocation/index.html
DEMO: https://maps.google.com/
设备支持

输入类型:
<input type=”email” />
tel datetime search date email range url color
不支持的浏览器默认为 text.




DEMO: http://jquerymobile.com/demos/1.1.0-rc.1/docs/forms/textinputs/
iPhone 上不同 input 类型时键盘的输入框变化
设备支持

桌面通知:
if (window.webkitNotifications.checkPermission() == 0) { // 0 is
PERMISSION_ALLOWED
    window.webkitNotifications.createNotification('icon.png', 'Notification
Title', 'Notification content...').show();
  } else {
    window.webkitNotifications.requestPermission();
  }

http://jsfiddle.net/adamlu/neunM/
改善用户界面

拖拽:                                       可编辑的内容—把一个元素变为可
                                          编辑的区域
<div draggable=”true”></div>
                                          <script>
addEvent(div, “dragstart”, function(e){
                                          document.getElementsByTagName
e.dataTransfer.setData(‘foo’, ‘bar’);
                                          ('p')[0].contentEditable = true;
}, true);
                                          </script>
addEvent(div, ‘dragend’, function(e){
e.dataTransfer.getData(‘foo’);
}, true);


DEMO: http://pi-squared.co.za/development/html5-touch/index.html
改善用户界面


Web Worker :
new Worker("worker.js");
无法访问 DOM 或页面,需要通过 postMessage 接口来通信
。

DEMO: http://html5demos.com/worker
改善用户界面

History API :
pushState(data, title [, url]);
replaceState(data, title [, ulr]);
window.addEventListener("popstate", function(e){
e.state;
}

Example: https://github.com/adamlu/yui3-cookbook
网络存储

Storage :                                Application Storage/Offline :

sessionStorage.setItem(key, value);      <html manifest=”cache.manifest”>
sessionStorage.getItem(key);             检测 online 或 offline
localStorage.setItem(key, value);        window.addEventListener('online',
localStorage.getItem(key);               online, true);
localStorage.removeItem(key);            window.addEventListener('offline',
                                         online, true);


            不再需要依赖 Cookies ,插件和针对浏览器的 API


DEMO: http://www.webkit.org/demos/sticky-notes/
网络通信

跨域通信:
postMessage(string);
onMessage(event) { event.data; }



Web Sockets :
var ws = new WebSocket("ws://hostname:80/");
ws.onmessage = function (event) { event.data };
ws.onclose = function () {};
ws.onopen = function () {};

DEMO: http://html5demos.com/web-socket
CSS3 新特性
•   圆角
•   阴影
•   渐变
•   颜色
•   背景
•   边框
•   字体
•   变换
         DEMO: http://jsfiddle.net/adamlu/xGuKy/
•   过渡
•   动画
CSS3 能做什么




DEMO: http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/demo.html
CSS3 能做什么




DEMO: http://anthonycalzadilla.com/css3-ATAT/index-bones.html
CSS3 能做什么




DEMO: http://demo.tutorialzine.com/2009/11/hovering-gallery-css3-jquery/demo.php
移动上的 HTML5
• 移动网站在增长
• 移动用户在五年后会超过桌面网络用户
• 2016 年之前将有 21 亿移动设备装有支持 HTML5
  的浏览器
• HTML5 对于移动非常好
• 不需要下载原生应用
• 同一套代码,发布到各个流行的设备上
• 大量的 HTML5 特性已经在移动浏览器上被支持
http://html5test.com/
移动上使用 HTML5 的网站
移动上使用 HTML5 的网站
移动上使用 HTML5 的网站
移动上使用 HTML5 的网站
Mobile 在增长




 Source: Nielsen (January 2012)
对比原生应用移动用户更喜欢浏览器浏
        览




      ( 来源 : Adobe)
Web App 和 Native App
      Web App                   Native App           Comparation
 只需要键入一个地址                   必须被发布并下载                 安装和更新

 访问网站分析,基于                Apple Store, Google Play    获得价值
  SaaS 的增值策略
       渐进增强                      依照规范                 终端体验
  GeoLocation, Offline    摄像头 , 陀螺仪 , 话筒 ,           访问硬件特性
Storage, Canvas, Audio,   指南针 , 加速计 , GPS
    Video, Camera
    HTML5, CSS3,           Object-C, Java, C++,       开发者经验
   Javascript, UI 库        J2EE, .NET, Cocoa
                                  Touch
Web Workers, 图像加速 ,       直接运行固件特性 , GPU                性能
      WebGL                  加速 , 多线程
http://mobilehtml5.org/
HTML 头


<meta name="viewport" content="width=device-width,
initial-scale=1, maximum-scale=1, user-scalable=no">

<link rel="apple-touch-icon" href="images/favicon.png" />
高级表单

<input type="number" pattern="[0-9]*" />
<input type="email” required />
<input type="url" />
<input type="tel" />
<input type="time" />
<input type="date" />
<input type="month" />
<input type="week" />
<input type="datetime" />
<input type="datetime-local" />
JavaScript 事件
window.addEventListener("touchstart", function(e){
//e.touches;
}, false);

window.addEventListener("orientationchange", function(e){
//window.orientation(0 is portrait, 90 and -90 are landscape)
}, false);

window.addEventListener("deviceorientation", function(e){
//e.alpha
//e.beta
//e.gamma
}, false);

window.addEventListener("devicemotion", function(e){
//e.acceleration.x/y/z
//e.accelerationIncludingGravity.x/y/z
}, false);
设备支持

window.devicePixelRatio

navigator.connection(Android2.2+)
//navigator.connection object
{
  "type": "3",
  "UNKNOWN": "0",
  "ETHERNET": "1",
  "WIFI": "2",
  "CELL_2G": "3",
  "CELL_3G": "4"
}
Mobile 上的 CSS

-webkit-text-size-adjust: none;

-webkit-user-select: none;

-webkit-touch-callout;

-webkit-tap-highlight-color: transparent;

position: fixed;

input[type="search"]{ -webkit-appearance: none/textfield;}
Mobile Web App




       http://app.ft.com
移动优先的响应式设计
响应式网站设计是建议设计和开发应该根据
屏幕大小、平台和转向来响应用户行为和环
境的方法。
CSS3 媒体查询

@media screen and (max-width: 600px) {
 .class { background: #ccc; }
 .nav{display:none};
 .dropdown-menu{display:block;}
}

@media screen and (min-width: 900px) {
 .class { background: red; }
}

@media screen and (max-device-width: 480px) {
 .class { background: 000; }
}

http://mediaqueri.es/
http://pinchzoom.com/uploads/anatomy-of-a-html5-mobile-app.png
Mobile 设计模式




http://mobile-patterns.com/
相关框架
• 模板: http://html5boilerplate.com/mobile

• 打包工具:
   – http://phonegap.com/
   – http://www.appmobi.com/

• 应用程序框架:
   –   http://jquerymobile.com/
   –   http://yuilibrary.com/
   –   http://sproutcore.com/
   –   http://www.sencha.com/
   –   http://zeptojs.com/

• HTML5 游戏框架:
   – http://www.limejs.com/
   – http://craftyjs.com/
Mobile 调试工具
• 调试:
 – WEINRE
 – WebKit Remote Debugging

• 模拟器:
 – Mobile Emulators and Simulators
 – Android Emulator
 – iOS Simulator

• 性能监测:
 – Mobile PerfBookmarklet
 – http://www.blaze.io/mobile/
兼容性测试
•   http://haz.io/
•   http://caniuse.com/
•   http://css3test.com/
•   http://css3generator.com/
•   http://css3info.com/
•   http://html5test.com/
•   http://css3please.com/
•   http://mobilehtml5.org/
•   http://quirksmode.org/m/
HTML5 is the future of Mobile!
HTML5概览

More Related Content

Viewers also liked

Zhoe pyramid builders
Zhoe pyramid buildersZhoe pyramid builders
Zhoe pyramid builders7GChaffey
 
How to Remove Codec v hijacker
How to Remove Codec v hijackerHow to Remove Codec v hijacker
How to Remove Codec v hijackeradelardbrown2
 
A fast and accurate computational approach to protein ionization: combining t...
A fast and accurate computational approach to protein ionization: combining t...A fast and accurate computational approach to protein ionization: combining t...
A fast and accurate computational approach to protein ionization: combining t...BIOVIA
 
java question paper 5th sem
java question paper 5th semjava question paper 5th sem
java question paper 5th semshaikfarhan8
 

Viewers also liked (6)

Zhoe pyramid builders
Zhoe pyramid buildersZhoe pyramid builders
Zhoe pyramid builders
 
Ernst & young: Competing for Growth
Ernst & young: Competing for GrowthErnst & young: Competing for Growth
Ernst & young: Competing for Growth
 
How to Remove Codec v hijacker
How to Remove Codec v hijackerHow to Remove Codec v hijacker
How to Remove Codec v hijacker
 
The Superstar Company
The Superstar CompanyThe Superstar Company
The Superstar Company
 
A fast and accurate computational approach to protein ionization: combining t...
A fast and accurate computational approach to protein ionization: combining t...A fast and accurate computational approach to protein ionization: combining t...
A fast and accurate computational approach to protein ionization: combining t...
 
java question paper 5th sem
java question paper 5th semjava question paper 5th sem
java question paper 5th sem
 

Similar to HTML5概览

非常靠谱 Html 5
非常靠谱 Html 5 非常靠谱 Html 5
非常靠谱 Html 5 Tony Deng
 
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development FundamentalsExam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development FundamentalsChieh Lin
 
Developer也可以做出漂亮網站 - Twitter Bootstrap/JQuery Mobile簡介
Developer也可以做出漂亮網站 - Twitter Bootstrap/JQuery Mobile簡介Developer也可以做出漂亮網站 - Twitter Bootstrap/JQuery Mobile簡介
Developer也可以做出漂亮網站 - Twitter Bootstrap/JQuery Mobile簡介Fred Lin
 
Backbone.js and MVW 101
Backbone.js and MVW 101Backbone.js and MVW 101
Backbone.js and MVW 101Jollen Chen
 
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)ziggear
 
前端MVC之backbone
前端MVC之backbone前端MVC之backbone
前端MVC之backboneJerry Xie
 
高性能网站最佳实践
高性能网站最佳实践高性能网站最佳实践
高性能网站最佳实践longhao
 
移动Web开发框架jqm探讨
移动Web开发框架jqm探讨移动Web开发框架jqm探讨
移动Web开发框架jqm探讨newker
 
揭秘Html5和Css3
揭秘Html5和Css3揭秘Html5和Css3
揭秘Html5和Css3Adam Lu
 
揭秘Html5和Css3 ---- 鲁超伍
揭秘Html5和Css3 ---- 鲁超伍揭秘Html5和Css3 ---- 鲁超伍
揭秘Html5和Css3 ---- 鲁超伍裕波 周
 
Html5css3 go.yeefe.com
Html5css3 go.yeefe.comHtml5css3 go.yeefe.com
Html5css3 go.yeefe.comtellyeefe
 
Android 4-app
Android 4-appAndroid 4-app
Android 4-applydiafly
 
[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am iTwinsen Liang
 
利用Signalr打造即時通訊@Tech day geek
利用Signalr打造即時通訊@Tech day geek利用Signalr打造即時通訊@Tech day geek
利用Signalr打造即時通訊@Tech day geekJohnson Gau
 
基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展agen
 
Html5移动web应用开发(PhoneGap)
Html5移动web应用开发(PhoneGap)Html5移动web应用开发(PhoneGap)
Html5移动web应用开发(PhoneGap)amd6400
 
Html5移动web应用开发(PhoneGap)
Html5移动web应用开发(PhoneGap)Html5移动web应用开发(PhoneGap)
Html5移动web应用开发(PhoneGap)amd6400
 
基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展agen
 

Similar to HTML5概览 (20)

非常靠谱 Html 5
非常靠谱 Html 5 非常靠谱 Html 5
非常靠谱 Html 5
 
Html5
Html5Html5
Html5
 
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development FundamentalsExam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
 
Web base 吴志华
Web base 吴志华Web base 吴志华
Web base 吴志华
 
Developer也可以做出漂亮網站 - Twitter Bootstrap/JQuery Mobile簡介
Developer也可以做出漂亮網站 - Twitter Bootstrap/JQuery Mobile簡介Developer也可以做出漂亮網站 - Twitter Bootstrap/JQuery Mobile簡介
Developer也可以做出漂亮網站 - Twitter Bootstrap/JQuery Mobile簡介
 
Backbone.js and MVW 101
Backbone.js and MVW 101Backbone.js and MVW 101
Backbone.js and MVW 101
 
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
 
前端MVC之backbone
前端MVC之backbone前端MVC之backbone
前端MVC之backbone
 
高性能网站最佳实践
高性能网站最佳实践高性能网站最佳实践
高性能网站最佳实践
 
移动Web开发框架jqm探讨
移动Web开发框架jqm探讨移动Web开发框架jqm探讨
移动Web开发框架jqm探讨
 
揭秘Html5和Css3
揭秘Html5和Css3揭秘Html5和Css3
揭秘Html5和Css3
 
揭秘Html5和Css3 ---- 鲁超伍
揭秘Html5和Css3 ---- 鲁超伍揭秘Html5和Css3 ---- 鲁超伍
揭秘Html5和Css3 ---- 鲁超伍
 
Html5css3 go.yeefe.com
Html5css3 go.yeefe.comHtml5css3 go.yeefe.com
Html5css3 go.yeefe.com
 
Android 4-app
Android 4-appAndroid 4-app
Android 4-app
 
[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am i
 
利用Signalr打造即時通訊@Tech day geek
利用Signalr打造即時通訊@Tech day geek利用Signalr打造即時通訊@Tech day geek
利用Signalr打造即時通訊@Tech day geek
 
基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展
 
Html5移动web应用开发(PhoneGap)
Html5移动web应用开发(PhoneGap)Html5移动web应用开发(PhoneGap)
Html5移动web应用开发(PhoneGap)
 
Html5移动web应用开发(PhoneGap)
Html5移动web应用开发(PhoneGap)Html5移动web应用开发(PhoneGap)
Html5移动web应用开发(PhoneGap)
 
基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展
 

More from Adam Lu

Yui rocks
Yui rocksYui rocks
Yui rocksAdam Lu
 
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用Adam Lu
 
一步一步开发Html5 mobile apps
一步一步开发Html5 mobile apps一步一步开发Html5 mobile apps
一步一步开发Html5 mobile appsAdam Lu
 
Get started with YUI
Get started with YUIGet started with YUI
Get started with YUIAdam Lu
 
HTML5 on Mobile
HTML5 on MobileHTML5 on Mobile
HTML5 on MobileAdam Lu
 
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Adam Lu
 
HTML5 on Mobile(For Designer)
HTML5 on Mobile(For Designer)HTML5 on Mobile(For Designer)
HTML5 on Mobile(For Designer)Adam Lu
 
重新认识Html5
重新认识Html5重新认识Html5
重新认识Html5Adam Lu
 
常用Js框架比较
常用Js框架比较常用Js框架比较
常用Js框架比较Adam Lu
 
浏览器兼容性问题小结
浏览器兼容性问题小结浏览器兼容性问题小结
浏览器兼容性问题小结Adam Lu
 
小谈Javascript设计模式
小谈Javascript设计模式小谈Javascript设计模式
小谈Javascript设计模式Adam Lu
 
从Adobe和qcof会议看前端开发
从Adobe和qcof会议看前端开发从Adobe和qcof会议看前端开发
从Adobe和qcof会议看前端开发Adam Lu
 
Enhance Web Performance
Enhance Web PerformanceEnhance Web Performance
Enhance Web PerformanceAdam Lu
 

More from Adam Lu (13)

Yui rocks
Yui rocksYui rocks
Yui rocks
 
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
 
一步一步开发Html5 mobile apps
一步一步开发Html5 mobile apps一步一步开发Html5 mobile apps
一步一步开发Html5 mobile apps
 
Get started with YUI
Get started with YUIGet started with YUI
Get started with YUI
 
HTML5 on Mobile
HTML5 on MobileHTML5 on Mobile
HTML5 on Mobile
 
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)
 
HTML5 on Mobile(For Designer)
HTML5 on Mobile(For Designer)HTML5 on Mobile(For Designer)
HTML5 on Mobile(For Designer)
 
重新认识Html5
重新认识Html5重新认识Html5
重新认识Html5
 
常用Js框架比较
常用Js框架比较常用Js框架比较
常用Js框架比较
 
浏览器兼容性问题小结
浏览器兼容性问题小结浏览器兼容性问题小结
浏览器兼容性问题小结
 
小谈Javascript设计模式
小谈Javascript设计模式小谈Javascript设计模式
小谈Javascript设计模式
 
从Adobe和qcof会议看前端开发
从Adobe和qcof会议看前端开发从Adobe和qcof会议看前端开发
从Adobe和qcof会议看前端开发
 
Enhance Web Performance
Enhance Web PerformanceEnhance Web Performance
Enhance Web Performance
 

HTML5概览