解读HTML5建议、技巧和技术.docx

现今我们能用 HTML5 吗，能用它做些什么呢，是否真的是 Flash 杀手？想必你也注意到了这些日渐增长且常被问起的类似问题，被讨论着，甚至被回答过。在我看来，你必须自己回答这些基本的问题。这篇文章的本意是想帮你通过一些基本指南的学习，以轻松学习代码模板。一旦你熟悉了这些基本，并想更进一学习，你还将会找到更多提供了建议、技巧和技术的有用资源。HTML 5 特性官方详细的文档是寻找 HTML5 特性的最好地方，当然你还可以轻松通过 W3Schools 来学习HTML5 标签。我们将会在文章中涉及到以下的特性： 语义化标记 Form 表单增强功能 视频/音频 画布（Canvas） 可编辑内容 拖放 稳健的数据存储检测浏览器支持在你开始尝试 HTML5之前，需要知道各主流浏览器的支持状况。这些有用的资源，将可以帮助你向着正轨走： 何时能用 网页设计师的浏览器支持列表 HTML5 测试 布局引擎对比你还可以运行 Javascript（用Javascript 检测浏览器特性）来检测 HTML5 特性的支持。你还应该用用Modernizr：一个非常不错的检测 HTML5/CSS3 本地支持的 Javascript 库。如果你选择用 Mootools可以使用MooModernizr(MooTools port of Modernizr)。你可能也会想留意不断变化的浏览器市场份额分享这些信息对于你决定用何种解决或折衷的方法将会是非常必要的。值得注意的变更点除了新的特征，你还应该记下这些重要的变更点： 简洁的 DOCTYPE HTML5只需一个简洁的文档类型：。它有意不使用版本，因此文档将会适用所有版本的HTML。 简单易记的语言标签你并不需要在 中使用xmlns 或xml:lang 标记。 将对 HTML5 有效。 简单易记的编码类型你现在可以在 meta 标签中使用charset： 不需要闭合标签在 HTML5 中，空标签（如：br、img 和 input ）并不需要闭合标签。 废弃的标签下面这些标签并不被 HTML5 支持：、 和简单代码示例: 1 2 3 4 5 HTML5 Document 6 7 8 9 10 你可以使用HTML5 Validator或W3C Markup Validation Service来测试你的 HTML5 文档。语义化标记HTML5 新增的一些新标签除了不仅仅是更具语义的 标签的替代品，并不提供额外的功能。这些都是新增的标签：、,、和。这些标签被除了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： HTML5 Reset CSS Reset5简单代码示例:兼容 IE 的 HTML5 页面布局 1 2 3 4 5 HTML5 Semantic Markup Demo: Cross Browser 6 7 8 9 10 11 12 13 14 15 Page Header16 Page Sub Heading17 18 19 20 21 Home22 Projects23 Portfolio24 Profile25 Contact26 27 28 29 30 Article Heading31 May 5th, 201032 33 Lorem ipsum dolor sit amet, consectetur adipiscing elit.34 35 36 Section Heading37 38 Ut sapien enim, porttitor id feugiat non, ultrices non odio.39 40 Section Footer: Pellentesque volutpat, leo nec auctor euismod41 42 43 44 45 Section Heading46 47 Lorem ipsum dolor sit amet, consectetur adipiscing elit.48 49 50 51 52 53 FigCaption: Club, Heart, Spade and Diamond54 55 Ut sapien enim, porttitor id feugiat non, ultrices non odio56 57 Section Footer: Pellentesque volutpat, leo nec auctor euismod est.58 59 60 61 Article Footer62 63 64 65 66 Siderbar Heading67 68 Ut sapien enim, porttitor id feugiat non, ultrices non odio.69 70 71 Page Footer72 73 74 注意：没有一个 div标签，id 或 class 属性被使用到简洁、小巧和更语义化的标记(View Demo)。你仍可以用HTML5 Validator或W3C Markup Validation Servi