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

iefreer 发表于 2016-11-06 00:15:47

标签: 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和创意设计本身可能要更为重要。

possitive(3) negative(0) views3072 comments0
私信 收藏 分享
分享到

发送私信

最新评论

请先 登录 再评论.
相关文章
  • WebAssembly工作原理和JavaScript语言性能对比分析

    本文简单说明WebAssembly(简称wasm)工作原理和高性能的原由(和JavaScript相比)。不过需要提醒的是Wasm并非设计来完全替代JS,而是对JS的一个强大补充,JS中...

  • WebGL Roadmap

    Unity 5.0 shipped with a working preview of our WebGL technology in March this year. Since then, Google has disabled (by default) NPAPI support in the...

  • CSS3原生变量(Native Variables)新特性简介

    对Web开发者来说,一个盼望已久的特性是CSS终于支持原生变量了!
    变量是程序语言中用来解决代码重复和进行表达式计算的关键概念(想想数学方程式中的x)。...

  • ES6小知识:动态对象键(Dynamic Object Keys)语法简介

    在ES5,对象的键(key)总是被解释为字符串。ES6允许我们使用计算的值作为对象的键,使用方括号:[myKey]const

  • CSS3弹性布局弹性流(flex-flow)属性详解和实例

    弹性布局是CSS3引入的强大的布局方式,用来替代以前Web开发人员使用的一些复杂而易错hacks方法(如使用float进行类似流式布局)。其中flex-flow是flex-direction...

  • 使用HTML5 FileReader和Canvas压缩用户上传的图片

    手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力。因此在某些应用下(对图片要求不那么高)我们可以在客户端来压缩图片,然后再提交给服务器。总体...

  • Babylon.js入门教程和开发实例

    Babylon.js是一款WebGL开发框架。和Three.js类似。主要的技术区别是Three.js还试图回退兼容CSS 3D。Three.js是完全社区推动的,比Babylon.js要成熟些,而Babylon...

  • Three.js入门教程4 - 创建粒子系统动画

    嗨,又见面了。这么说我们已经开始学习Three.js了,如果你还没有看过之前三篇教程,建议你先读完。如果你已经读完前面的教程了,你可能会想做一些关于粒子的东西。让我们直面这个话题吧,每个人都爱粒子效果。不管你是否知道,你可以很轻易地创建它们。

  • 如何实现SVG clipPath自适应被裁剪对象

    CSS3中引入的clip-path(裁剪路径)属性是一个很强大的特性。
    clip-path的含义如下图所示,好比剪纸一样,你用剪刀沿着某条路径把目标对象(图像或元素)裁...

  • 如何使用CSS3/SCSS实现逼真的车窗雨滴效果

    在天气预报类的Web移动应用中,常常需要实现屏幕的雨滴效果,表示阴雨天气。感觉上比较神奇,其实想通了,这个效果的实现只需要一点物理知识和CSS3的简单变换。实现一个小雨滴首先雨滴是一个个小的椭圆形元素:.raindrop

  • 更多...