| WEB前端課綱 |
| Level 1 | Level 2 | Level 4 | 知識點清單 |
| 網站布局基礎 | PhotoShop基礎 | Adobe公司介紹，版本編號，發展歷史，安裝過程 |
| 移動工具介紹與操作 |
| 選區工具介紹與操作 |
| 套索工具，磁性套索，框選工具，魔棒工具，快速選擇工具介紹與操作 |
| 圖層介紹，圖層合并 |
| 切片工會介紹與操作 |
| 圖片格式，精靈圖，圖片保存方式 |
| HTML標簽及規范 | HTML定義，HTML歷史，HTML版本、常用瀏覽器介紹、HTML整體結構、標簽結構、注釋 |
| 塊級標簽介紹，div，h1，h2，h3，h4，h5，h6，p，ul，li，ol，dl，dt，dd，hr |
| 行內標簽介紹，span，a，img，b，strong，i，em，br |
| 什么是W3C標準，DOCTYPE ，語言編碼，嵌套規則，HTML手冊查詢 |
| HTML標簽屬性 | class，id，style，title |
| 屬性（align，bgcolor，border，cellpadding，cellspacing，frame，rules，summary，width）tr，td，th，tbody，thead，tbody，表格嵌套 |
| 屬性（action，method，name），input標簽（type，name，id，value)，button，textarea,select |
| 屬性（align，frameborder，height，name，scrolling，src，width）,iframe嵌套 |
| CSS基礎 | CSS介紹，CSS發展歷史 |
| CSS的三種引用方式，CSS基本語法、屬性、值、CSS手冊查詢 |
| CSS選擇器（id、class、標簽、屬性、后代、偽類等），CSS優先級 |
| font、font-size、font-family、font-weight、font-style |
| color，line-height，letter-spacing，text-align，text-decoration，text-indent，text-shadow，white-space，word-spacing |
| background，background-color，background-position，background-size，background-repeat，background-origin，background-image |
| list-style |
| CSS浮動布局&盒模型 | width、height、padding、border、margin |
| 標準模式是什么、怪異模式是什么 |
| float，清除浮動常用的三種方法，clear，overflow |
| CSS定位布局 | 定位概述position，相對定位，絕對定位，浮動，left\right\top\bottom，z-index |
| 雙飛翼布局，圣杯布局，側邊欄固定 |
| 什么是BFC、什么是IFC |
| 什么是CSS hack，hack解決的問題及應用情景，瀏覽器識別字符標準對應表 |
| 項目實戰 | 紐曼官網項目實戰 |
|
|
|
|
|
|
| HTML5網站開發 | HTML5新特性 | 發展歷程（設計目的），特性（語義特性，本地存儲特性，設備兼容性，網頁多媒體特性），規范，優缺點，移除元素 |
常用標簽（header、footer、main、section、nav、article、aside、figure）
多媒體標簽(video、audio、embed、canvas) |
表單標簽（email、url、number、color、range、date、search）
datalist，progress |
form屬性（autocomplete，novalidate） input 屬性（autocomplete，autofocus，form，
min，max，step，multiple，pattern (regexp)，placeholder，required） |
| CSS3新特性學習 | 通用選擇器、屬性選擇器、偽類選擇器 |
| text-shadow，word-wrap，word-break，text-wrap，text-overflow |
| border-radius，box-shadow，border-image |
| background-size，background-origin |
| RGBA，HSL，HSLA |
| 線性漸變，徑向漸變 |
| box-sizing |
| CSS3基礎屬性--動畫 | 過渡屬性transition，transition-property，transition-duration，transition-timing-function，transition-delay |
| trasform，translate，rotate，scale，skew，matrix |
| perspective，trasform-style，rotateX，rotateY，rotateZ |
| CSS3 動畫屬性，@keyframes，animation，animation-name，animation-duration，animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-play-state，animation-fill-mode |
| CSS3基礎屬性--布局 | display: -webkit-box，box-orient，box-direction，box-pack，box-align，box-flex，box-ordinal-group，box-flex-group，box-lines |
| display: flex，flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-self，flex，order，flex-grow，flex-shrink，flex-basis |
| 媒體查詢@media、自適應布局、rem布局 |
| @font-face、iconfont的使用 |
| 項目實戰 | 紐曼官網移動端項目實戰 |
|
|
|
|
|
|
| 網站動效交互開發 | Javascript基礎 | JavaScript介紹、變量命名規則，變量聲明 |
| number，string，boolean，Array，object |
| 算術運算符，關系運算符，邏輯運算符 |
| if，for |
| 函數定義語句，參數，返回值 |
| jQuery基礎 | jQuery介紹、特點、優勢、文件下載、引入方式 |
| id，class，標簽，屬性 |
| 屬性類，css類，html\text\value |
| DOM節點插入、刪除、修改、復制 |
| jQuery動畫以及事件 | 常用鼠標事件、鍵盤事件、頁面加載事件，事件綁定方式 |
| animate動畫方法、show/hide、fade、slide動畫實現、時間控制 |
| 項目實戰 | 用戶交互實戰一 |
|
|
| 用戶交互實戰二 |
|
|
| 響應式網站開發 | Bootstrap | Boostratp介紹、Boostratp文件的下載、引入方式、注意事項 |
| 表單組件、表格組件、導航組件、分頁組件、按鈕組件 |
| 字體圖標的引入、字體圖片的使用方式 |
| 柵格系統介紹、使用規則 |
| JavaScript插件、快速布局工具 |
| Bootstrap響應式案例實現 |
|
|
|
|
第二階段
（邏輯交互） | 用戶交互開發 （邏輯業務開發思想） | Javascript基礎語法 | JS發展歷史，定義，版本 |
| 標識符的命名，命名規范，保留字，關鍵字 |
| 變量的定義，字面量的使用 |
| 轉義字符是什么，空格，大于，小于，版權等轉義字符 |
| 算術運算符，賦值運算符，邏輯運算符，條件運算符，位運算符，三目運算符 |
| 字符串（String），數字(Number)，布爾(Boolean)，數組(Array)，對象(Object)，空（Null），未定義（Undefined） |
| Javascript流程控制 | if，switch |
| for，for..in，while，do…while |
| break，continue |
| Javascript函數 | 函數常見的定義方式、函數的作用 |
| 函數的調用方式 |
| 函數參數設置 |
| return |
| 匿名函數的定義 |
| 變量提升，全局作用域，局部作用域，閉包 |
| 遞歸函數的定義與使用，算法實現 |
| Array對象方法 | 對象的介紹，對象的定義方式，常見對象介紹 |
| 數組的介紹，數組的定義方式 |
| 一維數組，二維數組，對象數組 |
| concat()，join()，pop()，push()，reverse()，shift()，slice()，sort()，splice()，toSource()，toString()，toLocaleString()，unshift()，valueOf() |
【增】：arr.push()，arr.unshift()
【刪】：arr.pop()，arr.shift()
【改】：arr.reverse()，arr.sort()，arr.concat()，arr.join()，arr.slice()，arr.splice()，arr.toString()
【查】：arr.indexOf() |
| String，Number，Date對象方法與定時器 | anchor()，big()，blink()，bold()，charAt()，charCodeAt()，concat()，indexOf()，italics()，link()，match()，replace()，slice()，small()，split()，sub()，substr()，substring()，sup()，toLocaleLowerCase()，toLocaleUpperCase()，toLowerCase()，toUpperCase() |
| toString，toLocaleString，toFixed，valueOf |
| Date()，getDate()，getDay()，getMonth()，getFullYear()，getHours()，getMinutes()，getSeconds()，getMilliseconds()，getTime()，setDate()，setMonth()，setFullYear()，setHours()，setMinutes()，setSeconds()，setMilliseconds()，setTime()，toLocaleString()，toLocaleTimeString()，toLocaleDateString() |
| setInterval()，clearInterval()，setTimeout()，clearTimeout() |
| Math對象方法，正則表達式 | abs(x)，ceil(x)，floor(x)，round(x)，max(x,y)，min(x,y)，pow(x,y)，sqrt(x)，random()，sin(x)，cos(x)，tan(x) |
| 正則表達式介紹、定義、元字符、限定符、定位符 |
| compile，exec，test，match |
| DOM 節點的獲取以及增刪改 | DOM介紹、DOM樹 |
| 通過 id ，標簽名，類名找到 HTML 元素 |
| 如需向 HTML DOM 添加新元素，您必須首先創建該元素（元素節點），然后向一個已存在的元素追加該元素。 |
| DOM 屬性操作 | document.getElementById，document.getElementByTagName，document.getElementByName ，document.getElementByClassName，document.querySelector |
| Elements ，Sources，Console，Network |
| BOM 操作 | BOM介紹 |
| window對象介紹 |
| Location 對象包含有關當前 URL 的信息。 |
| Screen 對象包含有關客戶端顯示屏幕的信息。 |
| Navigator 對象包含有關瀏覽器的信息。 |
| History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。 |
| frames 屬性返回窗口中所有命名的框架。 |
| Javascript基礎事件以及Event對象 | onabort，onblur，onchange，onclick，ondblclick，onerror，onfocus，onkeydown，onkeypress，onkeyup，onload，onmousedown，onmousemove，onmouseout，onmouseover，onmouseup，onreset，onresize，onselect，onsubmit，onunload |
| attachEvent，detachEvent，addEventListener，removeEventListener |
| 事件自定義方式 |
| scrollHeight，scrollLeft，scrollTop，scrollWidth，offsetHeight，offsetLeft，offsetTop，event.clientX，event.clientY，event.offsetX，event.offsetY， |
| event，鼠標坐標獲取，鍵盤值獲取 |
| Javascript優化(事件委托，懶加載，預加載)與瀏覽器調錯 | 捕獲階段、處于事件階段、冒泡階段 |
| 事件處理程序說明 |
| 事件委托原理 |
| 懶加載是什么，預加載是什么 |
| 案例實戰 |
|
|
|
| HTML5 API | video/audio的Javascript API屬性、方法，事件 |
| touchstart、touchend、touchmove，devicemotion、deviceorientation |
| 拖放（Drag 和 drop），定位獲取 |
| HTML5 Canvas | canvas 元素用于在網頁上繪制圖形。 |
| getContext 上下文、beginPath()，closePath()，lineTo()、moveTo()，rect()，arc()，fill()，stroke()，fillRect()，strokeRect()，clearRect() |
| jQuery基礎補充 | 基本篩選器、子元素、表單、可見性 |
| 對象訪問、數據緩存、對象篩選查找 |
| 內部插入、外部插入、包裹、替換 |
| 動畫隊列控制、delay、stop、finish |
| 事件委托介紹、綁定方式 |
| each、trim、param |
| JQuery高級技能 | 插件封裝方式、封裝技巧 |
| swiper.js |
| 介紹、優缺點、移動端zepto方法、組件介紹 |
| 商城網站項目 |
|
|
|
|
|
| 動態數據交互與存儲 | json/xml ，cookie，本地存儲與離線存儲 |
|
|
|
|
| AJAX交互原理（原生，JQ） | HTTP協議，它規定了在網絡中發布，傳輸和接收html頁面的方法。大家都遵循這個協議，就能實現信息的傳輸。
|
| AJAX介紹、GET、POST |
| XMLHttpRequest聲明、兼容處理、數據獲取操作 |
| ajax的屬性介紹、數據調用 |
| axios.create()，get/post方法，屬性控制 |
| 面向對象開發思想 | 面向對象編程 | 基本模式的定義、優缺點 |
| 工廠模式定義、優缺點 |
| 構造模式定義、優缺點 |
| 原型鏈、原型模式定義、優缺點 |
| 混合模式定義 |
| 面向對象編程應用 | 原型（prototype）實現繼承、構造函數實現繼承、call , apply實現繼承 |
| 對象封裝作用、封裝的方式 |
| 淺克隆、深克隆 |
| 原型鏈介紹、原型鏈應用 |
| this的指向說明 |
| 面向對象實際應用 |
|
|
第三階段
（前后端交互） | Node.js | Node.js：基礎模塊 |
|
|
|
|
|
|
|
|
| Node.js：基礎模塊 |
|
|
|
|
|
|
| Node.js：express |
|
|
|
|
|
| Node.js：mongodb |
|
|
|
|
|
| 自動化工具 |
|
|
| 項目實戰 | 項目版本管理工具 | git介紹、遠程倉庫介紹、暫存區介紹、指令配置、初始化指令、倉庫添加指令、項目拉取、提交、推送指令、版本控制指令 |
| github介紹、注冊、項目創建、權限配置 |
| SVN的安裝、版本管理操作 |
| 移動端商城項目實戰 |
|
|
| 移動端商城項目實戰 |
|
|
| ECMAScript 6高級語法 | ES6基礎指令一 | babel介紹、安裝與檢查、轉換配置、運行指令 |
| let變量聲明、新增特性、塊級作用域 |
| const常量聲明、本質區別 |
| 解構介紹、數組解構、對象解構、字符串解構、函數參數的解構 |
字符的 Unicode 表示法、codePointAt()、String.fromCodePoint()
字符串的遍歷器接口、at()、normalize()、includes(), startsWith(), endsWith()、repeat()、padStart()，padEnd()、matchAll()、模板字符串 |
| ES6基礎指令二 | 擴展運算符、Array.from()、Array.of()、copyWithin()、find() 和 findIndex()、fill()、entries()，keys() 和 values()、includes()、數組的空位 |
| 函數參數的默認值、rest 參數、嚴格模式、箭頭函數、雙冒號運算符 |
| 屬性的簡潔表示法、屬性名表達式、方法的 name 屬性、Object.is()、super 關鍵字、對象的擴展運算符 |
| ES6基礎指令三 | constructor 方法、類的實例對象、Class 表達式、不存在變量提升、私有方法和私有屬性、this 的指向、name 屬性、Class 的取值函數（getter）和存值函數（setter）、Class 的 Generator 方法、Class 的靜態方法、Class 的靜態屬性和實例屬性 |
| export 命令、import 命令、模塊的整體加載、export default 命令 |
| ES6基礎指令四 | Promise 的含義、then()、catch()、finally()、all()、race()、resolve()、reject() |
| 基本用法、async 函數的實現原理、與其他異步處理方法的比較 |
| 介紹、作為屬性名的 Symbol、屬性名的遍歷、Symbol.for()，Symbol.keyFor()、內置的 Symbol 值 |
| 微信開發 | 微信公眾號 |
|
|
|
| 微信小程序快速入門 | 小程序賬號注冊、開發工具安裝、界面操作、項目搭建、項目配置 |
| 微信小程序界面交互 | WXML、WXSS、組件使用、靜態頁面搭建 |
| 微信小程序接口調用 | 小程序API介紹、網絡、界面、設備、媒體、文件、數據緩存等接口調用 |
| 項目實戰 | 微信小程序案例 |
|
|
第四階段
（框架開發） | Vue.js開發 | Vue.js 基礎指令 | Vue.js介紹、發展歷史、特點、文件下載、Vue實例 |
| 插值方式、指令參數、修飾符、代碼縮寫 |
| 文本、原始HTML、特性、Javascript表達式 |
| 樣式綁定、條件渲染、列表渲染、事件綁定 |
| Vue.js 基礎方法 | 方法介紹、定義方式 |
| 計算屬性介紹、定義、比較計算屬性和methods方法 |
| 過濾器介紹、使用方式、自定義過濾器 |
| 事件監聽、事件處理方式、事件修飾符、按鍵修飾符 |
| 表單數據綁定、表單修飾符、雙向數據綁定 |
| Vue.js組件開發一 | 組件介紹、組件定義方式、組件引用 |
|
| 父子組件數據傳輸、多級組件數據傳輸 |
|
| Vue.js組件開發二 | 生命周期介紹、應用 |
| slot插槽的定義與使用 |
|
| Vue.js組件開發三 | 動態組件介紹、注冊動態組件 |
| Vue動畫定義方式、CSS動畫設置、自定義動畫效果 |
| 數據變化追蹤、異步更新隊列 |
| Vue.js插件 | Vue-cli介紹、安裝與檢查、Vue項目搭建流程 |
| Vue-router介紹、路由、路由守衛 |
| axios.create()，get/post方法，屬性控制 |
| Vue.js高級語法 | Vuex介紹、狀態state、項目配置 |
|
| 項目實戰 | WEB APP項目實戰 |
|
|
|
|
| React 開發 | React | React介紹、歷史發展、安裝方式、環境配置 |
| JSX基礎語法、JS表達式使用、樣式、注釋 |
| React組件開發、復合組件 |
| React語法 | 事件注冊、綁定this |
| ReactDOM介紹以及使用、render DOM渲染 |
| 表單事件綁定、表單值獲取、state修改 |
| React環境搭建 | 環境介紹、整體搭建、項目部署 |
| 集成router、路由嵌套、路由參數 |
| React數據交互 | Fetch介紹、get封裝、post封裝、JSX調用 |
| React跨域處理，header處理 |
| React的promise應用 |
| 項目實戰 | React案例實戰分析 |
|
|
|
| 拓展學習：react+native | react+native環境搭建及介紹 | React Native介紹 |
| 軟件安裝，環境配置，環境測試 |
| 服務器搭建，項目搭建 |
| Angular介紹 | Angular框架、MVC思想 |
| 數據可視化介紹 | echart.js介紹、基礎使用 |
| D3.js介紹、基礎使用 |
| 3D動畫框架介紹 | Three.js介紹、基礎使用 |
| tween.js介紹、基礎使用 |
| 產品經理職責介紹 | 產品經理職責介紹 |
| 架構師職責介紹 | 架構師職責介紹 |
學員點評