五分钟学会HTML5！（二）
fmms
13年前
<p> 原文链接是<a href="/misc/goto?guid=4959517362657304669" target="_blank">http://www.codeproject.com/KB/solution-center/HTML5-in-5.aspx</a>.</p> <h1> HTML5开发与旧式浏览器的兼容</h1> <p> 我们已经讨论了HTML5许多很酷的新功能，包括新的语义元素、为画图而生的canvas标签，以及音频与视频支持。</p> <p><strong> 你可能会想：这些东西是很好，但当用户的浏览器不兼容HTML5时，可能就没法使用它们了。</strong>更不用说一些所谓的“支持”HTML5的浏览器，实际上只支持它的一部分功能而已。并不是所有HTML5新功能都会被所有浏览器所支持，而且许多HTML5特性在不同浏览器上也许使用了不同的实现方式。</p> <p> 不过，有一种方法可以使用新的特性，同时不影响旧版浏览器对你的站点的访问。你可以使用polyfill。</p> <p> 根据Paul Irish的说法，polyfill是模拟未来API的shim，它向旧版浏览器提供后备的功能。当旧版浏览器不支持站点中的某项HTML5功能时，polyfill会补充其中的空隙。学会使用这些polyfill，你就不必为了使用HTML5而抛弃那些使用旧版浏览器的用户。</p> <p> 获得polyfill支持的一种方法是使用JavaScript库——Modernizr（当然可用的不止这一种）。它会带来特性侦测能力，这样你就能检查浏览器究竟是否支持某种功能（比如canvas元素）。如果不支持，就提供一个备用的选择。</p> <p> 让我们研究一个示例。还记得吗？在介绍语义元素与页面布局时，我们已经使用过这个例子了。</p> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><!</span><span style="color:#ff00ff;">DOCTYPE html</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">head</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">charset</span><span style="color:#0000ff;">="utf-8"</span> <span style="color:#0000ff;">/></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span>Title<span style="color:#0000ff;"></</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="css/html5reset.css"</span><span style="color:#ff0000;"> rel</span><span style="color:#0000ff;">="stylesheet"</span> <span style="color:#0000ff;">/></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="css/style.css"</span><span style="color:#ff0000;"> rel</span><span style="color:#0000ff;">="stylesheet"</span> <span style="color:#0000ff;">/></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">head</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">header</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">hgroup</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">h1</span><span style="color:#0000ff;">></span>Header in h1<span style="color:#0000ff;"></</span><span style="color:#800000;">h1</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">h2</span><span style="color:#0000ff;">></span>Subheader in h2<span style="color:#0000ff;"></</span><span style="color:#800000;">h2</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">hgroup</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">header</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">nav</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">ul</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="#"</span><span style="color:#0000ff;">></span>Menu Option 1<span style="color:#0000ff;"></</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="#"</span><span style="color:#0000ff;">></span>Menu Option 2<span style="color:#0000ff;"></</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="#"</span><span style="color:#0000ff;">></span>Menu Option 3<span style="color:#0000ff;"></</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">ul</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">nav</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">section</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">article</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">header</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">h1</span><span style="color:#0000ff;">></span>Article #1<span style="color:#0000ff;"></</span><span style="color:#800000;">h1</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">header</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">section</span><span style="color:#0000ff;">></span> This is the first article. This is <span style="color:#0000ff;"><</span><span style="color:#800000;">mark</span><span style="color:#0000ff;">></span>highlighted<span style="color:#0000ff;"></</span><span style="color:#800000;">mark</span><span style="color:#0000ff;">></span>. <span style="color:#0000ff;"></</span><span style="color:#800000;">section</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">article</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">article</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">header</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">h1</span><span style="color:#0000ff;">></span>Article #2<span style="color:#0000ff;"></</span><span style="color:#800000;">h1</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">header</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">section</span><span style="color:#0000ff;">></span> This is the second article. These articles could be blog posts, etc. <span style="color:#0000ff;"></</span><span style="color:#800000;">section</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">article</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">section</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">aside</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">section</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">h1</span><span style="color:#0000ff;">></span>Links<span style="color:#0000ff;"></</span><span style="color:#800000;">h1</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">ul</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="#"</span><span style="color:#0000ff;">></span>Link 1<span style="color:#0000ff;"></</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="#"</span><span style="color:#0000ff;">></span>Link 2<span style="color:#0000ff;"></</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="#"</span><span style="color:#0000ff;">></span>Link 3<span style="color:#0000ff;"></</span><span style="color:#800000;">a</span><span style="color:#0000ff;">></</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">ul</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">section</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">figure</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">img </span><span style="color:#ff0000;">width</span><span style="color:#0000ff;">="85"</span><span style="color:#ff0000;"> height</span><span style="color:#0000ff;">="85"</span><span style="color:#ff0000;"> src</span><span style="color:#0000ff;">="http://www.windowsdevbootcamp.com/Images/JennMar.jpg"</span><span style="color:#ff0000;"> alt</span><span style="color:#0000ff;">="Jennifer Marsman"</span> <span style="color:#0000ff;">/></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">figcaption</span><span style="color:#0000ff;">></span>Jennifer Marsman<span style="color:#0000ff;"></</span><span style="color:#800000;">figcaption</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">figure</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">aside</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">footer</span><span style="color:#0000ff;">></span>Footer - Copyright 2011<span style="color:#0000ff;"></</span><span style="color:#800000;">footer</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span></pre> </div> <p> 这段代码包含了一系列不被旧版浏览器支持的新HTML5元素。记住，在IE9中，它的效果如下图所示。</p> <p><img style="display:block;margin-left:auto;margin-right:auto;" alt="enter image description here" src="http://www.ituring.com.cn/download/01Qj3c8om3qm" /></p> <p> 我们可以使用Internet Explorer开发工具观察它在旧版IE中的模样。在Internet Explorer界面下，按F12键打开Internet Explorer开发工具。</p> <p><img style="display:block;margin-left:auto;margin-right:auto;" alt="enter image description here" src="http://www.ituring.com.cn/download/01Qj3cA3lYbD" /></p> <p> 注意，现在的Browser Mode（在页面上方的灰色菜单栏里）被设置为IE9。单击Browser Mode，在弹出的下拉列表中选择“Internet Explorer 8”（IE8不支持HTML5）。</p> <p><img style="display:block;margin-left:auto;margin-right:auto;" alt="enter image description here" src="http://www.ituring.com.cn/download/01Qj3cBORmTa" /></p> <p> 修改完成，转到不兼容HTML5的浏览器之后，Web页面变得如下图所示。</p> <p><img style="display:block;margin-left:auto;margin-right:auto;" alt="enter image description here" src="http://www.ituring.com.cn/download/01Qj3cCFGWVv" /></p> <p> 这个效果看起来非常差劲，但实际上问题没那么严重。页面布局变得乱糟糟的原因，是IE8没能识别我所使用的那些HTML5新元素，于是就没有把它们加到DOM，随之而来的就是我们不能使用CSS去设计页面。</p> <p> 尽管如此，增加一条对Modernizr的引用（不需要改动任何其他代码！），就会把这些元素强制放入DOM。从<a href="/misc/goto?guid=4959517364920122903" target="_blank">http://www.modernizr.com/download/</a>下载完Modernizr后，在< head>区域添加一条引用即可，代码如下所示。</p> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">head</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">charset</span><span style="color:#0000ff;">="utf-8"</span> <span style="color:#0000ff;">/></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span>Title<span style="color:#0000ff;"></</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="css/html5reset.css"</span><span style="color:#ff0000;"> rel</span><span style="color:#0000ff;">="stylesheet"</span> <span style="color:#0000ff;">/></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="css/style.css"</span><span style="color:#ff0000;"> rel</span><span style="color:#0000ff;">="stylesheet"</span> <span style="color:#0000ff;">/></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">script </span><span style="color:#ff0000;">src</span><span style="color:#0000ff;">="script/jquery-1.6.2.min.js"</span><span style="color:#ff0000;"> type</span><span style="color:#0000ff;">="text/javascript"</span><span style="color:#0000ff;">></</span><span style="color:#800000;">script</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">script </span><span style="color:#ff0000;">src</span><span style="color:#0000ff;">="script/modernizr-2.0.6.js"</span><span style="color:#ff0000;"> type</span><span style="color:#0000ff;">="text/javascript"</span><span style="color:#0000ff;">></</span><span style="color:#800000;">script</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"></</span><span style="color:#800000;">head</span><span style="color:#0000ff;">></span></pre> </div> <p> 这里增加了两条脚本引用，一条指向jQuery，一条指向Modernizr。现在并不真的需要使用jQuery，但下一个脚本中它就要大显身手，所以这里一并增加了对它们的引用。</p> <p> 这么一个简单的变化，使得页面在IE8中变成了下图所示的式样。</p> <p><img style="display:block;margin-left:auto;margin-right:auto;" alt="enter image description here" src="http://www.ituring.com.cn/download/01Qj3cFMA9z8" /></p> <p> 它并不完美，但已经与我们在IE9中见到的原版本相当接近。Modernizr把这些IE8不能理解的HTML5新元素加入了DOM，正因为如此，我们才能用CSS去设计它们。</p> <p><strong> 其实，Modernizr可以做的远不止此。</strong>仔细观察前述Web页面的IE8和IE9版本，你会发现后者的两个article和图片的四角上有非常好看的圆角效果，而IE8中却没有。使用Modernizr，同样可以修复这一效果。</p> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">script </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="text/javascript"</span><span style="color:#0000ff;">></span><span style="background-color:#f5f5f5;color:#000000;"> </span><span style="background-color:#f5f5f5;color:#0000ff;">if</span><span style="background-color:#f5f5f5;color:#000000;"> (</span><span style="background-color:#f5f5f5;color:#000000;">!</span><span style="background-color:#f5f5f5;color:#000000;">Modernizr.borderradius) { $.getScript(</span><span style="background-color:#f5f5f5;color:#000000;">"</span><span style="background-color:#f5f5f5;color:#000000;">script/jquery.corner.js</span><span style="background-color:#f5f5f5;color:#000000;">"</span><span style="background-color:#f5f5f5;color:#000000;">, </span><span style="background-color:#f5f5f5;color:#0000ff;">function</span><span style="background-color:#f5f5f5;color:#000000;">() { $(</span><span style="background-color:#f5f5f5;color:#000000;">"</span><span style="background-color:#f5f5f5;color:#000000;">article</span><span style="background-color:#f5f5f5;color:#000000;">"</span><span style="background-color:#f5f5f5;color:#000000;">).corner(); $(</span><span style="background-color:#f5f5f5;color:#000000;">"</span><span style="background-color:#f5f5f5;color:#000000;">figure</span><span style="background-color:#f5f5f5;color:#000000;">"</span><span style="background-color:#f5f5f5;color:#000000;">).corner(); }); }</span><span style="color:#0000ff;"></</span><span style="color:#800000;">script</span><span style="color:#0000ff;">></span></pre> </div> <p> 在这个脚本中，我们首先检查Modernizr对象，看它是否支持“borderradius”（这是CSS3的一项特性）。如果不支持，再使用一段jQuery脚本调用jquery.corner.js（前提是先从<a href="/misc/goto?guid=4959517365012206497" target="_blank">http://jquery.malsup.com/corner/</a>下载它，然后在< head>中引用jQuery——正像我前面所做的那样）。接下来，简单地从脚本中为article和figure调用corner方法，即可形成圆角效果。</p> <p> 除了上面所说，你还可以用一种稍微不同的方法解决这个问题。Modernizr有一个可选的（未包含）条件资源加载器（conditional resource loader），即Modernizr.load()，它基于Yepnope.js。它允许你只将用户需要的polyfill脚本载入页面，而且这种异步和并行的载入有时候会带来性能上的提升。为了得到Modernizr.load，你必须在一个自定义的Modernizr版本中（必须在<a href="/misc/goto?guid=4959517364920122903" target="_blank">http://www.modernizr.com/download/</a>上创建）包含它，开发版本中并没有包含它。使用Modernizr.load，我们可以写出下列脚本：</p> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">script </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="text/javascript"</span><span style="color:#0000ff;">></span><span style="background-color:#f5f5f5;color:#000000;"> Modernizr.load({ test: Modernizr.borderradius, nope: </span><span style="background-color:#f5f5f5;color:#000000;">'</span><span style="background-color:#f5f5f5;color:#000000;">script/jquery.corner.js</span><span style="background-color:#f5f5f5;color:#000000;">'</span><span style="background-color:#f5f5f5;color:#000000;">, callback: </span><span style="background-color:#f5f5f5;color:#0000ff;">function</span><span style="background-color:#f5f5f5;color:#000000;"> () { $(</span><span style="background-color:#f5f5f5;color:#000000;">'</span><span style="background-color:#f5f5f5;color:#000000;">article</span><span style="background-color:#f5f5f5;color:#000000;">'</span><span style="background-color:#f5f5f5;color:#000000;">).corner(); $(</span><span style="background-color:#f5f5f5;color:#000000;">'</span><span style="background-color:#f5f5f5;color:#000000;">figure</span><span style="background-color:#f5f5f5;color:#000000;">'</span><span style="background-color:#f5f5f5;color:#000000;">).corner(); } });</span><span style="color:#0000ff;"></</span><span style="color:#800000;">script</span><span style="color:#0000ff;">></span></pre> </div> <p> 总而言之，这段代码实现了与前面的脚本相同的功能。Modernizr.load首先检测布尔属性“Modernizr.borderradius”以确定它是否被支持。然后，nope定义了在test为false时将要加载的源。尽管IE8并不支持CSS3属性“borderradius”，但它会载入jquery.corner.js脚本。最后，callback指定了一个函数，脚本载入完成后会执行该函数。因此，我们在这个函数里为article和figure调用了corner方法（就像前面的代码那样）。如果你想进一步研究Modernizr.load， <a href="/misc/goto?guid=4959517365117185952" target="_blank">http://www.modernizr.com/docs/#load</a>上有一份简明教程可供参考。</p> <p><img style="display:block;margin-left:auto;margin-right:auto;" alt="enter image description here" src="http://www.ituring.com.cn/download/01Qj3d4luiEv" /></p> <p> 不管使用上面哪种脚本，我们得到的IE8（不支持HTML5）版本Web页面都如上图所示。</p> <p> 因此，使用polyfill或者其他工具（例如Modernizr），就可以使用HTML5的新功能，同时在旧版本浏览器上提供良好的用户体验。这方面的更多信息，请参考<a href="/misc/goto?guid=4959517365237844809" target="_blank">http://www.diveintohtml5.org/detect.html</a>，这里详细地阐述了Modernizr侦测HTML5特性的细节。</p> <h1> 小结</h1> <p> 在这篇HTML5的导论中，我们谈到了语义标签、canvas、audio和video，以及如何在使用HTML5的同时保持对旧版浏览器的支持。需要注意的是，我们还有很多东西没有讲：微数据（microdata），存储，CSS3，等等……接下来，我会给出一些继续学习HTML5的资源。</p> <p><strong> <a href="/misc/goto?guid=4958331754702597095" target="_blank">IE Test Drive</a>：</strong>就算你不使用IE，也不要忘了它其实是一个优秀的站点。这里的<a href="/misc/goto?guid=4959517365530096288" target="_blank">demo</a>多如牛毛：入门Demo， HTML5 Demo，图形Demo，以及浏览器Demo。你可以在最喜欢的浏览器中尽情试用它们。本站点还有一些指向其他资源的链接。</p> <p><strong> <a href="/misc/goto?guid=4958322406456687672" target="_blank">Beauty of the Web</a>：</strong>这是一个专门展示优秀web站点的地方。这些站点充分利用了HTML5的硬件加速特性，以及那些与IE9契合的pinning特性。</p> <p><strong> <a href="/misc/goto?guid=4959517365704789741" target="_blank">BuildMyPinnedSite</a>：</strong>在使用pinning和Windows整合时，你需要的所有代码、想法和示例都可以在这里找到。</p> <p><strong> <a href="/misc/goto?guid=4959517365897868015" target="_blank">HTML5 Labs</a>：</strong>本站点提供Web标准化组织（如W3C）发布的不稳定规格说明书，以及早期的Microsoft原型。在这里，你可以对IndexedDB、 WebSockets、 FileAPI和Media Capture API等原型先睹为快。</p> <h2> 视频</h2> <p><strong> <a href="/misc/goto?guid=4959517366031040939" target="_blank">Brandon Satrom 在TechEd 2011上的演讲 “Application Development with HTML5”</a> ：</strong>这场长达一小时的经典演讲，阐述了HTML5开发的精髓。</p> <p><strong> <a href="/misc/goto?guid=4959517366159799121" target="_blank">来自MIX 2011的HTML5演讲</a>：</strong>大量关于HTML5的会议。</p> <h2> 工具</h2> <p> 许多开发工具都已提供HTML5支持，试试下面这些：</p> <ul> <li> <p><strong>Visual Studio 2010 SP1</strong> – SP1 增加了对HTML5、CSS3 IntelliSense和Validation基本功能的支持。更多相关信息请参见<a href="/misc/goto?guid=4959517366337398410" target="_blank">http://blogs.msdn.com/b/webdevtools/archive/2011/01/27/html5-amp-css3-in-visual-studio-2010-sp1.aspx</a>。</p> </li> <li> <p><strong>Web Standards升级版Microsoft Visual Studio 2010 SP1</strong> – 这是一个Visual Studio 的扩展，它增加了对HTML5、CSS3 IntelliSense和Validation高阶功能的支持，基于目前的W3C说明书。</p> </li> <li> <p><strong>WebMatrix</strong> –默认以“开包即用”的方式支持HTML5（使用默认的HTML5文档类型和模板代码来添加一个新的HTML页面）。</p> </li> <li> <p><strong>ASP.NET MVC 3工具升级</strong></p> <p>New Project 对话框包含了一个复选框，可以让你使用带项目模板的HTML5版本。</p> <p>借助于Modernizr 1.7，这些模板所提供的兼容性使得较低版本的浏览器也能够支持HTML5和CSS3。</p> </li> <li> <p><strong>Expression Web 4 SP1</strong></p> <p>包含HTML5 IntelliSense，同时支持Code Editor和设计视图。</p> <p>更丰富的CSS3 样式编辑和IntelliSense。</p> <p>SuperPreview Page Interaction Mode（超前预览页面交互模式）和在线服务 (远程浏览器，包括Chrome、 IE8、IE9、Safari 4&5，平台包括Windows和Mac) 。</p> </li> </ul> <p> 除了以上这些开发工具，不要忘记下面两条：</p> <ul> <li> <p>Windows Phone “Mango” 包含Internet Explorer 9，它支持HTML5站点。</p> </li> <li> <p>Internet Explorer 10 Paltform Preview（平台预演）支持许多新的CSS3和HTML5特性，完整的特性清单位于http://msdn.microsoft.com/en-us/ie/gg192966.aspx。</p> </li> </ul> <p> HTML5就介绍到这里，要开发优秀的网站，就看你了！</p> <h1> 许可证</h1> <p> 本文，包括相关的源代码和文件，都得到了<a href="/misc/goto?guid=4958875487386717153" target="_blank">The Code Project Open License (CPOL)</a>的许可。</p> <h1> 关于作者</h1> <p> <a href="/misc/goto?guid=4959517366626772241" target="_blank">Jennifer Marsman</a></p>