IT兄弟連 HTML5教程 HTML5的學習線路圖 第二、三階段

• 2019 年 10 月 5 日
• 筆記

版權聲明：本文為部落客原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。

本文鏈接：https://blog.csdn.net/ITXDL123/article/details/100971120

第二階段編寫用戶交互功能

通過第一階段的學習雖說可以完成頁面製作，但並不完美，不能算是合格的前端工程師，所以要繼續學習如圖1.13中的第二階段內容。現在的Web頁面都融入了大量的特效，並且多數需要與用戶在操作介面上有互動效果。做HTML5開發主要使用JavaScript語言，JavaScript是一種在客戶端廣泛使用的腳步語言，在JavaScript當中為我們提供了一些內置函數、對象和DOM操作，藉助這些內容我們可以來實現一些客戶端的特效、驗證、交互等，使我們的頁面看起來不那麼呆板。必要時還要學習一些JavaScript庫，不僅可以簡化開發步驟，還可以處理瀏覽器之間的兼容問題。jQuery則是一個免費、開源的輕量級的JavaScript庫，並且兼容各種瀏覽器，同時現在有很多基於jQuery的插件可供選擇，這樣在我們實現一些豐富的動態效果時更方便快捷，大大節省了我們開發的時間，提高了開發速度，這也充分體現了jQuery的核心宗旨，即「用盡量少的程式碼完成儘可能多的功能」。如果第二階段的內容完全掌握，再經過幾個項目的磨練，就可以成為真正的前端工程師了。

第三階段成為前端工程師

如果第一階段和第二階段的內容你都已經掌握了，其實也只能算是基礎。做稍大一點的HTML5項目開發，一定會用到第三階段的技術。這裡筆者將第三階段的學習內容分成了「Web應用開發」和「Web遊戲製作」兩個方向，如果受學習時間限制，讀者可以選擇一個方向學習。

一、Web APP開發

由於Web APP開發成本較低、升級較簡單，以及維護比較輕鬆。它使用的技術無非就是HTML5、CSS3、JavaScript等技術做UI布局，只是再多掌握一些前端框架和封裝APP的相關機制，服務端技術主要為PHP、JAVA等。目前，WebAPP是非常主流的移動APP開發模式，部分項目已經完全取代了傳統的APP開發形式。

二、Web遊戲開發

電子遊戲發展了幾十年，玩家越來越被精美的畫面、逼真的特效所吸引。所謂HTML5遊戲，即使用HTML5技術所開發的遊戲，這種類型的遊戲可直接運行於瀏覽器之中。與傳統的遊戲不同的地方在於具有良好的跨平台與傳播性，HTML5遊戲只需要一個URL鏈接地址，即可進行遊戲，不僅如此，還不受時間、地點、設備的限制。目前市場上絕大部分HTML5遊戲都是基於移動設備的，很少存在基於PC設備的HTML5遊戲。學習HTML5的遊戲製作，關於影像處理方面最成功的新特性莫過於Canvas和WebGL了，這兩者都是用來處理影像和渲染的。所以學習HTML5遊戲開發，一定要先掌握這兩個技術，它們的出現正是為HTML5遊戲提供了一種可能，基於Canvas和WebGL這兩種技術，可以依賴瀏覽器製作出精美的遊戲，同時不需要第三方插件的支援。這種技術耦合度是天然的，對HTML5遊戲提供了堅實的基礎。當然開發HTML5遊戲也並非全部通過手寫基礎程式碼實現，目前有好多流行的HTML5遊戲引擎，也是開發HTML遊戲前必修的一門技術，筆者推薦中國一款Egret遊戲引擎，新版本所有功能模組趨於穩定，通過Egret可以開發複雜好玩的HTML5遊戲。

本章小結

要學習HTML5，我們需要了解兩個組織：WHATWG（網頁超文本技術工作小組）和W3C（萬維網聯盟），WHATWG是一個以推動網路HTML5標準為目的而成立的組織，而W3C主要為解決Web應用中不同平台、技術和開發者帶來的不兼容問題，保障Web資訊的順利和完整流通而制定了一系列標準。HTML5讓Web再次回歸富客戶端地步，而且更加的獨立，減少了對第三方插件的依賴；對本地離線存儲的更好的支援；同時增加了新的特殊內容元素，更好的的支援SEO以及方便視障人士使用；HTML5還增加了更加智慧的表單，對數據校驗等控制有了很好的支援，解決了版本控制、瀏覽器兼容性和非標準等一系列問題。總的來說，HTML5的新特性帶給開發者的是更友好更豐富的本地處理API，更智慧的更優雅的HTML標籤，更強的本地處理功能，通訊也進一步加強。相信由於HTML5標準化的支援，未來Web技術真正可以在任何端應用，使Web應用更加獨立。