首页 > 代码库 > HTML5之美
HTML5之美
如今大热的HTML5到底美在哪里？HTML5到底能为实际的移动开发带来哪些改变？来自阿里云云手机服务运营部的前端开发工程师正邪 （廖健）分享了他眼中的HTML5之美，主要讲诉HTML5的常见原理并从CSS、JavaScript和框架三个方面做了细致讲解：
说到HTML5一般都会提到它新增了一些新的标签，这些标签能够减少文档的大小，也可以节省一些CSS定义，但是这个好处不足以说明HTML5在技术变革上带来的影响，我们还是先要明白HTML5的原理到底是怎样的，它带来的变革为什么会这么大？
常见的原理
HTML5的产生以及它的设计完全是遵循了一些常见的原理，这些原理在李松峰老师的博客上有详细地阐述。
首先第一条原理是：发送时保守、接收时开放。
作为工程师，发送给浏览器的文档应该尽量的严谨，但是浏览器作为接收方，应该持有一个开放的姿态，而不会因为某个文档有问题，到浏览器窗口里面就不显示了，只是留下一片空白给用户。既然HTML存在标签没有正常闭合的可能性，也存在属性丢失的情况，只要文档没有产生二义性，浏览器应该猜测到最终的行为并做出正确处理，在技术层面浏览器有理由这么做。
第二，避免不必要的复杂性。
我们在编写的HTML的时候，可能会定义一个很长很长的文档类型声明，这个文档类型声明是给浏览器看的，如果能够简化它，在创作的时候就能省下一些时间，而且也不用浪费力气去记那些难记的字符。实际上，省略大多数字符，浏览器也能按照我们期望的那样去运行。
还有script标签，我们可能会设置它的type为“text/javascript”，实际上也是不必要，如果type属性没有被声明，默认就按JavaScript处理。类似的东西有很多，在文档里面能省掉的我们就应该大胆地省掉，这样不仅是在创作这个文档的时候，能够给我们带来这些方便，而且在共同维护的时候也能带来一些益处。
第三，网络价值同达到网络用户数量的平方成正比。
现在HTML5这么火，很多人就拿它跟Flash去做对比，说Flash多么多么烂，说HTML5多么多么好。实际上我们创作的内容最后是给用户去看的，如果这个东西用户觉得好，不管用什么技术我觉得都是次要的。
最后我们要的是将服务推送到用户面前，而不是要说某种技术多么好，可以杀死另一个技术。实际上在这里，它们的协同工作才是符合HTML5的设计思想，在这个层面上我觉得Flash也是HTML5中的一员。
第四，大多数人的意见和可运行的代码。
没有HTML5规范的时候，浏览器厂商可以各自为阵，可以加入了自己的标准，虽然这些标准不是W3C制定的，但是大多人都有这些需求，它们能解决实际问题。所以也刺激W3C加入到这些标准的制定中去。
技术细节
CSS
有位测试工程师报了个bug给开发工程师。说页面上的单选框样式太难看了，建议改一下，换个颜色。开发工程师当时就晕倒了，说这个是浏览器默认的，改不了。改不了怎么办？只能把bug打回去。
基于CSS3的特性，现在完全可以改变浏览器控件的默认外观。
然后是布局。改变样式是CSS的强项，也是它的职责所在。我们可以使用百分比做弹性布局。现在设备比较多，有iPad、iPhone、还有其各种屏幕尺寸的安卓，假如我想用HTML5的技术做一个应用，适用于所有平台，这个时候百分百肯定是不够的，而精准的弹性布局又显得很重要。
CSS3有一个box-flex的属性，假设有个容器，里面有三个div，在设置了margin的同时将它们的box-flex设置成1，看到的效果就是三个元素均等分，我还可以改变它的比例，比如将第一个元素固定宽度，剩下的两个元素也可以均等分。除了从左往右布局，使用cloumn-count可以做到从上往下布局。
box-flex可以解决一部分屏幕适配的问题，如果想做到更精准的布局，比如说在小屏幕下的布局是一个样子，大屏幕下可能加入了更多的元素，或者更复杂了，甚至大小、颜色、位置都变了。这个时候可以使用Media Queries的技术。我们可以先定义某个样式，然后在某种屏幕上面覆盖默认样式，或者完全使用另一套样式。
除了CSS3这些奇妙的属性，用它来设计一些复杂背景也是非常适合的。这里有一个我同事开发的Chrome插件叫Coda Cola，他还为这个插件做了一个分享的网站。别人根据这个插件，做出了一些比较酷的CSS效果，可以再分享出来。
JavaScript
说了CSS3，再说说JavaScript。大家说JavaScript美吗？好像我们对它的印象也不是很好。不仅前端，后端对JavaScript的印象也好不到哪去，甚至会更糟糕。
首先它的执行效率比较慢。
然后它的API接口比较烂，比如我要查找某个元素，可以用getElementById，getElementsByTagName, 这么一长串。除了很长，我还要把第三个参数指定为false。现在做应用的话，我们一般都会选择用框架来帮助自己进行开发，从那些复杂的语法中解脱出来。
再者，JavaScript调试比较困难，JavaScript边解释变执行，代码一多，方法之间的调用层级变深，如果出错，就很难定位到错误所在。特别是在没有firebug等调试工具之前，找错误有时候就跟做噩梦一般。JavaScript虽然有这么多弊病，但是它现在还在快速发展。到现在，我们有很多种的框架可以选择，这里面肯定有大家喜爱的框架。但在HTML5到来的时刻，我们有一些更好的选择。比如说做元素查找，以前可能用到框架，现在不用框架，使用原生的API也可以很方便地做到。这是第一点，就是有些功能不再需要框架做支持了。
第二，JavaScript中加入一些新的特性，比如说LocalStorage。没有LocalStorage的时候，我们可以使用Cookie在客户端记录一些用户相关的数据，但是Cookie记录的容量有限，而且HTTP请求会携带cookie数据。在需要保存大量数据或者设计离线应用的时候，LocalStorage就非常有用了，LocalStorage的容量比较大，在移动平台上，至少有2M的存储空间。
框架
虽然说有了一些原生的API，也有了一些新的功能，但是在开发的时候，我们还是要借助一些框架来提高工作效率。有一个叫Zepto的框架，是我们在项目中经常会用到的框架。它的API几乎跟jQuery一样，跟jQuery相比，Zepto去除了一些移动平台上不必要的代码。除此之外，它还支持了tap、swipe等手势。 在移动平台上，我们也可以使用Canvas技术做一些游戏。
在移动互联网上，手机跟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的语义化标签包括：
- <section> - 代表文档中的一段或者一节；
- <nav> - 用于构建导航；
- <article> - 表示文档、页面、应用程序或网站中一体化的内容；
- <aside> - 代表与页面内容相关、有别于主要内容的部分；
- <hgroup> - 代表段或者节的标题；
- <header> - 页面的页眉；
- <footer> - 页面的页脚；
- <time> - 表示日期和时间；
- <mark> - 文档中需要突出的文字。
和采用css+div进行页面布局的方式相比，这些新标签明确的表现了页面元素的结构和含义。下面的代码展示了这样的一个示例：
<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>HTML5</title> <link rel="stylesheet" href="http://www.mamicode.com/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表单的示例：
<form> <p> <label for="email">电子邮箱：</label> <input type="email" required autofocus name="email" id="email" placeholder="您的电子邮箱"> </p> <p> <label for="username">用户名：</label> <input type="text" pattern="^/w{6,12}$" required name="username" placeholder="6到12位的英文字符"> <input type="search" placeholder="用户名搜索" autosave="www.yujie.com" results="5" name="username-search" id="username-search"> </p> <p> <label for="username-search">生日：</label> <input type="date" min="1980-01-01" max="2011-3-16" name="birthday" id="birthday" value="http://www.mamicode.com/1982-10-10"> </p> <p> <label for="blog">博客地址：</label> <input type="url" name="blog" placeholder="您的博客地址" id="blog"> </p> <p> <label for="mobile">手机：</label> <input type="number" name="mobile" pattern="^1[0-9]{10}$" id="mobile" placeholder="您的手机号"> </p> <p> <label id="label-working-year" for="working-year">工作年限：</label> <input type="range" min="1" step="1" max="20" name="slider" name="working-year" id="working-year" placeholder="您的工作年限" value="http://www.mamicode.com/3"> </p> <p> <label for="age">年龄：</label> <input type="number" name="age" id="age" value="http://www.mamicode.com/20" autocomplete="off" placeholder="您的年龄"> </p> <p> <label for="avatar">头像：</label> <input type="image" src="http://www.mamicode.com/user.png" mce_src="http://www.mamicode.com/user.png" name="avatar" id="avatar" placeholder="点击选择头像"> </p> </form> 示例中包含了email、search、date、url、range、number、image类型的输入框和required、autofocus、placeholder、pattern、autosave、results、min、max、step、autocomplete等新属性，它们简单到根据名字就可以揣测出用途。下面是效果图。
HTML5表单在各浏览器里的支持程度和表现并不一致，例如Search输入框目前只被Webkit内核浏览器支持，而日期弹出框和拖动条刻度仅被Opera支持。以上的标签类型和属性目前没有一个浏览器完美支持。
4、实用之美
HTML5的Web Worker、Web Socket、Web Storage等新API让很多后台的工作可以放到前端来处理，Web Worker解决Javascript单线程和阻塞的问题，相当于提供了分布式处理的框架；Web Socket提供了全双工的长连接通信， 利用它，我们可以实现微博消息推送、新邮件推送、实时游戏和聊天，减少了不必要的数据传输，提高了信息的实时性；Web Storage相当于前端的Memcached和数据库。
而HTML5的Canvas是最强大的API之一，可以动态生成图形、图像和动画，在HTML5游戏中使用的非常普遍。在下面的例子中，我将展示HTML5 Canvas之美：实现图像颜色渐变效果。
以前，我们在网站上显示灰度图像到彩色图像的渐变动画有两种实现方式：1、基于IE滤镜的方案，缺点是无法实现浏览器兼容；2、手动创建彩色图像的灰度版本。现在，利用HTML5的Canvas画布，我们可以高效简单的实现此动画效果。
将鼠标放在左边的图片上，图片颜色将从灰度渐变到彩色，一切就在眼前鲜活起来。
核心的Javascript代码如下：
// 加载时就进行处理 $(window).load(function(){ var img = $(‘#color-img‘); // 复制图像 img.clone().addClass(‘gray-img‘).css({"position": "absolute", "z-index": "2", "opacity": "0"}).insertBefore(img); img.attr(‘src‘, grayscale(img.attr(‘src‘))); // 图像的淡入 $(‘#color-img‘).mouseover(function(){ $(this).stop().animate({opacity: 1}, 1000); }) // 图像的淡出 $(‘.gray-img‘).mouseout(function(){ $(this).stop().animate({opacity: 0}, 1000); }); }); // 创建灰度版的图像 function grayscale(src) { // 取得canvas元素及其绘图上下文 var canvas = document.createElement(‘canvas‘); var ctx = canvas.getContext(‘2d‘); var imgObj = new Image(); imgObj.src = http://www.mamicode.com/src; >针对不支持的旧浏览器，我们可以使用Modernizr Javascript库或者原生Javascript检测当前浏览器是否支持，并提供替代性的解决方案：
if(!Modernizr.canvas) { // 或者使用!document.createElement(‘canvas‘).getContext $(document).ready(backupFunc);} 目前主要浏览器的新版本都提供Canvas标签的支持：
5、HTML5的不足
目前HTML5还有哪些不足之处？
1、安全：像之前Firefox 4的Web Socket和透明代理的实现存在严重安全问题，同时Web Storage、Web Socket这样的功能很容易被黑客利用，来盗取用户的信息和资料，另外HTTP的机制导致了Web应用安全性有所欠缺，这将在很长的时间内成为问题。
2、性能：某些平台上的引擎问题导致HTML5性能低下。同时在不加入GPU加速的情况下，HTML5处理复杂音视频、动画的性能不尽如人意。
3、完善性：HTML5还在成熟和发展中，像之前曾经支持的Web SQL Database，W3C已经决定不再维护。许多特性各浏览器的支持程度也不一样，而地理定位API在国内的前途还不清晰。
4、技术门槛：HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习，像Web Worker、Web Socket、Web Storage等新特性要求对于后台的技术需要有一定的了解，甚至需要深入了解其后面原理和逻辑，而Canvas要求视觉和图像算法的一些知识。传统的前端开发者需要掌握更多算法、视觉、后台甚至浏览器原理的知识，机遇的同时也是巨大挑战。
6、总结
上面的大多数不足是HTML5发展过程的中间状态导致的，从长期来看，浏览器厂商的支持、移动互联网的蓬勃发展使得HTML5的前景一片光明，开发者对此必须要要有清楚的认识和长远的目光，提前做好技术储备。
对于HTML5，我认为不仅要了解技术细节，还要从根本上理解HTML5的架构，从更高的层面上理解它的深层次含义，它的设计理念，你会发现它的架构之美，对于个人架构设计能力和境界提升有很大帮助。
Web应用程序和移动互联网是大势所趋，IE6终将消亡，Web和浏览器标准终将统一，HTML5就是道之所藏、美之所在，让我们一起迎接和拥抱HTML5的到来！
HTML5之美