揭秘HTML5和CSS3ppt课件.ppt

揭秘HTML5和CSS3,鲁超伍|Adamhttp:/,关于我,网名Adam，热爱互联网，2004年开始接触前端方面的东西，多年互联网前端开发经验，见证了前端开发这个行业的兴起。现就职于淘宝网北京UED（前端开发工程师），花名空雁。追求卓越，不懈努力，做一个专业的前端开发工程师！Stay Hungry,Stay Foolish!,网站标准的简单历史,XHTML 1,Content,CSS2.1,Presentation,2001-2006,网站标准的简单历史,WHATWG?Web Hypertext Application Technology Working GroupW3CWord Wide Web Consortium,2004-Present,网站标准的简单历史,HTML5,Content,CSS3,Presentation,2007-Present,HTML5,HTML5 DEMO,HTML发展历史,1998,2000,2002,2004,2007,HTML4.0,XHTML1,XHTML2,WHATG,HTML5,支持HTML5的浏览器,Opera 9.5+Cross-document messagingServer-sent eventsWeb Forms 2.0Canvas and videoSafari 3.1+and tagsOffline data storage APIWebkit(Iphone/Chrome/Android/Nokia s60/Palms WebOS),支持HTML5的浏览器,FireFox 3.1+offline storage and canvasGeolocation/Web Workers/ContentEditableGecko(more HTML5 APIS)Internet Explorer 8.0+embed element and contentEditable attributecross-document messaging,HTML5技术概览,HTML5新增和移除的元素HTML5基本布局HTML5对表单的支持HTML5 DOM变化HTML5的Javascript APIsCanvasVideo/AudioDrag&DropGeolocationApplication CacheDatabase StorageX-Document Messaging,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移除的元素,移除的元素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 Submissionapplication/x-www-form+xml,ID(请使用Email注册)密码 出生日期 国籍 个性头像+保密问题 答案 删除,http:/,HTML5 DOM变化,getElementsByClassNameSelector APIdocument.querySelector()document.querySelectorAll()Traversal API.nextElementSibling.previousElementSibling.firstElementChild.lastElementChild.children,HTML5的Javascript APIs,Web Forms2.0,Messaging,Offline Applications,History API,Video&Audio,Drag&Drop,Undo,Canvas,Editable,X-Domain,Storage,Geolocation,Local Database,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.restore();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=function(event)alert(event.data);w.postMessage(run);,Web Workers,/worker.jsimportScripts(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);,Application Cache,rubiks.manifestCACHE MANIFEST/demo/rubiks/style.css/demo/rubiks/jquery.min.js/demo/rubiks/rubiks.js#version 15,http:/,Storage,database storage(客户端数据库SQLite)WebKit中已经实现var database=openDatabase(db,1.0);database.executeSql(SELECT*FROM test,function(result)database.executeSql(DROP TABLE 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=messagedocument.getElementById(iframe).contentWindow.postMessage(my message,http:/);window.addEventListener(message,function(e)if(e.origion!=http:/)return;alert(e.origion+said:+e.data);,false);,http:/,2022?,CSS3,CSS3 DEMO,CSS的发展历史,1996,1998,2001,CSS1.0,CSS2.0,CSS3.0,Cascading Style Sheets,支持CSS3的浏览器,http:/,CSS3技术概况,选择器布局样式动画其它,CSS3-选择器,属性选择器ahref$=.pdf,ahref=mailto,aclass*=item兄弟选择器Divimg伪类选择器:nth-child(n),:nth-last-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-facefont-family:Adam,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:content-box|border-box|padding-box;background-clip:border-box|padding-box,CSS3-样式,透明opacity:0.5;RGBAcolor:rgba(0,255,0,0.5);HSL/Acolor:hsl(240,50%,50%);hsla(240,50%,50%,0.5)调整元素尺寸resize:both|horizontal|vertical,CSS3-布局,盒模型box-sizing:content-box|border-box;网格模型column-count:3;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;Outlineoutline-offset,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-其它,媒体查询.entrycolor:red;media all and min-width:100em.entrycolor:black;语音支持voice-volume,voice-balance,voice-family,浏览器前缀,Firefox:-moz-box-shadowSafari:-webkit-box-shadowOpera:-o-box-shadowIE:-ms-box-shadow,CSS3应用原则,优雅降级对于不支持CSS3的浏览器可以使用Javascript来实现如ie7.js,ie8.js对CSS选择符的优化如对于不支持:hover的ie6使用JS在向用户或老板推广新技术的同时也要关注他们的目标与可行性，不能为了技术而技术,参考资源,http:/zh.wikipedia.org/wiki/HTML_5http:/www.whatwg.org/html5/http:/dev.w3.org/html5/spec/Overview.htmlhttp:/http:/www.css3.info/modules/,Thanks!,Q&AGtalk:MSN:,