admin管理员组

文章数量:1660166

为了让 HTML5 不再神秘,为了帮助犹豫不决的设计师和开发工程师跑步跟上快速发展的浪潮,我列出了为什么要马上使用 HTML5 的十大理由。

十大理由马上使用HTML5

你还没有用 HTML5 吗? 我想你有你的道理:它还没有被全面采纳;IE 不支持;你觉得现在就挺好,或是你还是热衷于写严格的 XHTML 代码。HTML5 是网络行业所需要的一场革命。事实上,不管你是否情愿,它就是未来。HTML5 并不深奥,用起来也不难。尽管它的标准还没有被完全采纳,还是有足够的理由马上就开始用它!——对,就是在你刚读完这篇文章的时候!

现在有很多的文章都在号召使用 HTML5,并大力宣传它的的好处。是的,这又是新的一篇。有这么多的文章,有苹果的推动,加上 Adobe 围绕它推出新的开发工具,而越来越多的网站投入其中,我还是要劝说那些出于各种原因迟迟未动或根本不想转变的设计师和工程师同行们。我想主要的问题在于,对很多人来说,它看起来还是一个神秘的事物。

为了揭开 HTML5 神秘面纱,帮助那些步履缓慢的前端后端人士赶上潮流,我列出了为什么要马上使用 HTML5 的十大理由。对于已经在用 HTML5 的人来说,这些可能并没有什么新鲜的,但希望还是它们对你在与同行间交流能有所启发。这里我用了倒数的方法,从第十项开始。

10 – 易用性

accessibility

有两个主要原因使得 HTML5 制作的网站更易用:语义和 ARIA。新的 HTML 标签,像

ARIA 是一个 W3C 标准,主要用来给 HTML 文档中的元素指定特殊的 “角色”——通过角色的属性从底层为页面创建重要的标记,如页眉、页脚、导航或是文章。这在以前是被忽略的,也没有人去用,原因是它之前不是合法有效的。不过,HTML5 现在会去验证这些属性使其合法。另外,HTML5 有优先的内置角色,这使得分配角色变得轻而易举。更多关于 HTML5 和 ARIA 的深入讨论可以访问 WAI。

9 – 视频和音频支持

忘掉 Flash 播放器和其它的第三方媒体播放器吧,用新的 HTML5 和 标签让你的视频和音频更容易播放。以前想要让你的媒体正确播放就如恶梦一般。你需要用 和 标签,还得设置一大堆的参数,才能让内容可见并正常工作。你的媒体标签会变成一大堆混乱又让人困惑的代码。HTML5 的音视频标签基本上就像对待图像一样:。可是像高度、宽度、自动播放这些参数怎么办?不心担心,就像定义其它 HTML 元素那样就行了:。

就是这么出奇的简单。不过,因为旧的老爷级浏览器不喜欢我们的 HTML5 朋友,你还需要添上一些代码来让他们正常工作——这也比 和 标签来得简单:

1

2

3

4

5

参考资料:

HTML5 Audio and Video: What you Must Know

Audio and Video processing in HTML5

How to Make Your Own Video Player On HTML5 Video

Using HTML5 Video and Audio in Modern Browsers

Browserscene: Creating a 3D sound visualiser with WebGL and HTML5 audio

8 – Doctype 文档类型

html5 doctype

1

没错,doctype,就这么多了。够简单吧?不需要拷贝粘贴一串看不明白的长代码,也不需要在 head 里加带各种标签属性。只要简单输入就好了。更重要的是,除了简单之外,它可以在各种浏览器下工作,即使是人人都拿它没有办法的 IE6。

7 – 更简洁的代码

如果你钟情于书写简单、优雅、易读的代码,那 HTML5 最适合不过。HTML5 可以让你写出简洁的,描述性的代码;带有语义的代码让你轻易地将内容与样式分开。看看下面这段简单的,带导航的 header 代码:

1

2

3

4

5

6

7

8

9

10

Header Text

    • Link
    • Link
    • Link
    • 够简洁了吗?用 HTML5,还能更加简化,并有更明晰的含义:

      1

      2

      3

      4

      5

      6

      7

      8

      9

      10

      Header Text

      • Link
      • Link
      • Link
      • 使用 HTML5,你可以用语义来描述你的内容,从而治好你的 div 和 class 强迫症。以前你得为所有的内容逐一定义 div,然后加上描述内容的 id 或者类。现在采用

        、 、
        、 和

        本文标签: