给大家带来HTML5与将来的网页计划（英文教程）

一些公司联合起来，成立了一个叫做WebHypertextApplicationTechnologyWorkingGroup（Web超文本应用技术工作组-WHATWG）的组织。网页制造poluoluo文章简介：在这篇文章中，我但愿可以给你一些提醒和洞察HTML5，以匡助加重痛苦悲伤的一定附带过渡到一种略有分歧的语法。
有些人承受了，有些人抛弃它太悠远的将来，有些人保持了滥用的伴侣有益于旧火焰在准备。任何一方的争吵你的，你最有大概听到的一切的博客谈天环绕“新酷热”，也就是HTML5。它无处不在，它的将来，和你想晓得的统统，您能够收到的旧旧事。
像jQuery插件，格局手艺，并计划趋向的变更十分敏捷地在全部收集社会。并在年夜多半情形下我们都承受的是，有些事变我们晓得明天能够过期的今天，可是这是我们行业的性子。
在寻觅一些不乱，我们一般能够转向代码自己，由于它常常会坚持稳定了很长一段工夫（绝对而言）。因而，当一些欣喜和改动我们的代码，这是一个年夜成绩，和将有一些发展的疾苦，我们必需经由过程。侥幸的是，据传，我们已少了一个变更的忧虑。
在这篇文章中，我但愿可以给你一些提醒和洞察HTML5，以匡助加重痛苦悲伤的一定附带过渡到一种略有分歧的语法。


WelcometoHTML5.

Whatarethebasics?

TheDOCTYPE

WhenIfirststartedresearchingHTML5afewmonthsago,oneofthemainthingsIstruggledtofindwasthedoctype.Asimplething,you’dthinkitwouldbeeverywhere,butaftermuchfrustration,Ifinallyfounditburiedwithinw3.organdhereitis:

1. <!DOCTYPEhtml>

复制代码

我也猎奇，为何他们选择“的HTML”，而不是“html5”，这仿佛符合逻辑的体例来告知扫瞄器，今朝的文件写于HTML5，并供应了一个优秀的范本，以供将来。但我发明，<!DOCTYPEhtml5>触发夸克斯形式中的IE6，和向后兼容时，思索到<!DOCTYPEhtml>是一个相称不错的选择（在我看来）。
总之，我真的很喜好这个新的文档，它的小的，成心义的，大概我们会实践上可以记着这个时候的心，而不是将其粘贴在网站上。


NewElementsyoushouldknow

Atfirstglance,withHTML5,thenewelementsimmediatelyjumpoutandcommandattention.TheW3Creallylistenedtothecommunityandplannedforthefuturewhenarchitectingtheabundanceofnewelementsavailable.Wehaveeverythingfrombasicstructuralelementslike<header>and<footer>tootherslike<canvas>and<audio>thattapinto,whatseemstobe,averypowerfulAPIwhichallowsusthefreedomtocreatemoreuser-friendlyapplicationswhilefurtherdistancingourselvesfromrelianceonFlashforsavingdataandintenseanimation.
Thenewstructuralelements

• <header>
  Theheaderelementcontainsintroductoryinformationtoasectionorpage.Thiscaninvolveanythingfromournormaldocumentsheaders(brandinginformation)toanentiretableofcontents.
  
• <nav>
  Thenavelementisreservedforasectionofadocumentthatcontainslinkstootherpagesorlinkstosectionsofthesamepage.Notalllinkgroupsneedtobecontainedwithinthe<nav>element,justprimarynavigation.
  
• <section>
  Thesectionelementrepresentsagenericdocumentorapplicationsection.Itactsmuchthesamewaya<div>doesbyseparatingoffaportionofthedocument.
  
• <article>
  Thearticleelementrepresentsaportionofapagewhichcanstandalonesuchas:ablogpost,aforumentry,usersubmittedcommentsoranyindependentitemofcontent.
  
• <aside>
  Aside,representscontentrelatedtothemainareaofthedocument.Thisisusuallyexpressedinsidebarsthatcontainelementslikerelatedposts,tagclouds,etc.Theycanalsobeusedforpullquotes.
  
