HTML5 logo
还没用过HTML5,对吧?我想你可能有充分的理由,比如:它还没有被采用;它不支持IE;你不喜欢你的网站有“用户”;你不喜欢赶时髦,或者你只是热情在爱写严格的XHTML代码。HTML5是网页技术需要的一场革命,不管你喜欢或是不喜欢,事实上,它终究是网页的未来,这是你所阻止不了的。HTML5并不是很难使用或理解,即使它没有完全采纳,但仍有充足的理由开始使用它。而且,就是现在-当你读完这篇文章的时候。

有很多文章吹捧HTML5的使用,并赞扬它的好处,这篇文章也是其中之一。我们有所有这些文章,苹果公司的推动,而且Adobe围绕它打造出新的开发产品,还有这么多纯HTML5的网站。然而还是有很多网站开发者,设计师,前段工程师因为种种原因并没有采纳这项技术。我认为主要问题是,对于大多数人它仍然像个神秘生物。对许多人来说,它的感觉更像是变形金刚这种不可思议的东西,能够激发人们的想象力,但使用起来还是不够踏实。其实你想错了,其实它是非常实用!这可不像是最新的奔驰概念车,从一个展厅拉到另一个展厅的巡回展览会。而像是那种在马路载客上的交通工具。

为了进一步揭秘HTML5,帮助那些淡定的设计人员和开发人员改变这种思维模式,我要罗列十个的原因去阐述一个问题–“为啥现在就要用HTML5?”。对于那些已经使用过HTML5的,这十项描述可能略显老旧,没有什么新东西或者说没有突破性的意见,但我希望它能鼓励你去和他人分享HTML5的好处。那现在就开始倒数为什么使用HTML5的十大原因之十 – “无障碍”。

10 – 无障碍

HTML5更容易去创建无阅读障碍(可读性更强)的网站,主要有两个原因:语义丰富和ARIA。新的html标题标签(有些现在已经能用了),像<footer>,<nav>,<section>,<aside>等,他们允许屏幕阅读器更方便地访问内容。此前,你的屏幕阅读器有没有办法确定一个给定的<div>标签到底是什么,即使你分配一个ID或类。有了新的语义标记,屏幕阅读器可以更好地检查HTML文档,并为使用这些标签的页面创建一个更好的体验。

ARIA是一个W3C规范,主要是用来在HTML文档中指定特定的“角色”,有了角色属性,我们便可以在页面上轻松创建重要的着陆点:比如页眉,页脚,导航或文章。在这一属性生效前,这是一直被人忽视的一个块,但是,HTML5将验证这些属性。此外,HTML5将使角色属性有效化。如果想了解更多HTML5和ARIA深入的讨论,请访问https://www.w3.org/WAI/intro/aria。

9 – 视频和音频支持

忘掉那些Flash Player和其他第三方媒体播放器吧,利用<video> 和 <audio>等标签,可以让你的视频和音频能够直接在HTML5中被访问。以前,让那些媒体正常有序播放简直就像一场噩梦,你不得不使用<EMBED>和<OBJECT>等标记,还要配置一大堆参数来让它正确播放和显示。所谓的媒体标签就是这些讨厌的,混乱的大块代码段。HTML5的视频和音频标签基本和插入图片文件的方法一样; <video src=”url”/>。那问题是,所有那些参数,如高度,宽度和自动播放怎么去配置呢?不用担心,只需要要在标签中定义这些属性,就像任何其他的HTML元素一样:<video src=”url” width=”640px” height=”380px” autoplay/>。这简直太简单了,就是因为那些个不友好的浏览器还没有把HTML5当做自己的伙伴。以上的步骤还少了些代码来让媒体文件正确播放,这些代码如下,是不是看起来比<object> 和 <embed>舒服多了:

<video poster=”myvideo.jpg” controls>
<source src=”myvideo.m4v” type=”video/mp4″ />
<source src=”myvideo.ogg” type=”video/ogg” />
<embed src=”/to/my/video/player”></embed>
</video>

<video poster=”myvideo.jpg” controls> <source src=”myvideo.m4v” type=”video/mp4″ /> <source src=”myvideo.ogg” type=”video/ogg” /> <embed src=”/to/my/video/player”></embed> </video>

https://net.tutsplus.com/tutorials/html-css-techniques/html5-audio-and-video-what-you-must-know/
https://blog.gingertech.net/content/uploads/2011/01/LCA_MM_AVProc2011/#slide1
https://www.splashnology.com/article/how-to-make-your-own-video-player-on-html5-video/2654/?utm_source=html5weekly&utm_medium=email
https://www.sitepoint.com/using-html5-video-and-audio-in-modern-browsers/
https://rawkes.com/blog/2011/08/06/browserscene-creating-a-3d-sound-visualiser-with-webgl-and-html5-audio?utm_source=html5weekly&utm_medium=email

