现今我们能用 HTML5 吗，能用它做些什么呢，是否真的是 Flash 杀手？想必你也注意到了这些日渐增长且常被问起的类似问题，被讨论着，甚至被回答过。在我看来，你必须自己回答这些基本的问题。
这篇文章的本意是想帮你通过一些基本指南的学习，以轻松学习代码模板。一旦你熟悉了这些基本，并想更进一学习，你还将会找到更多提供了建议、技巧和技术的有用资源。
HTML 5 特性官方详细的文档是寻找 HTML5 特性的最好地方，当然你还可以轻松通过 W3Schools 来学习HTML5 标签。我们将会在文章中涉及到以下的特性：
检测浏览器支持在你开始尝试 HTML5之前，需要知道各主流浏览器的支持状况。这些有用的资源，将可以帮助你向着正轨走：
你还可以运行 Javascript（用Javascript 检测浏览器特性）来检测 HTML5 特性的支持。你还应该用用Modernizr： 一个非常不错的检测 HTML5/CSS3 本地支持的 Javascript 库。如果你选择用 Mootools可以使用MooModernizr (MooTools port of Modernizr)。
你可能也会想留意不断变化的”浏览器市场份额分享” — 这些信息对于你决定用何种解决或折衷的方法将会是非常必要的。
值得注意的变更点除了新的特征，你还应该记下这些重要的变更点：
简单代码示例:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 Document</title> </head> <body> </body> </html>你可以使用HTML5 Validator 或 W3C Markup Validation Service 来测试你的 HTML5 文档。
语义化标记HTML5 新增的一些新标签除了不仅仅是更具语义的 <div> 标签的替代品，并不提供额外的功能。这些都是新增的标签：、、、、, 、、、、 和 。
这些标签被除了IE 外的所有现代浏览器（Firefox 3+、Safari 3.1+、Chrome 2+、and Opera 9.6+）支持。Javascript 提供了document.createElement(tagName) 的方法，让你可以用来创建新的 HTML5 标签。代替自己创建这些元素，你还可以用HTML5 Enabling Script 或 IE Print Protector — 这些脚本将帮助 IE 正常处理 HTML5 元素的渲染。
你可能会想到添加 CSS Reset 到这些新元素上。这里是一些可以用在你以 HTML5 为基础的项目的CSS Reset：
简单代码示例: 兼容 IE 的 HTML5 页面布局
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 Semantic Markup Demo: Cross Browser</title> <link href="html5reset.css" type="text/css" /> <link href="html5semanticmarkup.css" type="text/css" /> <!--[if lt IE 9]> <script src="html5.js"></script> <![endif]--> </head> <body> <header> <hgroup> <h1>Page Header</h1> <h2>Page Sub Heading</h2> </hgroup> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <article> <header> <h1>Article Heading</h1> <time datetime="2010-05-05" pubdate>May 5th, 2010</time> </header> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <section> <header> <h1>Section Heading</h1> </header> <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio.</p> <footer> <p>Section Footer: Pellentesque volutpat, leo nec auctor euismod</p> </footer> </section> <section> <header> <h1>Section Heading</h1> </header> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <figure> <img src="item-1.png" alt="Club"> <img src="item-2.png" alt="Heart"> <img src="item-3.png" alt="Spade"> <img src="item-4.png" alt="Diamond"> <figcaption>FigCaption: Club, Heart, Spade and Diamond</figcaption> </figure> <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio</p> <footer> <p>Section Footer: Pellentesque volutpat, leo nec auctor euismod est.</p> </footer> </section> <footer> Article Footer </footer> </article> <aside> <header> <h1>Siderbar Heading</h1> </header> <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio.</p> </aside> <footer> Page Footer </footer> </body> </html>注意：没有一个 div 标签，id 或 class 属性被使用到 — 简洁、小巧和更语义化的标记 (View Demo)。你仍可以用 HTML5 Validator 或 W3C Markup Validation Service 来检测你的 HTML5 文档。
其他资源
表单增强HTML5 为表单提供了几个新的属性、input 类型和标签。到目前为止，只有 Opera 对HTML5 有比较好的支持。你因此应该下载 Opera 来查看大部分新特性如何工作。
, , , , , , , , , , , , 和
, , , , 和
, , , 和
值得高兴的是尽管支持有限，使用这些特性也是个不错的选择。因为新的 INPUT 类型会漂亮地降级为 TEXT 类 INPUT（译注：INPUT 的默认 type 为 text）。且记住现今你仍可以折衷使用 Javascript 控制表单（这个技巧是指首先检测浏览器自身支持，然后才是使用折衷方法）。
相关文章
精彩导读
热门资讯
关注我们
