深入剖析 HTML5
HTML5，相信大家对这个名词已经不再陌生了。HTML5 是近十年来 Web 标准最巨大的飞跃。和以前的版本不同，HTML5 并非仅仅用来表示 Web 内容，它的目标是将 Web 带入一个成熟的应用平台，在这个平台上，视频、音频、图象、动画，以及同电脑的交互都被标准化。尽管 HTML5 的实现还有很长的路要走，但 HTML5 正在改变 Web。
作为新一代的 HTML 标准，HTML5 不仅强化了 Web 网页的表现性能，还追加了本地数据库等 Web 应用的功能。虽然 HTML5 标准仍处于完善之中。然而，大部分新版本的浏览器已经能够支持某些 HTML5 的功能了。HTML5 标准所描述的功能非常强大，如：它提供了一些新的元素和属性，例如
自 1999 年 12 月发布的 HTML 4.01 后，后继的 HTML5 和其它标准被束之高阁，为了推动 Web 标准化运动的发展，一些公司联合起来，成立了一个叫做 Web 超文本应用技术工作组 - WHATWG 的组织，该组织对 HTML5 的发展起了至关重要的作用。HTML5 草案的前身名为 Web Applications 1.0，於 2004 年被 WHATWG 提出，於 2007 年被 W3C 接纳，成立了新的 HTML 工作团队。HTML5 的第一份正式草案已于 2008 年 1 月 22 日公布，总的来说有两大特点：首先，强化了 Web 网页的表现性能。其次，追加了本地数据库等 Web 应用的功能。HTML5 即将成为 HTML、XHTML 以及 HTML DOM 的新标准，虽然目前 HTML5 仍处于完善之中，然而，大部分现代浏览器已经具备了某些 HTML5 支持，所以 HTML5 前景一片看好。
回页首
HTML5 新元素
HTML5 的最大的特点之一就是提供了很多新的元素，这些元素相当强大，也非常符合我们日常开发的需要。之前我们花了很大力气写好的一些控件，如：日期控件，进度条控件等等，已经被 HTML5 支持了。在接下来的章节中，我们会介绍一些 Web 开发中比较常用的新元素，并深入介绍他们的各种属性和特性。
新表单元素，属性及事件
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。来看一个简单示例：
清单 1. 简单 email, url 示例
这里是一个简单的 email、url 输入框使用示例，可见，我们只需要设定他的 type 属性即可。如果设定为 email，则浏览器会验证他的输入是否合法（必须为邮件格式），见下图：（支持浏览器 Firefox，Chrome 和 Opera）
图 1. Email 输入框图示
图 1. Email 输入框图示
Email 输入框也支持输入多个，只需要用“，”分隔开来即可，浏览器会对这些分隔开来的字符串分别验证。
让我们在深入一点，以下是浏览器验证所对等的正则表达式：
“/^[a-zA-Z0-9.!# /”
这种验证如果有我们自己来做，会耗费大量时间，而且性能不会太好。值得庆幸的是：随着各大浏览器的不断完善，越来越能更好的支持 HTML5，不久的将来，我们就不用再考虑如何做这些验证了。
同理，“url”类型也是。这样一来，节省了大量的验证代码，使用起来极为方便。
再来看数字输入框的例子：
清单 2. 简单 number、range 示例
这里的 step 表示规定的合法的数字间隔。他们的效果图如下：（支持浏览器 Chrome，Safari 和 Opera）
图 2. Number 和 Range 输入框图示
图 2. Number 和 Range 输入框图示
这些数字输入控件使用方便且非常直观，由于是内置的控件，我们完全不用担心性能的问题，所以，强烈建议大家试用。
接下来我们再来看两个使用比较广泛的控件 - date 和 time。HTML5 拥有多个可供选取日期和时间的新输入类型：
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）
参见如下示例：
清单 3. Date 和 Time 输入框
使用方式依然简单，可以参见如下效果图：（支持浏览器 Chrome，Safari 和 Opera）
图 3. Date 和 Time 输入框图示
图 3. Date 和 Time 输入框图示
如图 3 所示，这里列出了选月（Month）和选时间加日期（DateTime）的效果图。这些都是内置的一些控件，无需我们额外开发了。除此以外，还有“datatime-local”的类型，专门针对不同的国家实现本地化，功能相当完善。
还有“search”控件，专门用来作为搜索框出现在页面上，样式与文本框相同。以上这些简单的新输入控件使用便捷且性能颇高。
再来看看稍微复杂一些的控件：数据列表，在 HTML5 中被称作“datalist”，用来显示列表数据，类似一个简单的 select 控件。这个控件简单清晰，方便选择且支持输入，在如今的 Web 开发中越来越受到青睐，见如下示例：
清单 4. Datalist 控件
可见，datalist 控件的用法类似 select，参见如下效果图：（支持浏览器 Firefox，Chrome 和 Opera）
图 4. Datalist 图示
图 4. Datalist 图示
在我们输入时，他会自动弹出备选项，这种控件非常人性化，用户体验极好。
再来看看 keygen 元素，keygen 元素的作用是提供一种验证用户的可靠方法。keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
清单 5. Keygen 元素
Username:
Encryption:
这里我们加入了一个“name”为“security”的 Keygen 控件，在该表单提交时，浏览器会提示您输入密码以确保提交安全，如下图所示：（支持浏览器 Firefox，Chrome，Safari 和 Opera）
图 5. Form 包含 Keygen 元素
图 5. Form 包含 Keygen 元素
如图 5 所示，点击“submit”时，会弹出“password”对话框。通过很简单的代码，我们便能实现安全的表单提交。
目前，支持此元素的浏览器不多，不过相信各大浏览器厂商也都想早日完成 HTML5 完全支持的目标。
最后，我们来看看 output 元素，该元素很简单，专门用来输出，见如下示例：
清单 6. Output 元素
function resCalc()
{
numA=document.getElementById(“num_a”).value;
numB=document.getElementById(“num_b”).value;
document.getElementById(“result”).value=Number(numA)+Number(numB);
}
+
=
这里我们通过“onforminput”监听表单输入事件，通过对 Output 元素“value”属性的赋值来显示输出，代码简洁且通俗易懂。（支持浏览器 Firefox，Chrome，Safari 和 Opera）
前面我们介绍了新的表单相关元素，接下来我们来看看新的一些元素属性。HTML5 中提到的新属性非常多，这些属性控制着很多非常实用的功能，如：autocomplete（自动补全）、required（不能为空）、placeholder（提示符）等等，还有 autofocus、list、min、max、pattern、novalidate 等等。下面我们来一一介绍：
清单 7. Autocomplete 属性代码示例
First name:
Last name:
E-mail:
如果我们设置了“autocomplete”属性为“on”，那么当用户在自动完成域中开始输入时，浏览器会在该域中显示填写的选项。参见图 6：（支持浏览器 IE9，Firefox，Chrome，Safari 和 Opera）
图 6. Autocomplete 图示效果
图 6. Autocomplete 图示效果
我们再来看看关于 Form 的几个特殊属性：表单重写属性。表单重写属性（form override attributes）允许您重写 Form 元素的某些属性设定。
表单重写属性如下：
formaction - 重写表单的 action 属性
formenctype - 重写表单的 enctype 属性
formmethod - 重写表单的 method 属性
formnovalidate - 重写表单的 novalidate 属性
formtarget - 重写表单的 target 属性
重写后，Form 会按照您重写的后的方案去执行。参考如下代码：
清单 8. 表单重写属性
E-mail:
扫一扫
1407
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
