常常听到人们对于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

通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质的更多相关文章

  1. HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果

    首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息.大家如果制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放 ...

  2. HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相册

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...

  3. HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相冊

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...

  4. HTML5+CSS3整体回顾

    http://blog.poetries.top/2016/10/19/HTML5+CSS3%E5%9F%BA%E7%A1%80%E5%9B%9E%E9%A1%BE%20/ 这篇文章主要总结H5的一些 ...

  5. HTML5+CSS3特效设计集锦

    20款CSS3鼠标经过文字背景动画特效 站长之家 -- HTML5特效索引 爱果果h5酷站欣赏  30个酷毙的交互式网站(HTML5+CSS3) 轻松搞定动画!17个有趣实用的CSS 3悬停效果教程 ...

  6. 使用Modernizr探测HTML5/CSS3新特性（转载）

    转载地址:http://www.cnblogs.com/TomXu/archive/2011/11/18/detecting-html5-css3-features-using-modernizr.h ...

  7. 深入理解HTML5：语义、标准与样式（勇猛精进早登大师殿堂创最优品质交互）

    深入理解HTML5:语义.标准与样式(勇猛精进早登大师殿堂创最优品质交互) [美]布拉德福(Bradford,A.) [美]海涅(Haine,P.)著 高京译 ISBN 978-7-121-20552 ...

  8. HTMl5/CSS3/Javascript 学习推荐资源

    HTMl5/CSS3/Javascript 学习推荐资源 前端的定义应该是数据内容的展示,在国内大家都觉得前端只是HTML+CSS+Javascript,但是实际上与展示有关的都是前端,所以Ruby/ ...

  9. HTML5/CSS3(PrefixFree.js) 3D文字特效

    之前在园子里看到一个HTML5/CSS3的文字特效(这里),觉得挺好玩的所以小小的研究了下,不过发现代码都是针对webkit以及FF的所以IE跪了. Runjs 我将示例中的代码进行了精简,后来发现C ...

随机推荐

  1. 《挑战程序设计竞赛》2.5 最短路 AOJ0189 2249 2200 POJ3255 2139 3259 3268（5）

    AOJ0189 http://judge.u-aizu.ac.jp/onlinejudge/description.jsp?id=0189 题意 求某一办公室到其他办公室的最短距离. 多组输入,n表示 ...

  2. IO流入门-第八章-BufferedWriter

    BufferedWriter基本用法和方法示例 import java.io.*; public class BufferedWriterTest01 { public static void mai ...

  3. SOE不能进入断点调试

    一.前言 任何程序开发,如果不能进入断点调试,是非常的痛苦的. 如果有过SOE开发经验的人都知道,SOE开发过程中调试是非常麻烦的.任何在SOE开发模板中的修改都需要重新编译工程,重新生成.soe 文 ...

  4. 查找文件路径find

    查找文件路径find              1.按照文件名查找 (1)find / -name httpd.conf #在根目录下查找文件httpd.conf,表示在整个硬盘查找 (2)find ...

  5. [NOIP2018TG]保卫王国

    [NOIP2018TG]保卫王国 BZOJ luogu 当动态dp模板题写的,(全集-最大点权独立集)不能放军队的+inf,必须放军队-inf即可 注意矩阵乘法的顺序问题 #define ll lon ...

  6. threading模块、ThreadLocal

    一.threading模块 1.线程对象的创建 1.1 Thread类直接创建 import threading import time def countNum(n): # 定义某个线程要运行的函数 ...

  7. (转)Android工程出现 java.lang.NoClassDefFoundError错误解决方法

    在Eclipse中,导入Android工程,工程没有报错,运行时,出现 java.lang.NoClassDefFoundError类没有找到的错误.从问题上可以看出是导入包出错的原因.遂百度加谷歌. ...

  8. android应用程序优化之布局优化

    在我们开发APP时不仅要在代码实现上.做到对App的优化,而在我们的界面布局也有很多要优化的地方,假设布局写的非常low的话,系统载入布局的速度会十分的慢,使得用户的体验非常的不好.这篇文章主要是从我 ...

  9. Python 模块之 xlrd (Excel文件读写)

    # 1. 导入模块 import xlrd # 2.打开Excel文件读取数据 data = xlrd.open_workbook('excelFile.xls') # 3. 使用技巧 # 3.1 获 ...

  10. SQL SERVER自动化运维系列

    SQL SERVER自动化运维系列 转自:https://www.cnblogs.com/zhijianliutang/p/5001142.html 本系列为SQL SERVER自动化运维的一些操作技 ...