一、HTML标签

1.meta标签：
2.div标签，分割标签：
3.p标签，段落标签：
4.h标签，标题标签h1-h6：
5.列表标签 <ul> <ol> <dl>：
6.img标签，展示图片：
7.a标签，超链接标签：
8.audio和video，音频标签和视频标签：
9.span标签，区块标签不会自动换行：
10.form标签，表单标签：
11.table标签，表格标签：

二、CSS样式

1.CSS书写位置：
2.选择器：
3.文本与字体属性
4.段落和行相关属性
5.盒子模型
6.浮动用来实现并排
7.定位设置
8.边框与圆角
9.背景、透明、阴影、渐变、过渡、动画

三、JavaScript

1.书写位置：
2.输出语句
3.数据类型
4.文档对象模型DOM
5.浏览器对象模型BOM
6.面向对象
7.ES6
8.本地存储
9.Ajax请求

四、其他

一、HTML标签

1.meta标签：
- Keywords关键词和Description描述信息，这两个属性主要用于SEO优化
2.div标签，分割标签：
- 用来将相关的内容组合到一起，和其他的内容进行分割
- clss属性主要用于和css进行关联

3.p标签，段落标签：
- p代表一个段落，不会进行换行
4.h标签，标题标签h1-h6：
- h1最大,h6最小
5.列表标签 <ul> <ol> <dl>：
- <ul>无序列表：
  - ?type：disc(默认，实心原点),square(实心方点),circle(空心圆)
  - <li>列表项标签，里面可以放任何标签
- <ol>有序列表：
  - type：?值 1(默认),a,A,i,I? ?
  - start：?从几开始
  - <li>列表项标签，里面可以放任何标签
  - reversed属性，倒序排列
- <dl>定义列表：
  - <dt>数据项
  - <dd>数据定义，可以嵌套任何标签，比如：span标签、em标签、a标签等等
- 常用CSS样式：
  - list-style: none; //去掉无序列表的小圆点
6.img标签，展示图片：
- src属性，代表图片路径，有两种格式：
  - 绝对路径: http://www.baidu.com/logo.png
  - 相对路径: 相对本文件所在的文件夹，./可以不写
- width和height属性，单位是像素可以不用写，如果省略其中一个属性，则等比例缩放图片
- alt属性，对图像的文本描述，当图片显示有问题时的代替文本
- 图片格式：
  - .jpg/.jpeg有损压缩图片，用于照片
  - .png用于logo、背景图等，支持透明和半透明
  - .gif支持动画（表情包）
7.a标签，超链接标签：
- href属性：表示点击后跳转的页面，还可以连接到本页面或者其他页面的特定位置
  - href = "a.html#a" 定位到a.html这个超链接的name = "a"属性；
- target属性：
  - 表示点击后网页在哪一个位置显示，self 在本页面打开页面，? blank 在新页面打开页面
- title属性，用于设置鼠标的悬停文本
- 常用CSS样式：
  - text-decoration: none; //去掉超链接的下划线
8.audio和video，音频标签和视频标签：
- src属性，表示音频地址
- controls属性，显示播放控件
- 标签对里的文字是对不兼容audio标签的浏览器显示文字
- 常用音频格式，mp3、ogg
- 常用的视频格式，mp4、ogv、webm
9.span标签，区块标签不会自动换行：
- 没有特殊的显示效果，一般是结合css来丰富字体样式
10.form标签，表单标签：
- action属性: 表示你要把数据提交到服务器，写的是网络地址(url)
- method属性: 表示提交数据的方式
  - get(默认方式):就是我们刚刚试的,把数据直接拼接到地址后面提交,特点是不安全,而且长度是有限制
  - post:是把用户数据打包后提交,在地址栏上是看不见,相对于get方式更多安全
- input标签，type属性表示类型，required属性代表必填
- 单行文本框，input标签的type属性设置为text：
  - text属性：文本输入域,显示的文本内容(20个字符),默认的
  - value属性：表示已经填好的值
  - placeholder属性：表示提示文本，以浅色文字写在文本框中，并不是文本框的值
  - disables属性：文本框锁死，不与用户交互，只做展示
