開班時間:固定日期
適合人群:青少年 成人等
校區(qū):格宇教育閔行校區(qū)、格宇教育楊浦校區(qū)
18210289671
WEB前端課綱 | |||
Level 1 | Level 2 | Level 4 | 知識點清單 |
網(wǎng)站布局基礎(chǔ) | PhotoShop基礎(chǔ) | Adobe公司介紹,版本編號,發(fā)展歷史,安裝過程 | |
移動工具介紹與操作 | |||
選區(qū)工具介紹與操作 | |||
套索工具,磁性套索,框選工具,魔棒工具,快速選擇工具介紹與操作 | |||
圖層介紹,圖層合并 | |||
切片工會介紹與操作 | |||
圖片格式,精靈圖,圖片保存方式 | |||
HTML標簽及規(guī)范 | HTML定義,HTML歷史,HTML版本、常用瀏覽器介紹、HTML整體結(jié)構(gòu)、標簽結(jié)構(gòu)、注釋 | ||
塊級標簽介紹,div,h1,h2,h3,h4,h5,h6,p,ul,li,ol,dl,dt,dd,hr | |||
行內(nèi)標簽介紹,span,a,img,b,strong,i,em,br | |||
什么是W3C標準,DOCTYPE ,語言編碼,嵌套規(guī)則,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基礎(chǔ) | CSS介紹,CSS發(fā)展歷史 | ||
CSS的三種引用方式,CSS基本語法、屬性、值、CSS手冊查詢 | |||
CSS選擇器(id、class、標簽、屬性、后代、偽類等),CSS優(yōu)先級 | |||
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 | ||
雙飛翼布局,圣杯布局,側(cè)邊欄固定 | |||
什么是BFC、什么是IFC | |||
什么是CSS hack,hack解決的問題及應用情景,瀏覽器識別字符標準對應表 | |||
項目實戰(zhàn) | 紐曼官網(wǎng)項目實戰(zhàn) | ||
HTML5網(wǎng)站開發(fā) | HTML5新特性 | 發(fā)展歷程(設(shè)計目的),特性(語義特性,本地存儲特性,設(shè)備兼容性,網(wǎng)頁多媒體特性),規(guī)范,優(yōu)缺點,移除元素 | |
常用標簽(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基礎(chǔ)屬性--動畫 | 過渡屬性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基礎(chǔ)屬性--布局 | 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的使用 | |||
項目實戰(zhàn) | 紐曼官網(wǎng)移動端項目實戰(zhàn) | ||
網(wǎng)站動效交互開發(fā) | Javascript基礎(chǔ) | JavaScript介紹、變量命名規(guī)則,變量聲明 | |
number,string,boolean,Array,object | |||
算術(shù)運算符,關(guān)系運算符,邏輯運算符 | |||
if,for | |||
函數(shù)定義語句,參數(shù),返回值 | |||
jQuery基礎(chǔ) | jQuery介紹、特點、優(yōu)勢、文件下載、引入方式 | ||
id,class,標簽,屬性 | |||
屬性類,css類,html\text\value | |||
DOM節(jié)點插入、刪除、修改、復制 | |||
jQuery動畫以及事件 | 常用鼠標事件、鍵盤事件、頁面加載事件,事件綁定方式 | ||
animate動畫方法、show/hide、fade、slide動畫實現(xiàn)、時間控制 | |||
項目實戰(zhàn) | 用戶交互實戰(zhàn)一 | ||
用戶交互實戰(zhàn)二 | |||
響應式網(wǎng)站開發(fā) | Bootstrap | Boostratp介紹、Boostratp文件的下載、引入方式、注意事項 | |
表單組件、表格組件、導航組件、分頁組件、按鈕組件 | |||
字體圖標的引入、字體圖片的使用方式 | |||
柵格系統(tǒng)介紹、使用規(guī)則 | |||
JavaScript插件、快速布局工具 | |||
Bootstrap響應式案例實現(xiàn) | |||
第二階段 (邏輯交互) | 用戶交互開發(fā) (邏輯業(yè)務開發(fā)思想) | Javascript基礎(chǔ)語法 | JS發(fā)展歷史,定義,版本 |
標識符的命名,命名規(guī)范,保留字,關(guān)鍵字 | |||
變量的定義,字面量的使用 | |||
轉(zhuǎn)義字符是什么,空格,大于,小于,版權(quán)等轉(zhuǎn)義字符 | |||
算術(shù)運算符,賦值運算符,邏輯運算符,條件運算符,位運算符,三目運算符 | |||
字符串(String),數(shù)字(Number),布爾(Boolean),數(shù)組(Array),對象(Object),空(Null),未定義(Undefined) | |||
Javascript流程控制 | if,switch | ||
for,for..in,while,do…while | |||
break,continue | |||
Javascript函數(shù) | 函數(shù)常見的定義方式、函數(shù)的作用 | ||
函數(shù)的調(diào)用方式 | |||
函數(shù)參數(shù)設(shè)置 | |||
return | |||
匿名函數(shù)的定義 | |||
變量提升,全局作用域,局部作用域,閉包 | |||
遞歸函數(shù)的定義與使用,算法實現(xiàn) | |||
Array對象方法 | 對象的介紹,對象的定義方式,常見對象介紹 | ||
數(shù)組的介紹,數(shù)組的定義方式 | |||
一維數(shù)組,二維數(shù)組,對象數(shù)組 | |||
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 節(jié)點的獲取以及增刪改 | DOM介紹、DOM樹 | ||
通過 id ,標簽名,類名找到 HTML 元素 | |||
如需向 HTML DOM 添加新元素,您必須首先創(chuàng)建該元素(元素節(jié)點),然后向一個已存在的元素追加該元素。 | |||
DOM 屬性操作 | document.getElementById,document.getElementByTagName,document.getElementByName ,document.getElementByClassName,document.querySelector | ||
Elements ,Sources,Console,Network | |||
BOM 操作 | BOM介紹 | ||
window對象介紹 | |||
Location 對象包含有關(guān)當前 URL 的信息。 | |||
Screen 對象包含有關(guān)客戶端顯示屏幕的信息。 | |||
Navigator 對象包含有關(guān)瀏覽器的信息。 | |||
History 對象包含用戶(在瀏覽器窗口中)訪問過的 URL。 | |||
frames 屬性返回窗口中所有命名的框架。 | |||
Javascript基礎(chǔ)事件以及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優(yōu)化(事件委托,懶加載,預加載)與瀏覽器調(diào)錯 | 捕獲階段、處于事件階段、冒泡階段 | ||
事件處理程序說明 | |||
事件委托原理 | |||
懶加載是什么,預加載是什么 | |||
案例實戰(zhàn) | |||
HTML5 API | video/audio的Javascript API屬性、方法,事件 | ||
touchstart、touchend、touchmove,devicemotion、deviceorientation | |||
拖放(Drag 和 drop),定位獲取 | |||
HTML5 Canvas | canvas 元素用于在網(wǎng)頁上繪制圖形。 | ||
getContext 上下文、beginPath(),closePath(),lineTo()、moveTo(),rect(),arc(),fill(),stroke(),fillRect(),strokeRect(),clearRect() | |||
jQuery基礎(chǔ)補充 | 基本篩選器、子元素、表單、可見性 | ||
對象訪問、數(shù)據(jù)緩存、對象篩選查找 | |||
內(nèi)部插入、外部插入、包裹、替換 | |||
動畫隊列控制、delay、stop、finish | |||
事件委托介紹、綁定方式 | |||
each、trim、param | |||
JQuery高級技能 | 插件封裝方式、封裝技巧 | ||
swiper.js | |||
介紹、優(yōu)缺點、移動端zepto方法、組件介紹 | |||
商城網(wǎng)站項目 | |||
動態(tài)數(shù)據(jù)交互與存儲 | json/xml ,cookie,本地存儲與離線存儲 | ||
AJAX交互原理(原生,JQ) | HTTP協(xié)議,它規(guī)定了在網(wǎng)絡(luò)中發(fā)布,傳輸和接收html頁面的方法。大家都遵循這個協(xié)議,就能實現(xiàn)信息的傳輸。 | ||
AJAX介紹、GET、POST | |||
XMLHttpRequest聲明、兼容處理、數(shù)據(jù)獲取操作 | |||
ajax的屬性介紹、數(shù)據(jù)調(diào)用 | |||
axios.create(),get/post方法,屬性控制 | |||
面向?qū)ο箝_發(fā)思想 | 面向?qū)ο缶幊?/span> | 基本模式的定義、優(yōu)缺點 | |
工廠模式定義、優(yōu)缺點 | |||
構(gòu)造模式定義、優(yōu)缺點 | |||
原型鏈、原型模式定義、優(yōu)缺點 | |||
混合模式定義 | |||
面向?qū)ο缶幊虘?/span> | 原型(prototype)實現(xiàn)繼承、構(gòu)造函數(shù)實現(xiàn)繼承、call , apply實現(xiàn)繼承 | ||
對象封裝作用、封裝的方式 | |||
淺克隆、深克隆 | |||
原型鏈介紹、原型鏈應用 | |||
this的指向說明 | |||
面向?qū)ο髮嶋H應用 | |||
第三階段 (前后端交互) | Node.js | Node.js:基礎(chǔ)模塊 | |
Node.js:基礎(chǔ)模塊 | |||
Node.js:express | |||
Node.js:mongodb | |||
自動化工具 | |||
項目實戰(zhàn) | 項目版本管理工具 | git介紹、遠程倉庫介紹、暫存區(qū)介紹、指令配置、初始化指令、倉庫添加指令、項目拉取、提交、推送指令、版本控制指令 | |
github介紹、注冊、項目創(chuàng)建、權(quán)限配置 | |||
SVN的安裝、版本管理操作 | |||
移動端商城項目實戰(zhàn) | |||
移動端商城項目實戰(zhàn) | |||
ECMAScript 6高級語法 | ES6基礎(chǔ)指令一 | babel介紹、安裝與檢查、轉(zhuǎn)換配置、運行指令 | |
let變量聲明、新增特性、塊級作用域 | |||
const常量聲明、本質(zhì)區(qū)別 | |||
解構(gòu)介紹、數(shù)組解構(gòu)、對象解構(gòu)、字符串解構(gòu)、函數(shù)參數(shù)的解構(gòu) | |||
字符的 Unicode 表示法、codePointAt()、String.fromCodePoint() 字符串的遍歷器接口、at()、normalize()、includes(), startsWith(), endsWith()、repeat()、padStart(),padEnd()、matchAll()、模板字符串 | |||
ES6基礎(chǔ)指令二 | 擴展運算符、Array.from()、Array.of()、copyWithin()、find() 和 findIndex()、fill()、entries(),keys() 和 values()、includes()、數(shù)組的空位 | ||
函數(shù)參數(shù)的默認值、rest 參數(shù)、嚴格模式、箭頭函數(shù)、雙冒號運算符 | |||
屬性的簡潔表示法、屬性名表達式、方法的 name 屬性、Object.is()、super 關(guān)鍵字、對象的擴展運算符 | |||
ES6基礎(chǔ)指令三 | constructor 方法、類的實例對象、Class 表達式、不存在變量提升、私有方法和私有屬性、this 的指向、name 屬性、Class 的取值函數(shù)(getter)和存值函數(shù)(setter)、Class 的 Generator 方法、Class 的靜態(tài)方法、Class 的靜態(tài)屬性和實例屬性 | ||
export 命令、import 命令、模塊的整體加載、export default 命令 | |||
ES6基礎(chǔ)指令四 | Promise 的含義、then()、catch()、finally()、all()、race()、resolve()、reject() | ||
基本用法、async 函數(shù)的實現(xiàn)原理、與其他異步處理方法的比較 | |||
介紹、作為屬性名的 Symbol、屬性名的遍歷、Symbol.for(),Symbol.keyFor()、內(nèi)置的 Symbol 值 | |||
微信開發(fā) | 微信公眾號 | ||
微信小程序快速入門 | 小程序賬號注冊、開發(fā)工具安裝、界面操作、項目搭建、項目配置 | ||
微信小程序界面交互 | WXML、WXSS、組件使用、靜態(tài)頁面搭建 | ||
微信小程序接口調(diào)用 | 小程序API介紹、網(wǎng)絡(luò)、界面、設(shè)備、媒體、文件、數(shù)據(jù)緩存等接口調(diào)用 | ||
項目實戰(zhàn) | 微信小程序案例 | ||
第四階段 (框架開發(fā)) | Vue.js開發(fā) | Vue.js 基礎(chǔ)指令 | Vue.js介紹、發(fā)展歷史、特點、文件下載、Vue實例 |
插值方式、指令參數(shù)、修飾符、代碼縮寫 | |||
文本、原始HTML、特性、Javascript表達式 | |||
樣式綁定、條件渲染、列表渲染、事件綁定 | |||
Vue.js 基礎(chǔ)方法 | 方法介紹、定義方式 | ||
計算屬性介紹、定義、比較計算屬性和methods方法 | |||
過濾器介紹、使用方式、自定義過濾器 | |||
事件監(jiān)聽、事件處理方式、事件修飾符、按鍵修飾符 | |||
表單數(shù)據(jù)綁定、表單修飾符、雙向數(shù)據(jù)綁定 | |||
Vue.js組件開發(fā)一 | 組件介紹、組件定義方式、組件引用 | ||
父子組件數(shù)據(jù)傳輸、多級組件數(shù)據(jù)傳輸 | |||
Vue.js組件開發(fā)二 | 生命周期介紹、應用 | ||
slot插槽的定義與使用 | |||
Vue.js組件開發(fā)三 | 動態(tài)組件介紹、注冊動態(tài)組件 | ||
Vue動畫定義方式、CSS動畫設(shè)置、自定義動畫效果 | |||
數(shù)據(jù)變化追蹤、異步更新隊列 | |||
Vue.js插件 | Vue-cli介紹、安裝與檢查、Vue項目搭建流程 | ||
Vue-router介紹、路由、路由守衛(wèi) | |||
axios.create(),get/post方法,屬性控制 | |||
Vue.js高級語法 | Vuex介紹、狀態(tài)state、項目配置 | ||
項目實戰(zhàn) | WEB APP項目實戰(zhàn) | ||
React 開發(fā) | React | React介紹、歷史發(fā)展、安裝方式、環(huán)境配置 | |
JSX基礎(chǔ)語法、JS表達式使用、樣式、注釋 | |||
React組件開發(fā)、復合組件 | |||
React語法 | 事件注冊、綁定this | ||
ReactDOM介紹以及使用、render DOM渲染 | |||
表單事件綁定、表單值獲取、state修改 | |||
React環(huán)境搭建 | 環(huán)境介紹、整體搭建、項目部署 | ||
集成router、路由嵌套、路由參數(shù) | |||
React數(shù)據(jù)交互 | Fetch介紹、get封裝、post封裝、JSX調(diào)用 | ||
React跨域處理,header處理 | |||
React的promise應用 | |||
項目實戰(zhàn) | React案例實戰(zhàn)分析 | ||
拓展學習:react+native | react+native環(huán)境搭建及介紹 | React Native介紹 | |
軟件安裝,環(huán)境配置,環(huán)境測試 | |||
服務器搭建,項目搭建 | |||
Angular介紹 | Angular框架、MVC思想 | ||
數(shù)據(jù)可視化介紹 | echart.js介紹、基礎(chǔ)使用 | ||
D3.js介紹、基礎(chǔ)使用 | |||
3D動畫框架介紹 | Three.js介紹、基礎(chǔ)使用 | ||
tween.js介紹、基礎(chǔ)使用 | |||
產(chǎn)品經(jīng)理職責介紹 | 產(chǎn)品經(jīng)理職責介紹 | ||
架構(gòu)師職責介紹 | 架構(gòu)師職責介紹 |
教師簡介:格宇HTML5學科高級講師,七年行業(yè)工作經(jīng)驗,熟練使用HTML5,CSS3,js等技術(shù),開發(fā)多個web和移動端App應用,曾在前程無憂等資深互聯(lián)網(wǎng)公司任職,并且擔任前端的team leader ,負責搭建web前端架構(gòu),考慮前端技術(shù)選型,帶領(lǐng)過三十人左右的團隊完成項目,主要涉足媒體,銀行,電子商務,P2P,O2O等不同行業(yè),熟練各行業(yè)web開發(fā)的特點和需求以及對應的業(yè)務。熟練使用原生Js,CSS3,h5,bootstrap,webpack,angular,vue,react,jquerymobile,jqueryUI等技術(shù)
教師簡介:格宇移動前端開發(fā)(HTML5)專業(yè)講師,5年多pc及移動端開發(fā)實踐經(jīng)驗。曾在深圳,上海等城市做APP、商城網(wǎng)站開發(fā)。在多年的實踐中總結(jié)了實際工作中所需要的技能及技巧,熟練使用原生Js,CSS3,h5,node.js, webpack,ng,vue,react,微信小程序等技術(shù),對待教學認真負責,平易近人,細心輔導,不厭其煩,講課內(nèi)容深入淺出,擅長調(diào)動課堂氣氛。在教學中經(jīng)常拓展實際工作中經(jīng)驗,分享并傳授給學生,能讓學生很快的將所學知識應用到實際項目中。對學習前端的感悟是:只要你肯學,就肯定能幫你學好!
上海市閔行區(qū)漕寶路3509號匯寶廣場B座5樓502
上海市楊浦區(qū)荊州路280號197幢D座3層C16/C17號