• <footer>
  Thefooterelementisformarkingupthefooterof,notonlythecurrentpage,buteachsectioncontainedinthepage.So,it’sverylikelythatyou’llbeusingthe<footer>elementmultipletimeswithinonepage.
  

Whenyoutakealookatthesenewelements,itlookslikethey’rejustreplacingourcommonDIVIDs;andinaway,it’strue.But,thediagrambelowshowsthatelementslike<header>and<footer>canbeusedmorethanonceonasinglepagewheretheybehavemorelikeclassesandnormalHTMLelementsthatyoucanuseoverandoveragaintoretainasemanticstructure.

Elementslike<header>and<footer>arenotjustmeanttorepresentthetopandbottomofthecurrentdocument,buttheyalsorepresentthe<header>and<footer>ofeachdocumentsection,muchthewayweuse<thead>and<tfoot>indatatables.
Thebenefitsofusingthesestructuralelementsismainlyduetothefactthattheyareextremelywelldefinedandprovideagreatwaytosemanticallystructureyourdocument.However,theseelementsdoneedtobeusedwithsomecarefulthoughtbecausetheycan,veryeasilybeoverused.
FurtherReadingonstructuralHTML5

• SteveSmithonStructuralTagsinHTML5
  
• LachlanHunt’sPreviewofHTML5
  
• ElliotHaroldonNewElementsinHTML5
  
• BruceLawson’sHTML5FormDemo
  

EasingthetransitionfromXHTML

EventhoughHTML4.01,XHTML1.0,&HTML5areallverysimilartherearesomesmallsyntaxdifferencesthatcan,veryeasily,slippastanyoneandinvalidatecode.Keepingthisinmind,HTML5hassomebuilt-in“slack”tomakethetransitionalittleeasier.
Forexample,whenmarkingupaforminHTML5,thisisthepropersyntaxforaninputtextelement:

1. <inputtype="text"id="name">

复制代码

ButthisisalsoacceptedasvalidcodeinanattempttoeasethepainforavidXHTMLcoders(likemyself)whoareusedtoself-closingelements:

1. <inputtype="text"id="name"/>

复制代码

Thesamerulesapplyto<meta>andotherselfclosingelements.Legacyelementslike<b>and<i>werealsoleftintohelpthosecomingoverfromHTML4.01.l
Whatarethebenefits?

Withanynewtechnologytherehastobebenefit;whyelsewouldyouuseit?Ifyouroldcodeworksjustaswellandefficientasthenewcodethere’snoreasontoupgrade.Noreasonatall,trustme,Ichecked.
LuckilyHTML5ispackedwithcoolnewfeatures,codeslimmingtechniquesandalotofstuffIwouldcallverylargebenefits.MostofwhichcirclearoundthenewAPIsandtheDOMtree.

网页制造poluoluo文章简介：在这篇文章中，我但愿可以给你一些提醒和洞察HTML5，以匡助加重痛苦悲伤的一定附带过渡到一种略有分歧的语法。

ExtendingtheAPI

ThemostobviousbenefitbuiltintoHTML5isthenumerousAPIsandtheopportunitiesitopensupforthefutureofwebappswithHolyGrailofapplicationcacheandofflinecapabilities.GoogleGearsgaveusofflinedatastorageandFlashintroducedustothepowerofapplicationcache(Pandorausesittosaveyourlogininformation).WithHTML5,thesecapabilitiesarenowavailabletouserightinthelanguageandcaneasilybeexpandedwithJavaScript.
HTML5reliesonlightscriptingtoflexitsmusclesontheWeb;thisisverypossiblythefirsttime,otherthanjQuery,thatone(front-end)technologyhasfullyacknowledgedanother.Sure,weconnectthemwithclassesandIDsbutupuntilnow,theyhavebeenperceivedasseparatelayersbytheprinciplesofprogressiveenhancement.ButastheWebgrowsweneedunitylikethisacrosstheWeb.

OfflineDataStorage

ThecoolestpartaboutHTML5isdefinitelyitsofflinecapabilities.ProgramslikeThunderbirdandOutlook(andnowGMailtoanextent)letyoubrowsethroughyourolddatawhilestayingoffline.WithHTML5,you’llhavethissamefunctionality,butinthebrowser.ThisisthefirstserioussteptowardsbridgingthegapbetweenthedesktopandtheWeb,andopensallsortsofdoorsforthefutureofWebapps.
TheW3ChastakenthebestpartsfromthevariousWebtechnologiesandrolledtheminto,whatisbeingdubbedthemostpowerfulmarkuplanguagetodate.
SomeotheroftheHTML5APIs