- 单选按钮，input标签的type属性设置为radio：
  - radio是收音机的意思，老式收音机当你按下一个按钮的时候，其他按钮会自动弹起
  - 互斥的单选按钮应该设置他们的name为相同的值
  - 单选按钮要有value属性值，向服务器提交的就是该值
  - 如果加上了checked属性，表示默认被选中
  - label标签，将文字和单选按钮进行绑定，当点击文字的时候也可以选中单选框
- 复选框，input标签的type属性设置为checkbox：
  - checkbox:复选框
- 密码框，input标签的type属性设置为password：
  - password:密码输入框,显示的是*号代替文本
- 下拉菜单，select标签：
  - option标签是内部的选项，value属性的值会被提交到服务器?
- 多行文本框，textarea标签：
  - rows和cols属性，用于定义多行文本框的宽和高
- 三种按钮，input标签的type属性值不同：
  - button:普通按钮，也可以简写成button标签
  - reset:重置按钮，表单的value会被重置? ??
  - submit:提交按钮，表单会被提交到服务器，路由到action的url
- 更丰富的input种类，input标签的type属性值不同：
  - color颜色选择控件
  - date、time日期、时间选择控件
  - email电子邮箱输入控件
  - file文件选择控件
  - number数字输入控件
  - range拖拽条
  - search搜索框
  - url网址输入控件
  - datalist控件，为输入框提供一些备选项，当用户输入和备选项类似时，就会显示相应的
11.table标签，表格标签：
- 子标签：
  - <tr> 表示行，<td>表示列?
  - <caption>表示表格的标题?
  - <th>表示标题小格，默认加粗居中
  - thread、tbody、tfoot标签分别是区分出表头、表的核心内容、表脚（一般是汇总行）
- border属性，边框的宽，不用写单位，默认是?px
- align属性，水平对齐方式，左对齐left? 右对齐right? 中间对齐center
- bgcolor属性，设置整个表格的背景色
- tr和td的属性rowspan和colspan，?横向合并??rowspan: 纵向合并

二、CSS样式

1.CSS书写位置：
- 内嵌式:
  - 在head标签的style子标签中写，?不能省略选择器和大括号
- 外链式:
  - 在另外一个文件中写，通过head标签的另外一个子标签 <link>标签引入刚刚写的xxx.css
  - <link rel = "stylesheet"? ?href = "a.css"></link>
- 导入式:
  - 不会等待css文件加载完毕，而是会立即加载HTML结构，对用户不友好
  - <style> @import url(a.css) </style>
- 行内式：
  - 直接通过style属性写在对应标签身上
2.选择器：
- 标签选择器?: 选中了我们指定名字的所有标签
  - 标签名{? 属性名:属性值; }
  - list-style: none; //去掉无序列表的小圆点
  - text-decoration: none; //去掉超链接的下划线
- id选择器?: 选中id值是指定值的标签，同一个页面上不能有id相同的标签
  - #id {? 属性名:属性值; }
- class选择器?: 选中标签，class值是指定值的标签，多个标签类名可以相同
  - .类名 {?属性名:属性值;}??
  - 同一个标签可以同时属于多个类，类名用空格隔开
    - <p class="warning spec"> .....? </p>
- 复合选择器：
  - 后代选择器:
    - 选择器1 选择器2{ 属性名:属性值; }
    - 选中选择器2的标签,但是这个标签必须包含在选择器1中,可以是直接子元素,可以是孙子元素
  - 交集/子选择器：
    - li.spec，选择既是li标签，也属于spec类的标签
  - 并集选择器：
    - ul,ol ，选择所有ul 和 ol的标签
- 元素关系选择器：
  - 子选择器：
    - div>p，div的子标签p
  - 相邻兄弟选择器：
    - img+p，图片后面紧跟着的段落标签被选中
  - 通用兄弟选择器：
    - p~span，p标签之后的所有同层级的span标签被选中
