HTML5和CSS3

XHTML1ContentCSS2.1Presentation2001-2006WHATWG?◦WebHypertextApplicationTechnologyWorkingGroupW3C◦WordWideWebConsortium2004-PresentHTML5将成为HTML、XHTML以及HTMLDOM的新标准。HTML5是W3C与WHATWG合作的结果。WHATWG指WebHypertextApplicationTechnologyWorkingGroup。◦WHATWG致力于web表单和应用程序在2006年，双方决定进行合作，来创建一个新版本的HTML。HTML5ContentCSS3Presentation2007-Present19982000200220042007HTML4.0XHTML1XHTML2WHATGHTML5为HTML5建立的一些规则：新特性应该基于HTML、CSS、DOM以及JavaScript。减少对外部插件的需求（比如Flash）更优秀的错误处理更多取代脚本的标记HTML5应该独立于设备开发进程应对公众透明HTML5中的一些有趣的新特性：用于绘画的canvas元素用于媒介回放的video和audio元素对本地离线存储的更好的支持新的特殊内容元素，比如article、footer、header、nav、section新的表单控件，比如calendar、date、time、email、url、search最新版本的Chrome、Firefox、SafariInternetExplorer9(不支持WindowsXP)InternetExplorer10预览版（只支持win7及以上版本）搜狗双核浏览器、遨游双核浏览器支持HTML5是一个趋势Opera9.5+◦Cross-documentmessaging◦Server-sentevents◦WebForms2.0◦CanvasandvideoSafari3.1+◦videoandaudiotags◦OfflinedatastorageAPI◦Webkit(Iphone/Chrome/Android/Nokias60/Palm'sWebOS)FireFox3.1+◦offlinestorageandcanvas◦Geolocation/WebWorkers/ContentEditable◦Gecko(moreHTML5APIS)InternetExplorer8.0+◦embedelementandcontentEditableattribute◦cross-documentmessaging按内核分类：Trident：又称为MSHTML，代表InternetExplorer其他：Maxthon遨游、世界之窗、腾讯TT、Netcapter、Avant等等，但Trident只能应用于Windows平台，且是不开源的Gecko：代表作品MozillaFirefoxNetscape6至9能在MicrosoftWindows、Linux和MacOSX等主要操作系统上运行WebKit：代表作品Safari、ChromePresto：代表作品OperaHTML5新增和移除的元素HTML5基本布局HTML5对表单的支持HTML5DOM变化HTML5的JavascriptAPIs◦Canvas◦Video/Audio◦Drag&Drop◦Geolocation◦ApplicationCache◦DatabaseStorage◦X-DocumentMessaging多媒体及交互式元素◦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...移除的元素◦font,center,strike,big,s,u,acronym,applet,dir...移除的属性◦如link和a元素的rev属性,link元素的target属性,td的scope属性，script元素的language属性,body元素的alink，link，text和vlink属性...HTML4HTML5!DOCTYPEhtmlhtmlang=enheadmetacharset=utf-8titleHTML5Demo/titlebodyheaderh1/h1h2/h2/headernavulli/lili/li/ul/navsectionarticle/articlearticle/article/sectionaside/asidefooter/footer/body/html新的控件类型◦inputtype=url|email|date|tel|search|datetime|date|month|week|datetime-local|number|range|color,selectdata=文件上传控件◦inputtype=fileaccept=image/png/重复的模型◦add,remove,move-up,move-down内建表单验证◦inputtype=emailrequired/,inputtype=numbermin=10max=100/XMLSubmission◦application/x-!DOCTYPEHTMLhtmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8titleHTML5Demo-html5form/title/headbodyformaction='/register'enctype=application/x-=postplabelfor='name'ID(请使用Email注册)/labelinputname='name'requiredtype='email'/plabelfor='password'密码/labelinputname='password'requiredtype='password'/inputtype='submit'value='send'class='submit'//p/form/body/html例：input.htmlgetElementsByClassNameSelectorAPI◦document.querySelector()◦document.querySelectorAll()TraversalAPI◦.nextElementSibling◦.previousElementSibling◦.firstElementChild◦.lastElementChild◦.childrenvideoheight=280width=498poster=border.pngid=videosourcesrc=coldplay.mp4/video例：video.htmlaudiosrc=music.mp3controlsahref=music.ogaDownloadsong/a/audio（IE支持，效果：火狐不支持HTML5的canvas元素用于在网页上绘制图形。使用JavaScript在网页上绘制图像。canvas是一个新的HTML元素，这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。varcanvas=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);......向html5页面添加canvas元素，设定元素的Id、宽度与高度canvasid=myCanvaswidth=200height=100style=border:1pxsolid#c3c3c3;Yourbrowserdoesnotsupportthecanvaselement./canvasCanvas元素本身是没有绘图能力的。所有的绘制工作必须在Javascript内部完成。scripttype=text/javascriptvarc=document.getElementById(myCanvas);varcxt=c.getContext(2d);cxt.moveTo(10,10;);cxt.lineTo(150,50);cxt.lineTo(10,50);cxt.stroke();/script例：canvas.html拖拽事件:dragstart,dragend,dragenter,dragleave,dragover,drag,dropdivdraggable=trueondragstart=dragstartHandler(event)/divfunctiondragstartHandler(e){alert('dragstart');}例：drag.htmldatabasestorage(客户端数据库SQLite)WebKit中已经实现vardatabase=openDatabase('db','1.0');database.executeSql('SELECT*FROMtest',function(result){database.executeSql('DROPTABLEtest');});key/val存储()◦sessionStorage(windowbased)◦localStorage(domainbased)WebKit/IE8/Firefox3.5已经实现.setItem(key,value).getItem(key)CSS3CSS3DEMO199619982001CSS1.0CSS2.0CSS3.0CascadingStyleSheets