前端学习html css js

Posted 南城南的思念,北城北的等待

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端学习html css js相关的知识,希望对你有一定的参考价值。

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模式

以上是关于前端学习html css js的主要内容,如果未能解决你的问题,请参考以下文章

前端学习路线

前端学习顺序

前端技术学习路线及技术汇总

前端学习html css js

前端完整学习路线

前端完整学习路线