參考資料：http://www.runoob.com/html/html-tutorial.html
1、html5聲明、將此html文檔標記為html5文檔
<!DOCTYPE html>
2、html5定義了8個新的塊級元素，要讓舊版本的瀏覽器正確顯示這些元素，可以設置 CSS 的 display 屬性值為 block;
header, section, footer, aside, nav, main, article, figure {
display: block;
}
header: 標簽定義文檔的頁眉;
section:定義文檔中的節;
footer:定義文檔或節的頁腳;
aside:定義其所處內容之外的內容;//可用作文章的側欄;
nav:定義導航鏈接的部分;//果文檔中有“前后”按鈕，則應該把它放到 <nav> 元素中;
main:規定文檔的主要內容;//在一個文檔中，不能出現一個以上的 <main> 元素。<main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>;
article:規定獨立的自包含內容;
figure:規定獨立的流內容（圖像、圖表、照片、代碼等等）;//使用<figcaption>為<figure>定義標題，置於 "figure" 元素的第一個或最后一個子元素的位置
3、IE兼容問題
HTML5提出的新的元素不被IE6-8識別，這些新元素不能作為父節點包裹子元素，並且不能應用CSS樣式。可以在head標簽中引入htmltshiv.js解決;
4、HTML5新元素
包含：圖形的繪制，多媒體內容，更好的頁面結構，更好的形式 處理，和幾個api拖放元素，定位，包括網頁 應用程序緩存，存儲，網絡工作者...
4.1、Canvas
<canvas id="myCanvas" width="200" height="200"></canvas>//一個寬200px高200px的畫布容器;
<script type="text/javascript"> var canvas=document.getElementById('myCanvas');//得到canvas元素 var ctx=canvas.getContext('2d');//getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法 ctx.fillStyle='#FF0000';//設置或返回用於填充繪畫的顏色、漸變或模式 ctx.fillRect(0,0,80,100);//在畫布上繪制一個原點坐標為(0,0),寬80px高100的矩形
//以順時針方向（3點鍾方向）繪制一個原點坐標在(100,25)半徑為20的整圓,
ctx.beginPath();//起始一條路徑，或重置當前路徑
ctx.arc(100,25,20,0,2*Math.PI,false);//創建弧/曲線（用於創建圓形或部分圓）。
ctx.stroke();//繪制已定義的路徑。
</script>
Canvas參考手冊：http://www.runoob.com/tags/ref-canvas.html
4.2、新多媒體元素
audio:[{src:"/URL",Desc:"音頻URL地址,也可以用<audio>內設置<source src="" type="audio/mpeg(.mp3)|audio/ogg|audio/wav">標簽的src;"},{autoplay:"autoplay",Desc:"音頻在就緒后馬上播放"},{controls:"controls",Desc:"向用戶顯示控件，比如播放按鈕"},{loop:"loop",Desc:"每當音頻結束時重新開始播放"},{muted:"muted",Desc:"默認為靜音"},{preload:"auto/meta/none",Desc:"音頻在頁面加載時進行加載，並預備播放"}];
video:同audio相似，可以播放的格式：video/mp4、video/webm、video/ogg
embed:可以直接指定src路徑輸出插件
track:用於規定字幕文件或其他包含文本的文件，當媒體播放時，這些文件是可見的
4.3、新表單元素
datalist:規定了 <input> 元素可能的選項列表,可根據預定義的項自動完成
keygen:客戶端生成一個密匙（<keygen name="security" />）;然並卵
output:(IE不支持)
4.4、新的語義和結構元素
ps:感覺最為有用的還是塊級元素
5、內聯SVG
SVG和Canvas的區別：一種使用 XML 描述 2D 圖形的語言，Canvas 通過 JavaScript 來繪制 2D 圖形;
SVG教程：http://www.runoob.com/svg/svg-tutorial.html
6、拖放
<!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1, #div2 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;} </style> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"></div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </body> </html>
注:需要給可拖動的元素添加屬性：draggable=”true"，
ondragstart:拖動什么
ondragover:放在何處
ondrop:進行放置
event.dataTransfer.setData("type值",event.target.id) :設置被拖放的數據的類型
event.dataTransfer.getData("type值") :獲得被拖放的數據的類型
7、新的 Input 類型
新的類型包含：color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week
8、WEB存儲
localStorage - 沒有時間限制的數據存儲;//對象存儲的數據沒有時間限制。第二天、第二周或下一年之后，數據依然可用。
sessionStorage - 針對一個 session 的數據存儲;//針對一個 session 進行數據存儲。當用戶關閉當前頁面后，數據會被刪除
if(typeof(Storage)!=="undefined"){//判斷是否可以使用web存儲
localStorage.Name="one";
}
9、應用程序緩存
特點：離線瀏覽 - 用戶可在應用離線時使用它們，速度 - 已緩存資源加載得更快，減少服務器負載 - 瀏覽器將只從服務器下載更新過或更改過的資源。
使用時需要在<html>標簽中添加manifest屬性，並配置manifest文件;
10、Web Worker
特點：運行在后台的 JavaScript，不會影響頁面的性能;
總會好的。