HTML5之美 - 周全264(2)_H5之家 - 中国HTML5教程资源分享第一站

　　在移动互联网上，手机跟PC有一些特征上的差异。用到手机特有的功能，我们可以做一些很有意思的东西。比如说我想获得地理定位，还有传感器、查询通讯录、拍照，这些都是手持设备特有的功能，虽然W3C有制定这些API的规范，但是目前没有浏览器已经完整实现。如果使用PhoneGap的话，我们就能使用到这些API了。

　　我这里有一个视频，演示的是使用PhoneGap做的一个指南针应用。我在Chrome上装了一个叫Ripple的插件，它是一个PhoneGap模拟器插件。装好这个插件之后，就可以在浏览器上进行中开发了，这个插件模拟了设备的大小和外观，并且加入了device特性的调试环境。在界面上，左右都有很复杂的控件，操作它们可以模拟device特性。就这样一个应用，只需要大概20行代码。

　　然后打包也很简单，PhoneGap官方有个在线的打包工具，它架设在Amazon云计算平台上，我们只需要把源代码的zip包传上去，然后就能下载打包好的应用程序安装文件。

　　所以说，使用HTML5技术做一个安卓应用真的是非常简单，基于PhoneGap，可以连SDK也不用下，并且能做到直接开发、打包，不过一台安卓手机还是需要的，因为我们还是需要部署上去看看真实效果。

　　从HTML4诞生以来，整个互联网环境、硬件环境都发生了翻天覆地的变化，开发者期望标准统一、用户渴望更好体验的呼声越来越高。20年磨一剑，HTML5作为下一代Web标准，它的新特性正在每个新式浏览器的版本中快速的得到支持和体现。随着HTML5和CSS3的发展和完善，Web应用程序正在逐渐的表现出桌面应用的性能和功能，和桌面应用之间的区别将越来越模糊。未来不能用HTML5来实现的功能将越来越少，未来绘图、视频编辑、3D建模等也将从单机软件转到浏览器上通过Web应用程序来实现。

　　下文，我将结合实例，谈谈激动人心的HTML5之美。

　　1、语义之美

　　语义化很美，在合适的地方使用合适的标签，把人和机器一视同仁。书写语义化的页面就像建造符合工业标准的建筑，阅读语义化的页面像阅读一本你熟识的优美著作。

　　HTML5的语义化标签包括：

　　和采用css+div进行页面布局的方式相比，这些新标签明确的表现了页面元素的结构和含义。下面的代码展示了这样的一个示例：

<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>HTML5</title> <link href="html5.css"> </head> <header> <h1>Title</h1> <h2>Subtitle</h2> </header> <aside> <nav> <h2>Nav1</h2> <ul> <li>Link1</li> <li>Link2</li> </ul> </nav> <nav> <h2>Nav2</h2> <ul> <li>Link3</li> <li>Link4</li> </ul> </nav> </aside> <article> <header> <hgroup> <h1>HTML5 is beautiful</h1> <h2>Semantic, Natural, Simple and Useful</h2> </hgroup> </header> <section> <h2>Semantic</h2> <p>HTML5 is Semantic.</p> </section> <section> <h2>Natural</h2> <p>HTML5 is Natural.</p> </section> </atricle> <footer> <a href="http://www.w3.org/TR" mce_href="http://www.w3.org/TR">W3C</a> </footer> </html>

　　相当简单和清晰，我可以不添加任何注释，人和机器都明白它所要构建的结构和内容。

　　目前主要浏览器的新版本都支持HTML5语义化标签（下图从左到右依次为IE、Chrome、Firefox、Opera、Safari、QQ浏览器5）。

　　2、人性之美

　　HTML5设计理念中的通用访问体现了人性化之美。通用访问包括可访问性、媒体中立和国际化支持三个概念。可访问性考虑了对残障用户的支持，媒体中立为所有的平台和终端上（例如Android和iPhone的平台上）建立统一标准；而国际化的支持体现在不同的语言和书写习惯上。

　　就像CSS3中对国际化的支持体现在padding-start, padding-end（在Chrome新版本的设置中心中可以看到它的应用）等新属性一样，HTML5引入了Ruby标签。Ruby标签允许为一个或者多个文本添加附加注释（其命名来源于Ruby字符），例如下面的代码：

<p>Hello, <ruby> <rb>HTML5</rb> <rp> (</rp> <rt>Hyper Text Mark-up Language 5</rt> <rp>) </rp> </ruby> </p>

　　显示的文本如下：

　　Ruby标签在中文、韩文和日文教科书和古文中非常有用，读者们可以方便了解文本的详细读音和含义。下面的诗句很美，而HTML5更美。

　　有趣的是在IE、Firefox或Opera中复制粘贴上面的文本到编辑器中，会显示下面的文本，这是因为<rp>标签的特殊作用：允许在不支持Ruby标签的浏览器中优雅的降级，同时支持非格式化的复制和粘贴。

　　死生契 (读音： qì ) 阔 (读音： kuò ) ，与子成说。执子之手，与子偕老。

　　目前主要浏览器的新版本对于Ruby标签的支持程度如下：除Fifrefox和Opera外均提供支持。

　　3、简单之美

　　大道至简，化繁为简是许多标准、规范、框架的终极目标。HTML5很好的诠释了这一点，例如以浏览器原生能力支持和代替复杂的Javascript代码、提供简单而强大的新API。

　　HTML5自身即跨浏览器的JS库，使得开发者的工作更容易：例如新的表单标签和属性、内置拖拽事件使得完全不需要Javascript的支持就能实现许多常用的功能。

　　我们再来看HTML5表单，它实现了许多简单易用的原生属性和控件，可以轻松的构建强大的表单，帮我们节约大量的Javascript代码。下面是一个HTML5表单的示例：