1、HTML5頁面結構分析
<!DOCTYPE html> <!-- 告訴瀏覽器我們使用的HTML模板爲HTML5 -->
<html lang="en"> <!-- 網頁頁面的根，其他元素均放在其中，只能有一個 -->
<head> <!--頁面所有meta元素均包含在這裏 -->
<meta charset="UTF-8"> <!-- 編碼方式 -->
<title>Canves高速入門</title> <!-- 頁面設置名稱，顯示在瀏覽器標題欄中 -->
<!-- CSS 及 javascript 代碼放置處 -->
</head>
<body> <!-- 頁面的主題內容均在這裏 -->
<div>HTML5之Canves高速入門</div> <!-- 頁面的元素擺放 -->
</body>
</html>
以上的代碼顯示效果如下：
2、HTML5開發環境搭建
本系列的開發均使用WebStorm軟件開發，並在火狐瀏覽器調試；軟件去網上下載就可以了！建議使用火狐瀏覽器調試，個人覺得好點！
3、HTML5工程創建
雙擊打開WebStorm，點擊Create New Project
左邊選擇HTML5 Boilerplate , 右邊選擇文件存放路徑以及自定義文件名稱，最後點擊Creat
在左邊Project下HTML5右擊，選擇箭頭文件，
命名文件名，點擊ok
這樣就創建好了，點擊右邊箭頭就可以在瀏覽器中顯示當前的代碼網頁了。
試着將最上面的代碼複製進去，瀏覽器看看，就ok了。