BY DinoEsposito 2011年10月9日
注：在诸多讨论HTML的相关声音中，有些是实事求是的赞美，还有一些是刻意的炒作。DinoEsposito的这篇文章带来了关于HTML5的概述，它非常客观地展现了HTML5的原貌。下面是译者对原文进行理解以后的再现，有些地方可能没有理解到位，如果有需要请参考原文链接。
随着HTML5在浏览器和移动设备中脱颖而出，知道它能做什么而不能做什么是非常重要的----尤其是标准草案还没有正式出台。
输入表单
目前的HTML允许用户输入纯文本内容，让开发人员享受验证数字，电子邮箱，日期和电话号码等信息的乐趣。HTML5为INPUT元素的属性类型带来了几个新值。例子如下：
|
1
2
3
4
|
<
video
poster
=
"init.png"
controls>
<
source
src
=
"..."
type
=
"video/mp4"
codecs
=
"..."
/>
<
source
src
=
"..."
type
=
"video/webm"
codecs
=
"..."
/>
</
video
>
|
这些值的实际效果如何呢？预期的效果—虽然还不是很标准—是浏览器提供一个特殊的用户界面，因此用户可以非常轻松地输入日期，时间或数字。到现在为止，Opera11是唯一把这些值当做属性类型的浏览器。在输入日期时，Opera11会自动弹出日历，在输入一个范围类型的值时会出现一个滑动块。如图1所示，Opera为字段提供自动验证。图中的输入字段指定为电子邮箱类型，但是它并没有接收到一个可靠的电子邮箱地址，Opera为此提供了文字提示。最后，需要填的属性值把输入字段作为一个替代值，但是位置标识属性允许用文本框的形式进行提示，如果需要这样做的话（使用滑动条范围的输入域不会出现提示）。
注意目前浏览器为输入类型提供的支持是不够的，最后，开发人员仍需要用JavaScript继续开发，以确保给服务器提供正确的信息。最主要好处就是底层标记的可读性提高了。
图1
音频和视频
HTML5最大的改进之一就是不再使用外部插件，比如播放音频和视频要用到的Flash和Silverlight。现在有两个新元素，一个是显示URL，另一个是可以播放任何内容。浏览器提供这些标签预期能够给用户提供一个控制条，这个控制条用来实现暂停和重放的功能。
多媒体文件的痛处是音频和视频文件的格式（文件格式和编码器）。HTML5不会公开地发布，因此觉得支持哪种格式仍然取决于供应商。从开发人员的角度来看，这并不是个好消息，因为这代表了一个断点—不同的浏览器要支持不同的格式，你需要检测浏览器或者给浏览器提供多个文件以便浏览器进行选择。下面给出了格式选择的语法：
|
1
2
3
4
|
<
video
poster
=
"init.png"
controls>
<
source
src
=
"..."
type
=
"video/mp4"
codecs
=
"..."
/>
<
source
src
=
"..."
type
=
"video/webm"
codecs
=
"..."
/>
</
video
>
|
请注意，你需要使用空间属性显示控制栏和需要海报属性来指定图片作为启动画面图像，直到媒体文件可以播放。
数据存储和离线工作
我们都知道网站需要网络连接才能运作，不管是Ajax还是浏览器，任何用户发出的请求都要被发送到另一个端点来获得响应—通常，是一个网页或者是一些辅助资源，比如说图片，脚本和样式。所有的浏览器都有一些捕捉机制，这个机制用来保存一些HTTP请求，以便在本地电脑上解析静态资源。然而，这个机制至今还没有标准化，多数浏览器把他作为一个优化体制而不是使用户能够离线浏览网页。
HTML5带来了独立的数据存储技术和离线应用程序。总而言之，这些API提供了为开发人员提供了一个框架来开发Web应用程序，这些应用程序不仅可以使浏览器存储页面还可以使根据应用程序具体规则，使本地的代码以自定义的格式保存应用程序的数据。你也许会说数据存储增强版的缓存，然而对传统的浏览器缓存来说，离线运行才是增强版的缓存。
你通过浏览器的窗口的本地存储属性来访问本地存储，这种属性提供了一个类似于cookie的基于字典的编程接口，有一些方法可以增加或者移除项目，统计仓库中项目的数量，获取一个特殊项目的值，以及清空仓库。你可以清单来存储特殊资源，让浏览器知道那种资源可以放进缓存和哪一种资源一直需要请求网络。你可以参考下面的清单：
<html manifest="manifest.cache">
请注意URL可以是一个动态页面（比如APSX,PHP），资源必须被归到文本/缓存清单一类.清单的内容文件是一系列的有语法规则的资源名字的列表:
|
1
2
3
4
5
6
7
8
9
10
11
|
CACHE:
default.html
styles.css
logo.png
NETWORK:
login.aspx
/public/api
FALLBACK:
login.aspx nologin.png
|
CACHE部分表示总是放进缓存的资源,NETWORK部分表示总是从服务器端请求网络的资源,FALLBACK部分表示当网络不能用的时候使用的备用资源.
怪诞之处
HTML5为它的黄金时期做好准备了吗? HTML5的确受到了热烈的欢迎,它的功能—虽然还不是标准化的—逐步得到浏览器的支持,HTML5的一些特点已经被Opera, Chrome, Firefox, and Internet Explorer 9所支持.他们的确是特点,浏览器的不兼容性将会存在直到2014左右规范确定下来.
至于Web应用程序,不管你是联系控制浏览器还是提供强大的后备机制,输入元素被解码为HTML5,他们将会优美的呈现在旧的浏览器中，类似于ARTICLE语义元素会适当并且优雅的显示在旧的浏览器中。
你需要给媒体元素提供后备,最后,这不是一项不可能完成的任务,但是它是一项额外的工作,正如我所看到的,目前没有什么报偿,使用HTML5的标记而不使用旧的标记又有怎样的意图呢?
如果你打算使用HTML5的成对的功能,比如离线和数据存储,这就是一个不一样的故事了.但是,再说一遍,如果浏览器不支持或者部分支持HTML5又怎么办呢？像 Modernizr这样的图书馆帮助提供功能解析。
总结
底线是，我知道HTML5技术的迅速升温，尤其是在web应用的典型领域之外。我期待HTML5在对于手机和平板等移动设备应用程序及过渡到各式各样的发展中的软件平台中的应用程序，建立起一个令人注目的框架的整体性能。像Adobe的 PhoneGap工具允许android和iOS通过HTML5，CSS3和最近的JavaScript编写本机应用程序。 现在你可以不需考虑浏览器的性能，十分充分的发挥HTML5的性能来实现上述功能。更惊喜的是，时下流行的智能手机操作系统上的所有浏览器都是支持HTML5.Adobe AIR提出全面支持HTML5的类似功能，并且微软宣布WIN8将支持HTML5.HTML5已经蓄势待发，但是我看到它在大多非开源环境中是有益的。
DinoEsposito是基本编程书的作者，包括最近才发行的Programming Microsoft ASP.NET 4（微软出版社）
译文来源：http://www.webapptrend.com/
WebAppTrend是一个独立的技术博客，关注Web App前瞻和实践，以及智能浏览器发展
请大家在关注CSDN的同时，关注我们的新浪微博 @WebAppTrend，欢迎加入我们的QQ群：193775364
扫一扫
933
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
