通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质

常常听到人们对于HTML5的讨论，看了页面头部这个那个就是HTML5，误认为HTML5只是新增些标签“而已”，学完了W3School似乎就理解了。实际上很多从业人员并不理解业界为什么要推出HTML5系列技术标准，为什么HTML5代表了下一代网页技术。这里我们通过实际的例子来说明HTML5不是想象中的那么单薄，而是一本厚厚的需要长期学习的长篇巨著，HTML5甚至使得技术含量的天平在从后端向前端工程师倾斜。（这里且忽略websocket/webworker这类偏幕后的内容）。

HTML5

HTML5不只是简化了协议声明(标签语法)，添加了若干标签和API，其核心目标是把网页变成富媒体，最重要的就是给了你随心所欲的画布（canvas），Web再也不是枯燥的文本内容和使用JS制作的简单DOM变化效果，前端工程师利用数学知识可以成为网页魔法师（艺术家）。

CSS3

CSS3的核心改变在于引入了动画和特效，再也不是静态的样式，你可以利用filter、animation、gradient、shadow、blend制作出PS都做不出来的电子艺术！你可以撇开PS来制作动态的特效！CSS3还有一个重要特性是媒体查询，用来支持响应式设计。

SVG

SVG的核心是几何图形，为网页引入了矢量图，通过矢量图的操作，可以实现很棒的变形动画特效。

SVG已经15岁了，只不过在HTML5里面用起来更方便，和CSS3的交互也更方便。

注意SVG的动画部分行将废弃，将使用统一的Web Animation API来代替。

WebGL

WebGL的核心很简单，就是把网页从2D变成3D展示和交互。（CSS3也有3D效果，但是WebGL是硬件加速的！）

ReactJS/AngularJS等框架

大公司的前端工程化工具，通过组件化规范化的方式试图“简化”Web编程，但需要提醒的是大公司工具往往是小团队的坑。

在用户需求更为灵活和个性化的中小项目市场，关注HTML5和创意设计本身可能要更为重要。