通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质
常常听到人们对于HTML5的讨论，看了页面头部这个那个就是Html5，误认为HTML5只是新增些标签“而已”，学完了W3School似乎就理解了。实际上很多从业人员并没有深入理解业界为什么要推出HTML5系列技术标准，为什么HTML5代表了下一代网页乃至移动应用技术。这里我们通过实际的例子来说明HTML5不是想象中的那么单薄（尽管还不那么成熟，还依赖于标准和浏览器的进一步发展），而是一本厚厚的需要长期学习的长篇巨著，HTML5甚至使得技术含量的天平在从后端向前端工程师倾斜，对于整个互联网行业的结构性影响都是非常深远的。
HTML5
HTML5不只是简化了协议声明，添加了若干标签和API，其核心目标是把网页变成富媒体，最重要的就是给了你随心所欲的画布（canvas），Web再也不是枯燥的文本内容和使用JS制作的简单DOM变化效果，前端工程师利用数学知识可以成为网页魔法师（艺术家）。
http://wow.techbrood.com/fiddle/26587
http://wow.techbrood.com/fiddle/12892
CSS3
CSS3的核心改变在于引入了动画和特效，再也不是静态的样式，你可以利用filter、animation、gradient、blend-mode、shadow等特性制作出PS都做不出来的艺术动画！还有一个重要特性是媒体查询，用来支持响应式设计。另外CSS3/4在选择器（selector）上也新增了很多规则（如属性选择器）。
http://wow.techbrood.com/fiddle/28386
http://wow.techbrood.com/fiddle/28385
SVG
SVG的核心是几何图形，为网页引入了矢量图，通过矢量图的操作，可以实现很棒的变形动画特效，
HTML5支持内嵌SVG代码，而CSS3也可以操作SVG元素，这使得SVG+CSS3结合起来可以实现非常丰富的矢量路径动画。
http://wow.techbrood.com/fiddle/14579
http://wow.techbrood.com/fiddle/16689
WebGL
WebGL的核心很简单，就是把网页从2D变成3D展示和交互，乃至于支持虚拟现实。（CSS3也有3D效果，但是WebGL是硬件加速的！）
http://wow.techbrood.com/fiddle/11465
http://wow.techbrood.com/fiddle/14101
ReactJS/AngularJS等框架
大公司的前端工程化工具，通过组件化规范化的方式试图“简化”Web编程，但需要提醒的是大公司工具往往是小团队的坑。
在用户需求更为灵活和个性化的中小项目市场，关注HTML5规范和创意设计本身可能要更为重要。
http://wow.techbrood.com/fiddle/30186
http://wow.techbrood.com/fiddle/27762
最新文章
- svn 架设
- 发送http请求get方法
- (转) Graph-powered Machine Learning at Google
- load data ERROR 1197 (HY000)错误
- iOS开发之网络编程--5、NSURLSessionUploadTask+NSURLSessionDataDelegate代理上传
- python之lxml(xpath)
- 能在手机播放的Flash代码
- VisualStudio2013&VS2015内置SQLServer入门 （三）
- IIS 7.5 配置伪静态
- python 执行shell命令
- shell基础(转)
- C#语言基础——定义变量、变量赋值、输入输出
- 痞子衡嵌入式：串口调试工具Jays-PyCOM诞生记（5）- 软件优化
- CentOS6.8下MySQL数据库忘记root密码解决方法
- [转]delphi 有授权许可的字符串拷贝函数源码
- eclipse-Debug调试操作
- java核心技术卷1知识点
- indexof()函数
- CVE-2012-0158个人分析
- oracle 归档空间满的解决办法