IT兄弟连 HTML5教程 了解HTML5的主流应用1

在很多人眼里，HTML5与互联网营销密切相关，但其实从开发者的角度而言，它是一种网页标准，定义了浏览器语言的编写规范。伴随HTML5标准尘埃落定，浏览器对HTML5特性的逐步支持，再加上国内对HTML5大力的推广与应用，又出现了各种各样的HTML5平台，现在已经是一个富含多元化的市场机会，它强大的Web应用开发能力才让人们不得不转换固有的互联网思维，寻找新的网页解决方案。开始由技术应用转向整个行业的良性生态化，而且还存在巨大的上升空间。现在HTML５会从广告行业逐渐往游戏行业、广播电视行业和媒体行业转型，不远的未来还能把触角伸得更远。本节将对HTML5进行全面的分析，让读者了解HTML5是什么？能做什么？学什么？HTML5和其它技术的关系?以及HTML5的行业发展等。希望读者可以读完本章，掌握了宏观印象会对后面的学习很有帮助。

了解HTML5的主流应用

HTML5是WEB开发世界的一次重大改变，它代表的是未来WEB开发趋势。介绍使用HTML5和它的优势文章太多了。它看起来很神秘，很多感觉它像喷气背包或者飞行汽车，就像被“神化”了，在Web世界只要跟“炫酷”沾上边的都说是HTML5开发的，先不管这样的说法对不对，我们先来了解目前一些主流HTML5的应用，看看HTML5的能力。

1  表单的强大

表单在Web页面中是最常用的了，在HTML4中的表单功能单一，例如一个表单只能将数据提交到一个服务器位置，当然使用JavaScript也可以实现提交到多个位置，不过代码就很罗嗦了。而且表单验证什么的都要在JavaScript里面写，当然用前端框架验证可能也会很简单，但却避免不了浏览器加载JavaScript代码缓慢等问题。所以HTML4的表单实际使用时非常依赖JavaScript，用起来不是很方便。而HTML5告诉我们可以不用那么依赖JavaScript了，种种问题HTML5提供的新功能都可以解决了。另外，HTML5还专为移动平台定制了一系列表单元素，也只需要使用HTML5中新增加的特定标签属性，就可以完成对不同样式键盘的调用，简捷方便。如图1所示：

图1  HTML5表单示例

2  响应式页面布局

网站是由网页组成，网页则是用来呈现内容和用户互动，而内容的摆放可不能太随意，在配色、字体以及布局排版方面要精心设计，这才能够很好的制作出很漂亮的网站，让用户和搜索引擎喜欢。页面的布局也经历了几次发展，从最早的表格排版，到使用DIV+CSS标准化网页布局，再到现在使用HTML5来实现，每一次的变革都是由于新技术的使用有着明显的优势所决定的。除了有利于搜索引擎抓取内容外，HTML5做页面布局的优势主要有易用性、代码清晰和功能强大三个方面。

一、易用性

使用HTML5创建网站更加简单，主要是因为新的HTML标签像<header>、<footer>、<nav>、<section>和<aside>等等，这样的语义标签可以使阅读者更加容易去访问内容。而上一代布局技术DIV+CSS的使用中，即使你定义了class或者id，你的阅读者也没有办法去了解给出的一个div究竟是什么。使用新的语义标签，你可以更好的了解HTML文档，并且创建一个更好的使用体验。如图2所示：

图2  HTML5中的语义标签布局展示

二、代码清晰

如果你对于简洁，优雅，容易阅读的代码有所偏好的话，HTML5绝对是一个为你量身定做的。HTML5允许你写出简单清晰富于描述的代码，符合语义学的代码允许你分开样式和内容。还有就是DOCTYPE没有更多内容了，不需要拷贝粘贴一堆无法理解的代码，也没有多余的head标签。除了简单，最大的好消息在于它能在每一个浏览器中正常工作即使是名声狼藉的IE6。

三、功能强大

HTML5支持响应式页面布局，不管您的用户使用何种终端访问您的网站，都能够自动识别适应终端设备的分辨率以及宽度，让您的网站在众多设备中无缝浏览(包括显示器、便携设备、电视机，等等)。对于智能手机和平板电脑的逐渐普及，普通的网站对于这些持有移动设备的用户来说，访问无疑是困难的，他们必须在设备上放大和缩小整个网页，以便能够阅读适合字体大小，稍不小心可能会点错进入别的区域，这种状况在响应式网页设计中会有所改善。响应式布局是就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的，响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，可以说响应式的布局是大势所趋，现在越来越多的网站开始采用响应式的布局方案。如图3所示：

图3  Web响应式布局