今后的一個月內(nèi)會連載詳細(xì)的Canvas教程，從零基礎(chǔ)開始，到Canvas API，再到基本動畫與高級動畫的實現(xiàn)，還會介紹視音頻的處理、移動應(yīng)用，最后如果有時間會擴展說一說3D、多人應(yīng)用、游戲制作等。所以本課程雖說是Canvas教程，但其實就是詳細(xì)的介紹Canvas API，之后基于Canvas實現(xiàn)其他更高級的功能。
如果你學(xué)過HTML4，或者CSS、Javascript，那么相信你入手起來會很快；如果你啥都沒學(xué)過，屬于零基礎(chǔ)，那就更好了。因為你保有對這個未知領(lǐng)域的好奇心，這一切都會激發(fā)你更加努力的向前。而且零基礎(chǔ)的童鞋也不用擔(dān)心，本教程會在用到其他知識的時候會有詳細(xì)的擴展說明，以Canvas為線索，學(xué)完它你基本上一系列的知識也都學(xué)會了，買一送一簡直不能更賺了！其中也會穿插講解數(shù)學(xué)、物理學(xué)、運動學(xué)的一些簡單的知識，每個知識點都會提供案例，每個案例都會提供頁面演示，源文件可以去我托管在github上的一個開源項目上下載。
提示：本教程中有鏈接的地方都不妨點一點 ：）
好了，是不是摩拳擦掌、迫不及待準(zhǔn)備上了？那就讓我們開始走進HTML5的世界吧！
HTML5是新一代的HTML(Hyper Text Markup Language)，即超文本標(biāo)記語言，于去年10月28日正式發(fā)布，它是全新的、互聯(lián)網(wǎng)上構(gòu)建頁面的標(biāo)準(zhǔn)語言。
那么究竟什么是HTML5？在W3C HTML5的常見問題中，關(guān)于HTML5是這樣說明的：HTML5是一個開放的平臺下開發(fā)的免費許可條款。
具體來說，對這句話有以下兩種理解：
由于課程的主要內(nèi)容是Canvas，以下我列出了最流行的Web瀏覽器以及它們開始支持Canvas元素的最小版本號。
| Safari | Firefox | IE | Chrome | Opear | iOS Safari | Android Brower |
|---|---|---|---|---|---|---|
| 3.2 | 3.5 | 9 | 9 | 10.6 | 3.2 | 2.1 |
這里我推薦使用Chrome。
所以在學(xué)習(xí)本課程之前，趕快給你的電腦裝上最新版的Chrome吧！
簡單的HTML5頁面
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>基礎(chǔ)的HTML5頁面</title>
</head>
<body>
Hello Airing!
</body>
</html>運行結(jié)果如下：
HTML是由一個個形如尖括號<>的標(biāo)簽元素組成，這些標(biāo)簽通常是成對出現(xiàn)，并且標(biāo)簽之間只能嵌套不能交叉。
擴展：
成對出現(xiàn)的叫做閉合標(biāo)簽，單個出現(xiàn)的叫做單標(biāo)簽。不管怎樣都是閉合的(單標(biāo)簽可以不閉合，但是在XHTML中嚴(yán)格要求了閉合)。閉合標(biāo)簽又分為開始標(biāo)簽和結(jié)束標(biāo)簽，如
<body>是開始標(biāo)簽，</body>是結(jié)束標(biāo)簽。自標(biāo)簽如<input/><br/>等。關(guān)于更多的標(biāo)簽，建議大家自行了解一下。推薦W3school平臺自學(xué)。
這里我們著重講一下上述代碼中出現(xiàn)的標(biāo)簽。
<!doctype html>這個標(biāo)簽說明 Web 瀏覽器將在標(biāo)準(zhǔn)模式下呈現(xiàn)頁面。根據(jù) W3C 定義的 HTML5 規(guī)范，這是 HTML5 文檔所必需的。這個標(biāo)簽簡化了長期以來在不同的瀏覽器呈現(xiàn) HTML 頁面時出現(xiàn)的奇怪差異。它通常為文檔中的第一行。
<html lang="en">這是包含語言說明的標(biāo)簽，例如，"en"為英語，"zh"為中文。
<head>...</head>這2個標(biāo)記符分別表示頭部信息的開始和結(jié)尾。頭部中包含的標(biāo)記是頁面的標(biāo)題、序言、說明等內(nèi)容，它本身不作為內(nèi)容來顯示，但影響網(wǎng)頁顯示的效果。頭部中最常用的標(biāo)記符是<title>標(biāo)記符和<meta>標(biāo)記符。
以下表格列出了HTML head 元素下的所有標(biāo)簽和功能：
標(biāo)簽 描述 <head>定義了文檔的信息 <title>定義了文檔的標(biāo)題 <base>定義了頁面鏈接標(biāo)簽的默認(rèn)鏈接地址 <link>定義了一個文檔和外部資源之間的關(guān)系 <meta>定義了HTML文檔中的元數(shù)據(jù) <script>定義了客戶端的腳本文件 <style>定義了HTML文檔的樣式文件
<meta charset="UTF-8">這個標(biāo)簽說明 Web 瀏覽器使用的字符編碼模式，這里通常設(shè)置為UTF-8。如果沒有需要特別設(shè)置的沒必要改變它。這也是 HTML5 頁面需要的元素。
<title>...</title>這個標(biāo)簽說明在瀏覽器窗口展示的 HTML 的標(biāo)題。這是一個很重要的標(biāo)記，它是搜索引擎用來在 HTML 頁面上收錄內(nèi)容的主要信息之一。
<body>...</body>網(wǎng)頁中顯示的實際內(nèi)容均包含在這2個<body>之間。
綜上，HTML5網(wǎng)頁是由第一行的<!doctype html>與<html>部分組成，而<html>主要分為兩部分——由<head>標(biāo)簽規(guī)定的頭部部分，和由<body>規(guī)定的主體部分。
這樣，我們就把最簡單的HTML網(wǎng)頁的基本結(jié)構(gòu)給捋出來了。
好的，接下來就讓我們的主角Canvas登場吧！不過，在此之前，建議大家自行了解一下HTML的常用標(biāo)簽及其功能~
掃碼關(guān)注鍍金池微信號
手機訂課，優(yōu)惠多多