5 分钟学会 HTML5！
4.82/5 (58投票s)
毫无疑问，HTML5 是开发者们关注的热点。如果你需要快速了解 HTML5 功能基础的速成课程，那么这里就是你的不二之选。
我将介绍新的语义标记、用于绘图和动画的 Canvas、音频和视频支持，以及如何在旧版浏览器中使用 HTML5。可能需要的时间会比五分钟稍长，但我保证会让你快速掌握。请跟随我……这一切都是值得的！
语义标记和页面布局
有一个很好的故事，关于一所大学在建设校园时，没有修建任何人行道。他们只种了草，然后等待。
一年后，人们经常走过的地方，草都磨损了。所以，大学就在那里铺设了真正的人行道。
这完全说得通！人行道正好建在人们实际行走的地方。
HTML5 的新语义元素正是基于这个相同的逻辑（参见 W3C 设计指南 “铺设牛道”）。
语义元素向浏览器和开发者清晰地描述了它们的含义或目的。这与（例如）<div> 标签形成对比。<div> 标签定义了 HTML 文档中的一个 division 或 section，但它并没有告诉我们关于其内容的信息，也没有传达任何明确的含义。<div>
开发者通常会在这些 <div> 标签中使用 ID 和/或类名。这向开发者传达了更多含义，但遗憾的是，这并没有帮助浏览器理解该标记的用途。<div id="header">
在 HTML5 中，有一些新的、富含语义的元素可以向开发者和浏览器传达元素的用途。<header>
W3C 挖掘了数十亿现有网页，以发现开发者们已经使用的 ID 和类名。一旦他们抛弃了 div1, div2 等，他们就列出了一系列已经被使用的、含义丰富的描述性元素，并将它们作为标准。
以下是 HTML5 中一些新的语义元素
- 文章
- aside
- figcaption
- figure
- footer
- header
- hgroup
- mark
- nav
- section
- 时间
由于其丰富的语义，你大概可以猜出这些元素中的大部分作用。
但万一你不清楚，这里有一个可视化图
Header 和 footer 不言自明，nav 创建一个导航或菜单栏。你可以使用 section 和 article 来组织你的内容。最后，aside 元素可以用于次要内容，例如，作为相关链接的侧边栏。
这是一个使用这些元素的简单代码示例。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Title</title>
<link href="css/html5reset.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<header>
<hgroup>
<h1>Header in h1</h1>
<h2>Subheader in h2</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">Menu Option 1</a></li>
<li><a href="#">Menu Option 2</a></li>
<li><a href="#">Menu Option 3</a></li>
</ul>
</nav>
<section>
<article>
<header>
<h1>Article #1</h1>
</header>
<section>
This is the first article. This is <mark>highlighted</mark>.
</section>
</article>
<article>
<header>
<h1>Article #2</h1>
</header>
<section>
This is the second article. These articles could be blog posts, etc.
</section>
</article>
</section>
<aside>
<section>
<h1>Links</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</section>
<figure>
<img width="85" height="85"
src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg"
alt="Jennifer Marsman" />
<figcaption>Jennifer Marsman</figcaption>
</figure>
</aside>
<footer>Footer - Copyright 2011</footer>
</body>
</html>
我应该指出此代码中的其他几个新元素……
你注意到 hgroup 元素了吗？它将我的 h1 和 h2 标题组合在一起？
mark 元素允许我高亮或标记一些重要的文本。最后，figure 和 figcaption 元素分别指定内容中的一个图形（如图像、图表、照片、代码片段等）并允许我为其关联一个标题。这是将该网页与一些 CSS 结合后的效果。（注意：我借鉴了我才华横溢的团队成员 Brandon Satrom 的 TechEd 演讲 中的 CSS，但效果不那么漂亮的部分都是我做的。）
现在，想象一下，如果这段代码掌握在真正擅长 CSS 的人手中（而我不是）。结果非常强大。HTML 的描述性使其非常容易上手。
最后，如果你正在 Visual Studio 中尝试跟随操作，但看到到处都是 VS 不理解的 HTML5 元素的波浪线，请**确保你已安装**Visual Studio 2010 SP1**。**
然后，在 Visual Studio 菜单中，转到“工具”、“选项”。在左侧导航窗格中，展开“文本编辑器”、“HTML”，然后单击“验证”。从“目标”下拉菜单中，选择“HTML5”。这将为你提供 HTML5 IntelliSense 支持。呼！
要深入了解语义元素，请参阅
· Dive into HTML5 关于语义的章节，题为“这都意味着什么？”
使用 Canvas 元素在 HTML5 中绘图
HTML5 中的另一个新元素是 <canvas> 标签。它就像它的名字一样——一个用于绘图的空白画布。你需要使用 JavaScript 来操作和绘制 Canvas。
你可能想为你的 canvas 元素添加一个 id 属性，以便你可以从 JavaScript 代码中以编程方式访问它（或者如果你使用的是 jQuery，并且它是页面上唯一的 canvas，你可以使用 $(‘canvas’)` 来访问它，而无需命名）。
你还可以（可选地）为 Canvas 指定 height 和 width。在 <canvas> 和 </canvas> 之间，你可以指定一些文本，以在不支持 canvas 元素的浏览器中显示。
这是一个使用 Canvas 进行绘图的简单示例。（我正在尝试绘制苏格兰国旗。请原谅任何不准确之处。）
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas">Your browser does not support the canvas tag.</canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// Draw blue rectangle
ctx.fillStyle = '#0065BD';
ctx.fillRect(0, 0, 125, 75);
// Draw white X
ctx.beginPath();
ctx.lineWidth = "15";
ctx.strokeStyle = "white";
ctx.moveTo(0, 0);
ctx.lineTo(125, 75);
ctx.moveTo(125, 0);
ctx.lineTo(0, 75);
ctx.stroke();
</script>
</body>
</html>
这是代码产生的效果
现在让我们一步步分析代码。
首先，我创建了实际的 Canvas 并为其 ID 命名为“myCanvas”。如果这段代码在不支持 HTML5 canvas 元素的浏览器中查看，它将显示“您的浏览器不支持 canvas 标签”，而不是绘制国旗。
接下来，我有一个脚本。 请记住，canvas 标签只是图形的容器；你必须使用 JavaScript 来实际绘制和渲染图形。首先，我使用“myCanvas”ID 获取对 Canvas 的引用，然后获取 Canvas 的上下文，该上下文提供用于在 Canvas 上绘制和操作图形的方法/属性。我指定了“2d”以使用二维上下文在页面上绘制。
然后，我绘制了蓝色矩形。 我使用 fillStyle 指定蓝色。我使用 fillRect 来绘制矩形，指定大小和位置。调用 fillRect(0, 0, 125, 75) 意味着：从位置 (0, 0)——左上角——开始，绘制一个宽度为 125 像素、高度为 75 像素的矩形。
最后，我在国旗上绘制了白色 X。 我首先调用 beginPath 来开始绘制路径。我将 lineWidth 设置为 15 像素（使用猜测和检查的方法尝试不同的值，直到看起来正确），并将 strokeStyle 设置为“white”以使路径颜色为白色。然后我使用 moveTo 和 lineTo 描绘路径。这些方法为你定位一个用于绘制的“光标”；区别在于 moveTo 在移动时不绘制线条，而 lineTo 在移动时绘制线条。我首先移动到位置 (0, 0)——左上角——然后绘制一条线到 (125, 75)——右下角。然后我移动到位置 (125, 0)——右上角——并绘制一条线到 (0, 75)——左下角。最后，stroke 方法实际渲染这些笔画。
Canvas 与 SVG 快速对比
可缩放矢量图形 (SVG) 是早期用于在浏览器窗口中绘图的标准。随着 HTML5 Canvas 的发布，许多人都在想它们之间如何比较。
在我看来，最大的区别在于 Canvas 使用即时模式渲染，而 SVG 使用保留模式渲染。 这意味着 Canvas 直接导致图形的渲染到显示器。在我上面的代码中，一旦国旗绘制完成，系统就会忘记它，并且不保留任何状态。进行更改将需要完全重绘。相比之下，SVG 保留了要渲染的对象的一个完整模型。要进行更改，你可以简单地更改（例如）矩形的位置，浏览器将确定如何重新渲染它。这对于开发者来说工作量较小，但维护模型也更繁重。
通过 CSS 和 JavaScript 为 SVG 设置样式的能力值得一提，这是另一个需要考虑的因素。Canvas 只能通过 JavaScript 进行操作。
这是其他差异的高层概述
| 画布 | SVG | |
| 抽象 | 基于像素（动态位图） | 基于形状 |
| 元素 | 单个 HTML 元素 | 多个图形元素，成为文档对象模型 (DOM) 的一部分 |
| 驱动程序 | 仅通过脚本修改 | 通过脚本和 CSS 修改 |
| 事件模型 | 用户交互是细粒度的 (x,y) | 用户交互是抽象的 (rect, path) |
| 性能 | 在较小的表面和/或较多对象的情况下性能更好 | 在较少对象和/或较大表面上的性能更好 |
为了更详细的比较，我想推荐一些会议（我从中获得了这个精彩的表格，并征得了许可）
- Patrick Dengler 的“关于何时使用 SVG 和 Canvas 的思考”
- Jatinder Mann 的“深入了解 HTML5 Canvas”
- John Bristowe 的“HTML5 Canvas 入门”
音频和视频支持
HTML5 的一个重要新功能是支持播放音频和视频。在 HTML5 之前，你需要像 Silverlight 或 Flash 这样的插件来实现此功能。在 HTML5 中，你可以使用新的 <audio> 和 <video> 标签嵌入音频和视频。
从编码角度来看，音频和视频元素非常易于使用。（我将在下面提供更深入的属性介绍。）音频和视频元素也得到了所有主流浏览器的支持（最新版本的 Internet Explorer、Firefox、Chrome、Opera 和 Safari）。然而，棘手的部分是你需要编解码器来播放音频和视频，而不同的浏览器支持不同的编解码器。（有关视频容器和编解码器的精彩深入解释，请阅读 http://diveintohtml5.org/video.html。）幸运的是，这不是一个不可逾越的障碍。音频和视频的支持是以一种巧妙的方式实现的， 即支持尝试多种不同的文件格式（浏览器将尝试每一种，如果无法播放，则回退到下一种）。作为最佳实践，你应该提供多种音频和视频源以适应不同的浏览器。 你也可以回退到 Silverlight 或 Flash。最后，在开始和结束标签（如 <audio> 和 </audio>）之间的任何文本将在不支持音频或视频元素的浏览器中显示。
例如
<audio controls="controls">
<source src="laughter.mp3" type="audio/mp3" />
<source src="laughter.ogg" type="audio/ogg" />
Your browser does not support the audio element.
</audio>
使用此代码，浏览器将首先尝试播放 laughter.mp3 文件。如果它没有正确的编解码器来播放，它将尝试播放 laughter.ogg 文件。如果浏览器根本不识别 audio 元素，它将在应该显示音频控件的地方显示文本“您的浏览器不支持 audio 元素”。
音频和视频的一个注意事项：没有内置的数字版权管理 (DRM) 支持；你需要作为开发者自己实现。请参阅 W3C 的此链接，其中解释了他们的立场。（如果你需要 DRM 内容，也可以查看 Silverlight DRM 文档，这可能是一个更简单的解决方案。）
现在让我们深入了解这些新元素。
音频
首先，让我们更详细地看看 <audio>。
<audio controls="controls">
<source src="laughter.mp3" type="audio/mp3" />
<source src="laughter.ogg" type="audio/ogg" />
Your browser does not support the audio element.
</audio>
我们已经讨论了尝试每种源直到找到可播放的源的回退效果。
请注意，有一个 controls 属性。这将显示音频播放控件，包括播放/暂停按钮、时间、静音按钮和音量控件。在大多数情况下，向用户显示音频控件是个好主意；**我讨厌访问带有声音但无法停止、静音或调低音量的网站。** 你难道不讨厌吗？
这是 Internet Explorer 中的音频控件外观
控件在不同浏览器中的外观不同。这是它们在 Chrome 中的外观（播放着一首歌）。当您将鼠标悬停在最右边的声音图标上时，下拉式音量会弹出。
这是 Firefox 中的控件（暂停了一首歌）。与 Chrome 一样，当您将鼠标悬停在最右边的声音图标上时，它也有一个弹出式音量控件（未显示）。
audio 元素上其他有趣的属性包括
| Attribute | 可能的值 | 描述 |
| autoplay | autoplay | 一旦准备就绪就立即开始播放音频 |
| controls | controls | 在页面上显示音频播放控件 |
| loop | loop | 每次音频播放完毕后，都会使其重复播放 |
| preload | auto, metadata, none | 决定何时加载页面上的音频。值 *auto* 将加载音频，*metadata* 将仅加载与音频文件相关的元数据，*none* 将不预加载音频。（如果指定了 autoplay，则将忽略此属性。） |
| src | (some URL) | 指定要播放的音频文件的 URL |
因此，此代码示例不仅将显示音频播放控件，还会立即开始播放音频并一遍又一遍地循环播放。
<audio controls="controls" autoplay="autoplay" loop="loop">
<source src="laughter.mp3" type="audio/mp3" />
<source src="laughter.ogg" type="audio/ogg" />
Your browser does not support the audio element.
</audio>
如果你想自己动手在浏览器中尝试 <audio> 元素，w3schools.com 上有一个很棒的“Tryit Editor”，它允许你编辑一些示例代码并查看结果。或者尝试 如何为你的网站添加 HTML5 音频播放器 文章。
视频
现在，让我们来研究一下 <video> 元素。
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
如上所述，video 元素支持多个源，它将按顺序尝试，然后回退到下一个选项。
与音频一样，video 也有一个 controls 属性。这是 Internet Explorer 中 video 控件的屏幕截图
video 元素的其他有趣属性包括
| Attribute | 可能的值 | 描述 |
| 音频 | muted | 设置音频的默认状态（目前，“muted”是唯一选项） |
| autoplay | autoplay | 一旦准备就绪就立即开始播放视频 |
| controls | controls | 在页面上显示视频播放控件 |
| height | (value in pixels) | 设置视频播放器的高度 |
| loop | loop | 每次视频播放完毕后，都会使其重复播放 |
| poster | (some URL) | 指定一个图像的 URL，用于在没有可用视频数据时代表视频 |
| preload | auto, metadata, none | 决定何时加载页面上的视频。值 *auto* 将加载视频，*metadata* 将仅加载与视频文件相关的元数据，*none* 将不预加载视频。（如果指定了 autoplay，则将忽略此属性。） |
| src | (some URL) | 指定要播放的视频文件的 URL |
| width | (value in pixels) | 设置视频播放器的宽度 |
同样，要自己动手在浏览器中尝试 <video> 元素，请使用 w3schools.com 上的“Tryit Editor”，它允许你编辑一些示例代码并查看结果。
要了解有关视频和音频的更多信息，请参阅
在保留对旧版浏览器支持的同时使用 HTML5 进行开发
我们已经讨论了 HTML5 中许多很酷的新功能，包括新的语义元素、用于绘图的 Canvas 标签以及音频和视频支持。
你可能会认为这些东西真的很酷，但你不可能采用 HTML5，因为你的许多用户还没有 HTML5 兼容的浏览器。 更不用说支持 HTML5 的浏览器支持它的不同部分；并非所有新 HTML5 功能都得到所有浏览器的支持，并且各种功能可能实现方式不同。
但是，有一种方法可以在不破坏旧版浏览器用户体验的情况下使用新功能。你可以使用 polyfills（填充件）。
根据 Paul Irish 的说法，polyfill 是“一个模拟未来 API 的 shim，为旧版浏览器提供后备功能。” Polyfill 填补了不支持你网站上的 HTML5 功能的旧版浏览器中的空白。学习使用 polyfills 可以让你今天就使用 HTML5，而不会落下旧版浏览器的用户。
获取 polyfill 支持的一种方法是 JavaScript 库 Modernizr（但有许多 polyfills 可用）。Modernizr 添加了功能检测功能，因此你可以专门检查浏览器是否支持（例如）canvas 元素，并在不支持时提供备份选项。
让我们通过一个例子。还记得我介绍语义元素和页面布局时使用的代码示例吗？这里又来了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Title</title>
<link href="css/html5reset.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<header>
<hgroup>
<h1>Header in h1</h1>
<h2>Subheader in h2</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">Menu Option 1</a></li>
<li><a href="#">Menu Option 2</a></li>
<li><a href="#">Menu Option 3</a></li>
</ul>
</nav>
<section>
<article>
<header>
<h1>Article #1</h1>
</header>
<section>
This is the first article. This is <mark>highlighted</mark>.
</section>
</article>
<article>
<header>
<h1>Article #2</h1>
</header>
<section>
This is the second article. These articles could be blog posts, etc.
</section>
</article>
</section>
<aside>
<section>
<h1>Links</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</section>
<figure>
<img width="85" height="85"
src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg"
alt="Jennifer Marsman" />
<figcaption>Jennifer Marsman</figcaption>
</figure>
</aside>
<footer>Footer - Copyright 2011</footer>
</body>
</html>
这段代码包含许多旧版浏览器不支持的新 HTML5 元素。还记得吗，在 Internet Explorer 9 中，它是这样的
我们可以使用 Internet Explorer 开发者工具查看旧版 IE 中的效果。在 Internet Explorer 中，按 F12 键打开开发者工具。
请注意，浏览器模式（位于顶部的灰色菜单栏）当前设置为 IE9。单击“浏览器模式”，然后在出现的下拉菜单中，选择“Internet Explorer 8”（它不支持 HTML5）。
在我进行此更改并切换到不支持 HTML5 的浏览器后，我的网页看起来是这样的
虽然这看起来像一个棘手的问题，但实际上并没有那么糟糕。这种情况之所以无法工作，是因为 IE8 不识别我使用的新 HTML5 元素，因此它不会将它们添加到 DOM，所以你无法使用 CSS 来设置它们的样式。
但是，只需添加对 Modernizr 的引用（无需进行任何其他代码更改！）即可将这些元素强制添加到 DOM。从 http://www.modernizr.com/download/ 下载它，并在 <head> 部分添加一个引用，如下所示
<head>
<meta charset="utf-8" />
<title>Title</title>
<link href="css/html5reset.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<script src="script/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="script/modernizr-2.0.6.js" type="text/javascript"></script>
</head>
我添加了两个脚本引用，一个指向 jQuery，一个指向 Modernizr。实际上，此时我不需要 jQuery 引用，但我们在下一个脚本中需要它，所以我现在就添加它。
仅此简单的更改就使我的网站在 Internet Explorer 8 中达到了这个状态
它并不完美，但它非常接近我们在 Internet Explorer 9 中看到的原始版本。Modernizr 添加了 IE8 不理解的新 HTML5 元素到 DOM 中，并且因为它们在 DOM 中，所以我们可以使用 CSS 来设置它们的样式。
但是 Modernizr 做的不止这些！ 请注意，我们的 IE8 和 IE9 版本网页之间的区别之一是 IE9 版本对两个 article 和 figure 元素具有漂亮的圆角，而 IE8 版本没有。我们也可以使用 Modernizr 来解决这个问题。
<script type="text/javascript">
if (!Modernizr.borderradius) {
$.getScript("script/jquery.corner.js", function() {
$("article").corner();
$("figure").corner();
});
}
</script>
在此脚本中，我们正在检查 Modernizr 对象以查看是否支持“borderradius”（CSS3 功能）。如果不支持，我将使用一个名为 jquery.corner.js 的 jQuery 脚本（可在 http://jquery.malsup.com/corner/ 下载，并且需要我之前添加的额外 jQuery 引用）。然后我只需调用该脚本的 corner 方法来处理我的 article 和 figure，为它们添加圆角。
或者，你可以采取稍微不同的方式。Modernizr 有一个可选的（未包含的）条件资源加载器，名为 Modernizr.load()，它基于 Yepnope.js。这允许你仅加载用户需要的 polyfilling 脚本，并且它异步并行加载脚本，有时可以提供性能提升。要获取 Modernizr.load，你必须在自定义构建的 Modernizr 中包含它，而你需要通过 http://www.modernizr.com/download/ 创建该自定义构建；它不包含在开发版本中。使用 Modernizr.load，我们可以编写如下脚本
<script type="text/javascript">
Modernizr.load({
test: Modernizr.borderradius,
nope: 'script/jquery.corner.js',
callback: function () {
$('article').corner();
$('figure').corner();
}
});
</script>
简而言之，这实现了与我们之前脚本相同的功能。Modernizr.load 首先测试布尔属性“Modernizr.borderradius”以查看是否支持。然后，nope 定义了在 test 为 false 时要加载的资源。由于 IE8 不支持 CSS3 属性“borderradius”，它将加载 jquery.corner.js 脚本。最后，callback 指定一个函数，在脚本加载完成后运行，因此我们将像之前一样在我的 article 和 figure 上调用“corner”方法。如果你想深入了解 Modernizr.load，可以查看 http://www.modernizr.com/docs/#load 上的简短教程。
现在，通过使用以上任一脚本，我们的 Internet Explorer 8 版本（不支持 HTML5）看起来是这样的
因此，使用 polyfills 和像 Modernizr 这样的工具，你可以利用新的 HTML5 功能，同时仍然为旧版浏览器提供良好的体验。有关更多信息，请参阅 http://www.diveintohtml5.org/detect.html，其中详细介绍了 Modernizr 如何检测 HTML5 功能。
摘要
在本篇 HTML5 入门介绍中，我们涵盖了语义标记、Canvas、音频和视频，以及在保留对旧版浏览器支持的同时使用 HTML5。但也要注意，还有很多内容我们没有涵盖：微数据、存储、CSS3 等。以下是一些继续学习 HTML5 的资源
IE Test Drive – 即使你不使用 Internet Explorer，这也是一个很棒的网站。它包含大量演示：速度演示、HTML5 演示、图形演示和浏览器演示。在您喜欢的浏览器中尝试它们！该网站还提供了指向其他资源的链接。
Beauty of the Web – 展示了利用 HTML5 硬件加速和固定功能的最佳网站，适用于 Internet Explorer 9
BuildMyPinnedSite – 使用固定和 Windows 集成所需的所有代码、想法和示例
HTML5 Labs – Microsoft 在此网站上原型化来自 W3C 等网络标准机构的早期不稳定规范。你可以玩弄 IndexedDB、WebSockets、FileAPI 和 Media Capture API 等原型。
视频
Brandon Satrom 在 TechEd 2011 上的“使用 HTML5 进行应用程序开发”演讲 – 这是一个很棒的一小时演讲，概括了你进行 HTML5 开发所需了解的内容
MIX 2011 的 HTML5 演讲 – 大量 HTML5 会话
工具
许多开发工具已经支持 HTML5。试试这些
- Visual Studio 2010 SP1 – SP1 添加了基本的 HTML5 和 CSS3 IntelliSense 和验证。有关更多信息，请参阅 http://blogs.msdn.com/b/webdevtools/archive/2011/01/27/html5-amp-css3-in-visual-studio-2010-sp1.aspx。
- Microsoft Visual Studio 2010 SP1 Web 标准更新 – 这是一个 Visual Studio 扩展，它基于当前的 W3C 规范，为 Visual Studio 2010 SP1 添加了更新的 HTML5 和 CSS3 IntelliSense 和验证。
- WebMatrix – HTML5 默认开箱即用支持（添加新 HTML 页面会使用 HTML5 默认 doctype 和模板代码）
- ASP.NET MVC 3 工具更新
- 新建项目对话框包含一个可勾选的 HTML5 版本项目模板。
- 这些模板利用 Modernizr 1.7 为低版本浏览器提供 HTML5 和 CSS3 的兼容性支持。
- Expression Web 4 SP1
- 代码编辑器和设计视图中的 HTML5 IntelliSense 和支持
- 更丰富的 CSS3 样式编辑和 IntelliSense
- SuperPreview 页面交互模式和在线服务（远程浏览器包括 Windows 和 Mac 上的 Chrome、IE8、IE9 以及 Safari 4 和 5）
除了开发工具，别忘了
- Windows Phone “Mango”包含 Internet Explorer 9，它支持 HTML5 网站。
- Internet Explorer 10 平台预览版支持许多新的 CSS3 和 HTML5 功能；完整列表请参见 http://msdn.microsoft.com/en-us/ie/gg192966.aspx。
HTML5 已经到来。大胆去开发令人惊叹的网站吧！
要查看 Jennifer Marsman 的更多作品，请在此处查看她的博客