1個HTML5基礎(chǔ)入門教程，4個HTML5小項(xiàng)目教程，帶你零基礎(chǔ)入門學(xué)習(xí)HTML5。

【HTML5基礎(chǔ)入門】

教程將會介紹HTML5中的新特性，包括結(jié)構(gòu)標(biāo)簽、新型表單標(biāo)簽、文件操作、Canvas、本地存儲等。適合對前端編程有興趣，已經(jīng)學(xué)了HTML的人學(xué)習(xí)。

實(shí)驗(yàn)列表：

【基于 HTML5 實(shí)現(xiàn)本地圖片裁剪】

該項(xiàng)目實(shí)現(xiàn)利用 HTML5 的 canvas 技術(shù)，結(jié)合 HTML5 的 File AP I來實(shí)現(xiàn)圖片的本地裁剪。通過該項(xiàng)目將學(xué)習(xí)到如何結(jié)合 HTML5 與 JavaScript 編寫簡單的單頁應(yīng)用。項(xiàng)目難度一般，適合剛?cè)腴T前端的同學(xué)，需要了解 cavas 并且有 JavaScript 基礎(chǔ)。

效果圖：

【基于HTML5 Canvas實(shí)現(xiàn)小游戲】

該項(xiàng)目基于 HTML5 的 canvas 實(shí)現(xiàn)了一個小游戲，著重介紹了 HTML5 游戲開發(fā)的流程及游戲開發(fā)中需要處理的東西。對 Web 游戲開發(fā)感興趣的同學(xué)可以通過這個項(xiàng)目實(shí)踐 HTML5 及 JavaScript 基礎(chǔ)知識。

效果圖：

【基于 HTML5 實(shí)現(xiàn)刮刮樂效果 】

該項(xiàng)目使用 HTML5 來完成 “刮刮樂” 的刮獎效果。HTML5 是 HTML 的第5代版本，也是目前最新的版本，同時項(xiàng)目還用到 JavaScript 相關(guān)技術(shù)來完成。學(xué)習(xí)項(xiàng)目有助于鞏固前端知識。

效果圖：

【HTML5兩步實(shí)現(xiàn)拼圖游戲】

該項(xiàng)目基于 HTML+CSS+JavaScript 實(shí)現(xiàn)網(wǎng)頁版的拼圖游戲。實(shí)現(xiàn)過程中將用到 HTML5，CSS3 及 JavaScript 相關(guān)知識。完成這個項(xiàng)目，可以進(jìn)一步扎實(shí)前端基礎(chǔ)知識。

效果圖：

最后：

• 想要查看更多前端教程，點(diǎn)擊這里進(jìn)行查看哦；

• 前端學(xué)習(xí)路徑學(xué)習(xí)，點(diǎn)擊這里進(jìn)行查看學(xué)習(xí)；