马上使用HTML5的十大理由

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

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

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

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

10 – 易用性

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

、、、、 等,使屏幕阅读器更容易读取内容。之前,屏幕阅读器无法判断某个

是什么,即使你给它添加了 ID 或是类。有了新的语义标签,屏幕阅读器会更好的检查 HTML 文档,让使用它们的人有更好的体验。

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

9 – 视频和音频支持

忘掉 Flash 播放器和其它的第三方媒体播放器吧,用新的 HTML5 和 标签让你的视频和音频更容易播放。以前想要让你的媒体正确播放就如恶梦一般。你需要用   和

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


1

2

3

4

5

<</code>video poster="myvideo.jpg" controls>

<</code>source src="myvideo.m4v" type="video/mp4" />

<</code>source src="myvideo.ogg" type="video/ogg" />

<</code>embed src="/to/my/video/player">embed>

video>

参考资料:

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

8 – Doctype 文档类型

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

7 – 更简洁的代码

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


1

2

3

4

5

6

7

8

9

10

<</code>div id="header">

<</code>h1>Header Texth1>

<</code>div id="nav">

<</code>ul>

<</code>li><</code>a href="#">Linka>li>

<</code>li><</code>a href="#">Linka>li>

<</code>li><</code>a href="#">Linka>li>

ul>

div>

div>

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


1

2

3

4

5

6

7

8

9

10

<</code>header>

<</code>h1>Header Texth1>

<</code>nav>

<</code>ul>

<</code>li><</code>a href="#">Linka>li>

<</code>li><</code>a href="#">Linka>li>

<</code>li><</code>a href="#">Linka>li>

ul>

nav>

header>

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

、、、、 和 和等 HTML5 标签,你可以让代码更干净,而且让 CSS 更有条理。

6 – 更聪明的存储

HTML5 最酷的一件事是新的本地存储功能。它有点像传统的 cookie 技术和客户端数据库的跨界组合。它比 cookie 的好处是允许跨多个窗口进行存储,它有更好的安全性和性能表现,数据在浏览器关闭之后仍能保留。因为它本质上是客户端的数据库,你不用担心 cookie 被用户删除。它已经被主流的浏览器采纳。

本地存储在很多方面来看都非常棒,不过这还只是 HTML5 提供的众多工具之一。这些工具有可能让你不用第三方插件就开发网页 app 应用。能够将数据保存在用户的浏览器让你能轻易实现这些 app 功能:保存用户信息、缓存数据、加载用户之前的应用状态等。

5 – 更好的交互性

我们都希望有更好的互动,我们都喜欢有更多动态效果的交互网站,可以响应用户的操作,允许用户欣赏并网站内容交互,而不是仅仅是看看而已。通过 HTML5 的绘图标签 ,你可以实现大多数的交互操作和动态效果。

除了 ,HTML5 还有很多强大的 API,使你能实现更好的用户体验,开发出更具动感,活力十足的应用。下面是部分原生 API 的列表:

拖放 (DnD)

离线存储数据库

浏览历史管理

文档编辑

定时媒体回放

关于这些 API 的更多信息以及 HTML5 的原生交互特性可以访问 HTML5Doctor

4 – 游戏开发

是的。你可以采用 HTML5 的 标签来开发游戏。HTML5 提供了强大的、对移动友好的方式用来开发有趣的交互游戏。如果你以前开发过 Flash 游戏,你也会乐于做 HTML5 游戏。

3 – 老式浏览器/跨浏览器支持

流行的现代浏览器(Chrome、Firefox、Safari、IE9 和 Opera)都支持 HTML5,而且 HTML5 doctype 可用于所有的浏览器,甚至包括老掉渣的 IE6。不过,老的浏览器可以识别 HTML5 doctype,并不意味着他们能够处理所有新的 HTML5 标签和特性。幸运的是,HTML5 会让问题简单化,具备友好的跨浏览器性能。针对不支持新标签的老式 IE 浏览器,我们只要简单添加 Javascript shiv 代码,就可以让它们使用新的元素:

2 – 移动,移动,还是移动!

