課程大綱：高級Web前端工程師培訓
第一階段（WEB前端布局與交互開發）
WEB前端
（H5網頁布局） HTML標簽梳理
1.5分鐘上手Hbuilder軟件，對HTML5和CSS3有初步的了解和認識
2.掌握HTML5九大基本標簽，包括標題、圖像、音頻、視頻等
3.掌握HTML5智能表單基本標簽和智能表單擴展標簽
七組CSS
基本樣式 1.講解CSS三大引用方式，包括行內樣式、內部樣式表和外部樣式表
2.CSS七類樣式詳解，包括背景、文本、字體、鏈接、列表、表格、邊框樣式
CSS3炫酷特效 1.掌握CSS3四大“變形金剛”，旋轉、扭曲、縮放和位移
2.CSS3過渡屬性詳解，通過過渡屬性完成網頁漂亮的交互效果
3.CSS3動畫特效講解，通過動畫屬性可以做多個狀態交互的網頁炫酷特效
選擇器細解11大類
1.掌握CSS五類常用選擇器，包括通用選擇器、ID選擇器、類選擇器等
2.三代關系選擇器詳解，包括子元素選擇器、兄弟選擇器、后代選擇器
3.CSS3偽類選擇器和偽元素選擇器詳解，可以多樣化的自由選擇網頁元素對象
CSS布局
四大技巧
1.掌握多列屬性布局技巧,三種定位方式，絕對定位、相對定位和固定定位
2.五句話吃透盒模型，清楚盒模型的計算和瀏覽器兼容性中的注意事項
3.左浮動和右浮動的設置以及如何清除浮動以達到父級自動擴高問題
響應式雙法則
1.了解媒體查詢的引用方式，包括內部樣式表、外部樣式表等
2.掌握媒體查詢使用方法，了解關鍵詞的使用技巧
3.了解根元素的字號適配，通過字號設置完成響應式頁面
兼容性
調試技巧 1.CSS優化減肥技巧，包括圖片優化和代碼優化，提升網頁的加載速度
2.了解CSS優先級的計算，解決樣式覆蓋問題
3.掌握兼容性調試技巧，如何能夠讓代碼兼容各大主流瀏覽器
項目實戰
提經驗
1.熟悉PS切圖技巧，如切片切圖、選區切圖等，以及網頁項目的正規創建
2.頁面布局規范講解，從整體到局部的規劃，先標簽后樣式的代碼順序等
3.完成三大項目實戰，企業站，商城站和響應式頁面，能夠獨立完成H5靜態頁面
WEB前端JavaScript 交互
核心語法
1.掌握JS的組成和語法,為進去代碼的世界做鋪墊,數據結構,不再看見代碼而發愁
2.對象的創建方式和this詳解,提前帶你熟悉企業中變量的命名規則和規范
3.熟悉JS中的數據類型,流程控制,循環語句,輕松讓你在網頁上寫出九九乘法表,計算器等 136
面向對象編程
1.掌握面向對象和面向過程,熟悉JS的精髓;深拷貝和淺拷貝,讓你知道更加底層的代碼
2.原型和原型鏈,JavaScript重要的核心,讓你寫的代碼復用性更強
3.企業開發中沙箱模式,了解企業中是怎么團隊合作開發
對象類型 1.基本數據類型(number、string、boolean、undefined、null)
2.引用數據類型( 數組 array .. 函數 function ... 對象 object)
3.掌握不同對象類型之間的轉換
BOM與DOM操作
1.DOM操作和BOM操作大全,輕松操作網頁上的每一個按鈕等,同時給他們加上不同的功能
2.利用JavaScript代碼實現酷炫特效,京東首頁輪播圖升級版
3.頁面布局,結合H5代碼,讓你的網頁功能更加全面,可以1:1寫出小米官網首頁及功能
4.熟悉事件處理,讓你的代碼更加嚴謹,相同的頁面效果,寫的代碼更少
5.瀏覽器兼容性處理,讓市面上的不同瀏覽器品牌,打開你的網頁效果不會有差別
事件編程
1.Javascript的事件機制,了解底層,才能寫出更嚴謹的代碼,企業開發常見事件的使用詳解
2.offset家族和scroll家族,了解瀏覽器和代碼之間的關系
3.鍵盤事件及鍵盤碼的屬性,讓你的鍵盤能和鋼琴一樣,按下之后有不同的聲音
正則表達式
1.創建正則表達式,從零開始寫表單驗證,輕松還原百度注冊功能
2.正則的3大核心：字符串類元字符、邊界類元字符、量詞類元字符,讓你寫的驗證功能更強大
3.正則的使用和替換,隨心所以換校驗規則
4.完整版表單校驗,提前進入企業實戰開發
JQuery交互特效開發 1.jQuery的優勢介紹,jQuery選擇器,讓你快半個月搭建一個簡單網站
2.jQuery中的動畫詳解,讓你的網頁不再單調,貪吃蛇,水果忍者,都能通過代碼寫出來
3.鏈式編程和隱式迭代,了解jQuery的底層核心
4.JQuery插件使用和制作,自己也能制作酷炫動畫插件,使用插件1分鐘做出京東輪播圖效果
Ajax數據交互
1.Ajax技術介紹,json格式與XML格式詳解,現在的技術和歷史技術的區別,教你如何鏈接服務器
2.Ajax中post與get兩種請求方式詳解,2種方式從后臺服務器拿數據
3.JSON數據分析,了解后端數據是怎么寫的,不再盲目的被后端程序員懟
4.解決跨域訪問的方法,讓你的網頁在任何協議都能訪問,無論是http協議還是https
5.企業接口化開發詳解,提前進入實戰化開發
HTML5
高級功能 1.畫布標簽canvas.了解如何繪制并填充線條（形狀）,文字及圖片。完成你畫我猜小游戲
2.多媒體（音頻，視頻）標簽的實際使用。開發并完成自己的網易音樂播放器
3.強化練習智能化表單以及和完成后臺的數據交互。完成帶有圖片驗證碼功能的登錄操作
4.本地存儲（cookies,sessionStorage,localStorage）。一周免登陸是如何實現的
WEBAPP開發
1.視口viewport（手機瀏覽器中的虛擬窗口）為何手機中的網頁有的能縮放爾有些不能
2.移動端的事件交互：觸摸事件（touchstart/mov/end/cancel）。完成京東商城分類頁
3.另一種布局方式：彈性布局（flexbox）
隨堂項目：商城移動端首頁、在線答題系統
Bootstrap
1.Bootstrap開發優缺點介紹,如何通過模板搭建網站
2.響應式開發原理,無論電腦、手機、平板等,都能適應屏幕
3.Bootstrap框架的使用,
4個口訣讓你做出標準官方首頁樣式
4.Bootstrap的柵格系統詳解,不同屏幕尺寸,顯示不同的效果
5.Bootstrap的Javascript插件使用,掌握不同網頁按鈕和輸入框更換樣式和顏色
ECMAScript6
1.ES5中的嚴格模式,讓代碼自己檢查自己
2.ES6中的新語法詳解,面試必問的語法
3.實際開發中常用的箭頭函數,解構賦值和字符串模板,讓你代碼更加簡潔
4.定義變量的新方式LET和const,讓你與企業開發同步
第四階段（WEB移動端開發和后臺交互開發）
WEB
移動端開發
git版本控制
1.什么是版本控制,為什么用git.了解今后工作中是如何獲取項目源代碼的。
2.git常用指令(建立倉庫，獲取新版本代碼，提交代碼)。
3.使用可視化工具TortoiseGit進行git的常規操作。
微信公眾號
開發（JSSDK）
1.微信公眾號介紹與申請開發賬號
2.調用微信官方API接口函數
3.常見微信分享、投票、掃一掃、定位打卡等的設計與實現 隨堂項目：企業公眾號項目實踐
微信小程序
開發
1.小程序相關介紹及賬號申請\小程序開發環境搭建
3.小程序組件開發、API使用
2.WEUI,有贊Vant使用、云存儲、云數據庫 （文件，圖片上傳功能實戰）
網校實訓項目：
1.建立云開發環境
2.網校首頁
3.課程詳情頁
4.日歷組件（課程表）
5.個人中心（頭像上傳）
6.獲取用戶權限登錄
7.打卡簽到
8.日程提醒等
獨立項目實訓 基于MUI實訓中學員的項目，獨立開發
使學員能夠在自己的微信中進行演示，符合就業要求
階段考核 教師指導你完成階段作品，以備應聘時使用；從立案到素材、材料收集整理，再到風格定位、欄目規劃，獨立完成項目作品，其中需容入不同的分類信息、作品等；
Node.js★ 基礎介紹★
模塊系統★
事件和接口★ 1.什么是node.js,node.js的介紹,npm使用介紹
2.安裝配置第一個node.js應用.創建模塊.模塊加載
3.事件驅動程序,GET請求與POST請求.獲取請求參數
web模塊★ 1.什么是 Web 服務器。使學員了解我們制作的網頁是怎么被別人訪問到的。
2.使用 Node 創建 Web 服務器
3.使用 Node 創建 Web 客戶端
mysql基礎語法 1.數據庫基本語法與基本操作（增刪改查）
2.利用node.js的mysql模塊進行數據庫操作實現接口功能
3.用戶登錄,網易163的10天免登錄功能的真正實現方式
Express框架★ 1.Express 簡介與安裝，開始你的第一個express項目，創建及啟動項目
2.請求和響應，路由，中間件，文件上傳及cookie管理等。
第五階段（WEB高級框架）
WEB高級框架與后臺交互 Vue.js ★ 1.Vue.js簡介與安裝,初始化Vue實例
2.Vue三大基礎語法：數據綁定，列表渲染，條件渲染
3.監聽屬性與偵聽器。快速實現購物車中的總價，總數的計算
1.生命周期的鉤子函數（vue頁面的4個關鍵階段）
2.自定義組件開發，數據的傳遞與自定義事件
3.過渡與動畫,數據請求工具axios的使用
隨堂練習：用戶是怎么把商品加入購物車，Sku商品規格
1.腳手架vue-cli,搭建項目的基礎骨架.了解大型網站項目是如何誕生的
2.路由router,網站頁面間是如何跳轉的.了解為什么現在的網頁都沒有.html了
3.狀態管理vuex,全局管理及維護網站的簡單數據.讓學員明白網站為什么可以1個月都不用自己登錄
4.自動打包工具webpack.掌握完成的項目是如何發布到正式環境的
1.路由簡介,兩大常規路由操作：動態路由，嵌套路由.掌握企業(電商)后臺網站的布局及跳轉方法
2.編程式導航,實現頁面跳轉的兩種操作方法：聲明式和編程式
3.命名路由與命名視圖,路由的傳參. 掌握從商品列表跳轉到商品詳情頁如何顯示對應的數據及評論
4.導航守衛.掌握淘寶在搜索商品前必須先登錄的功能實現
1.什么是Vuex,Vue.js的狀態管理模式
2.Vuex的五個核心屬性：state, getters, mutations, actions, modules
3.通過學習vuex 掌握初步的網站1個月免登錄功能實現。
商城項目實訓：1.搭建vue開發環境 2.商城首頁 3.商品詳情頁 4.購物車 5.個人中心 6.商品分類 7.用戶登錄 8.商城打包上線。
1.elment-ui簡介，安裝element-ui
2.主題設置，常用組件
3.element-admin 后臺管理項目系統實踐
獨立項目實訓
基于MUI實訓中學員的項目，獨立開發
使學員能夠在獨立的服務器中進行演示，符合就業要求
1.Vue3.0新特新介紹、組合api、setup,reactive,ref等
加入高級會員獲得助教答疑
