HTML5之美

    作者注:此文章原为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表单的示例:

<textarea cols="50" rows="15" name="code" class="c-sharp">&lt;form&gt; &lt;p&gt; &lt;label for="email"&gt;电子邮箱:&lt;/label&gt; &lt;input type="email" required autofocus name="email" id="email" placeholder="您的电子邮箱"&gt; &lt;/p&gt; &lt;p&gt; &lt;label for="username"&gt;用户名:&lt;/label&gt; &lt;input type="text" pattern="^/w{6,12}$" required name="username" placeholder="6到12位的英文字符"&gt; &lt;input type="search" placeholder="用户名搜索" autosave="www.yujie.com" results="5" name="username-search" id="username-search"&gt; &lt;/p&gt; &lt;p&gt; &lt;label for="username-search"&gt;生日:&lt;/label&gt; &lt;input type="date" min="1980-01-01" max="2011-3-16" name="birthday" id="birthday" value="1982-10-10"&gt; &lt;/p&gt; &lt;p&gt; &lt;label for="blog"&gt;博客地址:&lt;/label&gt; &lt;input type="url" name="blog" placeholder="您的博客地址" id="blog"&gt; &lt;/p&gt; &lt;p&gt; &lt;label for="mobile"&gt;手机:&lt;/label&gt; &lt;input type="number" name="mobile" pattern="^1[0-9]{10}$" id="mobile" placeholder="您的手机号"&gt; &lt;/p&gt; &lt;p&gt; &lt;label id="label-working-year" for="working-year"&gt;工作年限:&lt;/label&gt; &lt;input type="range" min="1" step="1" max="20" name="slider" name="working-year" id="working-year" placeholder="您的工作年限" value="3"&gt; &lt;/p&gt; &lt;p&gt; &lt;label for="age"&gt;年龄:&lt;/label&gt; &lt;input type="number" name="age" id="age" value="20" autocomplete="off" placeholder="您的年龄"&gt; &lt;/p&gt; &lt;p&gt; &lt;label for="avatar"&gt;头像:&lt;/label&gt; &lt;input type="image" src="user.png" mce_src="user.png" name="avatar" id="avatar" placeholder="点击选择头像"&gt; &lt;/p&gt; &lt;/form&gt;</textarea> 

    示例中包含了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 4Web 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的到来!

  • 17
    点赞
  • 103
    收藏
    觉得还不错? 一键收藏
  • 52
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 52
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值