移动技术变得越来越流行了!我知道,这是一个疯狂的假设,你们也许都在想——移动会引领时尚。移动设备正在占领世界。移动设备的数量在一路攀升,这 意味着越来越多的用户会使用他们的移动浏览器来访问你的网站或是应用。HTML5 是完备的移动网站和应用的开发工具。随着 Adobe 宣布移动版 Flash 的死亡,你现在完全可以依赖 HTML5 来做移动应用的开发。

移动浏览器已经完全采纳了 HTML5,所以开发移动项目就像给这些小尺寸的屏幕设计和构建显示内容一样简单——这也促进了响应式设计的流行。这里还有一些很不错的 meta 标签可以用来做移动优化:

1、Viewport:允许你定义视口的宽度和缩放比例

2、全屏浏览:IOS 特定的数值,允许苹果设置按全屏模式显示

3、首页图标:类似桌面应用的 favicon,这些图标用于在 IOS 和安卓移动设备的首页上添加收藏

有关如何通过 HTML5 使你的网站“移动化”,可以参考: “Mobifying” Your HTML5 Site.

1 – 大势所趋,未来所向!

你应该今天就开始使用 HTML5 的首要原因是:它就是未来,千万不要掉队。HTML5 不会随意发展。随着越来越多的元素被采纳,越来越多的公司开始基于 HTML5 进行开发。HTML5 本质上还是 HTML,它并不可怕,你也不需要从头学习 —— 如果你正在用 XHTML strict 开发,你实际上已经是在用 HTML5 了,那何不享用它全面的功能?

你完全没有任何借口不用 HTML5。事实上,我倾向于使用 HTML5 的真正原因只是用它可以写更简洁的代码,所有其它的好处和有趣的功能我都还没有去试。不过,重要的是,你可以不用改变你的设计方式,马上就能开始。所以, 开始用吧,不管你只是想让代码简单而更加语义化,或者是你准备开发一款会征服世界的移动游戏,谁知道呢?

重要的 HTML5 资源

http://html5doctor.com

http://html5rocks.com

http://html5weekly.com/

http://www.remysharp.com

http://www.script-tutorials.com

时间: 2024-12-24 12:45:16

马上使用HTML5的十大理由的相关文章

使用Visual Studio进行 Android开发的十大理由

[原文发表地址]Top 10 reasons to use Visual Studio for C++ Android Development! Visual Studio: C++跨平台的移动解决方案 Visual Studio (下载地址) 正在迅速成为一个跨平台的C++IDE.我们的目标是让Visual Studio成为您研发C++跨平台代码的选择,无论您的目标是Windows (UWP), Android, iOS, Linux, Xbox, PlayStation, Marmalade

【html5】使用 html5 的十大原因

你难道还没有考虑使用 html5? 当然我猜想你可能有自己的原因:它现在还没有被广泛的支持,在 ie 中不好使,或者你就是喜欢写比较严格的 xhtml 代码.html5 是 web 开发世界的一次重大的改变,事实上不管你是否喜欢,它都是代表着未来趋势.其实 html5 并不难理解和使用.我们这里能列出许多原因为什么现在要开始使用 html5. 目前有很多的文章介绍使用 html5 并且介绍了使用它的优势和好处,没错,这篇文章也类似.随着更多这样的文章,以及 apple 的支持,adobe 围绕

选择阿里云数据库HBase版十大理由

根据Gartner的预计,全球非关系型数据库(NoSQL)在2020~2022预计保持在30%左右高速增长,远高于数据库整体市场. 阿里云数据库HBase版也是踏着技术发展的节奏,伴随着NoSQL和大数据技术的兴起和发展,从2010年开始研究和发展.时光荏苒,日月如梭,转眼九年时间,在阿里云上直接开放提供服务也有1年多时间,并在去年的12月份全新发布X-Pack,将单一的HBase演进到一个完整的数据处理平台的能力.我们注意到还有很多同学和客户不清楚HBase X-Pack是什么,什么场景下合适

使用HTML5的十大原因

