揭秘HTML5和CSS3

揭秘HTML5和CSS3网站标准的简单历史XHTML1ContentCSS2.1Presentation2001-2006网站标准的简单历史•WHATWG?oWebHypertextApplicationTechnologyWorkingGroup•W3CoWordWideWebConsortium2004-Present网站标准的简单历史HTML5ContentCSS3Presentation2007-PresentHTML5HTML5DEMOHTML发展历史19982000200220042007HTML4.0XHTML1XHTML2WHATGHTML5支持HTML5的浏览器•Opera9.5+oCross-documentmessagingoServer-senteventsoWebForms2.0oCanvasandvideo•Safari3.1+ovideoandaudiotagsoOfflinedatastorageAPIoWebkit(Iphone/Chrome/Android/Nokias60/Palm'sWebOS)支持HTML5的浏览器•FireFox3.1+oofflinestorageandcanvasoGeolocation/WebWorkers/ContentEditableoGecko(moreHTML5APIS)•InternetExplorer8.0+oembedelementandcontentEditableattributeocross-documentmessagingHTML5技术概览•HTML5新增和移除的元素•HTML5基本布局•HTML5对表单的支持•HTML5DOM变化•HTML5的JavascriptAPIsoCanvasoVideo/AudiooDrag&DropoGeolocationoApplicationCacheoDatabaseStorageoX-DocumentMessagingHTML5新增的元素•多媒体及交互式元素ovideo,audio...odetails,menu,command...•结构元素oheader,footer,section,article,nav...•块级语义及行内元素oaside,figure,dialog...otime,meter,mark,progress...•表单控件oemail,url,datetime,number,range,color...•HTML5新增的属性ocontenteditable,contextmenu,data-*,hidden,item,itemprop,subject,role,aria-*,spellcheck,draggable,irrelevant,template,placeholder,autofocus,required,async,manifest...•HTML5新增的事件oonabort,onbeforeunload,oncontextmenu,ondrag,ondragend,ondragenter,ondragleave,ondragover,ondragstart,ondrop,onerror,onmessage,onmousewheel,onresize,onscroll,onunload...HTML5移除的元素•移除的元素ofont,center,strike,big,s,u,acronym,applet,dir...•移除的属性o如link和a元素的rev属性,link元素的target属性,td的scope属性，script元素的language属性,body元素的alink，link，text和vlink属性...HTML5基本布局HTML4HTML5!DOCTYPEhtmlhtmlang=enheadmetacharset=utf-8titleHTML5Demo/titlebodyheaderh1/h1h2/h2/headernavulli/lili/li/ul/navsectionarticle/articlearticle/article/sectionaside/asidefooter/footer/body/htmlHTML5对表单的支持•新的控件类型oinputtype=url|email|date|tel|search|datetime|date|month|week|datetime-local|number|range|color,selectdata=•文件上传控件oinputtype=fileaccept=image/png/•重复的模型oadd,remove,move-up,move-down•内建表单验证oinputtype=emailrequired/,inputtype=numbermin=10max=100/•XMLSubmissionoapplication/x-='/register'enctype=application/x-=postplabelfor='name'ID(请使用Email注册)/labelinputname='name'requiredtype='email'/plabelfor='password'密码/labelinputname='password'requiredtype='password'/plabelfor='birthday'出生日期/labelinputtype='date'name='birthday'/plabelfor='gender'国籍/labelselectname='country'data='countries.xml'/selectplabelfor='photo'个性头像/labelinputtype='file'name='photo'accept='image/*'/tabletheadtdbuttontype=addtemplate=questionId+/button保密问题/tdtd答案/tdtd/td/theadtrid=questionIdrepeat=templaterepeat-start=1repeat-min=1repeat-max=3tdinputtype=textname=questions[questionId].q//tdtdinputtype=textname=questions[questionId].a//tdtdbuttontype=remove删除/button/td/tr/tablepinputtype='submit'value='send'class='submit'//p/form变化•getElementsByClassName•SelectorAPIodocument.querySelector()odocument.querySelectorAll()•TraversalAPIo.nextElementSiblingo.previousElementSiblingo.firstElementChildo.lastElementChildo.childrenHTML5的JavascriptAPIsWebForms2.0MessagingOfflineApplicationsHistoryAPIVideo&AudioDrag&DropUndoCanvasEditableX-DomainStorageGeolocationLocalDatabaseVideo&Audio•videoheight=280width=498poster=border.pngid=videosourcesrc=coldplay.mp4/video•audiosrc=music.ogacontrolsahref=music.ogaDownloadsong/a/audioCanvas•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);......Drag&Drop•拖拽事件:dragstart,dragend,dragenter,dragleave,dragover,drag,drop•divdraggable=trueondragstart=dragstartHandler(event)/divfunctiondragstartHandler(e){alert('dragstart');}WebWorkers•让Javascript多线程，可以在后台做很多工作而不会阻断当前的浏览器•varw=newWorker('worker.js');w.onmessage=function(event){alert(event.data);}w.postMessage('run');WebWorkers•//worker.js•importScripts('xhr.js','db.js');•onmessage=function(event){if(event.data=='run'){run();}}•functionrun(){vardata=doCrazyNumberCrunch();postMessage(data);}Geolocationnavigator.geolocation.getCurrentPosition(success,error);ApplicationCache•htmlmanifest=rubiks.manifest•rubiks.manifestoCACHEMANIFEST/demo/rubiks/style.css/demo/rubiks/jquery.min.js/demo/rubiks/rubiks.js#version15•databasestorage(客户端数据库SQLite)•WebKit中已经实现•vardatabase=openDatabase('db','1.0');•database.executeSql('SELECT*FROMtest',function(result){database.executeSql('DROPTABLEtest');});Storage•key/val存储()osessionStorage(windowbased)olocalStorage(domainbased)•WebKit/IE8/Firefox3.5已经实现•.setItem(key,v