解读_HTML5

解读HTML5：建议、技巧和技术标签:HTML,html5,向后兼容Design想总结一下HTML5的支持列表，写了许久，无果。在众多文章中，这篇文章涉及到了我想到的，以及没想到的。遂做粗略的翻译，因个人英文水平一般，本文FYI。原文请看：HTML5Unleashed:Tips,TricksandTechniques。=====现今我们能用HTML5吗，能用它做些什么呢，是否真的是Flash杀手？想必你也注意到了这些日渐增长且常被问起的类似问题，被讨论着，甚至被回答过。在我看来，你必须自己回答这些基本的问题。这篇文章的本意是想帮你通过一些基本指南的学习，以轻松学习代码模板。一旦你熟悉了这些基本，并想更进一学习，你还将会找到更多提供了建议、技巧和技术的有用资源。HTML5特性官方详细的文档是寻找HTML5特性的最好地方，当然你还可以轻松通过W3Schools来学习HTML5标签。我们将会在文章中涉及到以下的特性：•语义化标记•Form表单增强功能•视频/音频•画布（Canvas）•可编辑内容•拖放•稳健的数据存储检测浏览器支持在你开始尝试HTML5之前，需要知道各主流浏览器的支持状况。这些有用的资源，将可以帮助你向着正轨走：•何时能用•网页设计师的浏览器支持列表•HTML5测试•布局引擎对比你还可以运行Javascript（用Javascript检测浏览器特性）来检测HTML5特性的支持。你还应该用用Modernizr：一个非常不错的检测HTML5/CSS3本地支持的Javascript库。如果你选择用Mootools可以使用MooModernizr(MooToolsportofModernizr)。你可能也会想留意不断变化的浏览器市场份额分享—这些信息对于你决定用何种解决或折衷的方法将会是非常必要的。值得注意的变更点除了新的特征，你还应该记下这些重要的变更点：•简洁的DOCTYPEDOCTYPEDOCTYPEDOCTYPEHTML5只需一个简洁的文档类型：!DOCTYPEhtml。它有意不使用版本，因此文档将会适用所有版本的HTML。•简单易记的语言标签你并不需要在html中使用xmlns或xml:lang标记。htmllang=en将对HTML5有效。•简单易记的编码类型你现在可以在meta标签中使用charset：metacharset=utf-8″/•不需要闭合标签在HTML5中，空标签（如：br、img和input）并不需要闭合标签。•废弃的标签下面这些标签并不被HTML5支持：acronym、applet、basefont、big、center、dir、font、frame、frameset、noframes、s、strike、tt、u和xmp简单代码示例::::!doctypehtmlhtmllang=enheadmetacharset=utf-8/titleHTML5Document/title/headbody/body/html你可以使用HTML5Validator或W3CMarkupValidationService来测试你的HTML5文档。语义化标记HTML5新增的一些新标签除了不仅仅是更具语义的div标签的替代品，并不提供额外的功能。这些都是新增的标签：article、section、aside、hgroup、header,footer、nav、time、mark、figure和figcaption。这些标签被除了IE外的所有现代浏览器（Firefox3+、Safari3.1+、Chrome2+、andOpera9.6+）支持。Javascript提供了document.createElement(tagName)的方法，让你可以用来创建新的HTML5标签。代替自己创建这些元素，你还可以用HTML5EnablingScript或IEPrintProtector—这些脚本将帮助IE正常处理HTML5元素的渲染。你可能会想到添加CSSReset到这些新元素上。这里是一些可以用在你以HTML5为基础的项目的CSSReset：•HTML5ResetCSS•Reset5简单代码示例::::兼容IE的HTML5页面布局!doctypehtmlhtmllang=enheadmetacharset=utf-8/titleHTML5SemanticMarkupDemo:CrossBrowser/titlelinkrel=stylesheethref=html5reset.csstype=text/css/linkrel=stylesheethref=html5semanticmarkup.csstype=text/css/!--[ifltIE9]scriptsrc=html5.js/script![endif]--/headbodyheaderhgrouph1PageHeader/h1h2PageSubHeading/h2/hgroup/headernavulliahref=#Home/a/liliahref=#Projects/a/liliahref=#Portfolio/a/liliahref=#Profile/a/liliahref=#Contact/a/li/ul/navarticleheaderh1ArticleHeading/h1timedatetime=2010-05-05pubdateMay5th,2010/time/headerpLoremipsumdolorsitamet,consecteturadipiscingelit./psectionheaderh1SectionHeading/h1/headerpUtsapienenim,porttitoridfeugiatnon,ultricesnonodio./pfooterpSectionFooter:Pellentesquevolutpat,leonecauctoreuismod/p/footer/sectionsectionheaderh1SectionHeading/h1/headerpLoremipsumdolorsitamet,consecteturadipiscingelit./pfigureimgsrc=item-1.pngalt=Clubimgsrc=item-2.pngalt=Heartimgsrc=item-3.pngalt=Spadeimgsrc=item-4.pngalt=DiamondfigcaptionFigCaption:Club,Heart,SpadeandDiamond/figcaption/figurepUtsapienenim,porttitoridfeugiatnon,ultricesnonodio/pfooterpSectionFooter:Pellentesquevolutpat,leonecauctoreuismodest./p/footer/sectionfooterArticleFooter/footer/articleasideheaderh1SiderbarHeading/h1/headerpUtsapienenim,porttitoridfeugiatnon,ultricesnonodio./p/asidefooterPageFooter/footer/body/html注意：没有一个div标签，id或class属性被使用到—简洁、小巧和更语义化的标记(ViewDemo)。你仍可以用HTML5Validator或W3CMarkupValidationService来检测你的HTML5文档。注意：这个示例在IE6下并未正常显示。这只是因为我使用CSSchildcombinators来避免使用额外的class。你可以在IE6下用自己的CSS，像其他浏览器一样处理HTML5标记。其他资源•HTML5的articles和sections:有什么区别?•HTML5中的结构标签•Figure和caption元素•解读HTML5:nav•section并不仅仅是语义化的div•用jQuery提供HTML5details的完美折衷方法•不用脚本实现IE对HTML5样式控制表单增强HTML5为表单提供了几个新的属性、input类型和标签。到目前为止，只有Opera对HTML5有比较好的支持。你因此应该下载Opera来查看大部分新特性如何工作。•新的INPUTINPUTINPUTINPUT类型color,email,date,month,week,time,datetime,datetime-local,number,range,search,tel,和url•新属性required,autofocus,pattern,list,autocomplete和placeholder•新元素keygen,datalist,output,meter和progress值得高兴的是尽管支持有限，使用这些特性也是个不错的选择。因为新的INPUT类型会漂亮地降级为TEXT类INPUT（译注：INPUT的默认type为text）。且记住现今你仍可以折衷使用Javascript控制表单（这个技巧是指首先检测浏览器自身支持，然后才是使用折衷方法）。简单代码示例：列出一些今天你可以拿来测试的新特性formfieldsetlegendNewAttributes/legendplabelRequired:/labelinputtype=textname=html5requiedrequired=truesmallWorksinOpera&Chrome/small/pplabelAutoFocus:/labelinputtype=textname=html5autofocusautofocus=truesmallWorksinOpera,Chrome&Safari/small/pplabelPlaceHolder:/labelinputtype=textname=html5placeholderplaceholder=ThisWillShowinWebKitsmallWorksinChrome&Safari/small/pplabelInputPattern:/labelinputtype=textpattern=[0-9][A-Z]{3}name=html5patternrequiredtitle=Enteradigitfollowedbythreeuppercaseletters/smallWorksinOpera&Chrome/small/pplabelMultipleFiles:/labelinputtype=filename=html5multiplefileuploadmultiplesmallWorksinChrome,Safari&Firefox/small/pplabelList:/labelinputtype=textname=html5textwithdatalistlist=colorsdatalistid=colorsopt