你难道还没有考虑使用HTML5? 当然我猜想你可能有自己的原因:它现在还没有被广泛的支持,在IE中不好使,或者你就是喜欢写比较严格的XHTML代码.HTML5是web开发世界的一次重大的改变,事实上不管你是否喜欢,它都是代表着未来趋势.其实HTML5并不难理解和使用.我们这里能列出许多原因为什么现在要开始使用HTML5. 目前有很多的文章介绍使用HTML5并且介绍了使用它的优势和好处,没错,我们这篇文章也类似.随着更多这样的文章,以及Apple的支持, Adobe围绕HTML5的产品开发,以及移

时代互联:企业需要网站建设的十大理由

企业网站是企业在Internet上展示形象的门户,是企业开展电子交易的基地,是企业网上的"家",时代互联指出,设计制作一个优秀的网站是建网站的企业成功迈向互联网的重要步骤.网络可以带给企业不分地域.不分国别的大量客户,带给您无限的商机.为了获得本行业的领先地位,面对不断涌现的种种机会,企业建立一个具有自己特色的,精美完善的,集多种功能于一体的企业网站,尤其重要.那么,对于一个企业来说,为什么要建网站呢?国内顶尖网站建设服务商时代互联给你十个不能拒绝的理由: 企业网站是企业在Intern

ios应用提交上架被appstore拒绝的十大理由

1.崩溃和问题 你需要尽量修复你应用中的崩溃和那些明显的问题,否则你的应用很可能被拒绝. 2.失效的链接 保证你应用中出现的链接的有效性. 3.默认占位图片 含有系统默认占位图片的应用不会被通过,你需要处理你的占位图片/内容,保证其都是有意义的. 4.信息不完整 提供到苹果审核的信息需要保证完整性.比如你的应用如果需要登录,那你就需要提供一个demo账号和密码以供测试. 5.不精确的描述 你的应用描述和截图应尽量做到准确且包含了应用的主要功能.这能帮助用户尽快识别他们是否需要你的应用. 6.误导

爱上 Java 的10 大理由,Python 弱爆了!

Java和JVM已经存在了很长一段时间了,基于这个事实,一些程序员开始将很多事情视为理所当然.今天我们就来说一说"Java之所以能够成为并将继续是软件项目领先平台"的十大理由. 1.高性能JVM Java最初的开发目的"一次编写到处运行",并由虚拟机提供运行平台.点击这里查看JVM内存模型详解.没有JVM,Java就必须遵循Ruby和Python的步伐--在痛苦中进一步提高其便携性.随着物联网的出现,一个强大的虚拟机变得越来越重要. 2.核心API 最让人喜欢的就是

电商干货!1000万烧出来的高点击率钻展创意图十大原则(营销&amp;人性)

梦想凯歌:创意图的钻展的灵魂,没有创意图你什么都不是.无论是日常推广还是做大促活动,创意图是测试的重中之重,一定要提前测试好每一个资源位的创意图.今天这篇好文是一个资深电商设计师在操作钻展烧了1000多万后总结的经验,不少技巧可以用在Banner设计上. 创意图是你获取流量的入口,由创意图延升到落地页,进而是整一个活动项目. 所以,这节课很关键,也是我这系列课程的重点.到目前操作钻展也至少烧了1000多万了. 很多朋友常常发图片给梦想凯歌,问如何优化?这十大原则是我梦想凯歌做创意图的总结! 虽然

中国股市十大传奇人物

 中国股市十大传奇人物一 中国证券教父管金生 滚滚大盘无定数,涨跌淘尽英雄,成败输赢转头空,股市依旧在,几度夕阳红.不能否认,每一个人,就是一部历史.盘点中国股市的草莽英雄,尽管终归平淡,但他们无一不让管理层焦头烂额,管金生.阚治东.张国庆--. 曾经,国内最大.战无不胜的万国证券,一日而亡,震惊中外,以至于英国<金融时报>称1995年2月23日此一天为"中国证券史上最黑暗的一天". 为此,从本期开始,我将带你去缅怀这些"英雄",尽管时代变迁,但市场却还