null揭秘HTML5和CSS3揭秘HTML5和CSS3鲁超伍|Adam
http://adamlu.com/
http://revieweb20.com/
http://twitter.com/adamlu关于我关于我网名Adam，热爱互联网，2004年开始接触前端方面的东西，多年互联网前端开发经验，见证了前端开发这个行业的兴起。
现就职于淘宝网北京UED（前端开发
工程
路基工程安全技术交底 工程项目施工成本控制 工程量增项单 年度零星工程技术标 正投影法基本原理 师），花名空雁。
追求卓越，不懈努力，做一个专业的前端开发工程师！
Stay Hungry, Stay Foolish!网站
标准
excel标准偏差 excel标准偏差函数 exl标准差函数 国标检验抽样标准表免费下载 红头文件格式标准下载 的简单历史网站标准的简单历史XHTML 1ContentCSS2.1Presentation2001-2006网站标准的简单历史网站标准的简单历史WHATWG?
Web Hypertext Application Technology Working Group
W3C
Word Wide Web Consortium
2004-Present网站标准的简单历史网站标准的简单历史HTML5ContentCSS3Presentation2007-PresentHTML5HTML5HTML5 DEMOHTML发展历史HTML发展历史19982000200220042007HTML4.0XHTML1XHTML2WHATGHTML5支持HTML5的浏览器支持HTML5的浏览器Opera 9.5+
Cross-document messaging
Server-sent events
Web Forms 2.0
Canvas and video
Safari 3.1+
and tags
Offline data storage API
Webkit(Iphone/Chrome/Android/ Nokia s60/Palm's WebOS)支持HTML5的浏览器支持HTML5的浏览器FireFox 3.1+
offline storage and canvas
Geolocation/Web Workers/ ContentEditable
Gecko(more HTML5 APIS)
Internet Explorer 8.0+
embed element and contentEditable attribute
cross-document messaging
HTML5技术概览HTML5技术概览HTML5新增和移除的元素
HTML5基本布局
HTML5对
表
关于同志近三年现实表现材料 材料类招标技术评分表 图表与交易pdf 视力表打印pdf 用图表说话 pdf 单的支持
HTML5 DOM变化
HTML5的Javascript APIs
Canvas
Video/Audio
Drag&Drop
Geolocation
Application Cache
Database Storage
X-Document MessagingHTML5新增的元素HTML5新增的元素多媒体及交互式元素
video, audio...
details, menu, command...
结构元素
header, footer, section, article, nav...
块级语义及行内元素
aside, figure, dialog...
time, meter, mark, progress...
表单控件
email, url, datetime, number, range, color...
HTML5新增的属性
contenteditable, contextmenu, data-*, hidden, item, itemprop, subject, role, aria-*, spellcheck, draggable, irrelevant, template, placeholder, autofocus, required, async, manifest...
HTML5新增的事件
onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload...HTML5移除的元素HTML5移除的元素移除的元素
font, center, strike, big, s, u, acronym, applet, dir...
移除的属性
如link和a元素的rev属性, link元素的target属性, td的scope属性，script元素的language属性, body元素的alink，link，text和vlink属性...HTML5基本布局HTML5基本布局HTML4HTML5
HTML5 Demo
Download song CanvasCanvas是一个新的HTML元素，这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。
var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"); context.fillStyle="rgb(0,0,200)"; context.fillRect(10, 10, 50, 50);
context.save(); context.restore(); context.scale(x, y); context.rotate(angle); context.translate(x, y); ......Drag&DropDrag&Drop拖拽事件: dragstart, dragend, dragenter, dragleave, dragover, drag, drop
function dragstartHandler(e){
alert('dragstart');
}Web WorkersWeb Workers让Javascript多线程，可以在后台做很多工作而不会阻断当前的浏览器
var w = new Worker('worker.js'); w.onmessage = function(event){
alert(event.data); } w.postMessage('run');Web WorkersWeb Workers//worker.js
importScripts('xhr.js', 'db.js');
onmessage = function(event){ if(event.data == 'run'){ run(); } }
function run(){ var data = doCrazyNumberCrunch(); postMessage(data); }GeolocationGeolocationnavigator .geolocation .getCurrentPosition( success, error);Application CacheApplication Cache
rubiks.manifest
CACHE MANIFEST /demo/rubiks/style.css /demo/rubiks/jquery.min.js /demo/rubiks/rubiks.js #version 15http://remysharp.com/demo/rubiks StorageStoragedatabase storage(客户端数据库SQLite)
WebKit中已经实现
var database = openDatabase('db', '1.0');
database.executeSql('SELECT * FROM test', function(result){ database.executeSql('DROP TABLE test'); });StorageStoragekey/val存储()
sessionStorage(window based)
localStorage(domain based)
WebKit/IE8/Firefox 3.5已经实现
.setItem(key, value)
.getItem(key)Cross-Document MessagingCross-Document Messaging.postMessage(message, targetOrigin)
.onMessage(event)
event.data == message
document.getElementById('iframe').contentWindow.postMessage('my message', 'http://adamlu2.com');
window.addEventListener('message', function(e){ if(e.origion !== 'http://adamlu1.com'){ return; } alert(e.origion+' said: '+e.data); }, false);nullhttp://ishtml5readyyet.com/ 2022?nullCSS3CSS3 DEMOCSS的发展历史CSS的发展历史199619982001CSS1.0CSS2.0CSS3.0Cascading Style Sheets支持CSS3的浏览器支持CSS3的浏览器http://adamlu.com/Demo/Speech/Demo/CSS-Browser-Support.png CSS3技术概况CSS3技术概况选择器
布局
样式
动画
其它CSS3-选择器CSS3-选择器属性选择器
a[href$='.pdf'], a[href^='mailto'], a[class*=‘item’]
兄弟选择器
Div~img
伪类选择器
:nth-child(n), :nth-last-child(n), :last-child, :checked, :empty, :only-child, :nth-of-type(odd), :nth-of-type(even)CSS3-样式CSS3-样式圆角
border-radius: 3px
-moz-border-radius-topleft
-webkit-border-top-left-radius
阴影
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5)
text-shadow: 2px 2px #444, 3px 3px #555
自定义字体
@font-face{ font-family: Adam, src:url(adam.ttf); } p{font-family:Adam, serif;}
文本换行
word-wrap: normal|break-wordCSS3-样式CSS3-样式边框背景
border-image: url(border.png) 27 27 27 27 round round;
渐变
background: -moz-linear-gradient(20%, center, 30%, center, from(blue), to(yellow)) no-repeat;
背景
background-size: 100px 50px;
background-origin: content-box|border-box|padding-box;
background-clip: border-box|padding-boxCSS3-样式CSS3-样式透明
opacity: 0.5;
RGBA
color: rgba(0, 255, 0, 0.5);
HSL/A
color: hsl(240, 50%, 50%); hsla(240, 50%, 50%, 0.5)
调整元素尺寸
resize: both|horizontal|verticalCSS3-布局CSS3-布局盒模型
box-sizing: content-box|border-box;
网格模型
column-count: 3; column-width: 13em; column-gap: 1em; column-rule: 1px solid black;
CSS Table Display
#content{display: table;} #main{display: table-cell; width:620px; padding-right: 22px;} #side{display: table-cell; width: 300px;}
Outline
outline-offsetCSS3-动画CSS3-动画变换
transform: rotate(30deg);
transform: scale(0.5, 2.0);
transform: skew(-30deg);
transform: translate(30px, 0);
过渡
transition: all 1s ease-out ;
动画
animation: greenPulse infinite ease-in-out 3s; CSS3-其它CSS3-其它媒体查询
.entry{color: red;} @media all and {min-width: 100em}{ .entry{color: black;} }
语音支持
voice-volume, voice-balance, voice-family
浏览器前缀浏览器前缀Firefox: -moz-box-shadow
Safari: -webkit-box-shadow
Opera: -o-box-shadow
IE: -ms-box-shadowCSS3应用原则CSS3应用原则优雅降级
对于不支持CSS3的浏览器可以使用Javascript来实现
如ie7.js, ie8.js对CSS选择符的优化
如对于不支持:hover的ie6使用JS
在向用户或老板推广新技术的同时也要关注他们的目标与可行性，不能为了技术而技术参考资源参考资源http://zh.wikipedia.org/wiki/HTML_5
http://www.whatwg.org/html5/
http://dev.w3.org/html5/spec/Overview.html
http://html5demos.com/
http://www.w3.org/TR/html5-diff/
http://www.alistapart.com/articles/previewofhtml5
https://developer.mozilla.org/cn/DOM/Storage
http://www.w3.org/TR/css3-roadmap/
http://dev.w3.org/html5/
http://dev.w3.org/csswg/
http://www.css3.info/modules/ Thanks!Thanks!Q&A
Gtalk: luchaowu@gmail.com
MSN: luchaowu@hotmail.com 
浙公网安备 33021202002483