Web应用开发必须掌握的HTML5编码方法.doc

Web应用开发必须掌握的HTML 5编码方法HTML5 现在的发展相当迅速，越来越多的浏览器开始支持HTML5的新特性，也涌现出越来越多的基于HTML5的App应用，毫无疑问，作为web开发者，必须了解和懂得HTML5的相关特性，因为它很大程度上是今后web开发中的趋势。在本文中，列举了在对HTML5编码开发过程中，一些值得开发者注意的最佳实践方法，这些方法将提高开发者的开发效率和改善开发质量。使用模板生成器When building a website, you often start with a base template that you customize to fit your needs. Instead of writing all your HTML5 code from scratch, you can save time by using one of those very useful online HTML5 generators. Using them is definitely easy: You fill a basic form to set up desired options, you click on a button and a basic HTML5 template is available for you to use.当我们开始着手编写HTML5页面时，可以使用一些已有的模板生成器去生成一些HTML5模板，这样就可以避免开发者都是从头开始徒手编写HTML5代码。使用这些HTML5模板生成器的步骤其实都是很简单的：一般来说，只需要填写一些表单的基本选项，然后点生成的按钮就可以生成一个基本的HTML5基本模板了，现在也有不少优秀的HTML5模板生成器，推荐的是下面的两个：SwitchTOHtml5(地址：/)和Shikiryu generator,(地址：/html5/ )。而如果需要更高级复杂的生成功能的话，推荐的是使用HTML5 Boilerplate这个模板生成器生成，地址为：/ ，HTML5 Boilerplate 的核心是用于帮助开发 HTML5 站点和应用程序的组件，包括：Modernizr，一个小型实用程序库，支持在 Windows Internet Explorer 中设置新的 HTML5 元素样式，并协助在所有浏览器中进行 HTML5/CSS3 特性检测。如果您正在使用 HTML5 进行开发且需要支持 Internet Explorer 版本 9 之前的浏览器版本，那么这个库(或者我稍后将解释的一个替代选项)将是您的项目必不可少的一个组件。构建于 HTML5 Doctor Reset 之上的一个 CSS 起始文件，包含几个智能默认值和增强。内置 HTML5 语法，以及一些新的语义元素，用于构成您文档的骨架。使用Cheat sheet备忘录由于HTML5还在迅速的发展，因此会不断出现很多新的特性，一般的开发者有的时候很难都记得所有这些新的特性，因此最好的办法是使用cheat sheet(备忘录)的方法去查阅这些新特性和用法，下面推荐一个不错的备忘录(上图是其中的一张截图)，地址是：/infographics/html5-cheat-sheet/ ，其中分别有几张备忘录，详细介绍了HTML5中各标签和事件属性，支持的浏览器等详细说明。关注兼容性问题由于HTML5是新的技术，但是开发者依然不能忘记的是，各大浏览器厂商对其的支持还是不一样的，比如微软的IE就跟其他厂商的很不同，这就要求开发者在使用新的特性时，要注意考虑是否需要在各大浏览器中取得平衡，比如考虑用户群使用的浏览器类型。这里推荐使用/这个网站去查看HTML5各个属性或者事件在各浏览器中的兼容情况(上图为其截图)，这个网站的特色在于能让开发者一目了然地看到CSS,SVG和Javascript在HTML5中的各项用法以及以表格的形式对比了各浏览器对HTML5标准的支持情况，十分详细，值得参考。针对旧版本IE的兼容考虑不得不说，大部分的WEB前端开发者都十分讨厌IE，但有的时候，还是得考虑下旧的IE版本，这个时候就需要一些技巧了，在IE 8以及以下的版本，如果要使用一些HTML5的特性，而不让IE报错，可以使用如下的脚本：要注意的是，以上脚本只能让旧版本的IE对新的HTML5特性不报错，但不一定能承诺让所有HTML5新特性都能兼容运行。此外，可以使用一个不错的html5 框架：modernizr(下载地址在：/)，它是一个能最大限度在各浏览器中运行HTML5 CSS3的框架，使用方法也很简单，下载后，将其脚本放在每个HTML页中的head部分引入就可以了，如果某一HTML5新特性被正在使用的浏览器支持，则会自动启用，如果不支持，则会以前缀“no_”的形式被引入以示区别。正确使用元素在HTML5之前，开发者需要在页面中使用大量的缺乏语义的标签，比如使用等，这将让HTML5变得难以理解(特别是对搜索引擎来说)，为此，HTML5引入了大量的新的标签元素，比如header,footer,article,section,aside,nav等等，但开发者要注意正确使用它们，比如下面是一种正确的使用方法：.校验写好的HTML5代码在完成HTML5编码工作后，必须对编码工作进行确认，以校验HTML5编码中是否有正确的语义。除了使用专门的支持HTML5的编辑工具外(比如Visual