HardBirch

HTML5之美

时间:11-06-19 栏目:HTML5移动开发 作者:张飞不张,文采横飞 评论:59 点击: 22,028 次

    作者注:此文章原为2011年4月的《程序员》HTML5专刊所做,现刊登于此,以飨读者。

 

 

HTML5之美

    从HTML4诞生以来,整个互联网环境、硬件环境都发生了翻天覆地的变化,开发者期望标准统一、用户渴望更好体验的呼声越来越高。20年磨一剑,HTML5作为下一代Web标准,它的新特性正在每个新式浏览器的版本中快速的得到支持和体现。随着HTML5CSS3的发展和完善,Web应用程序正在逐渐的表现出桌面应用的性能和功能,和桌面应用之间的区别将越来越模糊。未来不能用HTML5来实现的功能将越来越少,未来绘图、视频编辑、3D建模等也将从单机软件转到浏览器上通过Web应用程序来实现。

    下文,我将结合实例,谈谈激动人心的HTML5之美。

 

1、语义之美

    语义化很美,在合适的地方使用合适的标签,把人和机器一视同仁。书写语义化的页面就像建造符合工业标准的建筑,阅读语义化的页面像阅读一本你熟识的优美著作。

    HTML5的语义化标签包括:

  • <section>-代表文档中的一段或者一节;
  • <nav>-用于构建导航;
  • <article>-表示文档、页面、应用程序或网站中一体化的内容;
  • <aside>-代表与页面内容相关、有别于主要内容的部分;
  • <hgroup>-代表段或者节的标题;
  • <header>-页面的页眉;
  • <footer>-页面的页脚;
  • <time>-表示日期和时间;
  • <mark>-文档中需要突出的文字。

    和采用css+div进行页面布局的方式相比,这些新标签明确的表现了页面元素的结构和含义。下面的代码展示了这样的一个示例:

 

     相当简单和清晰,我可以不添加任何注释,人和机器都明白它所要构建的结构和内容。

-->

    目前主要浏览器的新版本都支持HTML5语义化标签(下图从左到右依次为IEChromeFirefoxOperaSafariQQ浏览器5)。

-->

 

2、人性之美

    HTML5设计理念中的通用访问体现了人性化之美。通用访问包括可访问性、媒体中立和国际化支持三个概念。可访问性考虑了对残障用户的支持,媒体中立为所有的平台和终端上(例如AndroidiPhone的平台上)建立统一标准;而国际化的支持体现在不同的语言和书写习惯上。

    就像CSS3中对国际化的支持体现在padding-start,
padding-end
(在Chrome新版本的设置中心中可以看到它的应用)等新属性一样,HTML5引入了Ruby标签。Ruby标签允许为一个或者多个文本添加附加注释(其命名来源于Ruby字符),例如下面的代码:

 

    显示的文本如下:

    Ruby标签在中文、韩文和日文教科书和古文中非常有用,读者们可以方便了解文本的详细读音和含义。下面的诗句很美,而HTML5更美。

-->

    有趣的是在IEFirefoxOpera中复制粘贴上面的文本到编辑器中,会显示下面的文本,这是因为<rp>标签的特殊作用:允许在不支持Ruby标签的浏览器中优雅的降级,同时支持非格式化的复制和粘贴。

 

死生 (读音: qì ) (读音: kuò ) ,与子成说。执子之手,与子偕老。

 

    目前主要浏览器的新版本对于Ruby标签的支持程度如下:除FifrefoxOpera外均提供支持。

-->

 

3、简单之美

    大道至简,化繁为简是许多标准、规范、框架的终极目标。HTML5很好的诠释了这一点,例如以浏览器原生能力支持和代替复杂的Javascript代码、提供简单而强大的新API

    HTML5自身即跨浏览器的JS库,使得开发者的工作更容易:例如新的表单标签和属性、内置拖拽事件使得完全不需要Javascript的支持就能实现许多常用的功能。

    我们再来看HTML5表单,它实现了许多简单易用的原生属性和控件,可以轻松的构建强大的表单,帮我们节约大量的Javascript代码。下面是一个HTML5表单的示例:

 

    示例中包含了emailsearchdateurlrangenumberimage类型的输入框和requiredautofocusplaceholderpatternautosaveresultsminmaxstepautocomplete等新属性,它们简单到根据名字就可以揣测出用途。下面是效果图。

    HTML5表单在各浏览器里的支持程度和表现并不一致,例如Search输入框目前只被Webkit内核浏览器支持,而日期弹出框和拖动条刻度仅被Opera支持。以上的标签类型和属性目前没有一个浏览器完美支持。

