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介紹、基礎使用 |
產品經理職責介紹 | 產品經理職責介紹 |
架構師職責介紹 | 架構師職責介紹 |
學員點評