揭秘HTML5和CSS3

揭秘HTML5和CSS3鲁超伍|Adam://revieweb20.com/关于我●网名Adam，热爱互联网，2004年开始接触前端方面的东西，多年互联网前端开发经验，见证了前端开发这个行业的兴起。●现就职于淘宝网北京UED（前端开发工程师），花名空雁。●追求卓越，不懈努力，做一个专业的前端开发工程师！●StayHungry,StayFoolish!网站标准的简单历史XHTML1ContentCSS2.1Presentation2001-2006网站标准的简单历史●WHATWG?○WebHypertextApplicationTechnologyWorkingGroup●W3C○WordWideWebConsortium2004-Present网站标准的简单历史HTML5ContentCSS3Presentation2007-PresentHTML5HTML5DEMOHTML发展历史19982000200220042007HTML4.0XHTML1XHTML2WHATGHTML5支持HTML5的浏览器●Opera9.5+○Cross-documentmessaging○Server-sentevents○WebForms2.0○Canvasandvideo●Safari3.1+○videoandaudiotags○OfflinedatastorageAPI○Webkit(Iphone/Chrome/Android/Nokias60/Palm'sWebOS)支持HTML5的浏览器●FireFox3.1+○offlinestorageandcanvas○Geolocation/WebWorkers/ContentEditable○Gecko(moreHTML5APIS)●InternetExplorer8.0+○embedelementandcontentEditableattribute○cross-documentmessagingHTML5技术概览●HTML5新增和移除的元素●HTML5基本布局●HTML5对表单的支持●HTML5DOM变化●HTML5的JavascriptAPIs○Canvas○Video/Audio○Drag&Drop○Geolocation○ApplicationCache○DatabaseStorage○X-DocumentMessagingHTML5新增的元素●多媒体及交互式元素○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...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基本布局HTML4HTML5!DOCTYPEhtmlhtmlang=enheadmetacharset=utf-8titleHTML5Demo/titlebodyheaderh1/h1h2/h2/headernavulli/lili/li/ul/navsectionarticle/articlearticle/article/sectionaside/asidefooter/footer/body/htmlHTML5对表单的支持●新的控件类型○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-='/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●SelectorAPI○document.querySelector()○document.querySelectorAll()●TraversalAPI○.nextElementSibling○.previousElementSibling○.firstElementChild○.lastElementChild○.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.manifest○CACHEMANIFEST/demo/rubiks/style.css/demo/rubiks/jquery.min.js/demo/rubiks/rubiks.js#version15●databasestorage(客户端数据库SQLite)●WebKit中已经实现●vardatabase=openDatabase('db','1.0')