HTML5學習路線

怎麼學HTML5

HTML5是萬維網的核心語言，標準通用標記語言下的一個應用超文本標記語言（HTML）的第五次重大修改，一方面提升了用戶體驗，另一方面HTML5技術跨平台，適配多終端，改變了傳統開發者需針對不同操作系統進行研發的局面。千鋒全棧HTML5融合大數據可視化內容、深化PHP+MySQL，學員求職可任項目leader！

一.HTML5初級開發工程師

1.HTML5介紹

• 互聯網發展趨勢
• H5語言的優勢
• 簡單易學人人都能編程
• H5就業和薪資情況
• H5常見的項目與產品
• H5的未來與方向

2.HTML基礎

• HTML簡介與歷史版本
• 常用開發軟體
• 常見標籤與屬性
• 表格與表單
• 標籤規範與標籤語義化
• 實戰：網頁結構布局

3.CSS基礎

• css簡介與基本語法
• 常見的各種樣式屬性
• CSS選擇器與標籤類型
• 理解盒子模型與CSS重置
• 浮動與定位
• 利用photoshop工具測量樣式
• HTML+CSS開發網頁
• 實戰：高仿電商首頁效果

4.CSS3基礎

• css3常見樣式
• css3選擇器
• 變形與動畫
• 3D效果與關鍵幀
• 彈性盒模型

5.移動端布局

• 移動端基本概念
• viewport窗口設置
• 移動端布局方案
• rem、vh、vw等單位
• 響應式布局
• bootstrap框架

6.JavaScript基礎

• JS簡介
• JS變數
• 數據類型與類型轉換
• 運算符與優先順序
• 流程式控制制-if..else
• 流程式控制制-switch...case
• 流程式控制制-while、do..while、for循環
• break、continue語法
• 函數定義與調用
• 全局變數與局部變數
• 函數傳參與返回值
• 函數作用域與變數作用域
• DOM的基本操作
• 定時器使用
• this指向與修改指向
• 數組、字元串等方法操作
• 時間對象與正則對象
• 掌握常見BOM操作
• 常見事件與事件細節
• JSON與AJAX
• JSONP跨域操作
• 前端cookie的使用
• 實戰：JS配合HTML與CSS完成電商項目

7.jquery框架

• jquery框架介紹及優勢介紹
• jquery核心思想
• jquery常見方法
• jquery動畫操作
• jqueryAJAX操作
• jquery工具方法
• 利用jquery快速開發網頁

8.PHP基礎

• PHP簡介與基本語法
• mysql資料庫及sql語法
• apache伺服器與集成開發工具
• PHP鏈接資料庫
• PHP與AJAX交互
• 實戰：留言板、登錄、註冊等

9.H5基礎項目

• 項目簡介
• 項目功能演示
• 項目劃分及框架
• 編寫HTML頁面結構
• 設置CSS樣式
• 添加JS交互
• 可選框架：bootstrap、jquery、PHP等
• 項目調試及兼容
• 項目驗收

二.HTML5中高級開發工程師

1.面向對象基礎

• 面向對象概述
• 對象和構造函數（類）之間的關係
• 對象的屬性和方法
• 原型與原型鏈
• 包裝對象與內部實現
• 對象中實現繼承方式
• 設計模式及實際運用

2.JavaScript高級

• JS演算法與排序演算法
• promise非同步處理
• 運動與tween演算法
• 閉包與模塊化
• JS組件開發
• 打造小型jquery框架
• JS性能優化
• ES6新增功能

3.前端工程化

• gulp基本使用
• less、sass、babel等預編譯框架
• 理解模塊概念，AMD與CMD規範
• 前端模塊框架seaJS、requireJS
• webpack基本使用

4.多人協作

• svn基本用法與可視化工具
• 多人開發流程
• git基本用法
• 命令行操作
• 分區及分支等概念
• 遠程github操作
• 實戰：多人協作開發項目

5.HTML5新功能

• canvas繪圖
• svg繪圖
• 音頻與視頻
• 本地存儲與離線存儲
• 地理信息
• web Worker
• web Socket

6.NodeJS基礎

• node與npm概念及使用
• node模塊方式
• node常用內置模塊
• node爬蟲與文件自動化處理
• node搭建伺服器與簡單路由
• mongodb非關係資料庫
• mongodb安裝與db操作
• mongodb增刪改查
• mongodb與node結合開發
• mongoose數據建模
• mongoose與node結合開發
• express框架
• 中間件與ejs模板引擎
• Robomongo與postman工具
• express+mongoose搭建後端框架
• 設計Restful API
• 實戰：前後端分離式開發

7.微信端開發

• 移動端交互與移動端事件
• 微信場景與swiper框架
• 微信公眾號介紹
• 網頁授權與JSSDK
• 微信web開發者工具使用
• 微信小程序開發
• 實戰：公眾號與小程序項目同步開發

三.HTML5大神級開發工程師

1.VueJS框架

• Vue框架簡介
• 漸進式與響應式
• 模板語法與計算屬性
• 指令與數據處理器
• 生命周期
• 組件與組件通信
• Vuex狀態管理
• Vue動畫與路由
• 單文件組件與腳手架
• 基於Vue的組件框架
• 實戰：Vue與Node全棧開發

2.ReactJS框架

• React框架簡介
• JSX語法
• 組件與組件通信
• 屬性與狀態設置
• 虛擬DOM
• 生命周期
• redux架構
• react-redux使用
• react-router使用
• Mem腳手架使用
• 實戰：React與Node全棧開發

3.AngularJS框架

• Angular框架簡介
• TypeScript基礎與進階
• 開發環境配置
• 架構、模塊與組件
• 模板、元數據與數據顯示
• 服務於指令
• 依賴注入
• 路由
• 實戰：Angular與Node全棧開發

4.Hybrid App開發

• App介紹與分類
• Android/ios與H5通信
• Cordova/Phonegap框架
• HTML5+基於HB工具
• React Native

5.前端架構

• 單元測試與編寫測試用例
• 自動化測試方案
• 前端安全與HTTP協議
• 項目上線與一鍵部署
• 數據統計與SEO優化
• 搭建組件庫與按需載入
• 瀏覽器渲染與瀏覽器引擎
• 深入理解後端開發模式

來源：千鋒HTML5