前端学习html css js

Posted 2020-10-20 南城南的思念，北城北的等待

html

第一章 ：HTML模板

• HTML是什么（超文本标记语言）
• HTML网页主体结构
• doctype标签
• head标签
• meat标签
• title标签
• body标签

第二章：HTML标题

• h1标题标签
• h2标题标签
• h3标题标签
• h4标题标签
• h5标题标签
• h6标题标签
• hr水平线标签

第三章：HTML 段落

• p段落标签
• br换行标签

第四章：HTML 样式

• center定义居中内容
• font和basefont定义HTML字体
• s和strike定义删除线文本
• u定义下划线文本

第五章：HTML格式化

• b定义粗体文本
• big定义大号字
• em定义着重文本
• i定义斜体字
• small定义小号字
• strong定义加重语气
• sub定义下标字
• sup定义上标字
• ins定义插入字
• del定义删除字

第六章：HTML CSS

• style定义样式定义
• link定义资源引用
• div盒子模型
• span定义文本区域

第七章：链接

• a超链接标签

第八章：HTML图像

• img插入图片标签
• map定义图像地图
• area定义图像地图中的可点击区域

第九章：HTML表格

• table定义表格
• caption定义表格标题
• th定义表格的表头
• tr定义表格的行
• thead定义表格的页眉
• tbody定义表格的主体
• tfoot定义表格的页脚
• col定义用于表格列的属性

第十章：HTML列表

• ul无序列表
• li列表项
• ol有序列表
• dl定义列表
• dd定义的描述

css 

第一章 ：认识CSS

• CSS的作用
• CSS的位置及关系
• CSS如何引入

第二章：CSS基础语法

• CSS语法结构
• CSS选择器初步认识
• CSS声明、属性、值

第三章：CSS高级语法

• CSS选择器分组
• CSS继承及其问题

第四章：CSS ID选择器

• 什么是ID选择器
• ID选择器权重问题
• ID选择器常用在什么地方

第五章：CSS类选择器

• 什么是类(class)选择器
• ID选择器和类选择器的对比
• 类选择器常用在什么地方

第六章：CSS属性选择器

• 属性选择器
• 值选择器
• 多个值选择器

第七章：CSS背景样式

• background背景复合样式
• Background-color背景颜色
• Background-image背景图片
• Background-position背景定位
• Background-repeat背景是否平铺
• Background-attachment背景图像是否固定

第八章：CSS文本

• Color设置颜色
• Direction设置文本方向
• Line-height设置行高
• Letter-spacing设置字符间距
• Text-align文本居中对齐
• Text-decoration文本添加修饰
• Text-indent首行缩进
• Text-shadow文本阴影
• Text-transform控制元素中的字母
• White-space设置元素中空白的处理方式
• Word-spacing设置字间距

第九章：CSS字体

• Font添加文字样式
• Font-family设置字体
• Font-size设置字体大小
• Font-weight设置字体粗细
• Font-variant以小型大写字体
• Font-style设置字体风格
• Font-stretch对字体进行水平拉伸

第十章：CSS列表

• List-style设置列表所有属性     list-style:none：列表样式：无
• List-style-image将图像设置为列表项标志
• List-style-position设置列表中列表项标志位置
• List-style-type设置列表项标志类型

第十一章：CSS表格

• Border-collapse设置是否把表格边框合并为单一的边框
• Border-spacing设置分隔单元格边框的距离
• Caption-side设置表格标题的位置
• Empty-cells设置是否显示表格中的空单元格
• Table-layout设置显示单元、行和列的算法

第十二章：CSS轮廓

• Outline设置所有轮廓属性
• Outline-color设置轮廓颜色
• Outline-style设置轮廓样式
• Outline-width设置轮廓宽度

第十三章：CSS内边距

• Padding内边距及后边值
• Padding-bottom下内边距
• Padding-left左内边距
• Padding-right右内边距
• Padding-top上内边距

第十四章：CSS外边距

• Margin外边距及后边值
• Margin-bottom下外边距
• Margin-left左外边距
• Margin-right右外边距
• Margin-top上外边距

第十五章：CSS边框

• border简写属性，用于把针对四个边的属性设置在一个声明
• border-style用于设置元素所有边框的样式，或者单独地为各边设置边框样式
• border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度
• border-color简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色
• border-bottom简写属性，用于把下边框的所有属性设置到一个声明中
• border-bottom-color设置元素的下边框的颜色
• border-bottom-style设置元素的下边框的样式
• border-bottom-width设置元素的下边框的宽度
• border-left简写属性，用于把左边框的所有属性设置到一个声明中
• border-left-color设置元素的左边框的颜色
• border-left-style设置元素的左边框的样式
• border-left-width设置元素的左边框的宽度
• border-right简写属性，用于把右边框的所有属性设置到一个声明中
• border-right-color设置元素的右边框的颜色
• border-left-style设置元素的右边框的样式
• border-left-width设置元素的右边框的宽度
• border-top简写属性，用于把上边框的所有属性设置到一个声明中
• border-top-color设置元素的上边框的颜色
• border-top-style设置元素的上边框的样式
• border-top-width设置元素的上边框的宽度

