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介绍、基础使用 | |||
产品经理职责介绍 | 产品经理职责介绍 | ||
架构师职责介绍 | 架构师职责介绍 |
本页信息发布者ID为: 上海格宇学员(格宇教育), 如果有内容涉嫌虚假或违法,请通知IT教学平台,点击 我要举报