4、实用之美

    HTML5Web WorkerWeb SocketWeb Storage等新API让很多后台的工作可以放到前端来处理,Web Worker解决Javascript单线程和阻塞的问题,相当于提供了分布式处理的框架;Web Socket提供了全双工的长连接通信, 利用它,我们可以实现微博消息推送、新邮件推送、实时游戏和聊天,减少了不必要的数据传输,提高了信息的实时性;Web Storage相当于前端Memcached和数据库。

    而HTML5Canvas是最强大的API之一,可以动态生成图形、图像和动画,在HTML5游戏中使用的非常普遍。在下面的例子中,我将展示HTML5 Canvas之美:实现图像颜色渐变效果。

    以前,我们在网站上显示灰度图像到彩色图像的渐变动画有两种实现方式:1、基于IE滤镜的方案,缺点是无法实现浏览器兼容;2、手动创建彩色图像的灰度版本。现在,利用HTML5Canvas画布,我们可以高效简单的实现此动画效果。

    将鼠标放在左边的图片上,图片颜色将从灰度渐变到彩色,一切就在眼前鲜活起来。

    核心的Javascript代码如下:

 

    针对不支持的旧浏览器,我们可以使用Modernizr Javascript库或者原生Javascript检测当前浏览器是否支持,并提供替代性的解决方案:

 

    目前主要浏览器的新版本都提供Canvas标签的支持:

5HTML5的不足

    目前HTML5还有哪些不足之处?

    1、安全:像之前Firefox
4
Web Socket和透明代理的实现存在严重安全问题,同时Web StorageWeb Socket这样的功能很容易被黑客利用,来盗取用户的信息和资料,另外HTTP的机制导致了Web应用安全性有所欠缺,这将在很长的时间内成为问题。

    2、性能:某些平台上的引擎问题导致HTML5性能低下。同时在不加入GPU加速的情况下,HTML5处理复杂音视频、动画的性能不尽如人意。

    3、完善性:HTML5还在成熟和发展中,像之前曾经支持的Web SQL DatabaseW3C已经决定不再维护。许多特性各浏览器的支持程度也不一样,而地理定位API在国内的前途还不清晰。

    4、技术门槛:HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习,像Web WorkerWeb SocketWeb Storage等新特性要求对于后台的技术需要有一定的了解,甚至需要深入了解其后面原理和逻辑,而Canvas要求视觉和图像算法的一些知识。传统的前端开发者需要掌握更多算法、视觉、后台甚至浏览器原理的知识,机遇的同时也是巨大挑战。

6、总结

    上面的大多数不足是HTML5发展过程的中间状态导致的,从长期来看,浏览器厂商的支持、移动互联网的蓬勃发展使得HTML5的前景一片光明,开发者对此必须要要有清楚的认识和长远的目光,提前做好技术储备。

    对于HTML5,我认为不仅要了解技术细节,还要从根本上理解HTML5的架构,从更高的层面上理解它的深层次含义,它的设计理念,你会发现它的架构之美,对于个人架构设计能力和境界提升有很大帮助。

    Web应用程序和移动互联网是大势所趋,IE6终将消亡,Web和浏览器标准终将统一,HTML5就是道之所藏、美之所在,让我们一起迎接和拥抱HTML5的到来!

声明: 本文由( 张飞不张,文采横飞 )原创编译,转载请保留链接: HTML5之美

