HTML5和CSS3入门.ppt

《HTML5和CSS3入门.ppt》由会员分享，可在线阅读，更多相关《HTML5和CSS3入门.ppt（44页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、揭秘HTML5和CSS3鲁超伍|Adamhttp:/ Hungry,Stay Foolish!网站标准的简单历史XHTML 1ContentCSS2.1Presentation2001-2006网站标准的简单历史WHATWG?Web Hypertext Application Technology Working GroupW3CWord Wide Web Consortium2004-Present网站标准的简单历史HTML5ContentCSS3Presentation2007-PresentHTML5HTML5 DEMOHTML发展历史19982000200220042007HTML4.

2、0XHTML1XHTML2WHATGHTML5支持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/ContentEditableGec

3、ko(more HTML5 APIS)Internet Explorer 8.0+embed element and contentEditable attributecross-document messagingHTML5技术概览HTML5新增和移除的元素HTML5基本布局HTML5对表单的支持HTML5 DOM变化HTML5的Javascript APIsCanvasVideo/AudioDrag&DropGeolocationApplication CacheDatabase StorageX-Document MessagingHTML5新增的元素多媒体及交互式元素video,aud

4、io.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,aut

5、ofocus,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元素的targ

6、et属性,td的scope属性，script元素的language属性,body元素的alink，link，text和vlink属性.HTML5基本布局HTML4HTML5 HTML5 DemoHTML5对表单的支持新的控件类型,文件上传控件重复的模型add,remove,move-up,move-down内建表单验证,XML Submissionapplication/x-www-form+xml ID(请请使用使用Email注册注册)密密码码 出生日期出生日期 国籍国籍 个性个性头头像像 +保密保密问题问题 答案答案 删删除除 http:/ HTML5 DOM变化getElementsBy

7、ClassNameSelector APIdocument.querySelector()document.querySelectorAll()Traversal API.nextElementSibling.previousElementSibling.firstElementChild.lastElementChild.childrenHTML5的Javascript APIsWeb Forms2.0MessagingOffline ApplicationsHistory APIVideo&AudioDrag&DropUndoCanvasEditableX-DomainStorageGeo

8、locationLocal DatabaseVideo&AudioDownload songCanvas是一个新的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();

9、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);

10、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);Geolocationnavigator.geolocation.getCurrentPosition(success,error);Application Cacherubiks.manifestCACHE MANIFEST/demo/r

11、ubiks/style.css/demo/rubiks/jquery.min.js/demo/rubiks/rubiks.js#version 15http:/ Storagedatabase storage(客户端数据库SQLite)WebKit中已经实现var database=openDatabase(db,1.0);database.executeSql(SELECT*FROM test,function(result)database.executeSql(DROP TABLE test););Storagekey/val存储()sessionStorage(window based

12、)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

13、(e.origion!=http:/)return;alert(e.origion+said:+e.data);,false);http:/ DEMOCSS的发展历史199619982001CSS1.0CSS2.0CSS3.0Cascading Style Sheets支持CSS3的浏览器http:/ CSS3技术概况选择器布局样式动画其它CSS3-选择器属性选择器ahref$=.pdf,ahref=mailto,aclass*=item兄弟选择器Divimg伪类选择器:nth-child(n),:nth-last-child(n),:last-child,:checked,:empty,:o

14、nly-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|bre

15、ak-wordCSS3-样式边框背景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-样式透明opacity:0.5;RG

16、BAcolor:rgba(0,255,0,0.5);HSL/Acolor:hsl(240,50%,50%);hsla(240,50%,50%,0.5)调整元素尺寸resize:both|horizontal|verticalCSS3-布局盒模型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;w

17、idth:620px;padding-right:22px;#sidedisplay:table-cell;width:300px;Outlineoutline-offsetCSS3-动画变换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;m

18、edia 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-shadowCSS3应用原则优雅降级对于不支持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:/