- 序号选择器：
  - p:first-child，第一个子标签p
  - p:last-child，最后一个子标签p
  - p:nth-child(3)，第三个子标签p
  - p:nth-of-type(3)，第三个p类型的子标签
  - p:nth-last-child(3)，倒数第三个子标签p
  - p:nth-last-of-type(3)，倒数第三个p类型的子标签
  - 3也可以写成an+b的形式，表示从b开始每a个选一个
- 属性选择器:只选中对应属性值的标签
  - 选择器[属性名=属性值] {? 属性名:属性值; }
  - ^以...开头，$以...结尾，*包含...，~空格隔开的...，|以...加-开头的
- 伪元素：
  - a::before { content: xx}，选中的a标签内容前加上内容
    - 常用于添加小icon
  - a::after { content: xx}，选中的a标签内容后加上内容
  - a::selection { background-color: xxx;? color: xxx }，选中的文字和背景变为相应的颜色
  - a::first-letter，选中第一行的第一个字母，必须是块级元素
  - a::first-line，选中第一行的全部文字，必须是块级元素
- 伪类选择器:
  - 静态伪类：规定是用:来定义，只能用于超链接
    - :link表示超链接点击之前的颜色
    - :visited表示链接点击之后的颜色
    - a:link{? color:red；}
    - a:visited{? color:yellow；}
    - 注意：a:link{} 定义的样式针对所有的写了href属性的超链接(不包括锚)
    - a{}定义的样式针对所有的超链接(包括锚)
  - 动态伪类 : 针对所有的标签都适用
    - :hover : 是移动到某个标签上的时候
    - :focus : 是某个标签获得焦点的时候
    - :active : 点击某个标签没有放松鼠标时
    - label:hover{ color:#00ff00;? }
    - input:focus{?color:yellow;?}
    - a:active{ color:blue; }
- 层叠性和权重：
  - 可以针对同一个标签叠加样式
  - 如果出现样式冲突，会根据权重来进行选择
    - id权重 > class权重 > 标签权重
    - 权重计算：选择器中 id、class、标签的个数共同决定
    - timportant 可以提升权重，a { xx:xx !important }
- 属性继承性：
  - 只要祖先标签设置了属性，那么后代所有标签都会生效
  - 在继承的情况下，选择器权重计算失效，为就近原则
3.文本与字体属性
- color属性，设置文本内容的颜色
  - 可以用英语单词、十六进制#ff0000、rgb(255,0,0)、rgba()最后一位是透明度在0-1之间
- font-size属性，设置字号
  - 单位默认为px
- font-weight属性，字体粗细程度
  - normal正常粗细，bold加粗......
- font-style属性，设置字体倾斜
  - normal取消倾斜，italic设置倾斜
- text-decoration属性，设置文本修饰线
  - none没有修饰线，underline下划线，line-through删除线
- font-family属性，设置字体
  - serif，"Time New Roman"，"微软雅黑"，英语字体放在前面，后面的字体都是后备
  - 也可以定义新的字体，需要准备字体文件，用@font-face来设置
- CSS字体图标：
  - 网站iconfont.cn可以下载
  - 像使用字体一样使用小图标，非常方便、好用
4.段落和行相关属性
- text-indent属性，首行文本内容的缩进量
  - 2em，表示字符宽度
- line-height属性，定义行高
  - 30px可以是以px为单位的数值，1.5/150%可以不写单位表示字号的倍数（比较推荐）
- text-align属性，单行文本垂直居中
  - center文本水平居中，如果需要垂直居中需要? line-height:57px 行高=盒子高
5.盒子模型
- width和hight : 指定盒子长宽，否则按内容撑满
- padding: 内边距，是内容到边框内壁的距离
  - padding-top
  - padding-bottom
  - padding-left
  - padding-right
  - padding：10px? 20px? 30px? 40px; 代表上右下左，顺时针方向
- border: 是边框的粗细
  - border-radius: 6px 圆角
- margin: 外边距，是盒子到盒子的距离
  - margin-top
  - margin-right
  - margin-bottom
  - margin-left
  - 竖直方向会以大值为准，水平方向会叠加
  - body、ul、p标签等都有默认的margin，在开始的时候，要将他们清除
    - *通配符选择器/ 并集选择器 { margin : 0 ;? padding : 0; }
  - margin : 0 auto；水平居中，代表上下是0，左右是auto
- 属性 box-sizing?: bord-box；盒子的宽和高表示实际的宽高，padding、border变为内缩式
- 属性 display表示块级元素、行内元素、行内块元素，
  - display : block，块级元素不能并排显示，能设置宽高，width自动撑满，比如div、h、li、ul等
  - display : inline，行内元素能并排显示，不能设置宽高，内容自动撑满，比如a、span、em等
  - display : inline-block，行内块元素，img和表单元素，既能设置宽高，也能并排显示
  - display : none，将元素隐藏，放弃位置，如同没有这个元素
  - visibility: hidden，将元素隐藏，但是元素不放弃自己的位置
- 属性 overflow : hidden，溢出盒子边框的内容被隐藏，但padding内边距溢出的部分还在，也可以用于清除浮动，形成浮动闭环
- 盒模型计算：
  - 盒子的宽高 = 内容宽/高?(width/height)?+ 2*padding +?2*border
6.浮动用来实现并排
- float : left、right;? 脱离文档流并且浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
- 如果要浮动，并排的盒子都要设置浮动
- 浮动的元素一定能设置宽高，不在区分块级元素和行内元素
- 浮动会按照顺序进行贴靠，如果没有足够空间，会寻找前一个兄弟元素
- 清除浮动：浮动一定要封闭在一个盒子中，否则就会对后续的元素造成影响
  - 让内部有浮动的父盒子形成BFC，能封闭住内部的浮动，比如加属性 overflow : hidden
  - 添加::after伪元素，设置 clear : both属性，表示左右浮动都清除
    - .clearfix::after {?clear : both;? display : block;? content : ""?}
7.定位设置
- position: absolute 绝对定位: 用来进行准确的定位元素，元素本身的位置会进行变化，会以自己祖先元素，离自己最近的拥有定位属性的盒子当做基准点，这个盒子通常是相对定位，称为子绝父相；
  - 绝对定位的盒子垂直居中，position: absolute? ?top: 50%? margin-top:-自己高度一半，因为定位方式是左上角为起点，所以要拉回去自己高度的一半。
- position: relative 相对定位，用来进行微调元素，元素本身的位置不变，相对于本身位置
  - left:100px;? top:100px;? right:100px;? bottom:100px;
- position: fixed 固定定位，不管页面如何卷动，永远固定在那，只能以页面作为参考点
  - 用途主要有：返回顶部，楼层导航
8.边框与圆角
- 边框的属性：??
  - border：1px? solid? ?red;? 分别代表线宽、线型、线颜色
  - 线型：solid实线、dashed虚线、dotted点状线
  - border - top/right/bottom/left - width(宽度)/style(线型)/color(颜色) 四个方向的边框
- 边框的圆角属性：
  - border-radius：10px 或?20%? 表示圆角的半径
  - 也可单独设置四个圆角，左上、右上、右下、左下
- 盒子阴影：
  - border-shadow：10px 20px 30px rgba(0,0,0,.4) 代表x偏移、y偏移、模糊量、颜色
9.背景、透明、阴影、渐变、过渡、动画
- 盒子背景：
  - 背景颜色 background-color ，padding区域也有
  - 背景图片 background-image：url(路径)?
    - background-repeat背景的重复模式
    - background-size：100px 200px? 设置背景图片的尺寸
    - 与img标签的对比：
      - 以css背景图存在的图片background-image会等到结构加载完成（网页的内容全部显示以后）才开始加载，而html中的标签img是网页结构（内容）的一部分会在加载结构的过程中加载，
      - img标签通过alt属性方便的表达语义，背景图片主要展示图片而不是内容
    - opacity属性，设置透明度0-1之间
  - background : white? url(xxx) repeat? 也可以一起设置
- 盒子阴影 box-shadow：0 8px 16px 0 rgba(0,0,0,0.2)
- 变形?transform：rotate(45deg)/scale(1.1) 旋转角度/放大的倍数;??
  - transform：translateX(100px) 向左拉动的距离，轮播图的时候会用到
  - 有时候变形会覆盖原有的盒子，可以设置z-index属性，距离用户最近
- 线性渐变?background-image：linear-gradient (to right/45deg，blue，red)?
  - 表示渐变方向、开始颜色、结束颜色 ,进行颜色渲染
  - 不会有动态的交互
- 过渡 transition：width/transform? 1s? linear 0s；
  - 表示什么属性要过渡、动画时长、变化速度曲线、延迟时间
- 动画用@keyframes定义，调用使用animation属性
  - animation：r(动画名称)?1s linear? 0s? 3(执行次数)? alternate(自动逆向执行) / forwards(动画停留在最后结束状态);
  - 跟过渡相类似，只不过动画更强大

三、JavaScript

1.书写位置：
- 外链式:
  - 在另外一个文件中写，<script src=""> </script>引入
- 内嵌式:
  - 在body标签中定义script标签，去书写
2.输出语句
- 弹出警告框，alert()
- 控制台输出，console.log()
3.数据类型
- 基本数据类型：
  - Undefined，当定义变量并且不赋值的时候，默认值就是undefined
  - Null，只有一个值 null空值，typeof的类型是object
  - Boolean，有两个值 true 和 false?
    - "==":称为值等, 在隐式转换后只比较两个数据的值 ,不考虑类型 ?比如 var a = "10" ?a==10,这是true,因为值一样
    - "===":称为全等,即比较类型也比较数值, 比如 var a = "10" ?a===10 这是false,因为类型不一样
  - Number，表示任意数字?
    - 3e8，3的8次方
    - NaN，只要运算结果不能得到数字都是NaN
  - String，表示字符串,在js中字符串必须用" "或者' '引起来
    - length属性
    - charAt方法
    - subString从a开始到b结束，不包括b
  - 检测变量的类型：typeof a；
- 引用数据类型：
  - Object
    - var obj = new Object();? 所有对象的顶层父类
  - Array
    - var arr = new Array('1','2','3');
    - var arr = ['1','2','3' ];
    - 访问数组项arr[0/1/2]
  - Function
    - 函数，function 函数名(参数列表){ 函数体;?}
    - 匿名函数，函数表达式? var fun = function () { 函数体; }
    - 箭头函数，const add = () => { 函数体 };
    - 立即调用函数，( function () { 函数体; } ) () ;
  - Date
  - Map
    - Map和对象都是键值对的集合
    - const m = new Map();? m.set('name','alex');
  - Set
    - const s = new Set();
    - s.forEach(function (key,value,set) { ...?} );
  - RegExp
  - Symbol
4.文档对象模型DOM
- 元素节点属性：
  - childNodes，获得所有的子节点
  - nodeName，返回节点名称。(标签名)
  - nodeType，返回节点类型。（元素、属性、文本等）
    - 1--元素节点，3--文字节点，8--注释节点，10--DTD节点???
    - 9--document节点(树根，代表整个html页面)
  - nodeValue，节点的值。（只有文本节点才有该属性）
  - offsetTop，相对于祖先节点的高，如果有祖先节点有定位就以该节点为基准，否则以document对象的根节点为基准
- 获得元素节点：
  - 通过 id属性 获得元素 getElementById() （id只会有一个）
  - 通过 name属性 获得所有元素 getElementsByName() （name可能相同） ?
  - 通过类名获得所有元素 getElementsByClassName() ?
  - 通过 标签名 获得所有的元素 getElementsByTagName()
  - 通过 选择器 得到元素 querySelector()
  - 通过 选择器 得到元素数组 querySelectorAll()
  - 确保html标签加载完毕在进行获取节点
    - window.onload = function() { ...?}
- 根据节点之间的关系，获取节点：
  - 子节点，考虑所有节点，childNodes
    - 只考虑元素节点，child
  - 父节点，考虑所有节点，parentNode，
    - 只考虑元素节点，同
  - 第一个子节点，考虑所有节点，firstChild
    - 只考虑元素节点，firstElementChild
  - 最后一个子节点，考虑所有节点，lastChild
    - 只考虑元素节点，lastElementChild
  - 前一个兄弟节点，考虑所有节点，previousSibling
    - 只考虑元素节点，previousElementSibling
  - 后一个兄弟节点，考虑所有节点，nextSibling
    - 只考虑元素节点，nextElementSibling
- 改变节点的内容：
  - innerHtml，可以内嵌html标签
  - innerText，只能写纯文本
- 改变节点的样式：
  - node.style.backgroundColor = "red"
  - node.style.backgroundImage = "url(path)"
  - node.style.fontSize = "32px"
  - setAttribute(k,v) 给元素设置非标准属性
- 节点的创建、移除和克隆：
  - document.createElement('div') 创建指定名称的节点
    - 创建出来的是孤儿节点，还需要添加到对应的父节点内
  - document.createTextNode() 创建指定内容的文本节点
  - 父节点.appendChild/append(子节点)
  - 父节点.insertBefore(子节点,兄弟节点) 给兄弟节点前追加
  - 父节点.insertAfter(子节点,兄弟节点) 给兄弟节点后追加
- 事件对象：node.onmousemove = function (e) { ... }，e就是这次事件的对象
- 事件传播：
  - 只有父节点和子节点之间可以进行传递，兄弟之间无法传递
  - 分为两阶段，捕获阶段由外向内，冒泡阶段有内向外
  - onxxx这种写法只能监听冒泡阶段，addEventListener都可以监听
- 事件委托：
  - 子节点和父节点之间会进行传递事件
  - e.target，触发事件最早的元素，源元素
  - e.currentTarget，事件处理附加到的元素，父节点的元素
  - 可以处理子节点建立监听器消耗内存的问题
- 事件阻止：
  - e.preventDefault()，可以阻止该事件的发生
  - e.stopPropagation()，阻止事件继续传播
- 事件监听：
  - 监听事件node.onClick = function(){ ... }，注册监听器node.addEventListener('click', function() {...},false/true)
  - 鼠标事件监听：
    - onclick，当鼠标点击
    - ondblclick，当鼠标双击
    - onmousedown，当鼠标在某个对象上被按下
    - onmouseup，当鼠标在某个对象上被松开
    - onmousemove，当鼠标在某个对象上被移动
    - onmouseenter，当鼠标进入某个对象，不会冒泡传播，onmouseover，鼠标进入，可以进行委托
    - onmouseleave，当鼠标离开某个对象
    - 相应的事件对象属性：
      - clientX、clientY 鼠标相对于浏览器/客户端的坐标
      - pageX、pageY 鼠标相对于整个网页的坐标(当页面滚动条没滚动时等于client坐标，否则会大于)
      - offsetX、offsetY 鼠标相对于事件源节点的坐标
      - 坐标都是左上角为原点
  - 键盘事件监听：
    - onkeypress，当某个键盘的键被按下
    - onkeydown，当某个键盘的键被按下，先于press发生
    - onkeyup，当某个按键被松开
    - 相应的事件对象属性：
      - e.charCode用于onkeypress，表示用户输入的字符的字符码
      - e.keyCode用于onkeydown和onkeyup，表示用户按键的键码
- 定时器：
  - setInterval(function () { ... }, 2000)，每隔固定时间调用一次函数
  - clearInterval(timer)，清除定时器
  - setTimeout(function () { ... }, 2000)，设置延时器，延时执行且只会执行一次
5.浏览器对象模型BOM
- window对象：
  - 当前JS脚本运行的窗口，包含document对象，每个标签都拥有自己的window对象；
  - 定义的全局变量会成为window对象的属性，多个js文件之间共享全局作用域；
  - setInterval setTimeout alert等内置函数都是window对象的方法；
  - innerHeight、innerWidth 浏览器窗口内容区的宽高
  - outerHeight、outerWidth 浏览器窗口外部宽高
  - resize事件：
    - 当窗口改变之后，就会触发resize事件
    - window.onresize或者window.addEventListener('resize')来处理
  - scroll事件：
    - 当窗口被卷动就会，就会触发scroll事件
    - window.onscroll或者window.addEventListener('scroll')来处理
    - window.scrollY表示页面以卷动的像素值，只读，不可改
    - document.documentElement.scrollTop属性也表示卷动的高度，可修改
- navigator导航对象：
  - window.navigator属性可以检索该对象
  - 内部包含用户此次活动的浏览器相关属性和标识
    - appName，浏览器官方名称
    - appVersion，浏览器版本
    - userAgent，浏览器的用户代理
    - platform，用户操作系统
- history浏览记录对象：??
  - window.history对象提供了操作浏览器绘画历史的接口
  - forward()前进? ?back() 后退? ?go(n) 正数是前进/负数是后退
- location对象：
  - window.location对象，可以通过给这个属性赋值让浏览器进行跳转
  - window.location.href="xx"??window.location.reload()刷新当前页面
6.面向对象
- 对象的介绍：
  - 对象是键值对的集合，表示属性和值的映射关系，使用大括号包裹；
  - 直接创建对象：var x = { key1:val1 , key2:val2?, "key3":val3};? 访问方式：x.key1? x["key3"]
- 对象的基本规则：
  - 对象调用方法时，函数的上下文是这个对象
  - 直接调用函数，则函数的上下文是window对象 (定义的全局变量会成为window对象的属性)
  - 事件处理函数的上下文是绑定事件的DOM元素(DOM元素.onclick = function () { ... })
- call和apply函数：
  - 可以指定函数的上下文
  - fun.call(obj)??fun.apply(obj)，方法传递参数call需要罗列、apply需要写到数组
- 创建对象：
  - new操作符调用构造函数：
    - 先创建一个空白对象，函数的上下文指向该对象，执行函数，最后返回该对象
    - var x = new People("11","22");? function?People (a , b){ this.a=a; this.b=b?}
  - prototype属性：
    - 对象的__proto__可以访问到/等价?类的prototype属性
    - 类的prototype属性终点是Object的prototype属性，当方法和或者属性找不到时，最终就会访问Object的prototype属性
  - 方法要写到prototype上，否则不同对象引用的方法不同
    - People.prototype.sayHello?= function () {...}
  - 公共属性写到prototype上，可以被不同的对象访问
    - People.prototype.key1 = value1
    - 对象可以自己拥有key1，这样就不用访问People.prototype的属性
- 继承：
  - 原型prototype实现继承：
    - 父类和子类都将方法写入prototype中
    - Student.prototype = new People()，进行继承，使用obj.__proto__.__proto__访问到父类
  - ES6实现继承：
- 包装类：
  - Number()、String()和Boolean()分别是数字、字符串、布尔值的包装类，
  - 比如：var a =?Number()，可以提供很多封装好的方法
7.ES6
- 介绍：
  - ES6代表ECMAScript这门语言的标准，定义了语法和API，
  - JavaScript(浏览器端) =?ECMAScript(语法和API) + DOM + BOM
- let和const：
  - var声明变量，let可以代替var声明变量，const声明常量
  - var可以重复声明，let和const不可以重复声明
  - var没有块级作用域，会存在全局作用域，let和const会有自己的块级作用域
- 模板字符串：
  - `wo de minng zi ${person.username} ,xingbie${person.sex}`
- 剩余参数：
  - (x ,y,z,...args) => {? }; 是一个数组
  - ...[1,2,3] 可以展开数组
- 迭代器：
  - var it = arr[Symbol.iterator](); it.next()
  - for (const item of arr) {? ...... }
- Promise异步编程:
  - 介绍：
    - 优雅的实现异步操作的一种解决方案，提供了丰富的操作符避免了回调的嵌套；
    - const p = new Promise( (resolve , reject)=> {? resolve('data');? reject('data'); }? )
    - 初始是pending状态，执行resolve变成fulfilled已成功状态，执行reject是rejected失败状态
  - then：
    - const p1 = p.then( (data)=>{console.log('success',data) return 123;(可以被接收) } , (err)=>{console.log('error',err)} ?);? ?
    - return 默认都会返回一个新的promise对象，包装具体的返回值
  - catch：
    - p.catch(err=> { ...?}); 捕获reject方法
  - finally：
    - p. finally(data=>{ ... }); 不管失败还是成功都会执行
  - Promise.resolve：
    - Promise.resolve('data').then( (data)=>{console.log('success',data);} );
  - Promise.all：
    - Promise.all([p1,p2]).then(data=>{ ...?})，等待p1和p2都执行完成在执行then
- Class类：
  - class Person{? constructor(name) {....} speak(){ ....?} }? const p = new Person();?
  - 静态方法前加static
  - 继承类使用extends
- Module模块
  - export default BaseClass;? ?导出
  - import?BaseClass from './base.js'; 导入
  - <script src="./index.js" type="module">? </script>?引入js文件?
- Bable编译
  - node.js指代后端的JavaScript语言包含ES6语法以及后端技术
  - npm是一个node包管理工具
    - npm init，会生成一个package.json文件，保存安装的包
  - npm install 可以安装bable的包
  - package.json加上bable src -d dist命令，.babelrc配置文件，npm run build编译
- Webpack编译打包
  - 简单使用：
    - 初始化项目，npm init
    - 安装webpack包，npm install --save-dev webpack-cli@3.3.12 webpack@4.44.1
    - 配置webpack，require();导入 module.exports={};导出
    - 编译测试，webpack --config webpack.config.js ，执行npm run webpack
    - 引入编译后的代码，可以避免浏览器的兼容性问题
  - entry和output：
    - entry代表入口文件，编译之前的文件，可以设置多入口文件
    - output代表出口文件，编译之后的文件，可以设置多出口，path输出的文件路径，filename文件名称
  - loader：
    - webpack本身/默认只能打包js，loader可以让webpack去处理非js文件的代码
    - module里定义的rule，可以指定babel编译对应的文件
    - css-loader编译css文件，file-loader编译css/js中的本地图片，html-withimg-loader处理html中的图片
  - plugins：
    - 用于处理更广泛的任务，打包优化、压缩等等
    - html-webpack-plugin用于编译打包html文件，将入口的js文件引入html
    - mini-css-extract-plugin用于编译打包css文件，将入口的js-css文件引入html
    - require引入插件，在plugins里创建对应的插件
  - webpack-dev-server：
    - 保存项目可以自动打包，方便开发
    - scripts 里 webpack-dev-server --open chrom? 打包完成默认打开浏览器
8.本地存储
- cookie可以进行数据存储传给服务端
- localStorage可以进行本地存储，不会发送给服务端，通常用于保存服务端数据
  - 单域名下有大小限制，持久化存储，需要自己手动清除
  - 不同域名下的localStorage是不同的，不共用
  - localStorage.setItem(key,value);
- sessionStorage
  - 当会话结束（关闭浏览器）的时候，数据会被清空，其他的类似于sessionStorage
9.Ajax请求
- 异步的向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，可以对局部页面的数据进行渲染（注册检测、搜索提示等等都有应用）
- 简单使用：
  - const xhr = new XMLHttpRequest(); xhr.onreadystatechage = ()=>{ 处理请求状态?};?
  - xhr.open('GET',url,true);? xhr.send(null);
  - JSON.parse()将字符串转化为Json对象?和 JSON.stringify()将Json对象转化为字符串
- XHR的事件：
  - xhr.addEventListener()
  - load事件，响应的数据准备好了才会触发
  - error事件，当请求出错
  - abort终止事件，当调用abort方法的时候触发
  - timeout事件，设置超时时间，如果超时会触发
- 跨域请求：
  - 浏览器发送请求，后端接收到后如果允许跨域就添加Access-Control-Allow-Origin头信息，浏览器会从响应头中查找是否有该响应头，如果没有就报错；
  - JSONP，前端的script标签跨域不会被浏览器阻止，可以利用script标签，加载跨域文件，这个需要后端提供JSONP接口；? ??