HTML5之美:目前有59 条留言

  1. 0楼
    heqintry:

    [e03]

    2011-06-20 08:51 [回复]
  2. 0楼
    wxyuan90:

    [e02]一看到某个浏览器的图标混进所谓主要浏览器的行列里瞬间没胃口了[e09][e09]

    2011-06-20 15:56 [回复]
  3. 0楼
    dbzhang800:

    回复 wxyuan90:恩,我也觉得这个比较纳闷。

    2011-06-20 16:38 [回复]
  4. 0楼
    beagle4ce:

    [e01][e03]不错,支持LZ话说HTML5是发展方向呀

    2011-06-20 16:48 [回复]
  5. 0楼
    mcpll:

    写得不错

    2011-06-20 18:20 [回复]
  6. 0楼
    lspwushu:

    [e01]

    2011-06-20 21:06 [回复]
  7. 0楼
    except10n:

    回复 dbzhang800: [e04]

    2011-06-20 23:36 [回复]
  8. 0楼
    whui0110:

    [e01][e01] html5+javascript才是王道

    2011-06-21 01:57 [回复]
  9. 0楼
    qingyue:

    回复 wxyuan90:的确如此。[e07]

    2011-06-21 08:07 [回复]
  10. 0楼
    Joinzheng:

    还要一段时间才成熟,要等待!

    2011-06-21 08:33 [回复]
  11. 0楼
    abccdsw:

    我其实是很葱白LZ的,虽然我是开发代码部分的,但是却更喜欢前端,可惜我的前端差的……o(︶︿︶)o 唉

    2011-06-21 09:31 [回复]
  12. 支持,学习

    2011-06-21 09:32 [回复]
  13. 0楼
    Could:

    真tmd强大!期待html5时代赶快到来。

    2011-06-21 09:34 [回复]
  14. 0楼
    Could:

    真t_m_d强大!期待html5时代赶快到来。[e01]

    2011-06-21 09:35 [回复]
  15. 0楼
    wangyi3330:

    qq浏览器不是用的ie内核吗?怎么能单摆出来呢

    2011-06-21 13:07 [回复]
  16. 介绍得很好,确实强大啊!毕竟互联网发展了5000天,不仅后端要新技术、新架构、新服务;前端也要减少碎片,简化开发,提升用户体验!

    但有一点,HTML终究是标记语言,语义的东西表示还是不丰富。

    2011-06-21 16:16 [回复]
  17. 0楼
    allen12345:

    如果浏览器应用有了桌面程序的功能,恐怕会有一大批人受伤了,一打开网页,就把你硬盘给格式化了.

    2011-06-21 16:45 [回复]
  18. 0楼
    corn8888:

    回复 s86856852:回复 sunjiankirk:我不知道、不了解html5

    2011-06-21 16:55 [回复]
  19. 0楼
    corn8888:

    回复 corn8888:我不知道、不了解html5

    2011-06-21 16:56 [回复]
  20. 0楼
    zhusongd:

    腾讯TT是怎么混进主流浏览器的?

    2011-06-21 17:07 [回复]
  21. 功能还真不是一般强大

    2011-06-21 17:12 [回复]
  22. 0楼
    cppmule:

    A部分:
    博主的文章写得不错![e03]希望博主以后再接再厉,多多奉献好的文章。让我们一饱眼福。
    另外感慨,国内似乎就没有一家完全自主知识产权的浏览器(也就是包括浏览器内核的自主研发)。希望国内能出现一批,振兴中华的基础软件研发机构,公司,包括开源祖组织!
    看到,

    2011-06-21 23:41 [回复]
  23. 0楼
    cppmule:

    B:
    ,目前的基础级软件几乎都被进口货一统天下。而国内的软件开发者大部分都是站在别人的肩膀上,大量的(java,.net,php…)这样下去,担心人才会断代。陷入了对国外基础软件依赖的恶心循环。。。
    希望有人能改变这一局面!

    2011-06-21 23:48 [回复]
  24. 0楼
    cppmule:

    A:
    博主的文章写得不错![e03]希望博主以后再接再厉,多多奉献好的文章。让我们一饱眼福。
    另外感慨,国内似乎就没有一家完全自主知识产权的浏览器(也就是包括浏览器内核的自主研发)。希望国内能出现一批,振兴中华的基础软件研发机构,公司,包括开源祖组织!
    看到

    2011-06-21 23:48 [回复]
  25. [e01]

    2011-06-22 13:57 [回复]
  26. 回复 cppmule:基础研发机构,有人出钱吗?开什么玩笑,这种不盈利的东西,你觉得除了国家投入资金外,有人会做吗?做了能不饿死吗,&lt;br&gt;/n也不看看现在是什么世道

    2011-06-22 13:58 [回复]
  27. [e01]

    2011-06-22 14:42 [回复]
  28. 0楼
    EeRoo:

    [e03]

    2011-06-22 15:37 [回复]
  29. 0楼
    wy811007:

    回复 s86856852:你知道啥啊 什么自己开发 那个都是chrome的开放源码改地

    2011-06-22 17:25 [回复]
  30. 等待完美支持吧

    2011-06-22 21:04 [回复]
  31. 0楼
    coolesting:

    回复 wxyuan90:呵呵, 不看评论不知道, 看了就知道什么情况[e04][e04]

    2011-06-23 00:59 [回复]
  32. [e03]

    2011-06-23 06:49 [回复]
  33. [e06][e01]

    2011-06-23 08:20 [回复]
  34. 0楼
    qincidong:

    前途无量。。。

    2011-06-23 10:38 [回复]
  35. 0楼
    ZHUB329:

    [e01]

    2011-06-24 08:52 [回复]
  36. 0楼
    arvin_h:

    [e01]兰州写得相当不错,让我这个没接触过HTML5的也对其有一个大致的了解了~

    2011-06-24 17:59 [回复]
  37. 算什么呢,我认为html的动画部分功能应该是给美工用的。程序员来做这个吗?太扯淡了。。。

    2011-06-27 19:54 [回复]
  38. 0楼
    sys_object:

    回复 wxyuan90:[e04]笑而不语

    2011-06-28 12:09 [回复]
  39. 0楼
    sys_object:

    LZ写的很好呀,让我对HTML5有了更加多的认识,不错,赞一个![e03]

    2011-06-28 12:09 [回复]
  40. 写得非常好,让我又了解了一样新东东。。。。

    2011-06-28 12:52 [回复]
  41. 0楼
    ghw_001:

    怎么个情况?

    2011-06-29 10:50 [回复]
  42. 0楼
    xuruiyang:

    有时间会学习的!

    2011-06-29 22:31 [回复]
  43. 成熟了再去学- -! 会火的。。。

    2011-06-29 22:50 [回复]
  44. 0楼
    netseif:

    回复 s86856852:自己开发的??是修改别人的吧??我记得是WebKit啊还有搜狗?

    2011-06-30 17:29 [回复]
  45. 0楼
    haiguige:

    [e01]

    2011-07-01 08:42 [回复]
  46. 0楼
    duofen:

    bianhua tai da le

    2011-07-01 16:21 [回复]
  47. 0楼
    hohoqi:

    第一段代码中, body 标签掉了。

    2011-07-02 20:08 [回复]
  48. 唉 想学 但是……

    2011-07-03 11:51 [回复]
  49. MARK 学习一下
    IE在国内消失的话
    估计还有很长一段时间。。。。

    2011-07-04 10:04 [回复]
  50. [reply]whui0110[/reply]
    王道是html5+css3好不好。。。。

    2011-07-04 15:45 [回复]
  51. 0楼
    zheng616:

    没觉得有啥子美,,语义语言而已。。。

    2011-07-05 08:12 [回复]
  52. 0楼
    tdy_007:

    这种东西还是学习比较好 以后会火的

    2011-07-28 16:59 [回复]
  53. 不错 正在研究!

    2011-11-22 22:17 [回复]
  54. 0楼
    happpyx:

    期待html5+css3的普及

    2011-12-28 21:24 [回复]
  55. 0楼
    dlmult:

    支持HTML5的发展。

    2011-12-29 08:52 [回复]
  56. 0楼
    clzhan:

    学习

    2012-01-29 15:07 [回复]
  57. 正在开始学,万事起头难,坚持

    2012-03-24 17:43 [回复]
  58. 0楼
    mijiyucen:

    收藏了,(*^__^*)

    2012-03-25 21:53 [回复]
  59. 0楼
    harword520:

    顶 个

    2012-04-30 16:28 [回复]

发表评论


QQ群互动

Linux系统与内核学习群:194051772

WP建站技术学习交流群:194062106

魔豆之路QR

魔豆的Linux内核之路

魔豆的Linux内核之路

优秀工程师当看优秀书籍

优秀程序员,要看优秀书!

赞助商广告

友荐云推荐