第十六章：外边距合并问题

第十七章：CSS定位

• CSS定位概述
• CSS相对定位
• CSS绝对定位
• CSS固定定位

第十八章：浮动

• Float浮动及文档流概念
• Float清除浮动的几种方法
• Float和定位的区分用法

第十九章：CSS选择器

• CSS元素选择器
• CSS选择器分组
• CSS后代选择器
• CSS子元素选择器
• CSS相邻兄弟选择器
• CSS伪类选择器
• CSS伪元素

 

js

第一阶段

第一章：学习设计模式的准备

• js面向对象回顾
• 什么是设计模式
• 为什么我们要学习设计模式？
• 设计模式的分类

第二章：创建型设计模式

• 单例模式
• 简单工厂模式
• 工厂方法模式
• 抽象工厂模式
• 原型模式
• 创建者模式

第三章：创建型设计模式

• 装饰者模式
• 外观模式
• 代理模式
• 适配器模式
• 亨元模式

第四章：行为型设计模式

• 迭代器模式
• 中介者模式
• 访问者模式
• 观察者模式
• 策略模式
• 命令模式

第五章：技巧性设计模式

• 委托模式
• 节流模式
• 数据访问对象模式
• 参与者模式
• 等待者模式

第六章：架构型设计模式

• 同步模块模式
• 异步模块模式
• MVC模式
• MVP模式
• MVVM模式

第二阶段

DOM操作+BOM操作+cookie操作+regExp正则表达式+ajax

第一章：DOM操作

• dom简介、dom结构、querySelector、querySelectorAll
• node节点类型 12种，重点介绍三种（元素、属性、文本）
• node属性常用操作 getAttribute、setAttribute、removeAttribute、getAtttibuteNode、childNodes、firstChild、lastChild、nextSibling、previousSibling、parentNode
• 常用的方法DOM元素创建以及节点追加 createElement、 appendChild、 createTextNode、insertBefore、removeChild
• offsetWidth,clientWidth,scrollWidth(height同理)
• offsetTop,offsetLeft,offsetParent
• 可视区大小滚动高度 clientWidth / clientHeight 、innerWidth /innerHeight 、scrollTop / scrollLeft

第二章：BOM操作

• BOM(Brower Object Model) 核心对象window
• 表单中的操作 onfocus()、onblur（）、 onchange（）
• event事件对象 每个浏览器中的event 、event.pageX / event.pageY 、event.clientX / event.clientY
• 事件绑定 attachEvent、addEventListener 事件捕获、事件冒泡 、定义事件解绑 、定义on方法
• 滚轮事件 wheelDelta、detail 、nmousewheel 滚轮事件兼容
• 事件冒泡 onmouseover/onmouseout和onmouseenter/onmouseleave区别 表格操作点击、cancelBubble、stopPropagation()
• 键盘事件 keyCode、onkeydown、 onkeypress、onkeyup、altKey、ctrlKey、shiftKey、which等
• 阻止浏览器默认事件 preventDefault 、屏蔽浏览器的右键菜单、禁止选中复制
• window其他的补充 open()、close()、location.href/search/hash

第三章：cookie操作

• 什么是cookie 、存储/获取cookie 、 封装方法 getCookie(key)、 setCookie（key,value,time）、removeCookie(key)

第四章：正则表达式

• 什么是正则表达式
• 创建正则表达式常用方法 / /、 new RegExp()、test（）、exec（）
• String中正则表达式方法 match、replace、 search、 split
• 标识符 \n \r \t .\s \S \d \D \w \W ^a a$
• 量词 * + ? {m,n}
• 贪婪和惰性
• 子集 () |
• replace应用

第五章：ajax

• 什么是ajax
• 本地服务器环境的搭建
• Ajax工作流程及代码 、创建ajax对象 、open方法 、send方法、最终接受
• HTTP状态码 status属性返回值所代表的意思
• Ajax封装
• 简单实例运用
• jsonp
• 实例：跨域调用百度搜索数据
• jQuery里面的ajax

第三阶段

付出不亚于任何人的努力

点击加群学习

javascript精品学习视频

 

• 第一阶段
• 第二阶段
• 第三阶段
• 第四阶段
• 第五阶段

面向对象

第一章：面向对象（上）

• 什么叫面向对象 面向过程、面向对象、两者区别
• 构造函数 什么叫构造函数 、什么是工厂模式
• 原型prototype
• 实例：面向对象写轮播

第二章：面向对象（中）

• 方法链
• 包装对象
• 原型链
• 原型的默认属性和方法
• 继承的多种方式 、 类继承 、 复制继承、对象继承、更多继承方式省

第三章：面向对象（下）

• 闭包 什么叫闭包 、闭包有什么特点
• 递归 什么是递归、哪些时候会用递归
• 如何开发插件

