Web应用的新技术HTML5
作者：王江静
来源：《电脑知识与技术》2012年第31期
        摘要：HTML5是基于HTML　4.01　和　XHTML　1.0　标准的最新HTML标准版本，现在仍处于发展阶段。该文介绍了HTML5的特性，分析了HTML5和HTML4之间的主要区别，提出了基于HTML5的Web应用编码方法，最后总结了该技术现存的不足之处。
        关键词：HTML；Web应用；HTML5
        中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2012）31-7462-04
        1　HTML5简介
        HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，多家公司联合成立了WHATWG（Web　Hypertext　Application　Technology　Working　Group，Web超文本应用技术工作组）组织专注于新的Web表单和应用程序的标准，同时W3C（World　Wide　Web　Consortium，万维网联盟）
推出了基于XML技术的XHTML　2.0。在2006年，这两个标准进行融合，从而创建了一个新版本的HTML。HTML5的前身称为Web　Applications　1.0，于2004年由WHATWG提出，2007年被W3C接纳。HTML5的第一份正式草案已于2008年1月22日公布。HTML5仍处于完善之中。互联网主要标准管理团体万维网联盟近日提出新计划在2014年前让HTML5成为官方“候选推荐”标准，并在2016年完成HTML5.1标准。然而，大部分现代浏览器已经具备了某些HTML5支持，支持的浏览器包括Firefox，IE9，Chrome，Safari等。
        HTML5提供了像和一类的新的元素和属性标签，这类标签对于搜索引擎的检索结果的优化非常有帮助，同时更适合在小屏幕的手持设备上使用。HTML5吸纳了XHTML2一些改进建议，比如，新的HTML标签header，　footer，　dialog，　aside，　figure等有助于文档结构的改善，不再是简单地使用div实现，使内容创作者更加容易地创建文档。
        迄今为止，并没有什么流行的浏览器可以完全的支持所HTML5规范的所有功能。但明确的是，今天的主流浏览器都将趋于支持HTML5，但是仍存在许多不完全的支持或兼容。
        2　HTML　5特性
        1）语义特性
        HTML5标签具有更好的页面语义和结构。HTML5包含有对RDFa、微数据与微格式等方面支持的标签，能够构建数据驱动的Web应用。
        2）本地存储
        HTML5　APP　Cache以及本地存储功能能够减轻服务器端的压力，有效利用客户端的压力。
        3）设备兼容
        HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了新的数据与应用接入开放接口，外部应用程序就可以直接访问浏览器内部的数据，例如视频影音可直接与麦克风及摄像头相联。
        4）连接特性
        更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。应用HTML5更有效的服务器推送技术Server-Sent　Event能够帮助我们实现从服务器端将信息直接推送到客户端的功能。
        5）网页多媒体
        HTML5支持客户端的声音、视频等多媒体功能，并能够与网站配置的APPS、摄像头和影音功能进行协同完成。通过HTML5新的视频和音频标签能够很容易地把多媒体内容嵌入到网页中。
        6）网页特效
        HTML5网站设计能在SVG、Canvas、WebGL　及　CSS3的基础之上在浏览器中呈现给客户惊人的3D视觉效果。
        7）性能与集成特性
        HTML5　网站设计会通过XMLHttpRequest2等技术使Web应用和网站在多样化的工作环境中拥有更快的速度与更高的效率。
        8）CSS3特性
        HTML5能在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果，