• Drag&Drop
  ThedraganddropAPIdefinesanevent-baseddraganddropsystem.However,itneverdefineswhat“draganddrop”is.ThisAPIrequiresJavaScripttofullyworkasnormalthinkdraganddropfunctionality.
  
• Video&Audio
  Theaudio&videoAPIsaremassiveupgradesinmediaembedding.Althoughsupportislimitedrightnow,somethinglikevideoembeddinghasneverbeeneasier:
  1. <videowidth="400"height="360"src="vid.mp4">

  复制代码
• Geolocation
  GeolocationisaverycoolAPIavailablewithinHTML5.Itsobjectcanbeusedtoprogrammaticallydeterminelocationinformationthroughadevice’suseragent(hinthint:mobiledevices).
  

FurtherreadingontheHTML5API

• OfflineWebApplications
  
• OfflineApplicationCaching
  
• RemySharponJavaScriptAPIsHTML5(presentation)
  
• O3DBeachDemofromGoogle(musthaveanHTML5capablebrowser)
  

WherecanIuseit?

EvenwiththeverylimitedsupportforHTML5,theWebisfartooprogressivetonotcreateatestingenvironmentforustoplayaround.Currently,Safariisourbesttestingplatform,asitsupportsmostofthenewelementsandAPIs.Ofcourse,thatmaychangeatanytimesokeepandeyeonOpera,ChromeandFirefoxaswell.
NormallyyoumightthinksinceSafariisaWebkitbrowser,bydefault,allWebkitbrowserswouldsupportthesameelements,unfortunately,thisisn’tthecase.WhilemanyoftheHTML5featuresaresupportedacrosstheboardinWebkitbrowsers,therearesome,like<video>,thatarenot.
Mobiledevices

ToeffectivelyuseHTML5rightnow,weneedtobeabletocontroltheenvironmentinwhichitisused.Sincesupportisnotaswidespreadaswe’dlikeitdoesn’tmakerealsenseforittobeheavilyusedunless,ofcourse,wecanlockdowntheusagetocertainplatformswhichhaveHTML5support.WithWebkitleadingthewayforHTML5,wecansafelyfocusondevicespoweredbyWebkit.

The3hottestmobiledevicesrightnow:ThePalmPre,iPhone3GsandthenewGoogleAndroidphoneallhavebrowsersthatarebasedofftheWebkitrenderingengine.
SafariisevenleadingthewayonthemobileHTML5front;TheiPhone(withthelatestsoftwareupgrade)istheonlydeviceIcouldgettoproperlyrenderthe<audio>element.Becausethesedevicesaresoyoungandallusethesamerenderingengine,thelikelihoodofthempushingarapidsoftwareupgradeisprettyhigh.
Rightnow,youcanconfidentlyusemanyoftheHTML5featuresiniPhoneWebappdevelopmentandmostlylikelyexpectPreandAndroidtofollowinsuit.
FurtherreadingonwhereyoucanuseHTML5

• HTML5FeaturesinlatestiPhone
  
• GMailWebappfortheiPhone
  
• GMailforHTML5
  
• SupportedFeaturesinHTML5
  
• HTML5CheatSheet
  

Howcanwemoveforward?

EvenwithalltherecenthypesurroundingHTML5andhowweallwanttouseit,itisstillgoingtobeaveryslowtransitionawayfromHTML4.01&XHTML1.0.Itwilltaketimetogetdevelopersuptospeed,testallthefeatures,waitingforallthe:ahem:browserstocatchup,anditwilltakeanespeciallylongtimeforuserstotransitionoutofthoseoldbrowsers.Withallthatinmind,weknowwhoweare,we’reallreadingthisarticle(I’vereaditabout30timessofar)andweknowwehavetofindalegitimatewaytomoveforwardwithoutdamagingthepast.
Wecan’tmakethefullswitchyetandthere’snouseatthispointpointingoutwhoisholdinguptheshow.Weallknowthatanyresponsibledeveloperwouldnotdropsupportforabrowserthatisstillheavilyused.Soratherthanyellatabrickwall,herearesomethingsI’vefoundthatmighthelpusmoveforwardinapositiveway:
SemanticDIVnaming