第四章：面向对象实战

• 开发类似jquery类库插件(8节课)
• 推箱子游戏(3节)
• 打飞机游戏(3节)

第四阶段

ECMAScript6

ECMAScript6

• ECMAScript 和 JavaScript 的关系
• ES6 与 ECMAScript 2015 的关系
• ECMAScript 的历史
• 部署进度
• Babel 转码器
• Traceur 转码器

第一章：Let和const命令

• let 命令
• 块级作用域
• const 命令
• 顶层对象的属性
• global 对象

第二章：变量的解析赋值

• 数组的解构赋值
• 对象的解构赋值
• 字符串的解构赋值
• 数值和布尔值的解构赋值
• 函数参数的解构赋值
• 圆括号问题
• 用途

第三章：字符串的拓展

• 字符的 Unicode 表示法
• codePointAt()
• String.fromCodePoint()
• 字符串的遍历器接口
• at()
• normalize()
• includes(), startsWith(), endsWith()
• repeat()
• padStart()，padEnd()
• 模板字符串
• 实例：模板编译
• 标签模板
• String.raw()
• 模板字符串的限制

第四章：正则的拓展

• RegExp 构造函数
• 字符串的正则方法
• u 修饰符
• y 修饰符
• sticky 属性
• flags 属性
• s 修饰符：dotAll 模式
• 后行断言
• Unicode 属性类
• 具名组匹配

第五章：数值的拓展

• 二进制和八进制表示法
• Number.isFinite(), Number.isNaN()
• Number.parseInt(), Number.parseFloat()
• Number.isInteger()
• Number.EPSILON
• 安全整数和Number.isSafeInteger()
• Math对象的扩展
• Math.signbit()
• 指数运算符
• Integer 数据类型

第六章：函数的拓展

• 函数参数的默认值
• rest 参数
• 严格模式
• name 属性
• 箭头函数
• 绑定 this
• 尾调用优化
• 函数参数的尾逗号

第七章：对象的拓展

• 扩展运算符
• Array.from()
• Array.of()
• 数组实例的 copyWithin()
• 数组实例的 find() 和 findIndex()
• 数组实例的 fill()
• 数组实例的 entries()，keys() 和 values()
• 数组实例的 includes()
• 数组的空位

第八章：Symbol

• 概述
• 作为属性名的 Symbol
• 实例：消除魔术字符串
• 属性名的遍历
• Symbol.for()，Symbol.keyFor()
• 实例：模块的 Singleton 模式
• 内置的Symbol值

第九章：Set和Map数据结构

• Set
• WeakSet
• Map
• WeakMap

第十章：Proxy

• 概述
• Proxy 实例的方法
• Proxy.revocable()
• this 问题
• 实例：Web 服务的客户端

第十一章：Reflect

• 概述
• 静态方法
• 实例：使用 Proxy 实现观察者模式

第十二章：Promise对象

• Promise 的含义
• 基本用法
• Promise.prototype.then()
• Promise.prototype.catch()
• Promise.all()
• Promise.race()
• Promise.resolve()
• Promise.reject()
• 两个有用的附加方法
• 应用
• Promise.try()

第十三章：Lterator和for...of循环

• Iterator（遍历器）的概念
• 默认 Iterator 接口
• 调用 Iterator 接口的场合
• 字符串的 Iterator 接口
• Iterator接口与Generator函数
• 遍历器对象的return()，throw()
• for...of循环

第十四章：Generator函数的语法

• 简介
• next 方法的参数
• for...of 循环
• Generator.prototype.throw()
• Generator.prototype.return()
• yield* 表达式
• 作为对象属性的Generator函数
• Generator 函数的this
• 含义
• 应用

第十五章：Generator函数的异步应用

• 传统方法
• 基本概念
• Generator 函数
• Thunk 函数
• co 模块

第十六章：async函数

• 含义
• 基本用法
• 语法
• async 函数的实现原理
• 与其他异步处理方法的比较
• 实例：按顺序完成异步操作
• 异步遍历器

第十七章：class的基本用法

第十八章：class的继承

第十九章：Decorator

第五阶段

JavaScript设计模式

第一章：学习设计模式的准备

• js面向对象回顾
• 什么是设计模式
• 为什么我们要学习设计模式？
• 设计模式的分类

第二章：创建型设计模式

• 单例模式
• 简单工厂模式
• 工厂方法模式
• 抽象工厂模式
• 原型模式
• 创建者模式

第三章：创建型设计模式

• 装饰者模式
• 外观模式
• 代理模式
• 适配器模式
• 亨元模式

第四章：行为型设计模式

• 迭代器模式
• 中介者模式
• 访问者模式
• 观察者模式
• 策略模式
• 命令模式

第五章：技巧性设计模式

• 委托模式
• 节流模式
• 数据访问对象模式
• 参与者模式
• 等待者模式

第六章：架构型设计模式

• 同步模块模式
• 异步模块模式
• MVC模式
• MVP模式
• MVVM模式