也提供了更高的灵活性和控制性。
        3　HTML5和HTML4之间的主要区别
        尽管HTML5是基于HTML4发展而来，并未做什么重大的修改。但它吸收了XHTML的一些表达方法，从而产生了质的飞跃。其和HTML4之间的一些重要区别如下：
        1）HTML5标准还在制定中
        HTML4仍是当前正式的标准，HTML5仍处在早期阶段，是一个还未完成的标准，以后的修改会不断的出现。HTML标准化过程非常艰辛，至今尚未完全解决分歧，HTML5真正的标准化仍需假以时日。
        2）简化的语法
        更简洁的doctype声明是HTML5里众多新特征之一。DOCTYPE的声明方式是，不区分大小写。HTML的早期版本声明的DOCTYPE需要很长的语句，是因为HTML语言是建立在SGML的基础上，所以需要关联引用一个相对应的DTD。而HTML5仅仅需要声明DOCTYPE就可以告诉文档启用的是HTML5语法标准，浏览器会为做剩余的工作的。
        3）新的视频标记
        该标记将给浏览器带来直接在上面绘制矢量图的能力，这意味着用户可以脱离Flash　和Silverlight，直接在浏览器中显示图形或动画。
        4）新的和标记
        HTML5的设计是要这就是为什么这些和等新标记的出现，它们是专门为标志网站的这些部分设计的。HTML5　吸取了XHTML2　一些建议，新的HTML　标签　如header，　footer，　dialog，　aside，　figure　等的使用，能够更好地描绘网站的结构。内容创作者可以更加语义地创建文档，从而避免了之前在实现这些功能时使用div标记的繁琐形式。
        5）新的和标记
        section和标记是带有主题性的一块内容，HTML5中引入该标记可以让开发人员更好的组织页面上的这些区域。除了让代码更有组织外，它也能让搜索引擎更容易的分析该页面。
        新的标记可以被用于创建传统的菜单，也可以用于工具栏和右键菜单上。
        7）新的和标记
        通过　HTML5中的和标记，添加音频和视频文件就像插入图像那样简单，并且您不再需要外部影音播放器，在网站上实现真正的多媒体融合。
        8）全新的表单设计
        HTML5的表单定义了十几个新的输入类型和特性，新的和标记对原有的表单元素进行的全新的修改，它们有很多的新属性，这些新增元素包括、网址、数字、日期、搜素、颜等新定义的13个输入类型，以及输入框占位符、自动焦点事件等元素。其中最值得称道的新特性莫过于表单验证，对于经常设计表单的开发人员会有更好的体验。
        9）不再使用一些标记
        ，
，chrome浏览器最新版，，，　这些标签被完全去掉了，而　和　　标签虽然保留了下来，但它们的意义已经和以前有所不同，只是为了将一段文字标识出来。上述这些标记可以通过CCS来做更好的处理。
        HTML5和HTML4之间的区别只是整个新规范中的一小部分。除了这些主要的变动外，还有很多次要的改动，而且新的修改也在不断的增加。因此，如果想实时跟踪最新的动向，则需要经常地查看w3.org网站。
        目前最新版的主流浏览器大都支持HTML5，但可能对有些新的标记和属性并不一定支持，可能在用户的屏幕上显示的效果不一致。所以HTML5真正可以实用时候还未到来。
        4　基于HTML5的Web应用编码方法
        HTML5现在的发展相当迅速，越来越多的浏览器开始支持HTML5的新特性，也涌现出越来越多的基于HTML5的App应用，毫无疑问，作为web开发者，必须了解和懂得HTML5的相关特性，因为它很大程度上是今后web开发中的趋势。下面列举一些对HTML5编码开发过程中值得开发者注意的最佳实践方法，这些方法将提高开发者的开发效率和改善开发质量。
        1）使用模板生成器
        当我们开始着手编写HTML5页面时，可以使用一些已有的模板生成器去生成一些HTML5模板，这样就可以避免开发者都是从头开始徒手编写HTML5代码。使用这些HTML5
模板生成器的步骤其实都是很简单的：一般来说，只需要填写一些表单的基本选项，然后点生成的按钮就可以生成一个基本的HTML5基本模板了，现在也有不少优秀的HTML5模板生成器，推荐的是下面的两个：SwitchTOHtml5（地址：http：//switchtohtml5/）和Shikiryu　generator（地址：http：//shikiryu/html5/）。而如果需要更高级复杂的生成功能的话，推荐的是使用HTML5　Boilerplate这个模板生成器生成，地址为：http：//html5boilerplate/，HTML5　Boilerplate的核心是用于帮助开发HTML5站点和应用程序的组件，包括：Modernizr，一个小型实用程序库，支持在Windows　Internet　Explorer中设置新的HTML5　元素样式，并协助在所有浏览器中进行HTML5/CSS3特性检测。如果您正在使用HTML5进行开发且需要支持Internet　Explorer版本9之前的浏览器版本，那么这个库将是您的项目必不可少的一个组件。构建于HTML5　Doctor　Reset　之上的一个CSS起始文件，包含几个智能默认值和增强。内置HTML5语法，以及一些新的语义元素，用于构成文档的骨架。
        2）使用Cheat　sheet备忘录
        由于HTML5还在迅速的发展，因此会不断出现很多新的特性，一般的开发者有的时候
很难都记得所有这些新的特性，因此最好的办法是使用cheat　sheet（备忘录）的方法去查阅这些新特性和用法，下面推荐一个不错的备忘录（上图是其中的一张截图），地址是：http：//www.inmotionhosting/infographics/html5-cheat-sheet/，其中分别有几张备忘录，详细介绍了HTML5中各标签和事件属性，支持的浏览器等详细说明。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。