前言
今後的一個月內會連載詳細的Canvas教程，從零基礎開始，到Canvas API，再到基本動畫與高階動畫的實現，還會介紹視音訊的處理、移動應用，最後如果有時間會擴充套件說一說3D、多人應用、遊戲製作等。所以本課程雖說是Canvas教程，但其實就是詳細的介紹Canvas API，之後基於Canvas實現其他更高階的功能。 如果你學過HTML4，或者CSS、Javascript，那麼相信你入手起來會很快；如果你啥都沒學過，屬於零基礎，那就更好了。因為你保有對這個未知領域的好奇心，這一切都會激發你更加努力的向前。而且零基礎的童鞋也不用擔心，本教程會在用到其他知識的時候會有詳細的擴充套件說明，以Canvas為線索，學完它你基本上一系列的知識也都學會了，買一送一簡直不能更賺了！其中也會穿插講解數學、物理學、運動學的一些簡單的知識，每個知識點都會提供案例，每個案例都會提供頁面演示，原始檔可以去我託管在github上的一個開源專案上下載。
提示：本教程中有連結的地方都不妨點一點 ：）
複製程式碼好了，是不是摩拳擦掌、迫不及待準備上了？那就讓我們開始走進HTML5的世界吧！
HTML5介紹
HTML5是新一代的HTML(Hyper Text Markup Language)，即超文字標記語言，於2014年10月28日正式釋出，它是全新的、網際網路上構建頁面的標準語言。 那麼究竟什麼是HTML5？在W3C HTML5的常見問題中，關於HTML5是這樣說明的：HTML5是一個開放的平臺下開發的免費許可條款。 具體來說，對這句話有以下兩種理解： 指一組共同構成了未來開放式網路平臺的技術。這些技術包括HTML5規範、CSS3、SVG、MATHML、地理位置、XmlHttpRequest、Context 2D、Web字型以及其他技術。這一套技術的邊界是非正式的，且隨時間變化的。 指HTML5規範，當然也是開放式網路平臺的一部分。
Canvas的瀏覽器支援
由於課程的主要內容是Canvas，以下我列出了最流行的Web瀏覽器以及它們開始支援Canvas元素的最小版本號。
| Safari | Firefox | IE | Chrome | Opera | iOS Safari | Android Brower |
|---|---|---|---|---|---|---|
| 3.2 | 3.5 | 9 | 9 | 10.6 | 3.2 | 2.1 |
這裡我推薦使用Chrome。
所以在學習本課程之前，趕快給你的電腦裝上最新版的Chrome吧！
基礎的HTML5頁面
簡單的HTML5頁面
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>基礎的HTML5頁面</title>
</head>
<body>
Hello Airing!
</body>
</html>
複製程式碼演示 1-1 執行結果如下：
擴充套件： 成對出現的叫做閉合標籤，單個出現的叫做單標籤。不管怎樣都是閉合的(單標籤可以不閉合，但是在XHTML中嚴格要求了閉合)。閉合標籤又分為開始標籤和結束標籤，如
<body>是開始標籤，</body>是結束標籤。自標籤如<input/> <br/>等。
關於更多的標籤，建議大家自行了解一下。推薦W3school平臺自學。
這裡我們著重講一下上述程式碼中出現的標籤。
<!doctype html>
這個標籤說明 Web 瀏覽器將在標準模式下呈現頁面。根據 W3C 定義的 HTML5 規範，這是 HTML5 文件所必需的。這個標籤簡化了長期以來在不同的瀏覽器呈現 HTML 頁面時出現的奇怪差異。它通常為文件中的第一行。
<html lang="en">
這是包含語言說明的標籤，例如，"en"為英語，"zh"為中文。
以下表格列出了HTML head 元素下的所有標籤和功能：
| 標籤 | 描述 |
|---|---|
<head> |
定義了文件的資訊 |
<title> |
定義了文件的標題 |
<base> |
定義了頁面連結標籤的預設連結地址 |
<link> |
定義了一個文件和外部資源之間的關係 |
<meta> |
定義了HTML文件中的後設資料 |
<script> |
定義了客戶端的指令碼檔案 |
<style> |
定義了HTML文件的樣式檔案 |
<meta charset="UTF-8">
這個標籤說明 Web 瀏覽器使用的字元編碼模式，這裡通常設定為UTF-8。如果沒有需要特別設定的沒必要改變它。這也是 HTML5 頁面需要的元素。
<title>...</title>
這個標籤說明在瀏覽器視窗展示的 HTML 的標題。這是一個很重要的標記，它是搜尋引擎用來在 HTML 頁面上收錄內容的主要資訊之一。
<body>...</body>
網頁中顯示的實際內容均包含在這2個之間。
綜上，HTML5網頁是由第一行的<!doctype html>與<html>部分組成，而<html>主要分為兩部分——由<head>標籤規定的頭部部分，和由<body>規定的主體部分。
這樣，我們就把最簡單的HTML網頁的基本結構給捋出來了。
好的，接下來就讓我們的主角Canvas登場吧！不過，在此之前，建議大家自行了解一下HTML的常用標籤及其功能~