Html5&cSS3分享会

2010HTML5&CSS3Saturday,August7,2010zibinWebEvangelisttwitter:zibinSaturday,August7,2010Saturday,August7,2010Saturday,August7,2010Whydoopenstandardsmatter?Saturday,August7,201013717712538Saturday,August7,2010Saturday,August7,2010Saturday,August7,2010W3CHTML4HTMLXMLW3ChasnointentiontoextendHTML4assuch.Instead,furtherworkisfocusingonareformulatoinofHTMLinXML1999Saturday,August7,2010...XHTML2HTML4XHTML1.0XHTML1.1.XHTML2...whiletheancestryofXHTML2comesfromHTML4,XHTML1.0andXHTML1.1.Itisnotintendedtobebackwardcompatiblewithitsearlierversions2002Saturday,August7,201035045W3C2008://devfiles.myopera.com/articles/572/idlist-url.htmSaturday,August7,2010TextSaturday,August7,2010TextSaturday,August7,2010TextHTML5/Saturday,August7,2010embedsrc==highwidth=480height=400align=middleallowScriptAccess=sameDomaintype=application/x-shockwave-flash/embedSaturday,August7,2010/Videosource:=1641Saturday,August7,2010CANVAS/3D?Saturday,August7,2010SVG/Saturday,August7,2010Saturday,August7,2010TextWebForms/Saturday,August7,2010Texttype=dateSaturday,August7,2010demoSaturday,August7,2010Appcache/fline-applications-html5-appcache/Saturday,August7,2010TextGeolocation/nothtml5Saturday,August7,2010TextWidgets/nothtml5Saturday,August7,2010W3CStandardsBrowserIndependentRunsonphone,TV,desktopSaturday,August7,2010Saturday,August7,2010demoSaturday,August7,2010CSS3HTML5SemanticsDesignSaturday,August7,2010CSS3/Saturday,August7,2010BordersBackgroundSaturday,August7,2010border-radiusborder-radius:25px;Saturday,August7,2010border-bottom-left-radius:40px;border-bottom-right-radius:40px;border-radiusSaturday,August7,2010border-bottom-left-radius:40px;border-bottom-right-radius:40px;border-top-left-radius:10px;border-top-right-radius:10px;border-radiusSaturday,August7,2010border-radiusSaturday,August7,2010border-radiussource:=1410Saturday,August7,2010multiplebackgroundimagesSaturday,August7,2010background:url(rose.png)no-repeat150px-20px,url(driedrose.png)no-repeat,!!!!!!url(fieldsky.jpg)no-repeat;multiplebackgroundimagesSaturday,August7,2010box-shadow:10px10px0px#fff;box-shadowSaturday,August7,2010box-shadow:10px10px20px#fff;box-shadowSaturday,August7,2010!!!!!width,height:100px;!!!!!box-shadow:10px10px20px#ff0000;!!!!!border-radius:60px;!!!!box-shadowSaturday,August7,2010TransitionsTransformSaturday,August7,2010TransitionsSaturday,August7,2010div{-o-transition-property:background-color,width,height;-o-transition-duration:4s,8s,5s;-o-transition-delay:0s,0s2s;}Saturday,August7,2010TransformSaturday,August7,2010Transform-translate-o-transform:translate(50px,100px);Saturday,August7,2010Transform-scale-o-transform:scale(2.5);Saturday,August7,2010Transform-skew-o-transform:skew(10deg,20deg)Saturday,August7,2010Transform-rotate-o-transform:rotate(30deg)Saturday,August7,2010Saturday,August7,2010@font-face{src:url(DeutscheZierschrift.ttf)format(truetype);font-family:Zierschrift;font-style:normal;}Saturday,August7,2010@font-face{!font-family:Blackout-Midnight;!src:url(Blackout-Midnight.ttf)format(truetype);!}SVGSaturday,August7,2010text-shadowSaturday,August7,2010text-shadowtext-shadow:#00000010px10px19px;Saturday,August7,2010text-shadow:004pxwhite,0-5px4px#ff3,2px-10px6px#fd3,-2px-15px11px#f80,2px-25px18px#f20;text-shadowSaturday,August7,2010Saturday,August7,2010Saturday,August7,2010Saturday,August7,2010Saturday,August7,2010JavaScriptCSSHTTPHeaderDOMDragonflySaturday,August7,2010Saturday,August7,2010FutureisNowSaturday,August7,2010:-)/Saturday,August7,2010zibinATopera.com()zibin.tehais.com()twitter:zibinslideshare.net/zibinPPTSaturday,August7,2010love://://://://@N00/1298930743/bordersandbackground://://://splashclubpenguin.files.wordpress.com/2009/03/101606sly_claps.jpgsunflower://@N00/1290363773/sizes/o/usinginternet://:// backgroundandbordersar