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的JavascriptAPIsVideo&AudioUndoX-DomainStorageGeolocationVideo&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');•database.executeSql('SELECT*FROMtest',function(result){database.executeSql('DROPTAB