8 – DOCTYPE 文档类型

<!DOCTYPE html>
(^o^)/,就是这样,这是DOCTYPE,仅此而已,无所不及。非常简洁不是吗?再也不用复制粘贴一对看不懂的大段代码到DOCTYPE,也不用添加一些乱七八糟的头部标签。你可以轻轻松松地输入这一行简单的代码,何乐而不为。它做出的最伟大的成就远远超出了“简单”,而是可以使这个HTML文档在任何浏览器中使用,甚至包括已经沦落到历史边缘的IE6。

7 – 更干净的代码

如果你是热衷于古朴,典雅,易于阅读的代码,那么HTML5就是你的最佳伴侣。HTML5让你可以写出清晰而语义明确代码,使你可以轻松地把风格和内容区分开来。我想到一个最经典也是最简单的例子,去写一个导航:

01 <div id=”header”>
02 <h1>Header Text</h1>
03 <div id=”nav”>
04 <ul>
05 <li><a href=”#”>Link</a></li>
06 <li><a href=”#”>Link</a></li>
07 <li><a href=”#”>Link</a></li>
08 </ul>
09 </div>
10 </div>

这段代码是很干净,而且简单。如果是用HTML5,你可以进一步精简,同时给你的标签赋予更多的含义:

01 <header>

02 <h1>Header Text</h1>

03 <nav>

04 <ul>

05 <li><a href=”#”>Link</a></li>

06 <li><a href=”#”>Link</a></li>

07 <li><a href=”#”>Link</a></li>

08 </ul>

09 </nav>

10 </header>

有了HTML5,你终于可以通过语义标签和HTML标题去解释内容,同时也避免了“divitis”和“classitis”滥用等问题。以前,你会一般只使用div去容纳所有内容块,然后指定class或者id去描述属性。而新的<section>,<article>的<header>,<footer>,<aside>和<nav>等HTML5标签可以让你写样式的时候更加简洁,而且更加便于管理。

参考:

https://html5boilerplate.com/

6 – 智能存储

关于HTML5的最酷的事情之一是它的本地存储功能。这是普通的cookies存储和客户端数据库之间的交汇。它比cookies更好,因为它可以实现在多个窗口存储,而且具有更好的安全性和可用,并关闭浏览器后,数据甚至会持续。因为它本质上是一个客户端数据的基础上,你不担心用户删除Cookies。可喜的是,这项技术已经被很多主流浏览器采纳。

本地存储在很多方面都体现出它的重要性,但它的HTML5的一个工具,让浏览器不使用第三方插件来承载web应用。能够把浏览器中的数据存储在用户端,让您可以轻松地创建这些应用程序的功能,如:存储用户信息,缓存数据的能力,和负载能力等,并且可以记录用户以前的应用程序的状态。如果你对本地存储感兴趣,可以看看这篇文章–《Wrapping Things Nicely with HTML5 Local Storage.》

更多参考资源:

Storing Data the Simple HTML5 Way (and a few tricks you might not have known)


https://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-learning-about-html5-local-storage/
https://www.kirupa.com/html5/html5_local_storage.htm
https://htmlui.com/blog/2011-08-23-5-obscure-facts-about-html5-localstorage.html

5 – 更好的交互体验

我们都希望拥有更好交互式体验,我们都希望有动态的网站随时响应用户,使他们能够感受到内容互动和娱乐性,而不是仅仅是浏览网站的内容。HTML5让我们认识了<canvas>,一个全新的绘图标签,比起以前使用的互联网应用平台工具Flash,它能让你能够做出大部分(甚至更多)丰富的动画效果。

除了<canvas>,HTML5还配备一套强大的绘图API,让你能够建立一个更好的用户体验和一个比较强大的动态的Web应用程序。这里有一个展示这些API的快速列表:

Drag and Drop (DnD)

Offline storage database

Browser history management

document editing

Timed media playback

想了解更多关于类API的文档,访问https://html5doctor.com/。

其他参考资源:

https://hakim.se/experiments
https://mrdoob.com/
https://9elements.com/io/projects/html5/canvas/
https://mrdoob.com/projects/chromeexperiments/ball_pool/
https://craftymind.com/factory/html5video/CanvasVideo.html
https://smalltalkapp.com/#all

4 – 游戏开发

没错,有了以上的API和<canvas>标签,您可以开发使用HTML5的游戏。HTML5提供了强大的功能、良好的移动性,和更有趣味性的交互游戏。如果你已经开发过Flash游戏,你肯定会喜欢开发一个HTML5游戏。

