1、HTML5新增基础语义标签
article
aside
figcaption
figure
footer
header
hgroup
mark
nav
section
time
下面一段代码展示了这些标签的使用场所
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>HTML5新增语义标签</title> 6 </head> 7 <body> 8 <header><!--头部，相当于<div id="header"></div>--> 9 <hgroup><!--对网页或区段（section）的标题进行组合--> 10 <h1>Header in h1</h1> 11 <h2>Subheader in h2</h2> 12 </hgroup> 13 </header> 14 <nav><!--导航，相当于<div id="nav"></div>--> 15 <ul> 16 <li><a href="#">Menu Option 1</a></li> 17 <li><a href="#">Menu Option 2</a></li> 18 <li><a href="#">Menu Option 3</a></li> 19 </ul> 20 </nav> 21 <section><!--定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分--> 22 <article><!--定义独立的内容，论坛帖子，报纸文章，博客条目，用户评论--> 23 <header> 24 <h1>Article #1</h1> 25 </header> 26 <section> This is the first article.created on 27 <time>09:00</time> 28 <!--标签定义日期或时间，或者两者--> 29 today.This is 30 <mark>highlighted</mark> 31 <!--高亮，突出显示文本--> 32 </section> 33 </article> 34 <article> 35 <header> 36 <h1>Article #2</h1> 37 </header> 38 <section> This is the second article. These articles could be blog posts, etc. </section> 39 </article> 40 </section> 41 <aside><!--定义 article 以外的内容。aside 的内容应该与 article 的内容相关--> 42 <section> 43 <h1>Links</h1> 44 <ul> 45 <li><a href="#">Link 1</a></li> 46 <li><a href="#">Link 2</a></li> 47 <li><a href="#">Link 3</a></li> 48 </ul> 49 </section> 50 <figure><!--规定独立的流内容（图像、图表、照片、代码等等）--> 51 <a href="http://www.jsdarkhorse.com/templets/default/images/logo.jpg"><img width="85" height="85"src="http://www.jsdarkhorse.com/templets/default/images/logo.jpg" alt="江苏黑马" /></a> 52 <figcaption>江苏黑马web开发学习网站</figcaption> 53 <!--定义 figure 元素的标题（caption）--> 54 </figure> 55 </aside> 56 <footer>Footer - Copyright 2011</footer> 57 <!--尾部，相当于<div id="footer"></div>--> 58 </body> 59 </html>
详细标签请参见：http://www.gbin1.com/tutorials/html5-tutorial/html5-new-elements/
2、使用Canvas元素在HTML5中进行绘画
Canvas就是一块用来绘画的空白平面。我们需要使用JavaScript在这块画布上进行操作和绘画。
首先来看一段代码（利用Canvas画一张苏格兰国旗）：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>使用Canvas元素在HTML5中进行绘画</title> 6 </head> 7 <body> 8 <canvas id="myCanvas">您的浏览器不支持Canvas，请升级浏览器！</canvas> 9 <!--当浏览器不支持Canvas标签式，显示标签内的内容--> 10 <script type = "text/javascript" > 11 var canvas = document.getElementById('myCanvas');/*获取定义的画布*/ 12 var ctx = canvas.getContext('2d');/*利用2维环境中进行绘画*/ 13 ctx.fillStyle = '#0065BD';/*指定绘制图形的填充色*/ 14 ctx.fillRect(0, 0, 125, 75);/*指定将要绘制的图形是一个从坐标(0,0)到坐标(125,75)的矩形*/ 15 ctx.beginPath();/*开始绘制图形*/ 16 ctx.lineWidth = "15";/*指定绘制线条的粗细*/ 17 ctx.strokeStyle = "white";/*指定绘制线条的颜色*/ 18 ctx.moveTo(0, 0);/*绘制图形的开始坐标*/ 19 ctx.lineTo(125, 75);/*画一条线到坐标(125,75)*/ 20 ctx.moveTo(125, 0);/*光标移到(125,0)*/ 21 ctx.lineTo(0, 75);/*画一条线到坐标(0,75)*/ 22 ctx.stroke();/*绘制结束，呈现图形*/ 23 </script> 24 </body> 25 </html>
3、音频和视频支持
HTML5最大的新特色之一就是支持音频和视频。在HTML5之前，我们必须使用插件如Silverlight 或Flash来实现这些功能。在HTML5中，你可以直接使用新标签<audio> 和 <video>将音频和视频嵌入到页面。
通过下面的代码可以很轻松的发现其使用方法：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>音频和视频支持</title> </head> <body> <audio width="320" height="240" 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标签时，显示标签内的内容--> </body> </html>
（1）使用width和height设置播放器的宽度和高度。
（2）使用controls这个属性后，浏览器将显示音频回放控件，包括播放/暂停按钮、时间显示控件、静音按钮和音量控件。在不同的浏览器中，这些控件的外观并不一样。
（3）autoplay表示音频文件加载完成后立刻自动播放。
（4）loop表示音频文件播放完成后再一遍又一遍地重复播放。
（5）可以添加多个source供浏览器选择。浏览器会使用第一个识别出的格式。
参考文章1：http://www.html5cn.org/article-1612-1.html
参考文章2：http://www.chinaz.com/free/2012/0522/253064.shtml