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