揭秘HTML5和CSS3.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,揭秘,HTML5,和,CSS3,鲁超伍,|,Adam,Hungry,Stay Foolish!,网站标准的简单历史,XHTML 1,Content,CSS2.1,Presentation,2001-2006,网站标准的简单历史,WHATWG,?,Web Hypertext Application Technology Working Group,W3C,Word Wide Web Consortium,2004-,Present,网站标准的简单历史,HTML,5,Content,CSS3,Presentation,200,7,-,Present,HTML5,HTML5 DEMO,HTML,发展历史,1998,2000,2002,2004,2007,HTML,4.0,XHTML1,XHTML2,WHATG,HTML,5,支持,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(more 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,新增的元素,多媒体及交互式元素,video,audio.,details,menu,c,ommand.,结构元素,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 Submission,application/x-www-form+xml,ID(,请使用,Email,注册,),密码,出生日期,国籍,个性头像,+,保密问题,答案,删除,DOM,变化,getElementsByClassName,Selector API,document.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,drop,function 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.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);,Application Cache,rubiks.manifest,CACHE MANIFEST/demo/rubiks/style.css/demo/rubiks/jquery.min.js/demo/rubiks/rubiks.js#version 15,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=,message,document.getElementById(iframe).contentWindow.postMessage(my message,);,window.addEventListener(message,function(e)if(e.origion!=adamlu,1,.com)return;alert(e.origion+said:+e.data);,false);,DEMO,CSS,的发展历史,1996,1998,2001,CSS1.0,CSS2.0,CSS3.0,Cascading Style Sheets,支持,CSS3,的浏览器,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;,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;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);,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-shadow,Safari:,-webkit-box-shadow,Opera:,-o-box-shadow,IE:,-ms-box-shadow,CSS3,应用原则,优雅降级,对于不支持,CSS3,的浏览器可以使用,Javascript,来实现,如,ie7.js,ie8.js,对,CSS,选择符的优化,如对于不支持,:hover,的,ie6,使用,JS,在向用户或老板推广新技术的同时也要关注他们的目标与可行性，不能为了技术而技术,参考资源,zh.wikipedia.org/wiki/HTML_5,www.whatwg.org/html5/,dev.w3.org/html5/spec/Overview.html,luchaowu,MSN:luchaowu,