SemanticallyaligningyourDIVnameswiththatofthenewHTML5elementswillhelpyougetusedtothenamesthemselvesandalsothenewfunctionalityandnestingthattheywantyoutodowiththe<header>and<footer>elements.TheseareakintolearningtheintrotheEnterSandman(fortheguitaristoutthere);it’snotverydifficult,butittakesalittlepracticetogetittofeelnatural.
Beforejumpinginfull-forcetoHTML5productionsites,IrecommendtryingthesofttransitionwithchangingyourDIVnamesslightly.There’snodownsidethatI’vefoundtodoingthis,youcanevenusethenewDOCTYPEwithverylittleconsequence.
FakingitwithJavaScript

Firstoff,I’dliketosay:Pleasedon’tdothisinproduction.Iftheclientsidescriptingfails,itwillcompletelycollapsethesiteinbrowsersthatwon’ttakeCSSappliedtothenewelements.Thisissimplynotagoodoption.Itis,however,anoptionandI’mallaboutknowingyouroptionsnomatterwhattheyare.
CreatingthenewelementswithJavaScript

WorkinginjQueryiscoolandall,butasitturnsout,thereisabuiltinfunctiontoJavaScripttodealwithcreatingnewelements:

1. document.createElement(header);document.createElement(footer);document.createElement(section);document.createElement(aside);document.createElement(nav);document.createElement(article);document.createElement(figure);document.createElement(time);

复制代码

…andsooninthatfashion.
ThiswillallowyoutostyletheseelementsinInternetExplorer.Again,thedownsideofusingthistechniqueisthat,withouttheall-importantJavaScript,thesitewillnotonlybeunstyled,alltheunrecognizedelementswilldefaulttoinline.Soyoursitewillliterallycollapseonitself.
ClientsideJavaScriptisnottheanswerforusingHTML5.Serversidejavascript,nowthat’sacompletelydifferentstory…

网页制造poluoluo文章简介：在这篇文章中，我但愿可以给你一些提醒和洞察HTML5，以匡助加重痛苦悲伤的一定附带过渡到一种略有分歧的语法。

Buildingbrowser-specificapps

I’vealwayspromotedbuildingsitesforyouraudience,sodependingonyouraudience,buildingbrowser-specificapplicationsmaybearealoption.AsImentionedabove,it’sallaboutcontrollingtheenvironment,ifwecancontroltheenvironmentwecancontrolfeaturesdeliveredtotheusermuchbetter.GoogleiscurrentlyattemptingtodothiswithGoogleWave.
TheideabehindGoogle’snewmonsterproductistorevolutionizecommunication,anddosowiththenewesttechnology.GoogleWaveisbuiltinHTML5andisn’tusableinallbrowsersyet.Butthat’salrightsincethey’recontrollingtheaudiencebyonlyreleasingittoselectdevelopersfortesting.

WithWave,GoogleispushingHTML5asfarasitwillgo(andevenalittlefurther).Theyaretakingblogs,wikis,instantmessaging,e-mailandsynchronouscommunicationtothenextlevelbycombiningthemintoplace.
HereiswhattheWaveinboxlookslike.

Belowisasortofwiki/chatareawithallsortsofreal-timecommunicationtreatsforyoutocheckout(oncetheyreleaseit).

GoogleWavebeingpoweredbyHTML5isdefinitelythebiggeststepforwardwehaveseeninthisarea.Theyhavedoneaphenomenaljobputtingtogetheracreativeandinnovativeproduct.
Focusingonthemobile

JustlikeGoogleiscurrentlydoingwithWavebyselectivelyreleasingittodevelopers,wecancontroltheviewingenvironmentwhenworkingwithmobiledevices.Bygrabbingtheuseragent,wecandesignspecificapplicationsthatuseHTML5forsupporteddevices.
Targetingtheuseragentofadeviceisnotanidealmethodindesigningforthegeneralmobileweb,butwhenweneedtospecificallytargetadevice,liketheiPhone,PreorGoogle’sAndroidit’saprettysolidoption.
Rightnow,thebestmobiletestingplatformwehaveistheiPhone.Withtherecentsoftwareupgrade,itisveryclosetohavingfullsupport.But,ifyoujustwanttousethenewelements,mostanyofthebig3mobileplatformswillworkfine.Ifyou’relookingforAPIsupportIsuggesttestingontheiPhonewiththenewupgradedsoftware.
Conclusion

