格宇教育

格宇教育老师接听

18210289671

格宇web前端

格宇web前端

适合人群:青少年 成人等
开班时间:固定日期
咨询电话:18210289671

课程简介

WEB前端课纲
Level 1Level 2Level 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动画实现、时间控制
项目实战用户交互实战一
用户交互实战二
响应式网站开发BootstrapBoostratp介绍、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 APIvideo/audio的Javascript API属性、方法,事件
touchstart、touchend、touchmove,devicemotion、deviceorientation
拖放(Drag 和 drop),定位获取
HTML5 Canvascanvas 元素用于在网页上绘制图形。
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.jsNode.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 开发ReactReact介绍、历史发展、安装方式、环境配置
JSX基础语法、JS表达式使用、样式、注释
React组件开发、复合组件
React语法事件注册、绑定this
ReactDOM介绍以及使用、render DOM渲染
表单事件绑定、表单值获取、state修改
React环境搭建 环境介绍、整体搭建、项目部署
集成router、路由嵌套、路由参数
React数据交互Fetch介绍、get封装、post封装、JSX调用
React跨域处理,header处理
React的promise应用
项目实战React案例实战分析
拓展学习:react+nativereact+native环境搭建及介绍React Native介绍
软件安装,环境配置,环境测试
服务器搭建,项目搭建
Angular介绍Angular框架、MVC思想
数据可视化介绍echart.js介绍、基础使用
D3.js介绍、基础使用
3D动画框架介绍Three.js介绍、基础使用
tween.js介绍、基础使用
产品经理职责介绍产品经理职责介绍
架构师职责介绍架构师职责介绍

 

名师团队

更多
  • 邓老师

    邓老师室内讲师

    格宇教育高级室内设计讲师,毕业于大连理工大学,土木工程与室内设计专业。大型工装设计为主、家装设计为辅,手绘与软件能力强,设计经验丰富,从事室内设计及教学已有10年,熟悉工艺,装饰材料的品种、规格、特性、擅长根据不同需求设计出不同的风格。专业实操理论强。 教学风格:亦师亦友

  • 江老师

    江老师教学教研总监

    教学教研总监 海归硕士,ui高级讲师 10年互联网从业经验,5年团队管理经验,多家上市教育集团管理经验,曾服务于百度集团、达内集团、参与超过30款上线产品研发,拥有非常丰富的实际项目经验及教学经验。

  • 施老师

    施老师室内老师

    格宇教育高级室内设计讲师,毕业于长沙理工大学,施工管理专业。有丰富的大型项目管理经验,先后参上海轨道交通地铁项目、上海赛车汽车城别墅项目、万科大型住宅项目等。自主创业成立自己的设计公司并担任室内设计讲师,精通工装、家装设计丰富的施工及设计经验,熟悉工艺,装饰材料的品种、规格、特性

  • 董老师

    董老师web前端讲师

    格宇移动前端开发(HTML5)专业讲师,5年多pc及移动端开发实践经验。曾在深圳,上海等城市做APP、商城网站开发。在多年的实践中总结了实际工作中所需要的技能及技巧,熟练使用原生Js,CSS3,h5,node.js, webpack,ng,vue,react,微信小程序等技术,对

  • 许老师

    许老师ui讲师

    个人简介: 格宇教育UI设计讲师,毕业于安徽工程大学服装设计专业。从事设计相关行业五年实践经验。从外包小公司一步步跟着市场走到大型自主研发UI设计。熟悉各种平台设计规范,各种产品设计规则。 教学风格:风趣幽默 理论与实践结合 教学理念:做设计可以天马行空,但是学习我们必须认真!

  • 刘老师

    刘老师教学经理

    格宇HTML5学科高级讲师,七年行业工作经验,熟练使用HTML5,CSS3,js等技术,开发多个web和移动端App应用,曾在前程无忧等资深互联网公司任职,并且担任前端的team leader ,负责搭建web前端架构,考虑前端技术选型,带领过三十人左右的团队完成项目,主要涉足媒

学校分布

更多
  • 1

    格宇教育杨浦校区

    上海市杨浦区荆州路280号197幢D座3层C16/C17号

  • 2

    格宇教育闵行校区

    上海市闵行区漕宝路3509号汇宝广场B座5楼502