登录以解锁更多InfoQ新功能
获取更新并接收通知
给您喜爱的内容点赞
关注您喜爱的编辑与同行
966,690 二月 独立访问用户
语言 & 开发
架构 & 设计
文化 & 方法
您目前处于：
预览IE10支持的HTML5特性
预览IE10支持的HTML5特性
0&他的粉丝
日. 估计阅读时间:
：开启与Netflix、微软、ThoughtWorks等公司的技术创新之路！
亲爱的读者：我们最近添加了一些个人消息定制功能，您只需选择感兴趣的技术主题，即可获取重要资讯的。
HTML5拖放(Drag and Drop)
拖放功能在桌面客户端软件中应用十分普遍。HTML5标准对拖放做了规定，IE和之前的版本支持对象和拖放图片、超链接、文本的事件。IE10预览版对所有元素增加了属性，并且支持把一个或多个文件从桌面拖放到网页上。draggable属性支持你将任意HTML元素设为页面可拖放的。它提供了如下状态：
draggable = 'true'
该元素可拖放。
draggable = 'false'
该元素不可拖放。
draggable = 'auto'
该元素遵循默认的浏览器行为（文本、超链接和图片可拖放，其他元素不能）。
例如，下列代码支持用户拖放元素。
&button id=&mybutton& draggable=&true&&Drag
me&/button&
&img src=&photo.png& draggable=&true& /&
id=&mydiv& draggable=&true&&Moveable text&/div&
当用户拖动一个可拖放的元素时，IE10预览版随着拖动的光标移动显示一个元素的虚影。draggable属性是不可继承的，因此元素的子元素不会自动变成可拖放的。
除此之外，dataTransfer对象的files属性支持你把文件从桌面的文件夹中拖放到网页上。这种方式能够减少一些应用，如邮件客户端，把附件拖放进邮件内容中，或者在图库页面中添加照片。这种从桌面端到Web端的无缝交互无疑是Web开发的一大亮点。
下面的事件监听器和dropHandler函数展示了如何创建一个网页区域让用户拖放文件上去。其中的&dropspot&可以是div、image，或者其他元素。dragover和drop事件调用了doNothing()
函数避免默认的事件处理和冒泡，否则可能会导致不可预知的结果。
// this function runs when the page loads to set up the drop area
&// Set the drop-event handlers
&var dropArea =
document.getElementById(&dropspot&);
&dropArea.addEventListener(&drop&,
dropHandler, false);
&dropArea.addEventListener(&dragover&, doNothing,
function dropHandler(event)
&// use our doNothing()
function to prevent default processing
&doNothing(event);
&// get the
file(s) that are dropped
&var filelist =& event.dataTransfer.
(!filelist)& // if null, exit now
&var filecount = filelist.&
// get number of dropped files
&if (filecount & 0)
something with the files.&&&&&&&
// Prevents the event from
continuing so our handlers can process the event.
doNothing(event)
&event.stopPropagation();
&event.preventDefault();
IE10预览版引入了对File API的支持。来自于w3c的草案，表示web应用中的文件对象，并且可以编程选取它们并访问数据。File API目前正在被W3C Web应用工作组标准化。通过该API，web开发人员可以在客户端机器上以安全地方式访问本地文件，而无需扩展或者插件。
File API支持浏览器在用户授权的情况下读取和处理文件。此外，File API在无插件的情况下支持更流畅的文件上传体验，包括上传进度的状态反馈等。
在下面的W3C File API示例中，不同的代码片段分别处理进展、错误和成功条件：
function startRead() {
// Obtain input element through DOM.
var file = document.getElementById('file').files[0];
if(file) {
getAsText(file);
function getAsText(readFile) {
var reader = new FileReader();
// Read file into memory as UTF-16&&&&
reader.readAsText(readFile,
&UTF-16&);
// Handle progress, success, and errors
reader.onprogress =
reader.onload =
reader.onerror =
function updateProgress(evt) {
if (evt.lengthComputable) {
evt.loaded and evt.total are ProgressEvent properties.
& var loaded =
(evt.loaded / evt.total);
& if (loaded & 1) {
&&& // Increase the progress bar length.
style.width = (loaded * 200) + &px&;
function loaded(evt) {
// Obtain the read file data.&&
var fileString
= evt.target.
// Handle UTF-16 file dump
if(utils.regexp.isChinese(fileString)) {
//Chinese Characters + name validation.
& // Run other charset
// xhr.send(fileString)&&&
function errorHandler(evt) {
if(evt.target.error.code ==
evt.target.error.NOT_READABLE_ERR) {
& // The file could not be
其他文件相关的改进包括带有文件类型过滤的多文件上传。在下例中，多个GIF或者JPEG文件可以被用户选择：
&input type=&file& name=&pic& multiple accept=&image/gif, image/jpeg&
HTML5 表单和输入验证&
IE10预览版增加了对新的支持。这些支持帮助开发人员可以通过很少的脚本来快速、简便的提供用户提示和输入验证。在HTML5的输入类型和属性出现之前，检查手机号码没有包含字母，或者验证邮件地址正确输入，都需要开发人员编写额外的代码。HTML5客户端表单和输入验证帮会组开放人员关注其他任务而不是构建验证函数。
新URL和email输入类型
新HTML5输入类型支持提供了内建的URL和email输入类型。URL输入元素接受完全合格的地址，例如。同样，email输入类型接受标准的email格式，如。在下面的例子中，如果用户不正确地输入了URL或者email地址，IE就会显示错误信息。
&input type=&url& name=&url&/&
&input type=&email&
name=&email&/&
新输入属性
IE10预览器提供了对新的支持，如required、pattern和placeholder能够帮助开发人员确保用户在网页中输入所需的、正确的数据。
required属性
required属性表示该元素必须填写值才能提交。该属性能够用于text、text
area、URL、email、select、checkbox或者radio
button等元素。这是一个Boolean属性。当用户的鼠标悬停在required区域时，他们会看到相应的必填提示，如果设定了title属性，那么会显示该值。
&form id=&yourname&&
&label&Enter your first name:
&input name=&firstname& type=&text& required&&input type=&submit&
value=&Go&/&
如果用户尝试在不填写该区域的情况下提交表单，他们会收到错误信息，而且键盘焦点会置于为填写的区域中。
pattern属性
pattern属性允许你定义一个正则表达式要求用户的输入必须匹配。pattern属性支持text、search、url、email和password等输入元素。
&&& &input type=&tel& name=&tel&
pattern=&\(\d\d\d\) \d\d\d\-\d\d\d\d&
&& & title=&enter a telephone number in
&&the format (xxx) xxx-xxxx&/&
&&& &input
type=&submit&/&
min、max和step属性
min、max和step属性适用于input
type=number。min和max定义了数据的最小值和最大值。step属性定义了开发人员允许的跳跃值。例如，如果min=0，step=1，那么0、1、2、3......是允许的。如果min=1.1，step=1，那么1.1、2.1、3.1......是允许的。下面的例子展示了输入区域要求0到10之间的偶数。任何此范围之外的数据或者奇数都不能提交，而且会显示错误消息。
&label&Enter an even number between 0 and 10:
&input type=&number& min=&0& max=&10& step=&2&/&
type=&submit&/&
placeholder属性
占位符属性，在web开发中很常见，通过设置该属性，用户能够在输入区域看到&虚拟&的示例，直观明了，也减轻了开发人员的负担。IE10预览版支持对该属性做样式化定制，包括属性值的文本颜色、背景颜色、字体等等。
autofocus属性
自动聚焦属性帮助开发人员设置页面加载后的光标位置，无须用户主动点击某个输入控件。该属性只能用于页面的单个元素，如果同一页面的多个元素都设置了autofocus属性，那么只有第一个元素起作用。
大小写开关提示
该功能之前已经广泛应用于桌面客户端应用，比如用户输入密码时，如果打开了大小写开关（Caps lock ），那么应用会弹出对话框提示。IE10预览版加入了该项提示功能，无须开发人员编写任何代码，该功能在大小写开关打开的时候即自动触发提示。
IE10预览版完全支持HTML5的解析算法，不断完善与其他浏览器的一致行为。这些努力包括支持SVG-in-HTML、HTML语义元素、保留未知元素的结构和改善对空格的处理。
IE团队在HTML解析器上的目标是让所有的HTML在跨浏览器中解析行为一致。这可能是因为HTML5是第一个完整定义HTML解析规则的标准，细致到最边缘的情况和错误条件。即使HTML标记是无效的，HTML5仍然定义了如何解析它，IE
10遵循了这些原则。这种跨浏览器的一致行为使得开发人员在创建应用解析DOM元素时，不必把过多精力花费在单独处理IE的&异常&行为。下面的解析例子展示了这些改进中修补的部分情况。
DOM ( HTML5 + IE10 )
DOM ( IE9 )
&b&1&i&2&/b&
&&& &|- &2&
&&|- &Test 1\n&
|- &object&
&&|- &\n &
&&&&|- &Test 2\n&
&&|- &Test 1\n&
|- &object&
&&|- &\n &
&&|- &Test 2\n&
除此之外，因为早期IE的一些特性无法与HTML5解析兼容，它们已经从IE10预览版中删除。用户在使用IE10的legacy compatibility模式访问依赖这些陈旧特性的网站时不会出现问题。通过这种方式，现在正常运行的网站即使没有时间和资源来更新自己，那么网站依然可以在IE10中工作。
条件注释在当前的跨浏览器Web开发中使用广泛，成为大家判断某项特性是否支持的重要判断方法，但是它们只适用于IE的老版本。
&!--[if IE]&
This content is ignored in IE10 Platform Preview and
other browsers.
In older versions of Internet Explorer, this renders as part
of the page.
&![endif]--&
如果需要区分浏览器，请使用 ，例如下面的代码示例：
function registerEvent( sTargetID, sEventName, fnHandler )
oTarget = document.getElementById( sTargetID );
&&if ( oTarget != null )
&&&&&if ( oTarget.addEventListener ) {
&&&&&&&&oTarget.addEventListener( sEventName, fnToBeRun, false
&&&&&} else {
&&&&&&&var sOnEvent = &on& + sEventN
&&&&&&&if (
oTarget.attachEvent )
&&&&&&&&&&oTarget.attachEvent( sOnEvent,
fnHandler );
这种新式判断方式逐渐成为兼容性开发的主流，其优点在于不再依赖于条件注释，而是通过判断所需特性本身是否存在来做进一步的处理。
HTML5 沙箱
IE10预览版支持，确保对包含不可信内容的元素的安全限制。这些限制通过防止不可信内容执行导致潜在恶意行为的操作提高安全性。
为了启用这些限制，在元素中设置sanbox属性，如下所示：
&iframe sandbox src=&frame1.html&&&/iframe&
当sanbox属性在iframe元素中指定时，iframe元素中的内容称为被置于沙箱中。沙箱中的iframe元素，如下行为受到限制：
沙箱内容不能打开弹出窗口和新浏览器窗口。某些方法如()、()、()等会失败（无反馈）。
超链接不能在新窗口打开。
沙箱内容被认为来自于单一域，防止对受到保护的API的访问，如cookie、local
storage和其他文档的DOM。
顶级窗口不能被沙箱内容导航。
沙箱内容不能提交表单数据。
插件(、)不能实例化。
自动的元素行为被禁用，包括元素的刷新、控件的自动聚焦和、元素的。
Web Workers
IE10预览版开始支持Web Workers。提供了一种在后台运行脚本的方式。
传统上，浏览器都是单线程的，强制应用中的所有脚本都在一个UI线程中统一运行。虽然你可以通过使用DOM时间和
API来创建若干任务同时执行的假象，但是计算密集型任务会对用户体验造成严重的伤害。
Web Worker
API为Web应用开发者提供了一种启动后台脚本并与主页面并发运行的方式。你可以同时创建多个线程用于长时间运行的任务。新的Worker对象需要一个.js文件，通过对服务器的异步请求包含进来。
var myWorker = new Worker('worker.js');
进出worker线程的所有通信都通过消息管理。主worker和其他worker都可以利用，并利用事件监听响应。消息的内容作为事件的
属性发送。
下面的例子创建了一个worker线程并监听消息。
var hello = new Worker('hello.js');
hello.onmessage = function(e)
alert(e.data);
worker线程发送消息：
postMessage('Hello world!');
Worker之间的双向通信
要建立双向通信，主页面和worker线程都监听onmessage事件。在下面的例子中，worker线程在一定的延迟之后返回消息。首先，脚本创建worker线程。
var echo = new Worker('echo.js');
echo.onmessage = function(e)
alert(e.data);
消息内容和超时值在表单中指定。当用户点击提交按钮，脚本把两个值传递给worker线程。为了防止页面在新的HTTP请求中提交表单值，事件处理器也调用了preventDefault函数。请注意你无法发送对DOM对象的引用给worker线程。Web
Workers对它们能够访问的数据做了限制。只有Javascript原始数据类型，如Object或者String值允许。
window.onload = function() {
var echoForm =
document.getElementById('echoForm');
echoForm.addEventListener('submit',
function(e) {
&&echo.postMessage({
&&&&message :
e.target.message.value,
e.target.timeout.value
e.preventDefault();
&/script&&form id=&echoForm&&
&p&Echo the
following message after a delay.&/p&
&input type=&text&
name=&message& value=&Input message here.&/&&br/&
type=&number& name=&timeout& max=&10& value=&2&/&
seconds.&br/&
&button type=&submit&&Send
Message&/button&
最后，worker线程监听消息并在指定的超时间隔后返回响应。
onmessage =
function(e)
setTimeout(function()
&&postMessage(e.data.message);
e.data.timeout
在IE 10预览版中，Web Worker API支持如下方法和事件：
void close();
终止worker线程。
void importScripts(in DOMString... urls);
逗号分隔的其他Javascript文件列表。
void postMessage(in any data);
void postMessage(in any
IE10预览版引入了通道消息(Channel Messaging)，支持在不同的浏览器情境中直接通过端口通信。该特性来自于标准。在创建端口之后，两边结合postMessage函数和onmessage事件来通信。
打开通道，创建MessageChannel对象：
var channel = new MessageChannel();
通道对象包含port1和port2两个端点。通常情况下，一个端点口作为本地端口，另一个发远程窗口或者worker线程。端口也可用于worker线程之间的通信。
下面的例子是发送端口用于跨文档通信。请注意端口数组必须是最后一个参数。
otherWindow.postMessage('hello', 'http://example.com',
[channel.port2]);
同样，你可以通过postMessage发送端口给worker线程，如下：
worker.postMessage({code:&port&}, [channel.port2]);
端口数组在事件的port属性中发送。端口可以使用一次并关闭，也可以保存到本地重复使用。下面的例子显示了worker线程如何接收和使用端口。
// Worker Thread
onmessage = function (event) {
&&if (event.data.code
== &port&) {
&&&&&&event.ports[0].postMessage(&Port
received.&);
端口收到后，进一步的通信利用postMessage和onmessage事件实现。下面的代码定义了事件处理器并发送利用通道端口发送消息。
channel.port1.onmessage = function (event) {
// Message is in
event.data
alert(&Message is: & +
event.data);
channel.port1.postMessage('hello');
本文只是汇总了IE10预览版对HTML5特性的支持，未来IE10正式版的具体情况我们还要拭目以待。长久以来，IE因其&我行我素&的风格受到Web开发人员的诟病，如今随着HTML5的标准化进程推进，IE团队也在努力追赶时代的脚步，特别是在Chrome和Firefox通过快速发布的方式抢占浏览器市场份额的严峻形势下，IE10的特性成为社区关注的焦点。感兴趣的读者可以从下载IE10平台预览版，并通过微软的中查看HTML5在IE中的演示程序。
注：本文涉及的所有代码示例均引自微软官方网站。
Author Contacted
语言 & 开发
280 他的粉丝
架构 & 设计
675 他的粉丝
115 他的粉丝
0 他的粉丝
故事和案例分析
0 他的粉丝
0 他的粉丝
1 他的粉丝
0 他的粉丝
0 他的粉丝
0 他的粉丝
1 他的粉丝
0 他的粉丝
0 他的粉丝
0 他的粉丝
0 他的粉丝
0 他的粉丝
0 他的粉丝
20 他的粉丝
0 他的粉丝
0 他的粉丝
2738 他的粉丝
1 他的粉丝
0 他的粉丝
553 他的粉丝
2882 他的粉丝
18 他的粉丝
0 他的粉丝
42 他的粉丝
10 他的粉丝
0 他的粉丝
JavaScript
47 他的粉丝
Internet Explorer
0 他的粉丝
相关厂商内容
相关赞助商
告诉我们您的想法
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
IE10 + HTML5 很好、很强大！
格式问题比较大
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
赞助商链接
架构 & 设计
文化 & 方法
InfoQ.com及所有内容，版权所有 ©
C4Media Inc. InfoQ.com 服务器由 提供, 我们最信赖的ISP伙伴。
极客邦控股（北京）有限公司
找回密码....
InfoQ账号使用的E-mail
关注你最喜爱的话题和作者
快速浏览网站内你所感兴趣话题的精选内容。
内容自由定制
选择想要阅读的主题和喜爱的作者定制自己的新闻源。
设置通知机制以获取内容更新对您而言是否重要
注意：如果要修改您的邮箱，我们将会发送确认邮件到您原来的邮箱。
使用现有的公司名称
修改公司名称为：
公司性质：
使用现有的公司性质
修改公司性质为:
使用现有的公司规模
修改公司规模为：
使用现在的国家
使用现在的省份
Subscribe to our newsletter?
Subscribe to our industry email notices?
我们发现您在使用ad blocker。
我们理解您使用ad blocker的初衷，但为了保证InfoQ能够继续以免费方式为您服务，我们需要您的支持。InfoQ绝不会在未经您许可的情况下将您的数据提供给第三方。我们仅将其用于向读者发送相关广告内容。请您将InfoQ添加至白名单，感谢您的理解与支持。匿名用户不能发表回复！|登录以解锁更多InfoQ新功能
获取更新并接收通知
给您喜爱的内容点赞
关注您喜爱的编辑与同行
966,690 二月 独立访问用户
语言 & 开发
架构 & 设计
文化 & 方法
您目前处于：
预览IE10支持的HTML5特性
预览IE10支持的HTML5特性
0&他的粉丝
日. 估计阅读时间:
：开启与Netflix、微软、ThoughtWorks等公司的技术创新之路！
亲爱的读者：我们最近添加了一些个人消息定制功能，您只需选择感兴趣的技术主题，即可获取重要资讯的。
HTML5拖放(Drag and Drop)
拖放功能在桌面客户端软件中应用十分普遍。HTML5标准对拖放做了规定，IE和之前的版本支持对象和拖放图片、超链接、文本的事件。IE10预览版对所有元素增加了属性，并且支持把一个或多个文件从桌面拖放到网页上。draggable属性支持你将任意HTML元素设为页面可拖放的。它提供了如下状态：
draggable = 'true'
该元素可拖放。
draggable = 'false'
该元素不可拖放。
draggable = 'auto'
该元素遵循默认的浏览器行为（文本、超链接和图片可拖放，其他元素不能）。
例如，下列代码支持用户拖放元素。
&button id=&mybutton& draggable=&true&&Drag
me&/button&
&img src=&photo.png& draggable=&true& /&
id=&mydiv& draggable=&true&&Moveable text&/div&
当用户拖动一个可拖放的元素时，IE10预览版随着拖动的光标移动显示一个元素的虚影。draggable属性是不可继承的，因此元素的子元素不会自动变成可拖放的。
除此之外，dataTransfer对象的files属性支持你把文件从桌面的文件夹中拖放到网页上。这种方式能够减少一些应用，如邮件客户端，把附件拖放进邮件内容中，或者在图库页面中添加照片。这种从桌面端到Web端的无缝交互无疑是Web开发的一大亮点。
下面的事件监听器和dropHandler函数展示了如何创建一个网页区域让用户拖放文件上去。其中的&dropspot&可以是div、image，或者其他元素。dragover和drop事件调用了doNothing()
函数避免默认的事件处理和冒泡，否则可能会导致不可预知的结果。
// this function runs when the page loads to set up the drop area
&// Set the drop-event handlers
&var dropArea =
document.getElementById(&dropspot&);
&dropArea.addEventListener(&drop&,
dropHandler, false);
&dropArea.addEventListener(&dragover&, doNothing,
function dropHandler(event)
&// use our doNothing()
function to prevent default processing
&doNothing(event);
&// get the
file(s) that are dropped
&var filelist =& event.dataTransfer.
(!filelist)& // if null, exit now
&var filecount = filelist.&
// get number of dropped files
&if (filecount & 0)
something with the files.&&&&&&&
// Prevents the event from
continuing so our handlers can process the event.
doNothing(event)
&event.stopPropagation();
&event.preventDefault();
IE10预览版引入了对File API的支持。来自于w3c的草案，表示web应用中的文件对象，并且可以编程选取它们并访问数据。File API目前正在被W3C Web应用工作组标准化。通过该API，web开发人员可以在客户端机器上以安全地方式访问本地文件，而无需扩展或者插件。
File API支持浏览器在用户授权的情况下读取和处理文件。此外，File API在无插件的情况下支持更流畅的文件上传体验，包括上传进度的状态反馈等。
在下面的W3C File API示例中，不同的代码片段分别处理进展、错误和成功条件：
function startRead() {
// Obtain input element through DOM.
var file = document.getElementById('file').files[0];
if(file) {
getAsText(file);
function getAsText(readFile) {
var reader = new FileReader();
// Read file into memory as UTF-16&&&&
reader.readAsText(readFile,
&UTF-16&);
// Handle progress, success, and errors
reader.onprogress =
reader.onload =
reader.onerror =
function updateProgress(evt) {
if (evt.lengthComputable) {
evt.loaded and evt.total are ProgressEvent properties.
& var loaded =
(evt.loaded / evt.total);
& if (loaded & 1) {
&&& // Increase the progress bar length.
style.width = (loaded * 200) + &px&;
function loaded(evt) {
// Obtain the read file data.&&
var fileString
= evt.target.
// Handle UTF-16 file dump
if(utils.regexp.isChinese(fileString)) {
//Chinese Characters + name validation.
& // Run other charset
// xhr.send(fileString)&&&
function errorHandler(evt) {
if(evt.target.error.code ==
evt.target.error.NOT_READABLE_ERR) {
& // The file could not be
其他文件相关的改进包括带有文件类型过滤的多文件上传。在下例中，多个GIF或者JPEG文件可以被用户选择：
&input type=&file& name=&pic& multiple accept=&image/gif, image/jpeg&
HTML5 表单和输入验证&
IE10预览版增加了对新的支持。这些支持帮助开发人员可以通过很少的脚本来快速、简便的提供用户提示和输入验证。在HTML5的输入类型和属性出现之前，检查手机号码没有包含字母，或者验证邮件地址正确输入，都需要开发人员编写额外的代码。HTML5客户端表单和输入验证帮会组开放人员关注其他任务而不是构建验证函数。
新URL和email输入类型
新HTML5输入类型支持提供了内建的URL和email输入类型。URL输入元素接受完全合格的地址，例如。同样，email输入类型接受标准的email格式，如。在下面的例子中，如果用户不正确地输入了URL或者email地址，IE就会显示错误信息。
&input type=&url& name=&url&/&
&input type=&email&
name=&email&/&
新输入属性
IE10预览器提供了对新的支持，如required、pattern和placeholder能够帮助开发人员确保用户在网页中输入所需的、正确的数据。
required属性
required属性表示该元素必须填写值才能提交。该属性能够用于text、text
area、URL、email、select、checkbox或者radio
button等元素。这是一个Boolean属性。当用户的鼠标悬停在required区域时，他们会看到相应的必填提示，如果设定了title属性，那么会显示该值。
&form id=&yourname&&
&label&Enter your first name:
&input name=&firstname& type=&text& required&&input type=&submit&
value=&Go&/&
如果用户尝试在不填写该区域的情况下提交表单，他们会收到错误信息，而且键盘焦点会置于为填写的区域中。
pattern属性
pattern属性允许你定义一个正则表达式要求用户的输入必须匹配。pattern属性支持text、search、url、email和password等输入元素。
&&& &input type=&tel& name=&tel&
pattern=&\(\d\d\d\) \d\d\d\-\d\d\d\d&
&& & title=&enter a telephone number in
&&the format (xxx) xxx-xxxx&/&
&&& &input
type=&submit&/&
min、max和step属性
min、max和step属性适用于input
type=number。min和max定义了数据的最小值和最大值。step属性定义了开发人员允许的跳跃值。例如，如果min=0，step=1，那么0、1、2、3......是允许的。如果min=1.1，step=1，那么1.1、2.1、3.1......是允许的。下面的例子展示了输入区域要求0到10之间的偶数。任何此范围之外的数据或者奇数都不能提交，而且会显示错误消息。
&label&Enter an even number between 0 and 10:
&input type=&number& min=&0& max=&10& step=&2&/&
type=&submit&/&
placeholder属性
占位符属性，在web开发中很常见，通过设置该属性，用户能够在输入区域看到&虚拟&的示例，直观明了，也减轻了开发人员的负担。IE10预览版支持对该属性做样式化定制，包括属性值的文本颜色、背景颜色、字体等等。
autofocus属性
自动聚焦属性帮助开发人员设置页面加载后的光标位置，无须用户主动点击某个输入控件。该属性只能用于页面的单个元素，如果同一页面的多个元素都设置了autofocus属性，那么只有第一个元素起作用。
大小写开关提示
该功能之前已经广泛应用于桌面客户端应用，比如用户输入密码时，如果打开了大小写开关（Caps lock ），那么应用会弹出对话框提示。IE10预览版加入了该项提示功能，无须开发人员编写任何代码，该功能在大小写开关打开的时候即自动触发提示。
IE10预览版完全支持HTML5的解析算法，不断完善与其他浏览器的一致行为。这些努力包括支持SVG-in-HTML、HTML语义元素、保留未知元素的结构和改善对空格的处理。
IE团队在HTML解析器上的目标是让所有的HTML在跨浏览器中解析行为一致。这可能是因为HTML5是第一个完整定义HTML解析规则的标准，细致到最边缘的情况和错误条件。即使HTML标记是无效的，HTML5仍然定义了如何解析它，IE
10遵循了这些原则。这种跨浏览器的一致行为使得开发人员在创建应用解析DOM元素时，不必把过多精力花费在单独处理IE的&异常&行为。下面的解析例子展示了这些改进中修补的部分情况。
DOM ( HTML5 + IE10 )
DOM ( IE9 )
&b&1&i&2&/b&
&&& &|- &2&
&&|- &Test 1\n&
|- &object&
&&|- &\n &
&&&&|- &Test 2\n&
&&|- &Test 1\n&
|- &object&
&&|- &\n &
&&|- &Test 2\n&
除此之外，因为早期IE的一些特性无法与HTML5解析兼容，它们已经从IE10预览版中删除。用户在使用IE10的legacy compatibility模式访问依赖这些陈旧特性的网站时不会出现问题。通过这种方式，现在正常运行的网站即使没有时间和资源来更新自己，那么网站依然可以在IE10中工作。
条件注释在当前的跨浏览器Web开发中使用广泛，成为大家判断某项特性是否支持的重要判断方法，但是它们只适用于IE的老版本。
&!--[if IE]&
This content is ignored in IE10 Platform Preview and
other browsers.
In older versions of Internet Explorer, this renders as part
of the page.
&![endif]--&
如果需要区分浏览器，请使用 ，例如下面的代码示例：
function registerEvent( sTargetID, sEventName, fnHandler )
oTarget = document.getElementById( sTargetID );
&&if ( oTarget != null )
&&&&&if ( oTarget.addEventListener ) {
&&&&&&&&oTarget.addEventListener( sEventName, fnToBeRun, false
&&&&&} else {
&&&&&&&var sOnEvent = &on& + sEventN
&&&&&&&if (
oTarget.attachEvent )
&&&&&&&&&&oTarget.attachEvent( sOnEvent,
fnHandler );
这种新式判断方式逐渐成为兼容性开发的主流，其优点在于不再依赖于条件注释，而是通过判断所需特性本身是否存在来做进一步的处理。
HTML5 沙箱
IE10预览版支持，确保对包含不可信内容的元素的安全限制。这些限制通过防止不可信内容执行导致潜在恶意行为的操作提高安全性。
为了启用这些限制，在元素中设置sanbox属性，如下所示：
&iframe sandbox src=&frame1.html&&&/iframe&
当sanbox属性在iframe元素中指定时，iframe元素中的内容称为被置于沙箱中。沙箱中的iframe元素，如下行为受到限制：
沙箱内容不能打开弹出窗口和新浏览器窗口。某些方法如()、()、()等会失败（无反馈）。
超链接不能在新窗口打开。
沙箱内容被认为来自于单一域，防止对受到保护的API的访问，如cookie、local
storage和其他文档的DOM。
顶级窗口不能被沙箱内容导航。
沙箱内容不能提交表单数据。
插件(、)不能实例化。
自动的元素行为被禁用，包括元素的刷新、控件的自动聚焦和、元素的。
Web Workers
IE10预览版开始支持Web Workers。提供了一种在后台运行脚本的方式。
传统上，浏览器都是单线程的，强制应用中的所有脚本都在一个UI线程中统一运行。虽然你可以通过使用DOM时间和
API来创建若干任务同时执行的假象，但是计算密集型任务会对用户体验造成严重的伤害。
Web Worker
API为Web应用开发者提供了一种启动后台脚本并与主页面并发运行的方式。你可以同时创建多个线程用于长时间运行的任务。新的Worker对象需要一个.js文件，通过对服务器的异步请求包含进来。
var myWorker = new Worker('worker.js');
进出worker线程的所有通信都通过消息管理。主worker和其他worker都可以利用，并利用事件监听响应。消息的内容作为事件的
属性发送。
下面的例子创建了一个worker线程并监听消息。
var hello = new Worker('hello.js');
hello.onmessage = function(e)
alert(e.data);
worker线程发送消息：
postMessage('Hello world!');
Worker之间的双向通信
要建立双向通信，主页面和worker线程都监听onmessage事件。在下面的例子中，worker线程在一定的延迟之后返回消息。首先，脚本创建worker线程。
var echo = new Worker('echo.js');
echo.onmessage = function(e)
alert(e.data);
消息内容和超时值在表单中指定。当用户点击提交按钮，脚本把两个值传递给worker线程。为了防止页面在新的HTTP请求中提交表单值，事件处理器也调用了preventDefault函数。请注意你无法发送对DOM对象的引用给worker线程。Web
Workers对它们能够访问的数据做了限制。只有Javascript原始数据类型，如Object或者String值允许。
window.onload = function() {
var echoForm =
document.getElementById('echoForm');
echoForm.addEventListener('submit',
function(e) {
&&echo.postMessage({
&&&&message :
e.target.message.value,
e.target.timeout.value
e.preventDefault();
&/script&&form id=&echoForm&&
&p&Echo the
following message after a delay.&/p&
&input type=&text&
name=&message& value=&Input message here.&/&&br/&
type=&number& name=&timeout& max=&10& value=&2&/&
seconds.&br/&
&button type=&submit&&Send
Message&/button&
最后，worker线程监听消息并在指定的超时间隔后返回响应。
onmessage =
function(e)
setTimeout(function()
&&postMessage(e.data.message);
e.data.timeout
在IE 10预览版中，Web Worker API支持如下方法和事件：
void close();
终止worker线程。
void importScripts(in DOMString... urls);
逗号分隔的其他Javascript文件列表。
void postMessage(in any data);
void postMessage(in any
IE10预览版引入了通道消息(Channel Messaging)，支持在不同的浏览器情境中直接通过端口通信。该特性来自于标准。在创建端口之后，两边结合postMessage函数和onmessage事件来通信。
打开通道，创建MessageChannel对象：
var channel = new MessageChannel();
通道对象包含port1和port2两个端点。通常情况下，一个端点口作为本地端口，另一个发远程窗口或者worker线程。端口也可用于worker线程之间的通信。
下面的例子是发送端口用于跨文档通信。请注意端口数组必须是最后一个参数。
otherWindow.postMessage('hello', 'http://example.com',
[channel.port2]);
同样，你可以通过postMessage发送端口给worker线程，如下：
worker.postMessage({code:&port&}, [channel.port2]);
端口数组在事件的port属性中发送。端口可以使用一次并关闭，也可以保存到本地重复使用。下面的例子显示了worker线程如何接收和使用端口。
// Worker Thread
onmessage = function (event) {
&&if (event.data.code
== &port&) {
&&&&&&event.ports[0].postMessage(&Port
received.&);
端口收到后，进一步的通信利用postMessage和onmessage事件实现。下面的代码定义了事件处理器并发送利用通道端口发送消息。
channel.port1.onmessage = function (event) {
// Message is in
event.data
alert(&Message is: & +
event.data);
channel.port1.postMessage('hello');
本文只是汇总了IE10预览版对HTML5特性的支持，未来IE10正式版的具体情况我们还要拭目以待。长久以来，IE因其&我行我素&的风格受到Web开发人员的诟病，如今随着HTML5的标准化进程推进，IE团队也在努力追赶时代的脚步，特别是在Chrome和Firefox通过快速发布的方式抢占浏览器市场份额的严峻形势下，IE10的特性成为社区关注的焦点。感兴趣的读者可以从下载IE10平台预览版，并通过微软的中查看HTML5在IE中的演示程序。
注：本文涉及的所有代码示例均引自微软官方网站。
Author Contacted
语言 & 开发
280 他的粉丝
架构 & 设计
675 他的粉丝
115 他的粉丝
0 他的粉丝
故事和案例分析
0 他的粉丝
0 他的粉丝
1 他的粉丝
0 他的粉丝
0 他的粉丝
0 他的粉丝
1 他的粉丝
0 他的粉丝
0 他的粉丝
0 他的粉丝
0 他的粉丝
0 他的粉丝
0 他的粉丝
20 他的粉丝
0 他的粉丝
0 他的粉丝
2738 他的粉丝
1 他的粉丝
0 他的粉丝
553 他的粉丝
2882 他的粉丝
18 他的粉丝
0 他的粉丝
42 他的粉丝
10 他的粉丝
0 他的粉丝
JavaScript
47 他的粉丝
Internet Explorer
0 他的粉丝
相关厂商内容
相关赞助商
告诉我们您的想法
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
IE10 + HTML5 很好、很强大！
格式问题比较大
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
赞助商链接
架构 & 设计
文化 & 方法
InfoQ.com及所有内容，版权所有 ©
C4Media Inc. InfoQ.com 服务器由 提供, 我们最信赖的ISP伙伴。
极客邦控股（北京）有限公司
找回密码....
InfoQ账号使用的E-mail
关注你最喜爱的话题和作者
快速浏览网站内你所感兴趣话题的精选内容。
内容自由定制
选择想要阅读的主题和喜爱的作者定制自己的新闻源。
设置通知机制以获取内容更新对您而言是否重要
注意：如果要修改您的邮箱，我们将会发送确认邮件到您原来的邮箱。
使用现有的公司名称
修改公司名称为：
公司性质：
使用现有的公司性质
修改公司性质为:
使用现有的公司规模
修改公司规模为：
使用现在的国家
使用现在的省份
Subscribe to our newsletter?
Subscribe to our industry email notices?
我们发现您在使用ad blocker。
我们理解您使用ad blocker的初衷，但为了保证InfoQ能够继续以免费方式为您服务，我们需要您的支持。InfoQ绝不会在未经您许可的情况下将您的数据提供给第三方。我们仅将其用于向读者发送相关广告内容。请您将InfoQ添加至白名单，感谢您的理解与支持。