HTML5的主要技术组成部分及功能介绍

HTML5的发展越来越迈向成熟，很多的应用已经逐渐出现在你我日常生活中了，不只让传统网站上的互动Flash逐渐的被HTML5的技术取代，更重要的是可以透过HTML5的技术来开发跨平台的手机软件，这也让许多开发者感到十分的兴奋！

当你开始想要学习，或者试图想要投入相关的开发时，由于HTML5的技术还在持续发展、进化当中，学习的资源也都比较零散，较难有一个整体的方向，在本篇文章中，马海祥将会为大家介绍一些HTML5的主要技术组成，并且提供一些学习资源让大家参考。

1、HTML5的包含部分

自1999年以后HTML 4.01已经改变了很多，今天，在HTML 4.01中的几个已经被废弃，这些元素在HTML5中已经被删除或重新定义（具体可查看马海祥博客《 HTML5和HTML4的区别：HTML5新标签的用法解释》的相关介绍）。

为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式处理，和几个api拖放元素，定位，包括网页应用程序缓存，存储，网络工作者等。

一般广义而言的HTML5则包含了HTML、CSS和JavaScript三个部分，不单单只是HTML部分而已，CSS3和JavaScript也有许多的创新，让整个网页程序功能更加缤纷。

2、脱机功能

HTML5透过JavaScript提供了数种不同的脱机储存功能，相对于传统的Cookie而言有更好的弹性以及架构，并且可以储存更多的内容。

（1）、WebStorage：比Cookies更大、更有弹性的的储存。

（2）、Web SQL Database：本地端的SQL数据库。

（3）、Indexed DB：Key-value的本地数据库。

（4）、Application Cache：将部分常用的网页内容cache起来。

3、实时通讯

以往网站由于HTTP协议以及浏览器的设计，实时的互动性相当的受限，只能使用一些技巧来“仿真”实时的通讯效果，但HTML5提供了完善的实时通讯支持。

（1）、WebSocket：实时的socket联机。

（2）、Web Workers：以往JavaScript都是single thread，透过Worker可以有多个运算。

（3）、Notifications：原生的提示讯息，类似像OS X的Growl提示。

4、档案以及硬件支持

不知道大家有没有发现，在Gmail等新的网页程序当中，已经可以透过拖拉的方式将档案作为邮件附件？这就是这部份HTML5档案的功能中的Dragn Drop和File API。

（1）、Dragn Drop：HTML元素的拖拉。

（2）、File API：读取用户本机计算机的内容。

（3）、Geolocation：地理定位。

（4）、Device orientation：手持装置的方向。

（5）、Speech input：语音输入。

5、语义化

语义化的网络是可以让计算机能够更加理解网页的内容，对于像是搜索引擎的优化（SEO）或是推荐系统可以有很大的帮助（对于SEO优化的优势，具体可查看马海祥博客《 以SEO的角度来分析HTML5与搜索引擎优化的联系》的相关介绍）。

（1）、New tags：新的标签，像是header、section等。

（2）、Application tags：也是新的标签，像是meter、progress等。

（3）、Microdata：加入语义的数据让搜索引擎等网站可以正确显示。

（4）、Form type：form可以加入的type便多了，包含email和tel等属性，浏览器会协助进行数据格式的验证。

6、多媒体

Audio、Video的卷标支持以及Canvas的功能应该是大家对于HTML5最熟悉的部份了，也是许多人认为Flash会被取代的主要原因。

（1）、Audio video：影片和音乐的原生播放支持。

（2）、Canvas：2D的绘图功能支持。

（3）、Canvas 3D：3D的绘图功能支持。

（4）、SVG：向量图支援。

7、CSS 3技术

CSS 3支持了字体的嵌入、版面的排版，以及最令人印象深刻的动画功能。

（1）、Selector：更有弹性的选择器。

（2）、Webfonts：嵌入式字体。

（3）、Layout：多样化的排版选择。

（4）、Stlying radius gradient shadow：圆角、渐层、阴影。

（5）、Border background：边框的背景支持。

（6）、Transition：组件的移动效果。

（7）、Transform：组件的变形效果。

（8）、Animation：将移动和变形加入动画支持。

8、JavaScript技术

HTML5在比较JavaScript的基本面也新增了DOM的API、和浏览器上下页的纪录修改。

（1）、DOM API：更方便的查询DOM组件。

（2）、History API：浏览器的上下页内容修改，方便AJAX可以保留浏览记录。

截至目前而言，主流的网页浏览器Firefox 5、Chrome 12和Safari 5都已经支持了许多的HTML5标准，而且目前最新版的IE 10也支持了许多HTML5标准，随着使用者陆续升级到新版的浏览器，开发者应该在现在就可以着手开发！

而对于旧的浏览器兼容性而言，马海祥也曾专门撰文介绍过旧版ie浏览器的兼容功能，对此，大家可查看一下马海祥博客《 如何解决IE6/IE7/IE8浏览器不兼容HTML5新标签的问题》的相关介绍。

而Modernizer也是一个相当重要的JavaScript函数库，提供开发者轻松的方式判别目前使用者的浏览器是否有支持特定的HTML5功能。

马海祥博客点评：

从可用性的角度上看，HTML5可以更好的促进用户于网站间的互动情况，多媒体网站可以获得更多的改进，特别是在移动平台上的应用，使用HTML5可以提供更多高质量的视频和音频流。

到目前为止，事实就是iPhone和iPad将不会支持FLASH，同时ADOBE公司也在近期公开声明将停止FLASH基于移动平台的开发，现在我们已经可以这么说：移动平台日后视频音频是HTML5的天下！