这里有一个HTML5的游戏脚本开发的系列教程,看看别人用HTML5创造出了怎样的东西:

https://www.script-tutorials.com/html5-game-development-lesson-1/

https://www.script-tutorials.com/html5-game-development-lesson-2/
https://www.script-tutorials.com/html5-game-development-lesson-3/
https://www.script-tutorials.com/html5-game-development-lesson-4/

更多资源:

https://msdn.microsoft.com/en-us/scriptjunkie/gg189187?utm_source=html5weekly&utm_medium=email
https://smus.com/multiplayer-html5-games-with-node?utm_source=html5weekly&utm_medium=email
https://css.dzone.com/articles/how-write-brikbloc-game-html5?utm_source=html5weekly&utm_medium=email
https://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/?utm_source=html5weekly&utm_medium=email
https://html5-games.org/
https://www.limejs.com/

3 – 跨浏览器支持

现在主流的浏览器(Chrome, Firefox, Safari IE9 and Opera)都支持HTML5。HTML5的DOCTYPE一项是专为跨浏览器设置的。他可以涉及所有的浏览器,即使这个浏览器已经老了或是很恼人,它都支持,比如IE6可以用它实现正常浏览。但仅仅是因为旧的浏览器识别的DOCTYPE,这并不意味着他们可以使用新的HTML5标签和其他的一些功能。更幸运的是,HTML5正在逐步修建完善,它可以让事情变得更容易,跨浏览器更加无障碍,所以假如那些旧的IE浏览器不喜欢新的标签,我们只要简单地添加一段Javascript就可以让他们对新的元素的产生好感:

1 <!–[if lt IE 9]>

2 <script src=”https://html5shiv.googlecode.com/svn/trunk/html5.js”></script>

3 <![endif]–>


2

3

更多参考资源:
https://html5readiness.com/
https://caniuse.com/
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
https://www.modernizr.com/

2 – 移动,移动

现在看也许是一种预感,但我认为移动互联网技术正变得越来越受追捧。我知道,这是一个非常疯狂的假设。你们可能在想 – 移动仅仅是一种时尚 … 没错。移动设备正在主导世界。通过移动设备的持续增长,这意味着,越来越多的用户将使用移动浏览器来访问您的网站或应用程序。HTML5是大多数开发移动网站和应用程序的工具中准备最为充分的一个。随着Adobe宣布移动Flash的死亡,你现在就需要依靠HTML5去做您的移动Web应用程序开发。

移动浏览器完全采用HTML5的,这样创建移动项目就想给手机屏幕添加设计素材和内容框架一样简单。这也就印证了另一个热议的话题 – “Responsive Design”。一些强大的meta标签同时也可以优化你的移动体验:

Viewport::允许您定义可视区域的宽度和进行缩放设置
Full screen browsing::IOS的特定值,使苹果设备在全屏模式下显示
Home Screen Icons: 在桌面上放置网站图标,这些图标收藏到IOS和Android移动设备主屏幕上

想了解更多HTML5的移动性能,请访问https://www.html5rocks.com/en/mobile/mobifying.html,
值得检查出的一些资源:

更多参考:

https://mobilehtml5.org/
https://html5boilerplate.com/mobile
https://teamtreehouse.com/library/projects/html5-mobile-web-applications

1 – HTML5是未来,开始应用吧!

“现在就用HTML5”的原因第一条:因为它的未来,开始使用吧,要不就落后了。随着越来越多的元素被加入进来,越来越多的公司将开始采用HTML5,它将会生生不息。HTML5本质上只是HTML,它并不可怕,这并不要求你从新思考问题亦或是重新开始学习 – 如果您正在用严格XHTML进行开发,为什么不充分利用HTML5提供的先进性能呢?

你真的没有任何借口不采用HTML5开展你的新企划。我更喜欢使用HTML5真正原因是:它的代码更简洁,所有其他的好处和有趣的功能我甚至都还没有钻进去,而就凭这一点,就可见HTML5的伟大,你可以现在就使用它,完全不改变自己当初的设计模型。那么,就从现在开始,无论你现在正在简化代码,还是编写语义标签,亦或是你是要去开发一些变态的掌上游戏主宰世界 – 谁知道呢,说不定你已经开始销售你游戏的毛绒玩具。不管怎样,从现在开始,It’s right time!

最后,附上一些很棒的HTML5资源,感谢阅读

https://html5doctor.com/
https://html5rocks.com/
https://html5weekly.com/
https://www.remysharp.com
https://www.script-tutorials.com

by CCJK Johnny