Withthestrongfoundationssetupbypreviousversionsof(X)HTMLandlargecommunityactivitysurroundingWebstandards,we’recomingintoanewagewithawealthofknowledgeandtheabilitytolearnfromourpastmistakes(andmakesomenewones).HTML5isbeingsetupwiththeexpectationsofaverypowerfulmarkuplanguageandit’suptoustoutilizeitinawaythatcanbenefitusall.
TherearesomanygreatfeaturestolookforwardtofromnewelementstotonsofkillerAPIs.Wecanmakedataavailableoffline,easilycombinetechnologiesandcreateveryintricateanimationsallwithinafamiliarlandscape.Ifyouhavethetime,Iencourageyoutobrowsethroughtheentirespecandfamiliarizeyourselfevenfurtherwithallthebellsandwhistles(therearealot)sowecanuseHTML5tobuildstronger,richerWebapplicationsforyearstocome.
Here’stoHTML5,let’shopeitlivesuptothehype.
Resources

• 23EssentialHTML5Resources
  AcomprehensivelistofarticlesandresourcesrelatedtoHTML5.
  
  
  登录/注册后可看大图
  
  
• HTML5Demos
  HTML5DemosisagreatresourceforcheckingouttheHTML5APIssuchas:geolocation,draganddrop,offlinedetection,andstorage.ThisisaverygoodanduniqueresourcestotestoutandseeexactlywithwecandowithHTML5.
  
  
  登录/注册后可看大图
  
  
• HTML5Gallery
  TheHTML5Gallery,likeanygallery,isawebsiteshowcasewhereyoucanseehowothersareusingHTML5ineverydaydevelopment.I’velookedroundthoughthissitequiteabitanddidsomecrossbrowsertestingonsomeoftheentries.Manyarebrokeninolderbrowsers,buttherearesomethatholdupverywell.
  
  
  登录/注册后可看大图
  
  
• HTML5Doctor
  AresourcethatcateredforthepeoplewhowishedtofindoutmoreaboutimplementingHTML5andhowtogoaboutit.ThisblogpublishesarticlesrelatingtoHTML5andit’ssemanticsandhowtousethem,hereandnow.
  
  
  登录/注册后可看大图
  
  
• HTML5CheatSheet
  AhandyprintableHTML5CheatSheetthatlistsallcurrentlysupportedtags,theirdescriptions,theirattributesandtheirsupportinHTML4.Releasedhere,atSmashingMagazine.
  
  
  登录/注册后可看大图
  
  
• W3CHTML5SpecOverview
  Wheneveryouwanttoknow
  aboutsomethingthatnoonehaswrittenaboutontheWeb,theW3Cisyouranswer.IspenthoursscouringthissiteinresearchingHTML5.It’sagreatresourceandIhighlyrecommendreadingthroughwhateveryoucan.
  
• HTML5Validator
  Evenwithsuchlittlesupport,westillwanttomakesureourcodeisvalid.ValidatingyourcodeisagreatwaytolearnandeaseyourselfintodevelopingwithHTML5.
  
• WHATWGWiki
  TheHTMLWorkingGrouphasputtogethersomegreatdocumentationfortrackingwhatexactlyisgoingonintheworldofHTML5.
  

References

• Yes,YouCanUseHTML5Today!
  
• W3CHTML5Differences
  
• 5AmazingHTML5FeaturestoLookForwardto
  
• PreviewofHTML5
  
• PreparingforHTML5withSemanticClassNames
  
• XHTML2vs.HTML5
  
• HTML4vs.HTML5
  
• AccessibilityinHTML5
  
• HTML5Doctor
  

</p>
最近群里面很多人在问html5应该怎么学，这个问题其实没有标准答案。我开这个帖子，目的是为了收集大家每天的学习心得，欢迎大家来回复。

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。