文章描述：网页设计:CSS3、HTML5、JS和框架。

 如今大热的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了。