1、揭秘HTML5和CSS3,鲁超伍|Adam http:/ http:/ http:/ 现就职于淘宝网北京UED（前端开发工程师），花名空雁。 追求卓越，不懈努力，做一个专业的前端开发工程师！ Stay Hungry, Stay Foolish!,网站标准的简单历史,2001-2006,网站标准的简单历史,WHATWG? Web Hypertext Application Technology Working Group W3C Word Wide Web Consortium,2004-Present,网站标准的简单历史,2007-Present,HTML5,HTML5 DEMO,HTML发展
2、历史,支持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/Palms WebOS),支持HTML5的浏览器,FireFox 3.1+ offline storage and canvas Geolocation/Web Workers/ ContentEditable Gecko(mo
3、re HTML5 APIS) Internet Explorer 8.0+ embed element and contentEditable attribute cross-document messaging,HTML5技术概览,HTML5新增和移除的元素 HTML5基本布局 HTML5对表单的支持 HTML5 DOM变化 HTML5的Javascript APIs Canvas Video/Audio Drag&Drop Geolocation Application Cache Database Storage X-Document Messaging,HTML5新增的元素,多媒体及交
4、互式元素 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-*, spellc
5、heck, 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移除的元素,移除的元素
6、font, center, strike, big, s, u, acronym, applet, dir. 移除的属性 如link和a元素的rev属性, link元素的target属性, td的scope属性，script元素的language属性, body元素的alink，link，text和vlink属性.,HTML5基本布局,HTML4,HTML5,HTML5 Demo,HTML5对表单的支持,新的控件类型 , 文件上传控件重复的模型 add, remove, move-up, move-down 内建表单验证 , XML Submission application/x-www-f
7、orm+xml, ID(请使用Email注册) 密码 出生日期 国籍 个性头像 + 保密问题 答案 删除 ,http:/ DOM变化,getElementsByClassName Selector API document.querySelector() document.querySelectorAll() Traversal API .nextElementSibling .previousElementSibling .firstElementChild .lastElementChild .children,HTML5的Javascript APIs,Web Forms2.0,Mess
8、aging,Video&Audio, Download song ,Canvas,是一个新的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.re
9、store(); context.scale(x, y); context.rotate(angle); context.translate(x, y); ,Drag&Drop,拖拽事件: dragstart, dragend, dragenter, dragleave, dragover, drag, dropfunction dragstartHandler(e)alert(dragstart); ,Web Workers,让Javascript多线程，可以在后台做很多工作而不会阻断当前的浏览器 var w = new Worker(worker.js); w.onmessage = fu
10、nction(event)alert(event.data); w.postMessage(run);,Web Workers,/worker.js importScripts(xhr.js, db.js); onmessage = function(event) if(event.data = run) run(); function run() var data = doCrazyNumberCrunch(); postMessage(data); ,Geolocation,navigator .geolocation .getCurrentPosition( success, error
11、);,Application Cache, rubiks.manifest CACHE MANIFEST /demo/rubiks/style.css /demo/rubiks/jquery.min.js /demo/rubiks/rubiks.js #version 15,http:/ storage(客户端数据库SQLite) WebKit中已经实现 var database = openDatabase(db, 1.0); database.executeSql(SELECT * FROM test, function(result) database.executeSql(DROP T
12、ABLE test); );,Storage,key/val存储() sessionStorage(window based) localStorage(domain based) WebKit/IE8/Firefox 3.5已经实现 .setItem(key, value) .getItem(key),Cross-Document Messaging,.postMessage(message, targetOrigin) .onMessage(event) event.data = message document.getElementById(iframe).contentWindow.p
13、ostMessage(my message, http:/); window.addEventListener(message, function(e) if(e.origion != http:/) return; alert(e.origion+ said: +e.data); , false);,http:/ DEMO,CSS的发展历史,支持CSS3的浏览器,http:/ 布局 样式 动画 其它,CSS3-选择器,属性选择器 ahref$=.pdf, ahref=mailto, aclass*=item 兄弟选择器 Divimg 伪类选择器 :nth-child(n), :nth-las
14、t-child(n), :last-child, :checked, :empty, :only-child, :nth-of-type(odd), :nth-of-type(even),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: Ada
15、m, src:url(adam.ttf); pfont-family:Adam, serif; 文本换行 word-wrap: normal|break-word,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: con
16、tent-box|border-box|padding-box; background-clip: border-box|padding-box,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|vertical,CSS3-布局,盒模型 box-sizing: content-box|border-box; 网格模型 column-count: 3;
17、column-width: 13em; column-gap: 1em; column-rule: 1px solid black; CSS Table Display #contentdisplay: table; #maindisplay: table-cell; width:620px; padding-right: 22px; #sidedisplay: table-cell; width: 300px; Outline outline-offset,CSS3-动画,变换 transform: rotate(30deg); transform: scale(0.5, 2.0); tra
18、nsform: skew(-30deg); transform: translate(30px, 0); 过渡 transition: all 1s ease-out ; 动画 animation: greenPulse infinite ease-in-out 3s;,CSS3-其它,媒体查询 .entrycolor: red; media all and min-width: 100em .entrycolor: black; 语音支持 voice-volume, voice-balance, voice-family,浏览器前缀,Firefox: -moz-box-shadow Safa
19、ri: -webkit-box-shadow Opera: -o-box-shadow IE: -ms-box-shadow,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:/ http:/www.w3.org/TR/html5-diff/ http:/ 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!,Q&A Gtalk: MSN: ,
