本文来自The Code Project的付费搜索位置，由Solution Center提供。这里的文章致力于向大家提供我们认为对开发人员来说有用和有价值的产品和服务的相关信息由IE9和HTML5 / CSS3 Zone带来 。
本文会涵盖新的语义标签、为绘图和动画而设计的画布（canvas）、音频和视频支持，以及在旧版浏览器上如何使用HTML5。看完这些内容所用的时间可能会比五分钟多一点点，但我保证会讲得快一些。请接着看下去，下面的内容肯定值得你这么做！
语义标签和页面布局
我们首先讲一个关于一所大学的经典故事。这所大学在建设校园草地时，没有开辟任何步行小道，他们把整个空地种上草，然后等待。
一年以后，人们经常走过的地方，草都被踩光了。于是，这所大学就将这些地方铺设为真正的人行道。
棒极了！这些人行道是人们真正“走”出来的。
HTML5新语义元素的诞生正是基于同样的逻辑。（关于这一点，可以参看W3C设计指南中的“Pave the Cowpaths”。）
语义元素清晰地向浏览器和开发人员表明了它们的涵义和用途，要理解这一点，可以将它们与< p>标签进行对比。在HTML文件内，< p>标签能定义出一个分区或者一个小节，但是它无法告诉我们分区里的内容，不能传达任何清晰的涵义。
开发人员通常会将ID或者类名与< p>标签配合使用，这会向程序员传达更多的涵义。但遗憾的是，这并不能帮助浏览器领会那种标签的用途。< p id="header">
在HTML5中，有不少新的富含语义的元素，可以向浏览器和开发人员传达元素的用途。< header>
W3C挖掘了数亿个的Web页面，找出开发人员一直在使用的ID和类名。一旦开发人员抛出p1、p2这些无意义标签，他们就得到了一个描述非常细致的已经在使用的元素的列表，并让其成为W3C的标准设置。
下面是HTML5的一部分新的语义元素：
? article
? aside
? figcaption
? figure
? footer
? header
? hgroup
? mark
? nav
? section
? time
由于这些元素的语义很丰富，相信你可能会猜出其中大部分元素的作用。
为了说得更清楚，下面给出一张图示。
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这两个header组合到一起了？
我们可以用mark元素将重要文本高亮显示或标记出来。如果要在内容中插入一张图（图像、图表、照片和代码片段等），可以使用figure元素。而figcaption元素能为图加上标题。当把以上代码和一些CSS代码组合后，得到的Web页面如下图所示。
在一些擅长CSS的朋友（可惜我不擅长CSS）的帮助下，上面这个结果看起来靓爆了！实际上，有了HTML的描述性，完成这个页面非常容易。
还要说明一点，如果你是Visual Studio的拥趸，请确保已经安装了Visual Studio 2010 SP1。否则，你将发现Visual Studio并不理解HTML5元素，从而导致Web页面上到处是歪歪曲曲的线条。
然后，在Visual Studio菜单中依次选择“Tools”-“Options”，打开一个“Options”对话框。从左侧的导航面板，依次展开“Text Editor”和“HTML”，单击“Validation”。在“Target”下拉列表框中选择HTML5，这样就能得到对HTML5 IntelliSense的支持了。
使用Canvas元素在HTML5中进行绘画
HTML5中另外一个新元素是< canvas>标签。顾名思义，它就是一块用来绘画的空白平面。你需要使用JavaScript在这块画布上进行操作和绘画。
你可能需要为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”。如果运行这段代码的浏览器不支持canvas元素，它就会在旗帜原本要出现的位置显示“Your
browser does not support the canvas
tag”。
接下来，我编写了一段脚本。记住，canvas标签只是一个用来画图的容器，你必须用JavaScript来画图并将其呈现出来。我首先通过使用ID“myCanvas”获得了对canvas的一个引用，然后得到canvas的上下文。上下文所提供的方法和属性，都可以用来在canvas上操作图形和进行绘画。这里指定了参数“2d”，表示我将在2维的环境中来进行绘画。
第三步，完成蓝色矩形的绘画。我用fillStyle方