[-] 优先级

• selector选择器支持一览.值得注意的是.class.class IE6并不识别
• 选择器优先级 1.三种引入方式的优先级
  2.同引入方式内的基本原则：
  一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。
  复杂的计算方法：
  ●用1表示派生选择器(用HTML标签申明)的优先级
  ●用10表示类选择器(用一个样式类名申明)的优先级
  ●用100标示ID选择器(用DOM的ID申明)的优先级
  ●div.test1 .span var 优先级 1+10 +10 +1
  ●span#xxx .songs li 优先级1+100 + 10 + 1
  ●#xxx li 优先级 100 +1
  3.Tips:样式在html中的先后顺序不决定样式优先级,由CSS中定义的先后和优先级有关 参考资料
  4.Tips:选择器拾遗漏
• !important提升指定样式规则的应用优先权。
  但在IE6中有BUG,需要分开写在2个选择符中
  参考资料：GO TO!

[-] HACK

• if IE 条件HACK

  
                      <!--[if IE]>
                      指定载入相关JS/CSS或其他文件
                      <![endif]-->
                      

  
  参考资料：GO TO!
• _property属性级HACK

  key: value\9;	IE6~10
  key: value\0;	Oprea+IE8~10
  .key: value;	IE6+7+8
  *key: value;	IE6+7 (+或#亦可)
  _key: value;	IE6 (-亦可)
  [;property:value;];	webkit(Chrome,Safari)
  @-moz-document url-prefix(){..}	FireFox
  @media screen and (-webkit-min-device-pixel-ratio:0) {..}	webkit(Chrome,Safari)

  
  参考资料1：GO TO!
  参考资料2：GO TO!
  参考资料3：GO TO!
• *html selector选择符级HACK
  *html selector: IE6及以下
  *+html selector : IE7
  结合选择器能力
• expression表达式，IE6-7支持，IE8不支持

[-] 常用选择符

• *通配符
• tagName元素标签名
• #id#id选择器,也可以ele#id
• .class类选择器,可以连缀.class1.class2
• E F后代选择器
• E>F子选择器
• E+F相邻选择器
• E~F兄弟选择器

[-] 伪类选择符

• :link/:visited/:hover/:active a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后（LVHA）
  a:link{}
  a:visited{}
  a:hover{}
  a:active{}
  目前hover可用于任何元素,例如li:hover{},也可以用为li:hover a{}
  IE6中:hover只对a元素有效,可通过JS控制
• :not(selector)匹配不含有s选择符的元素E
• :first-child :first-child 第一个子元素,前缀为被选元素,必须是第一个子元素而非第一个本类子元素
  :first-of-type 该选择符总是能命中父元素的第1个为E的子元素，不论第1个子元素是否为E
• :last-child :last-child 最后一个子元素
  :last-of-type 最后一个此类元素
• :nth-child(n) :nth-child(n) 第N个子元素
  :nth-child(2n) 偶数,:nth-child(2n+1) 奇数
  第N个子元素，如果有不同类别的其他同级标签元素亦会增长序列数
  :nth-of-type(n) 第N个此类子元素
• :only-child :only-child 唯一一个子元素
  :only-of-type 为父元素中唯一元素的此类元素
• :focus设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。
  webkit内核浏览器会默认给:focus状态的元素加上outline的样式,设置:focus{outline:0}
  
• :empty匹配没有任何子元素（包括text节点）的元素E。
• :target匹配相关URL指向的HASH目标元素。

[-] 属性选择符

• [att]含有属性
• [att='val']属性值为指定
• [att~='val']选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。完整包含,而非字符串。
• [att^='val']属性值以..开头
• [att$='val']属性值以..结尾
• [att*='val']属性值包含..字符串
• [att|='val']属性值以val开头并用连接符"-"分隔的字符串的元素

[-] 其他选择符

• :lang(zh-cn)匹配使用特殊语言的E元素。
• :root匹配E元素在文档的根元素。在HTML中，根元素永远是HTML
• :checked匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)，不包含下拉菜单
• :enabled匹配用户界面上处于可用状态的元素E。
• :disabled匹配用户界面上处于禁用状态的元素E。

[-] 字体

• font([i][b] size/lh family)【简写】font:italic bold 18px/22px 'Consolas' （简写时font-size和font-family属性不可省略）顺序不对则有可能出现BUG
• font-size(px/180%) 字体大小,浏览器默认大小为1em（一般为16px）,移动端则使用rem,PC端使用px。
  % : 页面元素中font-size使用百分比时，其百分比取值是基于父对象中字体的尺寸，不允许简写百分比。字体没有相对父盒子大小比例扩展算法。
  px : 像素,相对长度单位。1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px;
  em : 相对长度单位.相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 PX转EM快速工具
  rem : 相对长度单位。相对于根元素(即html元素)font-size计算值的倍数。设置字体html{font-size:62.5% = 10px},则1.2rem=12px（手机端HTML5元素不主动继承body字体大小时，使用*）
  vm : 视窗可用宽度,0～100.(除去滚动条)
• line-height(px/180%/1.8) 行高,可为百分比或乘积因子,具有继承性
  % : 当为百分比时，子级会继承父级，此时的百分比，基于父级的字体大小的百分比，可能发生重叠（不具动画性）。参考资料
  1.5 : 当为乘积因子时，以自身的百分比150%=1.5。
  

  ---

  扩展阅读：
  linebox模型与基线等 | 行高的深入理解

  ---

  兼容处理：
  1.在FF中的对齐规则BUG，解决方案使用FF专属HACK@-moz-document url-prefix(){some-style}
  2.使用乘积因子时，IE7对1处理不当，需设置1.1或避免设置为字符等高。
• font-weight(bold/normal)粗体,normal正常=400,bold粗体=700,取值100~900
• font-style(italic/normal)normal正常,italic字体自带斜体,oblique人为斜体
• font-variant(small-caps)normal正常的字体,small-caps小型的大写字母字体
• text-transform(c/u/l) none： 无转换
  capitalize： 将每个单词的第一个字母转换成大写
  uppercase： 将每个单词转换成大写
  lowercase： 将每个单词转换成小写
• font-family 按优先顺序排列。以逗号隔开。如果字体名称包含空格或中文，则应使用引号括起。
  常用字体：Helvetica,Verdana,Arial,Consolas,Georgia,Impact,Trebuchet MS,Comic Sans MS,Tahoma,Time News Roman,微软雅黑,宋体
  参考常用字体预览
  移动端字体设置font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; 参考资料
• @font-face{f:'n',src:'url'} @font-face 必须在字体使用前引入
  @font-face {
  font-family: 'diyfont';
  src: url('diyfont.eot'); /* IE9+ */
  src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('diyfont.woff') format('woff'), /* chrome、firefox */
  url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
  }
  .iconfont{
  font-family:"iconfont";
  font-style:normal;
  display:block/inline-block;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  }
  放在html中时写为“& #xe62a;”赋值以对应class,当为伪元素content引用时,赋值“\e62a”
  图标字体 alibaba / Glyphicons / icomoon
  更多字体 Get it!
  字体转换 将一种字体转为网页所需的所有格式

[-] 对齐与缩进

• text-align(l/r/c/j) 水平对齐:center居中,left左,right右,justify两端对齐
  对inline/inline-block元素均有效,在IE6-7下对block也有效
  在父级设置,让子级中内联(块)元素水平居中对齐父级
• vertical-align(t/b/m) 垂直对齐：

  长度	通过距离升高（正值）或降低（负值）元素。'0cm'等同于'baseline'
  百分值 – %	通过距离（相对于line-height值的百分大小）升高（正值）或降低（负值）元素。'0%'等同于'baseline'
  baseline	默认。元素的基线与父元素的基线对齐。
  sub	降低元素的基线到父元素合适的下标位置。
  super	升高元素的基线到父元素合适的上标位置。
  top	把对齐的子元素的顶端与line box顶端对齐。
  text-top	把元素的顶端与父元素内容区域的顶端对齐。
  middle	元素的中垂点与 父元素的基线加1/2父元素中字母x的高度 对齐。
  bottom	把对齐的子元素的底端与line box底端对齐(受line-height影响)【line-box底端】。
  text-bottom	把元素的底端与父元素内容区域的底端对齐。【content-area底端】
  inherit	采用父元素相关属性的相同的指定值。

  
  对inline/inline-block元素有效,例如默认的图片,表单控件
  在子级设置,让自身与同级元素垂直对齐,而非对子集!
  参考资料
• text-indent([+-]Npx) 缩进,可为负值.
  div内部的第一行及每个强制换行的首行都拥有2em的缩进：text-indent:2em each-line;【CSS3】
  技巧：对于要保留html文字,但不显示的文字,可设置text-indent:-999px/100%【SEO】
  对内联a应用text-indent无效,需将a设置为block/inline-block
• :first-letter对象内第一个字符
  选择符与包含规则的花括号之间不能紧挨着，需留有空格或换行。
  例 p:first-letter[_]{} （[_]处保留空格）
• :first-line对象内第一行
  选择符与包含规则的花括号之间不能紧挨着，需留有空格或换行
• letter-spacing(Npx)字母/中文字间隔
• word-spacing(Npx)单词间隔

[-] 文本装饰

• text-decoration(n/u/o/t)none：无
  underline：下划线
  overline：上划线
  line-through：删除线
• text-shadow(1px 1px 2px #248)文本阴影:1px 1px 5px #000; （水平,垂直,模糊半径,颜色）
  在线生成3DCSS文字GO TO!
• ::selection对象被选择时的样式,必须使用双冒号【CSS】
  ::selection只能定义被选择时的background-color及color
• -webkit-text-fill-color 文字的填充颜色,默认值transparent,参考：彩条文字

  
  	                    -webkit-background-clip: text;
  	                    -webkit-text-fill-color: transparent;
  	                    background-image: linear-gradient( to bottom, #9588DD, #9588DD 25%);
  	                    

• -webkit-text-stroke文字的描边,1px #ff3399
• -webkit-font-smoothing文字的平滑,-webkit-font-smoothing: antialiased;

[-] 文本折行

• white-space normal：默认处理方式。
  pre：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。可查阅pre对象
  nowrap：强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象。
  pre-wrap：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。
  pre-line：保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。
  常用片段（设置宽度）：white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
• text-overflow(ellipsis/str)文本溢出:clip剪裁掉/ellipsis点点点/string指定字符串【CSS3】
  多行文本省略(webkit)

  /* height: 36px; line-height: 18px; */ 
  	                    display: -webkit-box; 
  	                    -webkit-line-clamp: 2; 
  	                    -webkit-box-orient: vertical; 
  	                    overflow: hidden;
  	                    

• word-wrap当内容超过指定容器的边界时是否断行
  normal：允许内容顶开或溢出指定的容器边界。
  break-word：内容将在边界内换行。如果需要，单词内部允许断行。
  断行控制片段word-wrap: break-word;word-break: break-all;
• word-break对象内文本的字内换行行为 normal：依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。
  keep-all：与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本。
  break-all：该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本，比如使连续的英文字母间断行。

[-] 文本流

• unicode-bidi(bidi-override) normal：对象不打开附加的嵌入层，对于内联元素，隐式重排序跨对象边界进行工作。
  embed：对象打开附加的嵌入层，direction属性的值指定嵌入层，在对象内部进行隐式重排序。

  ---

  bidi-override：严格按照direction属性的值重排序。忽略隐式双向运算规则。
  用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用
• direction(ltr/rtl) ltr：文本流从左到右。
  rtl：文本流从右到左。
  设置direction:rtl;unicode-bidi:bidi-override;实现牌匾排字效果
• writing-mode书写模式
  horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom（类似IE私有值lr-tb）
  lr-tb：左-右，上-下。对象中的内容在水平方向上从左向右流入，后一行在前一行的下面。 所有的字形都是竖直向上的。这种布局是罗马语系使用的（IE）

  ---

  vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left（类似IE私有值tb-rl）
  vertical-lr：垂直方向自左而右的书写方式。即 top-bottom-left-right
  tb-rl：上-下，右-左。对象中的内容在垂直方向上从上向下流入，自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的，半角字符如拉丁字母或片假名顺时针旋转90度
  设置-webkit-writing-mode:vertical-rl;writing-mode:tb-rl;writing-mode:vertical-rl;实现文笺排版效果。

[-] 内容

• :before 设置在对象前（依据对象树的逻辑结构）发生的内容。IE6-7不支持,IE8支持。
  用来和content属性一起使用，并且必须定义content属性！必要时候即使有block表现仍需定义宽度
  伪元素的位置在内容之后，如果内容为空，则在起点，即使指定了父级尺寸
• :after 设置在对象后（依据对象树的逻辑结构）发生的内容。IE6-7不支持,IE8支持。
  用来和content属性一起使用，并且必须定义content属性！必要时候即使有block表现仍需定义宽度
• content(str/attr/url/count) content:'str' 一个字符串或符号,需加引号,例如 '»'
  content:attr(标签名) 载入此标签的一个属性节点上的内容,例如title
  content:url('文件地址') 使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）
  content:counter(name,list-style-type)使用一个已命名的计数器
  参考资料：GO TO!
• counter-increment(name [N]) 定义一个计数器,并设定累加值,默认为1,可以为负值。
  在要计数的对象上设置 li{counter-increment:test 1}
  在起始伪对象上启用 li:before{content:counter(test)'.'}
  参考资料：GO TO!
  实例演示：GO TO!
• counter-reset(name [N]) 复位计数器,默认为0.
  在要复位的对象(伪元素)上设置 li:before{counter-reset:test -1}
  参考资料：GO TO!
  复杂嵌套：GO TO!
  嵌套原理：
  1级列表设置计数器1,1级列表的before伪元素启用计数器1
  2级列表设置2计数器2,2级列表的before伪元素启用计数器2
  1级列表设置清空计数器
• quotes('['*4) 设置或检索对象内使用的嵌套标记。
  设置标签的包围符号：q{quotes:'外层左标记' '外层右标记' '内层左标记' '内层右标记'}
  参考资料：GO TO!

[-] 颜色

• color 1.颜色:red(颜色名称),#ff3399(16进制),rgb(255,0,255)

  ---

  2.transparent
  IE6及更早浏览器(CSS1)只有background-color接受transparent取值。
  IE7及IE8(CSS2)除了background-color，还有border-color也开始接受transparent取值。
  在CSS3中，transparent被延伸到任何一个有color值的属性上。
  *IE8及以下，color属性值为transparent时，文本显示为黑色。
  IE6透明边框的处理
  

  
                      _border-color: #000000; 
                      _filter: ~"progid:DXImageTransform.Microsoft.Chroma(color='#000000')";
                      

  ---

  3.rgba(255,255,255,0.8)
  带Alpha通道的颜色模式,可以半透明（IE8-不支持）
  让IE8-通过IE滤镜来实现rgba效果
  

  
                      background: rgba(0,0,0,.92);
                      filter:progid:DXImageTransform.Microsoft.gradient(enabled='true', startcolorstr=#CC000000, endcolorstr=#CC000000);
                      

  
  扩展知识：DXImageTransform.Microsoft.gradient 滤镜里的 startcolorstr 参数值是 #AARRGGBB 形式的， 其中的AA是代表不透明度的十六进制，00表示完全透明，FF就是全不透明，化成十进制的范围就是0~255，剩下的 RRGGBB 就是颜色的十六进制代码。
  举例如：background: rgba(125, 0, 0, .3); 表示的是30%不透明度的红色背景。把30%的不透明度转换成十六制呢的方法如下：先计算#AA的的十进制x，x/255 = 3/10，解得x=3*255/10，然后再把x换算成十六进制，约等于4C。

  ---

  4.hsl，h色环角度,s饱和度,l亮度 Paletton.com
• currentcolor 让Border/backgroud等沿袭color的颜色
  参考资料
• opacity 透明度：使用浮点数指定对象的不透明度。值被约束在[0.0-1.0]范围内，如果超过了这个范围，其计算结果将截取到与之最相近的值。
  注意如果父级应用了此透明度方法,则子元素也会跟随一起透明,不受影响可以将子元素写在外面,再通过负值的margin或其他定位方法定位.
  IE8-不支持此属性,但可以用IE滤镜来处理,片段
  

  
                      .tm(@tm){
                      @alpha:@tm*100;
                      opacity:@tm;
                      filter:alpha(opacity=@alpha);
                      }
                      

• (ie)filter IE特有的滤镜属性,配合上述实现透明颜色,透明区块,另外由于IE无法正常显示PNG透明图片,当图片用作为背景图时,同样可以使用本属性解决.
  

  
                      background:url('../images/ex.png') no-repeat;
                      _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/ex.png");
                      

  
  *注意:通过滤镜对引入图片，滤镜引入图片的时候是相对于HTML文件，而不是相对于CSS文件，建议引入绝对路径。此方法不能应用于平铺图像！
  完整参考文档：GO TO!
  IE6使用滤镜PNG图片透明后，容器内链接失效，设置a{_position:relative;}
  扩展资料
  
  ie filter滤镜的说明：
  1.ie9滤镜重叠，给定统一class在条件注释中取消ie9滤镜。
  2.z-index与filter的渲染冲突bug。详情
  3.ie8中对img包裹元素a滤镜失效需要设置在img上。

[-] 背景

• background [简写]background:#222 url() Xpx Ypx/size repeat attachment clip origin,...
  逗号隔开每组background的缩写值；如果有size值，需要紧跟position并且用"/"隔开；
  分解写法时，background-color只能设置一个。
  缩写时,如果前面设置了独立属性,在缩写中未被定义的会被覆盖会空或默认值,如果在后面补充了的,后面的属性会自动合并到缩写中,如果该属性不被支持,则造成整个缩写属性无法识别！因根据情况全部分开写。
• background-color背景颜色,可用rgba来设置半透明背景,而不是用opacity,制作一些遮罩效果
• background-position背景图的位置,可以为负值和百分比,也可以用left(x=0),right(x=100%),top(y=100%),bottom(y=100%).先写水平,后写垂直.背景图的50%居中以图形中心为基点，不需要再移动自身一半尺寸
  雪碧图：CSS GAGA
  BASE64编码：GO TO!
• background-size background-size: Xpx Ypx / A% B% / cover / contain / auto
  cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；【全兼容的方式,独立图层img～100%】
  contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。
  x% y%：百分比大小，占满父元素空间的百分比，可能导致图片变形
  x% auto | auto y%：使元素占父元素宽/高的百分比，并等比缩放～！
  一些情况不能识别/，反编译时候只需要反编译值，而不包括属性！
• background-repeat平铺方式：
  repeat-x：背景图像在横向上平铺
  repeat-y：背景图像在纵向上平铺
  repeat：背景图像在横向和纵向平铺
  no-repeat：背景图像不平铺
  round：背景图像自动缩放直到适应且填充满整个容器。
  IE6不指定此属性时，默认不平铺，其他浏览器默认平铺
• background-attachment fixed【相对浏览器固定】背景图像相对于窗体固定。
  scroll【相对元素固定】背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
  local【相对元素内容固定】背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。
• background-clip padding-box：从padding区域（不含padding）开始向外裁剪背景。
  border-box：从border区域（不含border）开始向外裁剪背景。(默认)
  content-box：从content区域开始向外裁剪背景。
  text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。
  TEXT剪裁方式的遮罩效果：GO TO!
• background-origin padding-box：从padding区域（含padding）开始显示背景图像。(默认)
  border-box：从border区域（含border）开始显示背景图像。
  content-box：从content区域开始显示背景图像。
• background-image图像url(''),无none,渐变

[-] 效果

• box-shadow 盒子阴影,box-shadow:2px 2px 5px 50px #000 inset
  水平,垂直,模糊半径,阴影大小,颜色,内阴影
  可用逗号分隔多个阴影,制作复杂重叠阴影效果
  投影制作：GO TO!
  长阴影：GO TO!
  投影彩带：GO TO!
• -webkit-box-reflect -webkit-box-reflect:none/direction offset mask
  可应用于盒子或者直接应用于图片
  direction(倒影方向): above / below / left / right
  offset(倒影与源间隔): length / %
  mask(蒙版): url() / gradient
• (new)filter ele {filter: none | * }
  函数不传值,默认为100%=1完全渲染,多个函数之间用空格隔开
  grayscale() 灰度，黑白
  sepia() 褐色,黄褐色旧照片
  saturate() 饱和度
  hue-rotate() 色相旋转
  invert() 反色
  opacity() 透明度
  brightness() 亮度
  contrast() 对比度
  blur(3px) 模糊
  drop-shadow(5px 5px 5px #ccc) 阴影
  参考资料 示例

[-] 图像

• image-set(1x,2x,Ndpi) 为不同的设备分配合适得图像;

   div{ background-image: image-set("test.png" 1x, "test-2x.png" 2x, "test-print.png" 300dpi);}

  为普通屏幕使用 test.png，为高分屏使用 test-2x.png，如果更高的分辨率则使用 test-print.png，比如印刷。
• -ms-interpolation-mode:bicubicIE7图像缩放失真

[-] 渐变

• grandient tools 图片渐变获取：从图片读取渐变生成CSS
  仿PS渐变生成：GO TO!
  渐变按钮生成：简洁 / 玻璃 / 水晶 / 简单 / 质感
• linear-grandient() background:linear-gradient(point,#colorA lengthA/A%,……#colorB lengthB/B%) 线性渐变
  point:left/right/top/bottom/N deg 方向或角度
  默认以垂直上方点为0度向下
  技巧应用实例：
  

  
                      使用1像素背景渐变绘制分割线
                      /*使用伪元素制作导航列表项分隔线*/
                      .nav li:after{
                      content:""; 
                      width:1px;
                      height:15px;
                      position:absolute;
                      right:0;
                      top:20px;
                      background:linear-gradient(0deg,#990000,#ff0000,#990000);
                      }
                      /*删除第一项和最后一项导航分隔线*/
                      .nav li:last-child:after{
                      width:0;
                      height:0;
                      }
                      

• repeating-linear-gradient()

  
                      repeating-linear-gradient(#f00, #ff0 10%, #f00 15%);
                      repeating-linear-gradient(to bottom, #f00, #ff0 10%, #f00 15%);
                      repeating-linear-gradient(180deg, #f00, #ff0 10%, #f00 15%);
                      repeating-linear-gradient(to top, #f00, #ff0 10%, #f00 15%);
                      

• radial-grandient() background:radial-gradient(position,shape,#colorA lengthA/A%,……#colorB lengthB/B%)径向渐变
  position:left~center/lengthA lengthB/A% 5% 指定圆心位置
  shape:ellipse/circle形状
  可以使用rgba色，设置从透明到渐变效果！
• repeating-radial-gradient()

  
                      repeating-radial-gradient(circle closest-side, #f00, #ff0 10%, #f00 15%);
                      

[-] 交互

• cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
  格式：使用自定义图像作为光标类型，IE, Opera只支持*.cur等特定的图片格式；Firefox, Chrome, Safari既支持特定图片类型也支持常见的*.jpg, *.gif, *.jpg等图片格式。
  兼容：cursor的属性值可以是一个序列,用逗号分隔地址,优先级递降。
  

  
                      示例代码：
                      :link,:visited{
                      cursor:url(example.svg#linkcursor),
                            url(hyper.cur),
                            url(hyper.png) 2 3,
                            pointer;
                      }
                      本例用来给所有的超链接定义光标类型，客户端如果不支持SVG类型的光标，则使用下个"hyper.cur"；如果cur类型也不支持，则使用下个"hyper.png"；依次类推。
                      

  
  附录：

  值	描述
  url	需使用的自定义光标的 URL。 注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
  default	默认光标（通常是一个箭头）
  auto	默认。浏览器设置的光标。
  crosshair	光标呈现为十字线。
  pointer	光标呈现为指示链接的指针（一只手）
  move	此光标指示某对象可被移动。
  e-resize	此光标指示矩形框的边缘可被向右（东）移动。
  ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
  nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
  n-resize	此光标指示矩形框的边缘可被向上（北）移动。
  se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
  sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
  s-resize	此光标指示矩形框的边缘可被向下移动（北/西）。
  w-resize	此光标指示矩形框的边缘可被向左移动（西）。
  text	此光标指示文本。
  wait	此光标指示程序正忙（通常是一只表或沙漏）。
  help	此光标指示可用的帮助（通常是一个问号或一个气球）。

• resize(both) 设置或检索对象的区域是否允许用户缩放，调节元素尺寸大小。
  如果希望此属性生效，需要设置对象的overflow属性，值可以是auto,hidden或scroll。
  none：不允许用户调整元素大小。
  both：用户可以调节元素的宽度和高度。
  horizontal：用户可以调节元素的宽度
  vertical：用户可以调节元素的高度。
• ime-mode(disabled)输入法状态：设置或检索是否允许用户激活输入中文，韩文，日文等的输入法（IME）状态。
  auto：不影响IME的状态。
  normal：正常的IME状态
  active：指定所有使用ime输入的字符。即激活本地语言输入法。用户仍可以撤销激活ime
  inactive：指定所有不使用ime输入的字符。即激活非本地语言。用户仍可以撤销激活ime
  disabled：完全禁用ime。对于有焦点的控件(如输入框)，用户不可以激活ime
• pointer-events(none/auto) pointer-events:none 开启穿透点击,忽略自身
  pointer-events:auto 忽略部分的内部重新开启
  详细资料
• user-select(none) 禁止用户选中文字
  none：文本不能被选择
  text：可以选择文本
  all：当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。
  element：可以选择文本，但选择范围受元素边界的约束
  IE6-9不支持该属性，但支持使用标签属性 onselectstart="return false;" 来达到 user-select:none 的效果；Safari和Chrome也支持该标签属性；
  直到Opera12.5仍然不支持该属性，但和IE6-9一样，也支持使用私有的标签属性 unselectable="on" 来达到 user-select:none 的效果；unselectable 的另一个值是 off；
  除Chrome和Safari外，在其它浏览器中，如果将文本设置为 -ms-user-select:none;，则用户将无法在该文本块中开始选择文本。不过，如果用户在页面的其他区域开始选择文本，则用户仍然可以继续选择将文本设置为 -ms-user-select:none; 的区域文本；
  html:

  
                      <p onselectstart="return false;" unselectable="on">禁止被选择的文字</p>
                      

  css:

  
                      p{user-select:none;} //在自动生成前缀时
                      

[-] 滚动条

• ie

  scrollbar-base-color	基色
  scrollbar-track-color	轨道色
  scrollbar-face-color	滑块色
  scrollbar-arrow-color	箭头色
  scrollbar-highlight-color	左上阴影的颜色
  scrollbar-shadow-color	右下阴影的颜色
  scrollbar-3dlight-color	箭头阴影的颜色
  scrollbar-dark-shadow-color	立体阴影色

  
  
• chrome

  ::-webkit-scrollbar	整体部分
  ::-webkit-scrollbar-track	轨道
  ::-webkit-scrollbar-track-piece	内层轨道
  ::-webkit-scrollbar-thumb	滚动条滑块
  ::-webkit-scrollbar-button	两侧按钮
  ::-webkit-scrollbar-corner	边角（横纵滚动条的交汇处）
  ::-webkit-resizer	边角拖拽控件

  
  
• chrome伪元素

  :horizontal	horizontal伪类适用于任何水平方向上的滚动条
  :vertical	vertical伪类适用于任何垂直方向的滚动条
  :decrement	decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮
  :increment	increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮
  :start	start伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的前面
  :end	end伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的后面
  :double-button	double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。
  :single-button	single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。
  :no-button	no-button伪类表示轨道结束的位置没有按钮。
  :corner-present	corner-present伪类表示滚动条的角落是否存在。
  :window-inactive	适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。

• [compare]

  整体	::-webkit-scrollbar	整体样式，可用来设置宽度等，IE不可调整宽度
  轨道	::-webkit-scrollbar-track scrollbar-track-color	轨道样式，IE只能设置颜色，chrome可以加点内阴影和圆角
  滑块	::-webkit-scrollbar-thumb scrollbar-face-color	滑块样式，同上
  箭头	::-webkit-scrollbar-button scrollbar-arrow-color	箭头样式，chrome下当设置了自定义scrollbar时默认则隐藏了箭头，这样看起来和平板差不多 而IE还是需要给其配色，让它和整体看起来更协调
  其他（IE）	scrollbar-base-color scrollbar-highlight-color scrollbar-shadow-color scrollbar-3dlight-color scrollbar-dark-shadow-color	IE下为了整体协调美观，左侧属性仍根据实际情况调整，通常我将它设置与滑块一致
  其他（Chrome）	::-webkit-scrollbar-track-piece ::-webkit-scrollbar-corner ::-webkit-resizer	chrome下有伪状态

[-] 表现

• Standards/Quirks Mode HTML文档根据文档顶部的doctype声明来决定渲染模式，有标准模式（Standards Mode）与怪异模式（Quirks mode，或叫做混杂模式）两种模式。
  IE5及以前默认总是表现为怪异模式，IE6~IE8遇到非正常声明或特定声明时也会进入怪异模式。
  否则，如果有正确声明doctype并在顶端，则默认进入标准模式，即包括HTML5声明在IE6~IE8，也会进入标准模式，而非一定需要HTML4长长的声明。
  而许多现代浏览器即使是怪异模式，表现也和标准模式是一致的。
  
  IE6+进入怪异模式的条件：
  1.IE6~IE8没有doctype的页面是在怪异模式下渲染。
  2.在文档类型定义之前出现非空格和换行字符，浏览器也会激活怪异模式。
  3.除上述两种情况外，有一些特殊声明时用来特定激活怪异模式的。
  具体见下表，删减至只考虑中国市场常用浏览器（来自《Activating Browser Modes with Doctype》）
  参考资料
  标准模式与怪异模式下导致的和模型区别：
  需要知道的是，盒模型差异是两种模式导致的最重要的区别之一，但是IE一些其他的BUG，即使是在标准模式下，仍然需要通过HACK解决，而并非处于标准模式下则没有BUG。
  Box model ：标准模式width=content，怪异模式width=content+padding+border
  例外：即使是标准模式下,button总是应用border-box,现代浏览器为了表现一致,默认添加了box-sizing:border-box属性，故在button的高度上仍然要考虑border而影响的高度,即设置height=height+border*2。
  另外，button在现代浏览器中总是表现为基于垂直对齐，在IE7~8中表现为顶部对齐，在IE6中表现为基线对齐，故需要设置vertical-align:middle初始化让所有表现一致。
  参考自《Quirks mode and strict mode》查阅更多区别
• box-sizing content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding ) 此属性表现为标准模式下的盒模型。
  border-box：padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 此属性表现为怪异模式下的盒模型。
• display 完整参考资料：W3C
  当元素float,fixed,abosulte或者为根元素时,总是表现为块级元素(但并不会宽度占据100%,而是根据自己内容扩展,正确理解成inline-block?但又不完全是,由于float的性质为包裹)

  none	隐藏对象,不保留物理空间
  inline	内联元素 a,span,文本格式化(b,strong,i,em,sub,sup)
  block	块级元素 div,p,h1~h6,h5,form,ul,ol新元素
  inline-block	img,表单控件(input,button,textarea,label)
  list-item	列表项目li
  table	块级元素级的表格table,表格内部元素表现为对应的table-cell等。 table-caption | table-cell table-row | table-row-group table-u-column | table-u-column-group table-footer-group | table-header-group
  inline-table	内联元素级的表格
  flex	弹性伸缩盒
  box	inline-box,块/内联块级弹性伸缩盒（旧）
  flex	inline-flexbox,块/内联块级弹性伸缩盒（新）
  run-in	根据上下文决定对象是内联对象还是块级对象

• zoom 设置或检索对象的缩放比例,normal实际尺寸,1.x浮点数,120%百分比.
  1.可局部用于响应式设计改变DOM尺寸，会有偏移错位（以像素起点对齐变换）
  2.可用于触发IE6的haslayout,拥有haslayout属性的层会自动管理其宽高,除非设置overflow否则宽高会自动扩展.
  现代浏览器会溢出显示,但自身宽高不变.
• (hasLayout) 详细文档
  触发haslayout的条件：
  IE6:
  * display: inline-block
  * float: (left 或 right)
  * position: absolute
  * width: (任何值除了auto)
  * height: (任何值除了auto)
  * writing-mode: tb-rl
  * zoom: (除 normal 外任意值)
  IE7:（额外）
  * min-height: (任意值)
  * max-height: (除 none 外任意值)
  * min-width: (任意值)
  * max-width: (除 none 外任意值)
  * overflow: (除 visible 外任意值)
  * overflow-x: (除 visible 外任意值)
  * overflow-y: (除 visible 外任意值)
  * position: fixed
• (BFC) block fomatting context详细文档
  BFC会阻止垂直外边距（margin-top、margin-bottom）折叠
  BFC不会重叠浮动元素
  BFC可以包含浮动
  触发BFC条件
  * 根元素,fieldset
  * float的值不为none
  * overflow的值不为visible
  * display的值为inline-block、table-cell、table-caption、flex、inline-flex
  * position的值为absolute或fixed

[-] 尺寸

• calc()长度计算,width:calc(100% - 50px) 中间必须有空格！
• width宽度
  1.IE6 BUG:当元素设置百分比宽高时,自动继承父级,宽度由于block默认占比100%,即总是不会缺失,但若父级高度自适应,则IE6会继续向上级继承,而现代浏览器则继承当前父级内容实际产生的高度.
  2.IE6 BUG:1像素BUG,尽量设置尺寸为偶数或不设置参考资料
  3.子元素设置100%宽高时不包含父元素的padding!当父元素有padding时,因设置固定尺寸或修改父级模型!
  4.width:auto 现代浏览器中表示根据内容自动扩展,而IE6-7表示占满父级
  5.IE6-7对宽度的处理略有差异，特别是IE7下有许多离奇BUG，取百分比小数时，尽量只取到1位或取整
• height高度
  1.如果要给元素定义100%高度，必须要明确定义它的父级元素的高度，如果你需要给元素定义满屏的高度，就得先给html和body定义height:100%; 参考资料
  2.对于绝对定位拉伸的元素，内部元素可以直接使用百分比
  3.IE6-7中浮动创建的自适应布局,需要主动给定父级高度，否则绝对定位的元素无法正常定位。
  4.height:inherit的用法(IE8+)
• min-width/height最小宽高
  ie7-8支持,仅ie6不支持
  IE6触发haslayout时,总是会自动管理其内容的宽高,自适应增长
  故可以写成.test{min-height:200px;_height:200px;}
• max-width/height最大宽高
  1.ie7-8支持,仅ie6不支持

[-] 边框

• border[简写]border:1px solid #ccc;
  [0px height]元素的边框位置IE6 BUG！
  当引入一个透明边框时,ie6+会增长内部空间至边框区域(背景色,不含内容),ie6显示黑色边框.

  ---

  border-width宽度：
  指定一个宽度,此宽度在双线时等于其间隔.

  ---

  border-style样式：
  none：无轮廓（等价border-width:0）
  dotted：点状轮廓。IE6下显示为dashed效果
  dashed：虚线轮廓。
  solid：实线轮廓
  double：双线轮廓。两条单线与其间隔的和等于指定的border-width值
  groove：3D凹槽轮廓。
  ridge：3D凸槽轮廓。
  inset：3D凹边轮廓。
  outset：3D凸边轮廓。

  ---

  border-color颜色：
  如果想在hover上做边框显示不发生抖动,应将默认状态添加如1px solid transparent
  三角制作：在线生成（利用宽高0,设置1个夹角边框大值）
  arrow生成：GO TO!
  
• border-top 单边:border-top/border-bottom/border-left/border-right
  取消某一边:border:1px solid #ccc;border-bottom:none;
• border-width/color/style border-width/color/style:上 右 下 左;4个值
• border-radius [边框圆角简写]border-radius:5px 4px 3px 2px;
  四个半径值分别是左上角、右上角、右下角和左下角,可以设置百分比.
  提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数（顺时针顺序）
  border-radius: 15px 5px 25px 5px / 3px 5px 10px 15px;
  改变形状：
  正方形->圆：radius=width|height/2
  叶子-> 左上+右下,注意书写方式与简写代表
  半圆->宽度设为高度的一半，并且也只设置左上角和左下角的半径
  饼->四分之一圆的实现方法是把高度和宽度设置为相等，只设置一个圆角，其半径等于高度或宽度
  用radius画形状参考资料
  在线生成：GO TO!

  ---

  扩展:
  1.chrome hover radius bug
• border-top-left-radius 单角圆角,注意书写格式,先写top/bottom后写left/right
  提供2个参数，2个参数以空格分隔，每个参数允许设置1个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数
  border-top-left-radius:5px 10px。不用“/”分割
• border-image border-image:url(路径不需要引号) 80 80 80 80 round/stretch
  在线图片边框生成：GO TO!
  移动端1像素边框处理
• outline 轮廓边框,在border之外,chrome有焦点样式.另可作为定位参考或特殊动画
  不支持圆角
  不允许类似border属性那样能将自身拆分为border-top..
  IE6-7不支持,IE8支持
• outline-offset 用长度值来定义轮廓偏移。允许负值。
  0是以border边界作为参考点的，正值从border边界往外延，负值从border边界往里缩.
  可用outline来制作一些边框动画但又不改变原大小并非真正边框的改变(因为边框大小改变必然内容需要改变)

[-] 补白

• padding 内部补白
  【设置】

  ---

  [简写]依次设置上右下左padding:1px 2px 3px 4px;
  [单边]padding-top/right/bottom/left
  [缩写]如果只提供一个，将用于全部的四边;如果提供两个，第一个用于上、下，第二个用于左、右;如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。

  ---

  【生效】
  非替代(non-Replaced)行内元素可以使用该属性设置左、右两边的内补丁；若要设置上、下两边的内补丁，必须先使该对象表现为块级或内联块级。即内联元素(a等)设置padding水平有效,垂直无效,除非转换display值。margin同理。

  ---

  【注意】
  1.默认背景图片的平铺是包含在padding区域的
  2.padding生效在伪对象之外。
  3.%比值水平（默认）书写模式下，参照其包含块 width 进行计算，其它情况参照包含块 height，margin同理参考资料

  ---

  【其它】
  1.IE7会胡乱继承padding,自适应宽高的地方必要应设置父级宽高并设置隐藏。
  2.当设置类似必须overflow但内部有元素偏移时，可用padding替代margin。

[-] 边距

• margin(num/%/auto) 取值：num / % /auto
  1.auto：当margin-left/right同时为auto时水平居中
  2.%百分比：水平（默认）书写模式下，参照其包含块 width 进行计算，其它情况参照 height。
  3.num：可以为负值

  ---

  margin负值：
  1.当元素不存在width属性或者（width：auto）的时候，负margin-left/right会增加元素的宽度。

  
  
  	
  
  		
  item..
  		
  item..
  		
  item..
  	
  
  
  

  2.margin-bottom为负值不会产生位移，会减少自身的供css读取的高度。
  

  
  
      text
      
  
  
  © 2018 mgtv.com
  
  

  3.margin负值发生位移后，会影响其后的文档流位置。

  
  
              
  main content
  
  left
  right
  
  

  4.margin负值实现自动等高的多列布局。

  
  
  	
  
  		
  item..
  		
  item..
  		
  item..
  	
  
  
  

  参考资料
• margin-left/right 1.IE6/7双倍margin
  对块状容器元素设置了float和与float相同方向的margin值就会出现双倍margin
  解决方法：设置BUG元素display:inline;
  由于当元素float的时候，display样式的值就会自动转换为“block”，无论display先前设置的属性是什么都会失去效果，不会影响块级特性。
• margin-top/bottom 1.内联元素垂直无效
  非替代(non-Replaced)行内元素可以使用该属性设置左、右两边的外补丁；若要设置上、下两边的外补丁，必须先使该对象表现为块级或内联块级。
  2.外边距合并 参考文档
  当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
  当一个元素包含在另一个元素中时【假设没有内边距或边框把外边距分隔开】，它们的上和/或下外边距也会发生合并。
  假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并 如果这个外边距遇到另一个元素的外边距，它还会发生合并。
  3.不发生margin合并的情况
  margin折叠只发生在块级元素上，且只发生在垂直上
  浮动元素的margin不与任何margin发生折叠；
  绝对定位元素的margin不与任何margin发生折叠；
  设置了display:inline-block的元素不发生折叠；
  设置了属性overflow且值不为visible的块级元素，将不与它的子元素发生margin折叠；
  根元素的margin不与其它任何margin发生折叠,指html而非body
  IE6-7中,如果父元素触发了haslayout,则不会发生折叠

[-] 溢出

• visibility 此属性为隐藏的对象保留其占据的物理空间如果希望对象为可视，其父对象也必须是可视的。
  visible： 设置对象可视
  hidden： 设置对象隐藏
  collapse： 主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。

  ---

  使得一个DOM元素不显示在浏览器可视范围内的方法：
  display:none
  visibility:hidden
  width:0;height:0;opacity:0;z-index:-1000
• overflow溢出
  使overflow生效需要指定尺寸!而非自适应尺寸
  visible： 对溢出内容不做处理，内容可能会超出容器。
  hidden： 隐藏溢出容器的内容且不出现滚动条。
  scroll： 隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。
  auto： 当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body对象和textarea的默认值。
  在IE6/7中，overflow无法正确的隐藏有相对定位position:relative;的子元素。解决方法就是给外包容器.wrap加上position:relative;。
  扩展：
  IE78scroll无法用滚轮滚动bug
  当内含一个100%的元素时，外层设置overflow来与一个浮动元素水平衔接。
• overflow-x横向溢出处理
• overflow-y纵向溢出处理
  对html元素设置overflow:hidden;可隐藏浏览器滚动条,通过js设置让body,html滚动
• clip 剪裁,【绝对定位元素】.
  auto：不剪裁
  rect(50px 20px 10px auto)：上右下左，四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。
  更多说明
  只有为shape时才支持动画性,可做遮罩动画效果
• webkit-mask-imageurl(img) webkit-mask-image:url(img.png)

[+] 方案

• 水平居中 1.自动margin(固定尺寸, .x(auto) )
  只适用于水平切为块级元素,margin:0 auto;
  2.text-align:center( 适用于inline/inline-block, .x )
  现代浏览器只对inline/inline-block元素有效,且非绝对定位.IE6-7可对block元素有效(需指定尺寸)
  3.绝对定位( 已知元素尺寸,ct(x,@width) )
  设置绝对定位,left:50%,并设置margin-left:-尺寸的一半
  4.绝对定位( 未知元素尺寸,.ct(x) )
  设置绝对定位,并设置left:0;right:0;margin-left:auto;margin-right:auto; 【IE6不支持】
  5.自动margin(伸缩尺寸,margin:x)
  设置margin:value 对边相等margin值,对盒子宽高未设置则自动扩展宽高
• 垂直居中 1.绝对定位( 已知元素尺寸,ct(y,@height) )
  设置绝对定位,top:50%,并设置margin-top:-尺寸的一半
  2.绝对定位( 未知元素尺寸,.ct(y) )
  设置绝对定位,并设置top:0;bottom:0;margin-top:auto;margin-top:auto; 【IE6不支持】
  3.table-cell
  设置display:table-cell;vertical-align:middle;（子元素为inline或inline-block） 【IE6不支持】
  4.display:-webkit-box;-webkit-box-align:center;(手机端)
• 中央居中 1.绝对定位( 已知元素尺寸,ct(o,@width,@height) )
  设置绝对定位,top:50%,left:50%,并设置margin-top:-尺寸的一半,margin-left:-尺寸的一半
  2.绝对定位( 未知元素尺寸,.ct )
  设置绝对定位,并设置top:0;bottom:0;left:0;right:0;margin:auto; 【IE6不支持】
  3.自动margin(伸缩尺寸,margin:x)
  设置margin:value 对边相等margin值,对盒子宽高未设置则自动扩展宽高
• 尺寸兼容 1.hasLayout概念,ie6的自动管理,如不设置overflow总是自动扩展
  2.当元素设置百分比宽高时,自动继承父级,宽度由于block默认占比100%,即总是不会缺失,但若父级高度自适应,则IE6会继续向上级继承,而现代浏览器则继承当前父级内容实际产生的高度.
  3.IE6的1像素BUG,尽量设置尺寸为偶数或不设置参考资料
  4.IE6-7对百分比小数值例如33.33%解析不正确,因修正为*width:32%
• % + border百分比尺寸下border的处理
  1.margin:-2px（hover处理则增加双倍）
  2.box-sizing
  3.calc函数 ~"calc(100% - 50px)"
  4.table布局,width=100%-50(无单位)
• 自适应宽度自适应宽度
  1.margin:x val,由于默认block宽度占满100%,设置margin即占满剩余宽度【如side float则需要清除3px bug,可选择绝对定位】
  2.绝对定位,不设置宽高,left:x起始点,right:x结束点.margin:auto.【IE6不兼容】如为相对浏览器窗口可表达式计算
  3.calc函数 ~"calc(100% - 50px)"
  4.table-cell,根据内容扩展,占满剩余父级空间
  5.改table布局,使用width=100%-50(无单位)
• 自适应高度自适应高度
  1.绝对定位,不设置宽高,top:x起始点,bottom:x结束点.margin:auto.【IE6不兼容】如为相对浏览器窗口可表达式计算
  2.calc函数 ~"calc(100% - 50px)"
  3.改table布局,使用height=100%-50(无单位)
• 水平布局水平布局方案
  1.float
  2.inline-block,需设置vertical-align:top,去除inline-block的200B空格.【IE6中要使不断行还必须指定父级高度！】
  3.table-cell(总是等高最高的)【IE6不支持】

  ---

  
  float:错乱,换行不低于上行最高值,不等高
  inline-block:不会错乱,新行整齐,不等高
  table-cell:不会错乱,同行元素必定等高

[-] 浮动

• float 浮动详解 视频版
  【特性】：
  1.浮动内置设置：设置了float的元素则自动转换display为block.只有块级元素具有宽高等特性.
  2.浮动原理1.环绕特性本质，2.脱离文本流特性
  3.与非浮动元素的margin问题：如果浮动并未被闭合处理，下级非浮动元素默认还是以“环绕”浮动元素，其margin会作用在空的区域，此时应在浮动元素上设置margin
  【浮动闭合与BFC】 参考文档
  1.清除浮动解决方案：
  .clearfix:after {content:"\200B"; display:block; height:0; clear:both; }
  .clearfix:after {content:"";display:table;clear:both;}
  .clearfix { *zoom:1; }
  完整参考资料
  2.BFC条件：
  float为 left|right
  overflow为 hidden|auto|scroll
  display为 table-cell|table-caption|inline-block
  position为 absolute|fixed
  【IE BUG】
  1:IE6 双倍margin BUG
  对块状容器元素设置了float和与float相同方向的margin值就会出现双倍margin
  解决方法：设置BUG元素：display:inline;
  由于当元素float的时候，display样式的值就会自动转换为“block”,无论display先前设置的属性是什么都会失去效果，不会影响块级特性。
  2.IE6下3像素bug：
  当浮动元素与非浮动元素相邻时,会发生3像素间隙,可设置浮动元素_margin-right:-3px;或使非浮动元素浮动.
  详细参考资料
  中间列自适应布局方案:左右各浮动（层级需要都在不浮动之前！），需要解决3px bug
  3.IE6-7浮动自适应布局
  IE6-7中浮动创建的自适应布局,需要主动给定父级高度，否则绝对定位的元素无法正常定位。
• clear清除浮动：none,left,right,both
  清除浮动只影响自己，而不影响其他元素；
  对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。
  参考资料1
  参考资料2

[-] 定位

• position:static对象遵循常规流
• position:relative 相对定位：对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left属性进行偏移时不影响常规流中的任何元素
  1.相对定位不同于margin-left/top,不会改变原先文档流,html后者层级默认仍然比前者高
  2.相对定位可设置z-index改变层级
• position:absolute绝对定位：【参考资料】
  特征：
  1.对象脱离常规流,会在正常文档流之上,也可以通过z-index改为负值在正常流之下
  2.使用top，right，bottom，left等属性进行绝对定位，坐标总是以最近的被定位的父级元素为基准,如没有则以window窗口.
  3.盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
  4.当元素设置为绝对定位时,则该元素变为inline-block块级.（不再占据100%）
  特殊用法：
  1.(未定义坐标)：绝对定位的元素，在top，right，bottom，left属性未设置时，会紧随在其前面的兄弟元素之后，但在位置上不影响常规流中的任何元素。如无兄弟元素则贴在父元素起点。即绝对定位在不赋值位置属性时，可作为脱离文档流的相对定位。
  无依赖的绝对定位主要通过margin来实现位移.
  可配合text-align+ ；实现一些自动布局。
  关于跟随性,默认会跟在图片的顶端,由于200B baseline对齐会错位,可通过注释或串联来规避
  2.(未知/已知元素尺寸)：垂直/水平/双向居中,可设置绝对定位,并设置top+bottom:0 / left+right:0 / top+left+bottom+right:0,并设置对应方向margin:auto【IE8支持，6-7均不支持】
  3.(已知元素尺寸)：垂直/水平/双向居中,可设置绝对定位,并设置单向距离(left:50% / top:50%),并设置margin-left/top:-尺寸的一半.【IE6支持】
  4.(自适应宽高)：一个绝对定位元素,如未对其宽高进行设置,但对其对向方位值设置时,则认为宽高总是扩展值定位点.可利用作为自适应宽高.【IE8支持，6-7均不支持】
  BUG：
  1.IE6中,父元素区域会管理到内部包含的绝对定位元素范围.
• position:fixed窗口定位：
  对象脱离常规流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
  HACK：
  IE6不支持fixed定位，通过CSS表达式解决，完整参考资料
  平板下的fixed有Bug，使用绝对定位代替。
• top/bottom/left/right 配合定位属性进行定位,可为负值.
  值可以为百分比，百分比的值是以自身尺寸为参照。
• z-indexZ轴设定,可以为负值.
  同一个层叠上下文中，层叠级别相同的两个元素，依据它们在HTML文档流中的顺序，写在后面的将会覆盖前面的。
  不同层叠上下文中，元素的显示顺序依据祖先的层叠级别来决定，与自身的层叠级别无关。
  在IE浏览器中，定位元素的z-index层级是相对于各自的父级容器，所以会导致z-index出现错误的表现。解决方法是给其父级元素定义z-index，有些情况下还需要定义position:relative。
  实例参考

[-] 列表

• display:inline-block 1.IE6-7支持inline元素转换成inline-block，但不支持block元素转换成inline-block，所以非inline元素在IE6,7下要转换成inline-block，需先转换成inline，然后触发hasLayout，以此来获得和inline-block类似的效果；
  解决方案：
  div{display:inline-block;*display:inline;*zoom:1;}
  2.默认inline-block元素之间默认会有间隔,是由于html元素间200B空格导致的(根据上下文字体大小有差异),可以通过连接html元素,或注释,或分行,及其他方式去掉.(浮动亦可,但浮动无法制作横向布局)
  详细参考资料
  3.禁止换行还需要设置white-space:nowrap制作横向滚动效果.
• ul/li 1.用ul+li打造table效果时,可以自适应宽度换行,边框设置的方式,设置全框,负margin,可规避padding及屏幕尺寸变化问题.
  2.IE6下ul默认表现为block，浮动后依旧占据100%，即使父级浮动，需要自身表现为dbi或fl（设置为dbi如果没有压缩html会出现空格），即用到ul,li来构造布局时，注意给ul,li添加浮动hack。
  3.在ul,li布局时，如非标准结构，在IE67中可能会解析错误导致bug，当非标准结构时建议使用div替代ul,li。
  4.ul表现为dbi在部分原生IE8中可能有渲染bug，添加margin强制渲染占据宽度。
• list-style[简写] img position type,无序列表ul,有序列表ol,自定义列表dl
  可以用列表来进行布局,清除列表样式ul设置list-style:none,ul{padding:0,margin:0}
  如标记为图片时一般用背景图来替代
• list-style-type 仅作用于具有display值等于list-item的对象（如li对象）,如修改display值后不再显示(设置为块或其他特性均消失标记).
  注意：ol,ul,dl对象的type特性为其后的所有列表项目（如li对象）指明列表属性。
  此样式也可应用于counter计数器样式

  值	描述
  none	无标记。
  disc（默认）	实心圆。
  circle	空心圆。
  square	实心方块。
  decimal	数字。( 1,2,3…… )
  decimal-leading-zero	0开头的数字标记。( 01,02,03…… )
  lower-roman	小写罗马数字(i, ii, iii, iv, v, 等。)
  upper-roman	大写罗马数字(I, II, III, IV, V, 等。)
  lower-alpha	小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
  upper-alpha	大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
  lower-greek	小写希腊字母(alpha, beta, gamma, 等。)
  lower-latin	小写拉丁字母(a, b, c, d, e, 等。)
  upper-latin	大写拉丁字母(A, B, C, D, E, 等。)
  hebrew	传统的希伯来编号方式
  armenian	传统的亚美尼亚编号方式
  georgian	传统的乔治亚编号方式(an, ban, gan, 等。)
  cjk-ideographic	简单的表意数字
  hiragana	标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
  katakana	标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
  hiragana-iroha	标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
  katakana-iroha	标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

• list-style-image list-style-image:url(img.png)
  定位位置上会有问题.以文字中线开始显示图片.
  并且也只当li依旧为list-item特性时才有效.
  一般使用背景图来制作列表背景.
• list-style-position 指标记的内外方式,而非(图片)标记坐标位置
  outside：列表项目标记放置在文本以外，且环绕文本不根据标记对齐（默认值）
  1.当type在outside时,如RESET样式中设置ul的padding:0,则会看不到type图标(无论li是否设置padding);如设置ul的padding(例如)小于20,则type图标将会溢出在ul之外.
  2.如设置li的padding-left,则标记位置不更改,而标记与内容之间拉开间距
  3.如设置li的margin-left,则margin继承到标记之外,标记与父级拉开间距

  ---

  inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐。[查看演示]
  1.当type在inside时,type会和文字一起距离浏览器默认padding缩进,设置padding:0时,则会贴边显示.
  2.设置li的padding-left和margin-left视觉表现都为标记之外与父级拉开间距

[-] 表格

• display:table-cell 特点：
  1.table-cell有类似inline-block的可并行性
  2.表格单元格宽度根据内容扩展，自行设置无效。
  3.表格单元格同行元素总是等高。
  注意：
  1.IE8+有效
  2.设置了display:table-cell的元素对宽度高度敏感，【对margin值无反应】，响应padding属性
  3.display:table-cell与float:left或是position:absolute属性不同时使用
  作用：
  1.可以通过设置vertical-align:middle内容垂直居中
  2.可用于宽度自适应布局，因为单元格本质宽度即由内容宽度决定。注意设置vertical-align:top
  hack处理display:table-cell; width:2000px;*width:auto;*zoom:1;
  3.可用于等高布局，即使不设置高度也会与同行元素等高。
  hack处理display:table-cell; width:30%; margin-bottom:-100px; *padding-bottom:110px;*float:left;
  参考资料
  4.自适应.cell{display:table-cell;*display:inline-block;} //table-cell content + auto side*2
  5.td中让元素垂直居中对齐，是对元素img设置y而非父级 ，文字则设置父级
• table 1.表格中插div会脱离表格在外
  2.表格中对合并后 或tr 表现为block,会只有第一个单元格宽度,可直接应用arrow,tr的显示应用table-row而非block
  3.垂直th添加scope="col"
• table-layout 适用于：table系元素。
  auto:默认的自动算法。布局将基于各单元格的内容，换言之，可能你给某个单元格定义宽度为100px，但结果可能并不是100px。表格在每一单元格读取计算之后才会显示出来，速度很慢
  fixed：固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关。也就是说，内容可能被裁切
  关于text-overflow在单元格中的失效
• border-collapse separate：边框独立
  collapse：相邻边被合并
  只有当表格边框独立（即border-u-collapse属性等于separate时），border-spacing和empty-cells才起作用。
• border-spacing 该属性作用等同于标签属性cellspacing(单元格边距)。border-spacing:0等同于cellspacing="0"
  如果提供全部两个length值时，第一个作用于横向间距，第二个作用于纵向间距。
  如果只提供一个length值时，这个值将作用于横向和纵向上的间距。
  *一般将此值与表格内标签属性cellpadding,cellspacing均设为0,通过CSS边距来控制.
• caption-side top：指定caption在表格上边（默认）
  bottom：指定caption在表格下边
  要在IE7及以下浏览器中实现top与bottom参数值的效果，可直接在caption标签内定义标签属性valign为top和bottom。
• empty-cells show：指定当表格的单元格无内容时，显示该单元格的边框。（默认）
  hide：指定当表格的单元格无内容时，隐藏该单元格的边框。
  IE7及以下浏览器中默认隐藏无内容的单元格边框，要想使其获得与show参数值相同的效果，可以变相给该空单元格加个占位且不可见的元素，例如全角空格或\ 等等。

[-] 表单

• form text
  1.Chrome、IE、Firefox、Opera各有不同默认的padding和边框。
  2.IE中,不会因为行高而撑开高度
  3.所有浏览器均为content-box计算模式.
  4.IE6-7中,对input设置text-indent会整个缩进,应设为padding
  5.IE6-7中,过高行高字体显示异常,可能只有一半,则单独设置同字号行高与高度,添加专有padding。
  故重置text为：重定义padding,重定义边框样式,同时定义等值高度与行高。

  ---

  button
  1.Chrome、IE、Firefox、Opera各有不同默认的padding和边框。
  2.所有浏览器中,未定义高度时会受行高撑开高度
  3.Edge与IE8-中,为content-box计算模式,其他浏览器为border-box模式,但指定box-sizing将不会对IE8-生效。
  故重置button为：重定义padding,重定义边框样式,同时修改为content-box模式,可定义等值高度与行高,且设置ie7-的行高为normal。

  ---

  select
  1.各浏览器边框边距以及option的边距略有不同。
  2.默认所有浏览器均为border-box模式。
  3.仅firefox在未定义高度时会受行高撑开高度
  4.右侧padding在IE中会出现在下拉按钮以外。
  故重置select为：重定义padding,且不设置右侧padding,重定义边框样式,定义高度等于行高+padding+边框。

  ---

  radio/checkbox
  1.firefox无法修改其尺寸，opera无法修改复选框尺寸。
  2.单复选框的对齐问题,可用vertical-algin解决。参考资料
• :placeholder 占位提示字符

  
                      &:-moz-placeholder
                      &:-ms-input-placeholder
                      &::-webkit-input-placeholder
                      //可定义文字样式：颜色、字号、对齐方式、字体等
                      

[+] 其它

• p/div 充分利用p,h1-h6等标签进行语义化.但不要在p中放置h1-h6,结构出错。
• h1-h6 在H内部直接放置浮动右元素，IE7会换行，改用position定位
• a 1.IE10-对于a与同级元素，空的a调整层级或顺序仍然无法点击，需要将a包裹其他元素
  2.在平板中a标签中包含:hover触发改变display:none/block的元素，旧平板无法点击，将display切换改为透明度更改并可能需要修改ie78的filter值
  

[-] 多列

• columns(Npx [M]) 多列,简写时注意加s,简写中只含宽度(带单位,不能百分比)和列数.Chrome需要前缀-webkit-
  应用于除table外的非替换块级元素，display:table-cell 元素, 内联块元素。
  实现多列的是里面的内容,而非自身.
  简写方式一：设置width,column:200px 3（固定3列200宽。）
  简写方式二：column:200px （自动根据父级宽度生成X列）
  同时指定2个值时，优先先按列数来分配宽.例如浏览器宽度1800px,指定3列200px宽,结果为分配为3列600px宽,忽略200宽指定值;如果指定宽度200px,未指定列数,则按宽度自动平分为9列
  参考资料：替换/非替换块级/内联元素
• column-width(Npx)列宽
• column-count(N)列数
• column-gap(Npx)列间隔
• column-rule(1px solid #ccc)列间隔边框 1px solid #ccc
  column-rule-style等同于border样式
• column-span(N/all)列横跨,适用于：除浮动和绝对定位之外的块级元素
  是否横跨全部,all和none,不可设置数值非表格,此属性应设置在被应用多列属性的子元素上,多列无继承性,对于不想被继承多列的元素应写在多列父元素之外,而非去设置多列横跨.

[+] Flex

• flex 教程 | 兼容旧版box教程
  在线调试flexbox布局效果
  display:flex/inline-flex;
  注意：
  所有column-*属性在flex容器上都不生效;flex容器上不能使用::first-line和::first-letter伪元素。
  float，clear和vertical-align属性应用在flex项目上将会无效和无法将其out-of-flow。
• item flex 这个属性是flex-grow、flex-shrink和flex-basis属性的简写。
  如果缩写「flex: 1」, 则其计算值为「1 1 0%」
  如果缩写「flex: auto」, 则其计算值为「1 1 auto」
  如果「flex: none」, 则其计算值为「0 0 auto」
  如果「flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值
• item flex-grow 剩余空间的扩展比例,默认值0。
  flex-grow的默认值为0，如果没有显示定义该属性，是不会拥有分配剩余空间权利的。
• item flex-shrink 剩余空间的收缩比例,默认1。
  默认情况之下，所有flex项目都可以收缩，但如果将它们设置为0时，他们不会缩小会保持原来的大小。
• item flex-basis 如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间
• item order 用整数值来定义排列顺序，数值小的排在前面。可以为负值，默认值0。
• item align-self指定flex项目自身的对齐方式或者使用align-items来指定单个flex项目。
  auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
  flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
  flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
  center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
  baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
  stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
• box flex-direction 该属性设置在flex元素上，非flex项目上。
  row：横向从左到右排列（左对齐），默认的排列方式。
  row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
  column：纵向排列。
  row-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
  注意：row和row-reverse依赖其写作模式，如果在rtl上下文方式下，他们都将分别被逆转。
• box flex-wrap nowrap：flex容器为单行。该情况下flex子项可能会溢出容器
  wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
  wrap-reverse：反转 wrap 排列。
• box flex-flow 这个属性是flex-direction和flex-wrap属性的简写，默认值：row nowrap。
• box justify-content 水平方向项目的分布方式。
• box align-items 垂直方向单行项目的分布方式。
  flex-start： 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
  flex-end： 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
  center： 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
  baseline： 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
  stretch： 如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
• box align-content 垂直方向多行项目的分布方式。

[+] Grid

• grid 教程
  display: grid | inline-grid | subgrid;
  注意：
  grid盒子上column,float,clear,vertical-align都没有效果。
• box grid-template-columns grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-columns: repeat(3, 20px [col-start]) 5%;
  grid-template-columns: 1fr 1fr 1fr;
• box grid-template-rows grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
• box grid-template-areas grid-template-areas: "<grid-area-name> | . | none | ..."
  "..."
• box grid-column-gap grid-column-gap: 10px;
• box grid-row-gap grid-row-gap: 15px;
• box grid-gap grid-gap: <grid-column-gap> <grid-row-gap>;
• box justify-items 水平方向网格内容的对齐方式。
  justify-items: start | end | center | stretch;
• box align-items 垂直方向网格内容的对齐方式。
  align-items: start | end | center | stretch;
• box justify-content 水平方向网格的分布方式。
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
• box align-content 垂直方向网格的分布方式。
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
• box grid-auto-columns 定义隐式自动创建的网格大小
  grid-template-columns: 60px 60px;
• box grid-auto-rows 定义隐式自动创建的网格大小
  grid-template-rows: 90px 90px
• box grid-auto-flow 定义隐式自动创建的网格大小
  grid-auto-flow: row | column | row dense | column dense
• box grid

  
  					grid: 200px auto / 1fr auto 1fr;
  
                      grid-template-rows: 200px auto;
                      grid-template-columns: 1fr auto 1fr;
                      grid-template-areas: none;
                      

• item grid-column-start
• item grid-column-end
• item grid-row-start
• item grid-row-end
• item grid-column
• item grid-row
• item grid-area
• item justify-self
• item align-self

[+] Box

• display:-webkit-box旧手机浏览器
  兼容处理
• -webkit-box-orient设置或检索伸缩盒对象的子元素的排列方式。
  horizontal：设置伸缩盒对象的子元素从左到右水平排列
  vertical：设置伸缩盒对象的子元素从上到下纵向排列
  inline-axis：设置伸缩盒对象的子元素沿行轴排列
  block-axis：设置伸缩盒对象的子元素沿块轴排列
• -webkit-box-pack设置或检索伸缩盒对象的子元素的对齐方式。
  start：设置伸缩盒对象的子元素从开始位置对齐（大部分情况等同于左对齐，受）
  center：设置伸缩盒对象的子元素居中对齐
  end：设置伸缩盒对象的子元素从结束位置对齐（大部分情况等同于右对齐）
  justify：设置或伸缩盒对象的子元素两端对齐
• -webkit-box-align设置或检索伸缩盒对象的子元素的对齐方式。
  start：设置伸缩盒对象的子元素从开始位置对齐
  center：设置伸缩盒对象的子元素居中对齐
  end：设置伸缩盒对象的子元素从结束位置对齐
  baseline：设置伸缩盒对象的子元素基线对齐
  stretch：设置伸缩盒对象的子元素自适应父元素尺寸
• -webkit-box-flex使用浮点数指定对象所分配其父元素剩余空间的比例。
• -webkit-box-flex-group用整数值来定义伸缩盒对象的子元素所在的组。
• -webkit-box-ordinal-group用整数值来定义伸缩盒对象的子元素显示顺序。
• -webkit-box-direction设置或检索伸缩盒对象的子元素的排列顺序是否反转。normal | reverse
• -webkit-box-lines设置或检索伸缩盒对象的子元素是否可以换行显示。single | multiple

[-] 2D/3D

• transform 可以用【空格】（非逗号）分隔多个操作,被定义的元素必须为对外表现块级的元素.
  (*老版webkit一定要设置为块，否则内联元素的transfrom和animation无效).
  位移动画闪动问题,可提前加载为0.
• transform-origin设置或检索对象以某个原点进行转换,数值或百分比.
  如果提供两个，第一个用于横坐标，第二个用于纵坐标。
  如果只提供一个，该值将用于横坐标；纵坐标将默认为50%。
• transform:rotate旋转[n deg度数]
  transform:rotate(Ndeg) / rotateX(n) / rotateY(n) / rotateZ(n)
  transform:rotate3d(x,y,z,角度)
• transform:skew倾斜[n deg度数]
  transform:skew(Ndeg / Xdeg,Ydeg) / skewX(n) / skewY(n)
• transform:scale缩放[n倍数]
  transform:scale(x,y) / scaleX(n) / scaleY(n) / scaleZ(n)
  transform:scale3d(x,y,z)
  默认缩放以中心点为起点,不能用zoom
• transform:translate位移/滑动[n px长度]
  transform:translate(x,y) / translateX(n) / translateY(n)
  transform:translate3d:(x,y,z) 案例演示
• transform:matrix矩阵
  transform: matrix(6n)
  transform: matrix3d(16n)
• transform-style规定被嵌套元素如何在 3D 空间中显示。
  flat,子元素将不保留其 3D 位置。
  preserve-3d 子元素将保留其 3D 位置。
• backface-visibility定义元素在不面对屏幕时是否可见。
  取值背面可见/不可见visible|hidden;
  消除 transition 闪屏
  两个方法
  -webkit-transform-style: preserve-3d;
  /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
  -webkit-backface-visibility: hidden;
  /*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/
• perspective(n)定义 3D 转换元素的透视视图。
  取值number|none,常用500; 参考资料
• perspective-origin(x,y)规定 3D 元素的底部位置。
  50% 50%默认值,取值left,center,right,length,%

[-] 过渡

• transition过渡,简写,属性-时间-缓动-延迟
  在Chrome下，使用过渡效果transition时有时会出现页面闪动
  设置：-webkit-transform-style:preserve-3d;或-webkit-backface-visibility:hidden;
• transition-property过渡的属性,以逗号分割多个
• transition-duration过度所需的时间
• transition-timing-function缓动线：
  linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
  ease： 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
  ease-in： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
  ease-out： 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
  ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
  cubic-bezier(, , , )： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
  自定义缓动函数 ( stylie教程 )
• transition-delay延迟时间

[-] 动画

• @keyframes定义动画
  keyframes 名称{
  from{}
  to{}
  }
  @keyframes 名称{
  0% {}
  25%{}
  75% {}
  100% {}
  }
  注意写前缀
  过渡的动画不能使用简写。例如border:8px solid #fff无效,提前定义样式颜色,并给予0宽度,改变宽度.
  利用起点设置为非0%可设置出间隔动画
  不想设置断点的数据留空会线性执行到下一个有数据位置
  设置内层img等于祖层宽度，对子层尺寸进行变化形成遮罩显示效果（需设置overflow:hidden)
• animation执行动画
  简写animation:
  name 5s ease-in 1s 8/infinite alternate paused forwards;
  名称 时间 缓动函数 延迟执行 重复次数 反向 暂停 停留在末尾状态;
  多个动画之间用【逗号】隔开，不同组动画属性的变化同时执行，可设置延迟达到队列效果，同属性例transform会覆盖
  动画帧数计算 腾讯工具 / cssanimate / liffect / 简单示例 / cssload / loading动画
• animation-name动画名称
• animation-duration时间
• animation-timing-function缓动函数
  steps(num)逐帧动画
• animation-delay延迟时间
• animation-iteration-count执行次数
• animation-directionanimation-direction:reverse / alternate / alternate-reverse （反向,奇正偶反,偶正奇反）
• animation-play-stateanimation-play-state: running / paused 运行/暂停
• animation-fill-modeanimation-fill-mode:none / forwards / backwords / both (返回初始,停留末尾,应用初始,两者)
• 移动端动画 参考资料1 | 参考资料2
  1.减少BFC属性方式
  2.减少使用阴影与渐变
  3.让动画元素脱离文档流，减少重排
  4.JS中减少layout

[-] 显示

• -webkit-text-size-adjust:100% 开启文字调整（WEBKIT默认最小只支持12px大小字）
  参考资料
• -webkit-appearance 设置或检索外观按照本地默认样式
  webkit移动表单控件重置
  

  
                       input[type="submit"],input[type="reset"],input[type="button"],button {
                        -webkit-appearance:none;
                       }
                      

[-] 交互

• -webkit-overflow-scrolling:touch 区域快速回滚 参考资料
• -webkit-tap-highlight-color*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
• -webkit-touch-callout:nonebody,防止长按复制图片,ipad+iphone

[-] 语法规则

• @charset @charset "utf-8";
  在外部样式表文件内使用。指定该样式表使用的字符编码。
  该规则后面的分号是必需的，如果省略了此分号，会生成错误信息。
• @import 指定导入的外部样式表
  @import url('demo.css') screen and (min-width:800px);
  该规则必须在样式表头部最先声明,并且其后的分号是必需的.IE9以前不支持.
• @supports 检测是否支持某CSS特性
  @supports (rule) or | and | not (rule)
• @media 详细资料
  @media [only/not] 媒体类型 [and (媒体特性表达式)] {你的样式}
  例：@media only/not print and (max-width: 1200px){样式代码}
  IE8及以下只能实现CSS2中的部分，即只可以设置媒体类型。
  其中部分支持max&min

[+] 打印

• @page设置页面容器的版式，方向，边空等。可增加@page name
• @page:first设置在打印时页面容器第一页使用的样式。
• @page:left设置页面容器位于装订线左边的所有页面使用的样式。
• @page:right设置页面容器位于装订线右边的所有页面使用的样式。
• page检索或指定显示对象容器时使用的页面类型。需要先用@page定义name，调用ele{page:name;}
• page-break-before检索或设置对象之前出现的页分割符。
• page-break-after检索或设置对象之后出现的页分割符。
• page-break-inside检索或设置对象容器内部出现的页分割符。

[-] Less

• Less中文文档
• @var变量 .@{mySelector}{rule..}
  @{property}:value
  background: url("@{url}/white-sand.png");
  

  ---

  @fnord: "I am fnord.";
  @var: "fnord";
  content: @@var;
  
• &:extend(.obj)继承 .e:extend(.f, .g) {}
• Function 函数
• Mixin 混合 随机数需在min下捕捉
  参考资料
• ~ 避免编译 ~ 特殊内容
  ~`'goTop_'+Math.round(Math.random() * 1.0e8)` 字符串连接解析
  其中包括calc()运算函数在LESS中需要避免编译
• ` JS表达式
• when 条件与循环 .mixin (@a; @b: 0) when (isnumber(@b)) { ... }
  .mixin (@a; @b: black) when (iscolor(@b)) { ... }
  循环

  
  .generate-columns(4);
  
  .generate-columns(@n, @i: 1) when (@i =< @n) {
    .column-@{i} {
      width: (@i * 100% / @n);
    }
    .generate-columns(@n, (@i + 1));
  }
  
  //输出
  .column-1 {
    width: 25%;
  }
  .column-2 {
    width: 50%;
  }
  .column-3 {
    width: 75%;
  }
  .column-4 {
    width: 100%;
  }
  

[-] 动画

• Stylie 自定义缓动函数预览

[-] 字体

• Fontsquirrel 字体转换
• Iconfont 字体图标
• FontSpider 中文字体提取
• CSS Font Stack 字体覆盖率查询

[-] 图像

• Gradient Scanner Open an image that contains a gradient and then draw a line over the major components of the gradient.
• Ultimate CSS Gradient Generator A powerful Photoshop-like CSS gradient editor from ColorZilla.
• BASE64 Image to BASE64.
• Color Scheme Designer Color Scheme Designer online.

[-] 边框阴影

• CSS triangle generator Generator a triangle by css border.
• Border image generator Border image generator.
• 3D Ribbon Generator Generator a Ribbon by css.
• Drop Shadows CSS3 Drop Shadows Generator.
• Long Shadows CSS3 Long Shadows Generator.

[-] 其它

• PXtoEM PX to EM conversion made simple.
• Screen Sizes SmartPhones/Tablets/Monitors size statistics.

[-] 文档

• Can I Use
• CSS中文参考手册
• W3C

[-] 动态

• CSS INFO
• W3cplus
• TGideas

[-] 资料

• 移动web知识库

[-]变量

• var x1 = 1;
  var x2 = 2;
  window.x3 = 3;
  3种全局变量的异同

  ---

  判断某个全局变量是否存在用typeof window.myVar === 'undefined'
  函数内部判断某个变量是否存在用typeof myVar === 'undefined'

  ---

  js采用词法作用域，即静态作用域。函数的作用域在函数定义的时候就决定，而动态动作用域则在函数调用的时候才决定的。 参考资料
  JavaScript 函数的执行用到了作用域链，这个作用域链是在函数定义的时候创建的，不管何时何地执行函数，这种绑定在执行时依然有效。
• let let i = 1;
  申明一个块级作用域的变量
• const const来定义常量，const与let都具有块级作用域。 常量通常使用全大写。 const PI = 3.14

[-]语句

• switch 1.switch中的case为全等判断
  2.多个case使用同一个执行块应写为case 1: case2: ...
  3.每个case代码块内部的break不能少，否则会接着执行下一个case
• label/break/continue switch/for/while中均可以使用break跳出整个循环。
  continue语句用于立即终止本轮循环，返回循环结构的头部，开始下一轮循环。
  不带参数的break和continue语句都只针对最内层的循环
  当指定了label时，break则跳出整个label循环块；
  continue命令后面有一个标签名，满足条件时，会跳过当前循环，直接进入下一轮外层循环，如果continue语句后面不使用标签，则只能进入下一轮的内层循环。
• eval(str) 将字符串当作语句执行。
  eval没有自己的作用域，都在当前作用域内执行。
  JavaScript规定，如果使用严格模式，eval内部声明的变量，不会影响到外部作用域。不过，即使在严格模式下，eval依然可以读写当前作用域的变量。
  eval的使用分成两种情况，一种是直接调用eval(expression)，这叫做“直接使用”，这种情况下eval的作用域就是当前作用域。除此之外的调用方法，都叫“间接调用”，此时eval的作用域总是全局作用域 参考资料
• with(obj) 操作同一个对象的多个属性时，提供一些书写的方便. 参考资料
  注意，with区块内部的变量，必须是当前对象已经存在的属性，否则会创造一个当前作用域的全局变量。这是因为with区块没有改变作用域，它的内部依然是当前作用域。

[-]其它

• 'use strict' 严格模式下，函数中的this指向Undefined，非window对象。 参考资料
• 运算 + ：只要有一个运算子是字符串，则两个运算子都转为字符串，执行字符串连接运算。一个值加上空字符串，会使得该值转为字符串形式。

  ---

  加法运算符以外的其他算术运算符（比如减法、除法和乘法），都不会发生重载。它们的规则是：所有运算子一律转为数值，再进行相应的数学运算。

  ---

  % ： 运算结果的正负号由第一个运算子的正负号决定。为了得到正确的负数的余数值，需要先使用绝对值函数。

  ---

  i++/++i : 放在变量之后，会先返回变量操作前的值，再进行自增/自减操作；放在变量之前，会先进行自增/自减操作，再返回变量操作后的值。

  ---

  +/- : 数值运算符的作用在于可以将任何值转为数值（与Number函数的作用相同）。

  ---

  >/< : 即任何值（包括NaN本身）与NaN比较，返回的都是false。（涉及数值比较的需判断非NaN）

  ---

  两个复合类型（对象、数组、函数）的数据比较时，不是比较它们的值是否相等，而是比较它们是否指向同一个对象。

  ---

  & : 且运算符可以多个连用，这时返回第一个布尔值为false的表达式的值。短路可替代if。

  ---

  | : 或运算符可以多个连用，这时返回第一个布尔值为true的表达式的值。

  ---

  ?: : 三元条件表达式是表达式，具有返回值。if结构不具有

  ---

  void : void运算符的作用是执行一个表达式，然后不返回任何值，或者说返回undefined。

  ---

  优先级：算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号
  圆括号强制优先级
  赋值运算符（=）和三元条件运算符（?:）才用先计算右结合。

  ---

  参考资料

[-]类型检测

• typeof val 返回的是字符串。

  测试值	结果
  true/false	boolean
  数值/NaN	boolean
  字符串/JSON	string
  fn	function
  obj/数组/null	object
  undefined/不存在的属性或方法	undefined

  1. 判断null请使用myVar === null
  2. 不存在的变量与未声明的变量typeof检测均为undefined，但两者其实不同，故建议总是初始化。
  3. Null 类型是一个只有一个值的数据类型，即特殊的值 null。它表示一个空对象引用(指针)，而 typeof 操作符检测 null 会返回 object。如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为 null。这样，当检查 null 值就知道是否已经变量是否已经分配了对象引用了。
  4. undefined 是派生自 null 的，因此 ECMA-262 规定对它们的相等性测试返回 true。alert(undefined == null);但typeof数据类型不等。
• Array.isArray(arr)检测是否为数组（EC5）
• obj instanceof cst instanceof运算符返回一个布尔值，表示某个对象是否为指定的构造函数的实例。

  测试目标	测试结果
  数组	arr instanceof Array
  函数/构造函数	fn instanceof Function
  构造函数实例	child instanceof parent
  泛对象	obj instanceof Object
  日期	value instanceof Date
  正则表达式	value instanceof RegExp
  数学	value instanceof Math

• type(val)

  
  var type = function (o){
    var s = Object.prototype.toString.call(o);
    return s.match(/\[object (.*?)\]/)[1].toLowerCase();
  };
  

  
  ['Null',
   'Undefined',
   'Object',
   'Array',
   'String',
   'Number',
   'Boolean',
   'Function',
   'RegExp'
  ].forEach(function (t) {
    type['is' + t] = function (o) {
      return type(o) === t.toLowerCase();
    };
  });
  //type.isNumber(value)
  

[-]类型转换

• Boolean(val)

  value	true	false
  undefined		undefined
  boolean	true	false
  string	非空	空
  number	非零数值	0与NaN
  object	对象（包括空的对象、数组）	null（空对象）

• Number(val)

  value	返回值
  number	number
  boolean	1 / 0
  null	0
  空字符串	0
  undefined	NaN
  非数值(string+/object)	NaN (包含单个数值的数组则为数值)

• String(val)

  value	返回值
  数值	转为相应的字符串
  字符串	转换后还是原来的值
  布尔值	true转为"true"，false转为"false"
  undefined	转为"undefined"
  null	转为"null"
  对象	返回一个类型字符串 "[object Object]"
  数组	返回该数组的字符串形式 "1,2,3"

• 其它 包装对象
  o.toString() | o.valueOf()

[+]Number

• Finity Finity isFinite(---) 判断是否为无穷

  最大值	Number.MAX_VALUE 1.79e+308
  最小值	Number.MIN_VALUE 5e-324
  正无穷	Number.POSITIVE_INFINITY
  负无穷	Number.NEGATIVE_INFINITY

  • 科学计数法，浮点数+e+10的指数
  • 0/0=NaN，正数/0=正无穷，负数/0=负无穷
  • 正无穷+正无穷=正无穷，负无穷+负无穷=负无穷，正无穷+负无穷=NaN
  • 无穷乘法操作得到无穷，无穷除法与求余操作得到NaN
• NaN NaN isNaN(---) 判断是否为NaN

  Number.NaN	得到 NaN 值
  var box = 0 / 0; //NaN var box = 12 / 0; //Infinity var box = 12 / 0 * 0; //NaN	任何与 NaN 进行运算的结果均为 NaN
  alert(NaN == NaN) //false	NaN 与自身不相等(NaN 不与任何值相等)

  • isNaN()函数也适用于对象。
  • 在调用 isNaN()函数过程中，首先会调用 valueOf()方法， 然后确定返回值是否能够转换成数值。如果不能，则基于这个返回值再调用 toString()方法，再测试返回值。
  • 只要NaN参与的运算均为NaN
• Number.MAX_VALUE1.7976931348623157e+308
• Number.MIN_VALUE5e-324
  MIN_VALUE 是 JavaScript 最接近0的数,不是负值
• Number.NEGATIVE_INFINITY-Infinity 负无穷
• Number.POSITIVE_INFINITYInfinity 正无穷

[-]表示

• num.toFixed([bit]) 指定小数点后位数。
  把 Number 四舍五入为指定小数位数的数字，返回的是一个字符串。
  规定小数的位数，是 0 ~ 20 之间的值，包括 0 和 20，有些实现可以支持更大的数值范围。如果省略了该参数，将用 0 代替并四舍五入。
• num.toString([ary]) 转为字符串，并指定进制，默认为10进制。
  直接转换时写为123..toString()或(123).toString()
• num.toLocaleString(local,[opt]) 根据本地数字格式转换为字符串 1,000.789
  参考资料
• num.toExponential([bit]) 使用指数计数法。
  把对象的值转换为指数计数法，返回的是一个字符串。
  参数可选。规定指数计数法中的小数位数，是 0 ~ 20 之间的值，包括 0 和 20，有些实现可以支持更大的数值范围。如果省略了该参数，将使用尽可能多的数字。
• num.toPrecision([bit]) 把数字格式化为指定的长度。N为显示位数，自动选择toFixed() toExponential(N)两者之一。

[-]检测

• [Number.]isNaN(val) 是否为非数值,转换后非数值为true，数值false
  1. 非数值执行运算，会隐藏自动转型（除+）
  2. 加法操作中，数值字符串与数值运算，则改变为字符串串联，减法中，会继续自动转换数值进行运算
• [Number.]isFinite(val)判断是否为无穷值超出计算范围
• Number.isInteger(val) 判断给定的参数是否为整数

[-]转换

• [Number.]parseInt(val,[ary]) 自动判定进制，忽略空格。

  value	结果
  空字符串	NaN
  第一个非空字符不是数值或负号	NaN
  第一个非空字符是数值，遇到非数值时停止解析	number

  parseInt方法还可以接受第二个参数（2到36之间），表示被解析的值的进制，返回该值对应的十进制数。默认情况下，parseInt的第二个参数为10，即默认是十进制转十进制。
• [Number.]parseFloat(val) 第一个小数点有效，第二个无效

[-]String

• new String() 多行字符串表示法：

  
  						//ES5:
  						'string1 \n' + 'string2'
  						//ES6:
  						`string1 
  						string2` 
  					

• `__ ${varname} __` 模板字符串

  
  						var v_1 = 'string' ;
  						var v_2 = 2;
  						var msg = `test,${v_1},${v_2}` 
  					

• str.length 字符串的长度。
  需要特别注意的是，字符串是不可变的，如果对字符串的某个索引赋值，不会有任何错误，但是，也没有任何效果。

[-]转换

• str.split(/reg/,[len]) 参数1：字符串或正则表达式
  参数2：最大的数组长度
  返回值：数组
  原对象：不变
  把字符串按指定符号或正则分割为字符串数组
• str.trim() 移除字符串的两端删除空白字符。
  空白字符包括所有的空白字符 (space, tab, no-break space 等) 以及所有行终止符字符（如 LF，CR）。
• str.toUpperCase() 转为大写
• str.toLowerCase() 转为小写

[-]操作

• str.concat(str,..) 参数：串联一个或更多字符串
  返回值：新的字符串
  原对象：不变。
• str.slice[n,m) 参数：起始位置，末尾位置（不包含）
  返回值：被截取得到的新字符串。
  原对象：不变。
  当只有1个参数时，则为起始位置到末尾全部，且包含末尾元素（即m=arr.length）。
  n和m可为负值，-1 指最后一个元素，-2 指倒数第二个元素。
• str.replace(/reg/g,val|fn([reg])) 参数1：需要替换的字符或正则表达式，没有全局标识时只替换一次
  参数2：替换成的字符串或生成字符串的函数，用return返回
  返回值：新的字符串
  原对象：不变

  ---

  回调函数参数详情
• str.repeat(count) 重复指定的字符串

[-]查找

• str.indexOf(val,[i]) 参数：正向查找指定值,i为起始索引
  返回值：第一个出现的索引位置；如查找不到则返回-1
• str.lastIndexOf(val,[i]) 参数：逆向查找指定值,i为起始索引
  返回值：第一个出现的索引位置；如查找不到则返回-1
• str.search(/reg/) 参数：字符串/正则表达式
  返回：第一个子串的索引/-1
  始终从头开始找，找到一个即返回，正则无需全局设置
• str.match(/reg/g) 参数：字符串/正则表达式
  返回：子串数组/null
  当没有g正则全局标识时，返回的数组为 ["第一个子串", index: 0, input: "原字符串"]
  当参数为正则表达式时，返回的数组为 [子串1,子串2]
• str.charAt(i) 参数：查找的索引位置
  返回值：索引上的字符
• str.charCodeAt(i) 参数：查找的索引位置
  返回值：索引上的字符的 Unicode 编码

[-]URI

• encode/decode 参考资料1、 参考资料2
• encodeURI(uri)把字符串编码为 URI。
• encodeURIComponent(uri)把字符串编码为 URI 组件。
• decodeURI(uri)解码某个编码的 URI。
• decodeURIComponent(uri)解码一个编码的 URI 组件。

[-]编码解码

• String.fromCharCode(Unicode) 将Unicode编码转为一个字符,该方法的参数是一系列Unicode码点，返回对应的字符串。
  参数：Unicode编码数字
  返回值：字符串
  原对象：不变
• str.normalize([NFC]) 按指定Unicode正规形式将当前字符串正规化。
  参数：四种 Unicode 正规形式 "NFC", "NFD", "NFKC", 以及 "NFKD" 其中的一个, 默认值为 "NFC".
  NFC - Normalization Form Canonical Composition.
  NFD - Normalization Form Canonical Decomposition.
  NFKC - Normalization Form Compatibility Composition.
  NFKD - Normalization Form Compatibility Decomposition.
  
• escape(str) 该方法不会对 ASCII 字母和数字进行编码，也不会对下面这些 ASCII 标点符号进行编码： * @ - _ + . / 。其他所有的字符都会被转义序列替换。
• unescape(str) 对由 escape() 编码的字符串进行解码。
  
• btoa(str) 将字符串或二进制值转为Base64编码
  参考资料
• atob(base64) 将Base64编码转为原来的编码

[-]Array

• new Array()

  创建方法	演示
  构造函数	var arr = new Array(); arr[0]=value; var arr = new Array(element0, element1, ..., elementn); var arr = new Array(size); [size=数组项目的个数,只写1位,且必须是数字]
  字面量	var arr = [66,80,90,77,59]

  注意：
  1. ECMAScript中的数组每个元素可以保存任何类型
  2. ECMAScript 中数组的大小也是可以调整的。
  3. var arr = new Array(10) 不等于 var arr = [10]
• Array of(val) Array.of() 和 Array 构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个包含 7 个 undefined 元素的数组。且不需要new运算符。
  参考资料
• arr.length length属性不过滤空位。参考资料
  将数组清空的一个有效方法，就是将length属性设为0。
  使用delete命令删除一个数组成员，会形成空位，并且不会影响length属性。

  对象	含义
  str.length	字符串长度
  arr.length	数组长度
  function.length	参数长度/个数
  number	-
  object	-

• arr[index]

  
  	var  box =[];
  	box['name']=iRuxu;
  	alert(box);  //空
  	alert(box['name']); //iRuxu
  	alert(box[0]); //iRuxu 
  

  如果是字符串下标，不会体现在数组上，需要指定下标键打印，如果是索引下标，则可以直接打印

[-]Set

• new Set() Set是一组key的集合，但不存储value，且key不能重复。
  要创建一个Set，需要提供一个Array作为输入，或者直接创建一个空Set。

  
  	var s1 = new Set(); // 空Set
  	var s2 = new Set([1, 2, 3]); // 含1, 2, 3
  

• set.add(key) s.add(4) //Set {1,2,3,4}
• set.delete(key) s.delete(3)

[-]转换

• Array.from(o) 把类数组实例化为一个数组。
  类同：Array.prototype.slice.call(o)
  参数：包括字符串，set，map，arguments，DOM元素集等
  返回：新数组
  原对象：不变。
  参考资料
• arr.toString() 把数组转换为字符串
  参数：无
  返回：新字符串，数组中的元素之间用逗号分隔。
  原对象：不变。
• arr.join(symbol) 使用指定符号把数组元素拼接为字符串
  参数：符号
  返回：新字符串
  原对象：不变。

[-]操作

• arr.concat(item|arr,..) 参数：串联一个新的数组元素或数组内的元素（当串联的是一个新数组时，只取数组里的值）。
  返回：一个新的数组。
  原数组：不变。
• arr.slice[n,m) 参数：起始位置，末尾位置（不包含）
  返回值：被截取得到的新数组。
  原数组：不变。
  当只有1个参数时，则为起始位置到末尾全部，且包含末尾元素（即m=arr.length）。
  n和m可为负值，-1 指最后一个元素，-2 指倒数第二个元素。

[-]查找

• arr.indexOf(val,[i]) 参数：正向查找指定值,i为起始索引
  返回值：第一个出现的索引位置；如查找不到则返回-1
• arr.lastIndexOf(val,[i]) 参数：逆向查找指定值,i为起始索引
  返回值：第一个出现的索引位置；如查找不到则返回-1
• arr.findIndex(fn(item,[i],[arr]),[obj]) 返回符合测试条件的第一个数组元素索引，如果没有符合条件的则返回 -1。 回调函数返回true/false
  整个执行函数返回索引或-1。
• arr.includes(val,[i]) 返回值：true/false
  参数：从i索引处开始查找val,默认为 0。
  如果i为负值，则按升序从array.length + fromIndex 的索引开始搜索。
  指定了i的时候升序查找到末端不会再从头查找。

[-]排序

• arr.sort([fn(a,b)]) 对数组进行升序排序。
  参数：指定一个函数
  返回：新的改变后的数组。
  原对象：改变。

  ---

  默认排序顺序为按字母升序（字符串模式）
  默认把所有元素先转换为String再排序。即结果'10'排在了'2'的前面，因为字符'1'比字符'2'的ASCII码小，大写比小写靠前。
  函数执行完返回的是对数组的引用，请注意，数组在原数组上进行排序并修改原数组，并不生成副本。

  ---

  sort方法参数如果提供一个函数，那么该函数必须返回以下值之一：
  负值，所传递的第一个参数比第二个参数小；
  正值，所传递的第一个参数比第二个参数大；
  零，两个参数相等。
  

  
  	arr.sort(function(a,b){
  		//升序
  		return a - b;
  		//降序
  		return b - a;
  
  		//升序
  		if (x < y) {
  		    return -1;
  		}
  		if (x > y) {
  		    return 1;
  		}
  			return 0;
  		})
  

• arr.reverse() 反转当前数组排序

[-]添加

• arr.push(item,..) 参数：在数组末端添加若干个元素
  返回值：数组的新长度。
  原数组：改变。
• arr.unshift(item,..) 参数：在数组最前方添加若干个元素
  返回值：数组的新长度。
  原数组：改变。
• arr.splice(i,0,item,..) 参数：在数组指定的i索引位置添加若干个元素
  返回值：空数组。
  原数组：改变。

[-]移除

• arr.pop() 参数：移除数组的最后一个元素，无参数。
  返回值：被删除的元素。
  原数组：改变。
• arr.shift() 参数：移除数组的第一个元素，无参数。
  返回值：被删除的元素。
  原数组：改变。
• arr.splice(i,[delnum],[item],...) 参数：在数组指定的i索引位置删除和添加若干个元素
  返回值：被删除的元素组成的数组。
  原数组：改变。
  delnum=空：如第2个参数缺省，则删除从索引位置起到数组末尾的全部元素。
  delnum=1：如第2个参数存在，且=1，则相当于删除索引位置的元素。
  delnum=n：如第2个参数存在，且>1，删除arr[i]~arr[i+n-1]的元素。

[-]替换

• arr.fill(val,[n],[m]) 参数：用一个固定值替换数组的元素。
  返回值：新的数组。
  原数组：改变。
  包含n位置，不包含m位置。如果m不定义，则为剩余全部元素。
• arr.copyWithin(i,n,[m]) 参数：复制（索引n ~ 索引m-1）的元素，替换（索引i ~ 索引i+m-n-1）的元素。
  返回值：新的数组。
  原数组：改变。
  复制选取的部分包含n，但不包含m。如果m不定义，即到数组末端。

[-]迭代

• arr.map(fn(item,[i],[arr]),[obj]) 通过指定函数处理数组的每个元素，并返回处理后的数组，map()不会改变原始数组。
  obj对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"。

  ---

  map()与forEach()的区别：
  

  map	forEach
  返回新的数组	返回undefine
  执行回调，应在回调中return计算后的新值	只执行回调函数，对应的打印等操作或新建数组需在回调中声明

• ite.forEach(fn(val,[i],[o])) 每个元素都执行一次回调函数，可应用与Iterable类型 (Array/Map/Set)
  Set与Array类似，但Set没有索引，因此回调函数的前两个参数都是元素本身
  Map的回调函数参数依次为value、key和map本身
  forEach方法无法中断执行，总是会将所有成员遍历完。如果希望符合某种条件时，就中断遍历，要使用for循环。

  类型	参数
  array	value,index,array
  set	value,value,set
  map	value,key,map

  
  	var a = ['A', 'B', 'C'];
  	a.forEach(function (element, index, array) {
  		// element: 指向当前元素的值
  		// index: 指向当前索引
  		// array: 指向Array对象本身
  	alert(element);
  	});
  

[-]递归

• arr.reduce(fn(cur,item,[i],[arr]),[init]) 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。
  回调函数需返回cur，执行完成reduce会返回最终total值。
  参考资料
• arr.reduceRight(fn(cur,item,[i],[arr]),[init]) 从右向左递归。

[-]遍历

• arr.filter(fn(item,[i],[arr]),[obj]) 检测数值元素，并返回符合条件所有元素的数组。
  和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。
  参考资料
• arr.every(fn(item,[i],[arr]),[obj]) every()方法用于检测数组所有元素是否都符合指定条件，如果数组中检测到有一个元素不满足，则整个表达式返回 false，且剩余的元素不会再进行检测；如果所有元素都满足条件，则返回 true。

  
  	var ages = [32, 33, 16, 40];
  	function checkAdult(age) {
  	    return age >= 18;
  	}
  

• arr.some(fn(item,[i],[arr]),[obj]) some() 方法用于检测数组中的元素是否满足指定条件，如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false。
• arr.find(fn(item,[i],[arr]),[obj]) find() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素。当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined。
• 遍历方法对比一览

  方法	用途	回调函数返回值	方法返回值
  map	遍历每一个执行函数	return new_item	retrun new_array
  forEach	遍历每一个执行函数	-	undefine
  reduce/reduceRight	从左向右/从右向左递归	return cur_value	return total_value
  filter	筛选所有满足条件的项	return true/false	return filter_array
  every/some	遍历是否每一项/存在项满足条件	return true/false	return true/false
  find	查找是否存在满足条件的项，并返回第一个	return true/false	return value/undefined

[-]Object

• new Object()

  创建方法	演示
  字面量	对象的所有键名都是字符串，可以不加引号。但如果不符合表示名的条件，则需要加引号。参考资料 对象的属性之间用逗号分隔，最后一个属性后面可以加逗号，也可以不加。 var obj ={ key:value, key:function(){...} }
  new运算符	var obj = new Object(); obj.key = value; obj.key = function(){...}
  原型创建	var obj = Object.creat(Object.prototype)
  构造函数	function Obj(name){ this.name = value; this.key = function (){...} } var o = new Obj(name) 注意，如果不写new，这就是一个普通函数，它返回undefined。但是，如果写了new，它就变成了一个构造函数，它绑定的this指向新创建的对象，并默认返回this，也就是说，不需要在最后写return this;。 如果忘记写new运算符，在strict模式下，this.name = name将报错，因为this绑定为undefined，在非strict模式下，this.name = name不报错，因为this绑定为window，于是无意间创建了全局变量name，并且返回undefined，这个结果更糟糕。

• obj[key]
  1. 访问属性是通过.操作符完成的，但这要求属性名必须是一个有效的变量名。
  2. 当属性含空格、关键字或为变量时，只能用中括号表示
  3. 中括号表示法时，key需要加上引号
• obj.hasOwnProperty() 检测xiaoming是否拥有某一属性，可以用in操作符。
  如果in判断一个属性存在，这个属性不一定是自身原有的，它可能是继承得到的。
  要判断一个属性是否是xiaoming自身拥有的，而不是继承得到的，可以用hasOwnProperty()方法。
• delete obj.key 删除属性delete obj.key，删除成功后返回true
  注意，删除一个不存在的属性，delete不报错，而且返回true。
  只有一种情况，delete命令会返回false，那就是该属性存在，且不得删除。
  delete命令只能删除对象本身的属性，无法删除继承的属性
  delete命令不能删除var命令声明的变量，只能用来删除属性。
• key in obj in遍历访问对象的属性/属性值

  
  	for (var property in obj) {
  		console.log(property);  //遍历对象的全部属性
  		console.log(obj[property]); //遍历所有对象的值
  	} 
  	
  	var props = [];
  	var i = 0;
  	for (props[i++] in obj);
  

  它遍历的是对象所有可遍历（enumerable）的属性，会跳过不可遍历的属性
  它不仅遍历对象自身的属性，还遍历继承的属性。

[-]Map

• new Map() 初始化Map需要一个二维数组，或者直接初始化一个空Map。没有字面量方法。

  var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);

• map.get(key)取key的值，返回值
• map.set(key,val)添加新的key-value
• map.has(key)是否存在key，返回布尔值
• map.delete(key)删除key
• key of map 遍历Array可以采用下标循环，遍历Map和Set就无法使用下标。为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型。
  具有iterable类型的集合可以通过新的for ... of循环来遍历。

  
  	var a = ['A', 'B', 'C'];
  	var s = new Set(['A', 'B', 'C']);
  	var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
  	for (var x of a) { // 遍历Array
  	    console.log('arr:' + x);
  	}
  	for (var x of s) { // 遍历Set
  	    console.log('set:' + x);
  	}
  	for (var x of m) { // 遍历Map
  	    console.log('map:' + x[0] + '=' + x[1]);
  	}
  

[-]属性与值

• Object.getOwnPropertyNames(obj) 返回直接定义在某个对象上面的全部属性的名称。
  返回一个数组，成员是对象本身的所有属性的键名，不包含继承的属性键名。
• Object.keys(obj) 查看一个对象的所有属性，返回一个key的数组，返回可枚举的属性
  Object.getOwnPropertyNames(obj)方法还返回不可枚举的属性名
  由于JavaScript没有提供计算对象属性个数的方法，所以可以用这两个方法代替
  Object.keys(o).length
  Object.getOwnPropertyNames(o).length
• Object.entries(obj) 返回一个给定对象自身可枚举属性的键值对的二维数组
  参考资料
• obj.propertyIsEnumerable(key) 判断某个属性是否可枚举

[+]属性模型

• attributes object 属性描述对象
  

  设置	描述
  value	存放该属性的属性值，默认为undefined
  writable	存放一个布尔值，表示属性值是否可改变
  enumerable	存放一个布尔值，表示该属性是否可枚举
  configurable	存放一个布尔值，表示“可配置性”。如果设为false，将阻止某些操作改写该属性，比如，无法删除该属性，也不得改变该属性的属性描述对象（value属性除外）。也就是说，configurable属性控制了属性描述对象的可写性。
  get	存放一个函数，表示该属性的取值函数（getter），默认为undefined
  set	存放一个函数，表示该属性的存值函数（setter），默认为undefined

  数据对象与DOM对象的双向绑定：参考资料
• Object.defineProperty(obj,key,{desc}) 通过attributes对象，定义某个属性。参考资料
• Object.defineProperties(obj,{key:{desc}}) 通过attributes对象，定义多个属性。 参考资料
• Object.getOwnPropertyDescriptor(obj,key) 返回指定对象上一个自有属性对应的属性描述符
  自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性
• Object.getOwnPropertyDescriptors(obj,key) 获取一个对象的所有自身属性的描述符。

[+]状态控制

• Object.preventExtensions(obj) 防止对象扩展
• Object.isExtensible(obj) 判断对象是否可扩展
• Object.seal(obj) 禁止对象配置
• Object.isSealed(obj) 判断一个对象是否可配置
• Object.freeze(obj) 冻结一个对象，冻结指的是不能向这个对象添加新的属性，不能修改其已有属性的值，不能删除已有属性，以及不能修改该对象已有属性的可枚举性、可配置性、可写性。也就是说，这个对象永远是不可变的。
• Object.isFrozen(obj) 判断一个对象是否被冻结

[-]原型链

• object 如果不同的变量名指向同一个对象，那么它们都是这个对象的引用，也就是说指向同一个内存地址。修改其中一个变量，会影响到其他所有变量。
  但如果取消某一个变量对于原对象的引用，不会影响到另一个变量。
  这种引用只局限于对象，对于原始类型的数据则是传值引用，也就是说，都是值的拷贝。
  故在设置一个新的对象继承旧对象时，不能直接通过new.prototype = old.prototype进行设置，否则对new原型的任何修改，将直接会影响旧的原型对象。

  ---

  如果行首是大括号，一律解释为语句（即代码块）。如果要解释为表达式（即对象），必须在大括号前加上圆括号。

  ---

  如果读取一个不存在的键，会返回undefined，而不是报错。
• cst.prototype 构造函数创建的实例的原型，prototype是函数才会有的属性
  为减少内存消耗，将公共方法写在构造函数的原型上，参考资料

  ---

  在改变原型对象时，一般要同时设置constructor属性
• proto.constructor 原型对象的这个属性指向构造函数
  
  实例对象本身并没有constructor属性，但会直接从实例的原型对象查找，所以会得出结果。
  prototype.constructor.name 获取构造函数的名称
• proto.isPrototypeOf(obj) 判断当前对象是否为另一个对象的原型
  Object.prototype处于原型链的最顶端，所以对各种实例都返回true，只有继承null的对象除外。
• obj.__proto__ 等价于 obj.constructor.prototype
  仅浏览器环境。
  任何一个对象都有__proto__，实例对象的这个属性指向该对象的原型
  在编写JavaScript代码时，不要直接用obj.__proto__去改变一个对象的原型，并且，低版本的IE也无法使用__proto__。
• Object.getPrototypeOf(obj) 等价cst.prototype。获取对象的原型对象
• Object.setPrototypeOf(obj,proto) 为现有对象设置原型，返回新对象。

[-]继承

• Object.create(proto) 基于一个原型创建新对象，用于当对象不是一个构造函数时。
  如果想要生成一个不继承任何属性，参数传入null。
  参考资料

  
  	// 原型对象:
  	var Student = {
  	    name: 'Robot',
  	    height: 1.2,
  	    run: function () {
  	        console.log(this.name + ' is running...');
  	    }
  	};
  
  	function createStudent(name) {
  	    // 基于Student原型创建一个新对象:
  	    var s = Object.create(Student);
  	    // 初始化新对象:
  	    s.name = name;
  	    return s;
  	}
  
  	var xiaoming = createStudent('小明');
  	xiaoming.run(); // 小明 is running...
  	xiaoming.__proto__ === Student; // true
  

• inherits(child,parent)

  
  	function inherits(Child, Parent) {
  	    var F = function () {};
  	    F.prototype = Parent.prototype;
  	    Child.prototype = new F();
  	    Child.prototype.constructor = Child;
  	}
  

  参考资料
• Object.assign(to,from...) 将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。跳过那些值为 null 或 undefined 的源对象。 参考资料

  ---

  
  var extend = function (to, from) {
    for (var property in from) {
      var descriptor = Object.getOwnPropertyDescriptor(from, property);
  
      if (descriptor && ( !descriptor.writable
        || !descriptor.configurable
        || !descriptor.enumerable
        || descriptor.get
        || descriptor.set)) {
        Object.defineProperty(to, property, descriptor);
      } else {
        to[property] = from[property];
      }
    }
  }
  

[-]类

• class ClassName

  
  					class Student {
  					    constructor(name) {
  					        this.name = name;
  					    }
  
  					    hello() {
  					        alert('Hello, ' + this.name + '!');
  					    }
  					}
  					var test = new Student('test')
  					

• class Child extends Parent

  
  					class PrimaryStudent extends Student {
  					    constructor(name, grade) {
  					        super(name); // 记得用super调用父类的构造方法!
  					        this.grade = grade;
  					    }
  
  					    myGrade() {
  					        alert('I am at grade ' + this.grade);
  					    }
  					}
  					

  PrimaryStudent需要name和grade两个参数，并且需要通过super(name)来调用父类的构造函数，否则父类的name属性无法正常初始化。
• super(parent_key)

[+]其它

• obj.valueOf() 可通过自定义valueOf的返回值来替换原型的返回值，以达到自动转换计算时预期的结果。
• obj.toString() 可通过自定义toString方法替换原型的返回值。
  Object.prototype.toString.call(value) 可判断其构造函数：

  value	返回值
  数值	[object Number]
  字符串	[object String]
  布尔值	[object Boolean]
  undefined	[object Undefined]
  null	[object Null]
  数组	[object Array]
  arguments对象	[object Arguments]
  函数	[object Function]
  Error对象	[object Error]
  Date对象	[object Date]
  RegExp对象	[object RegExp]
  其他对象	[object Object]

[-]Function

• fn 参数
  函数不能省略靠前的参数，如果一定要省略靠前的参数，只有显式传入undefined。
  函数参数如果是原始类型的值（数值、字符串、布尔值），传递方式是传值传递（passes by value）。即在函数内部，传入的值是原始值的拷贝，无论怎么修改，都不会影响到原始值。这意味着，在函数体内修改参数值，不会影响到函数外部。
  函数参数如果是复合类型的值（数组、对象、其他函数），传递方式是传址传递（pass by reference）。也就是说，传入函数的原始值的地址，因此在函数内部修改参数，将会影响到原始值。
  注意，如果函数内部修改的，不是参数对象的某个属性，而是替换掉整个参数，这时不会影响到原始值。参考资料
  如果有同名的参数，则取最后出现的那个值。

  ---

  作用域
  函数作用域与变量一样，就是其声明时所在的作用域，与其运行时所在的作用域无关。
  函数执行时所在的作用域，是定义时的作用域，而不是调用时所在的作用域。
  同样的，函数体内部声明的函数，作用域绑定函数体内部。

  ---

  属性
  fn.name : 返回紧跟在function关键字之后的那个函数名(匿名函数为空字符串)
  fn.length : 返回函数预期传入的参数个数，即函数定义之中的参数个数(定义之时的个数)。
  fn.toString() : 返回函数的源码，注释也可以返回。

  ---

  闭包
  定义在一个函数内部的函数。闭包最大的特点，就是它可以“记住”诞生的环境。
  闭包的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量始终保持在内存中，即闭包可以使得它诞生环境一直存在。
  返回闭包时牢记的一点就是：返回函数不要引用任何循环变量，或者后续会发生变化的变量。
  如果一定要引用循环变量怎么办？方法是再创建一个函数，用该函数的参数绑定循环变量当前的值，无论该循环变量后续如何更改，已绑定到函数参数的值不变
• new fn new命令原理
  new命令总是返回一个对象，要么是实例对象，要么是return语句指定的对象。
  函数内部可以使用new.target属性。如果当前函数是new命令调用，new.target指向当前函数，否则为undefined

  ---

  示例代码
  方法应挂载在prototype上，避免内存占用
• function() 1.function命令 - 函数的声明
  function fn(arg){...}
  

  ---

  2.函数表达式
  var fn = function(arg){...}
  在第二种方式下，function (x) { ... }是一个匿名函数，它没有函数名。
  但是，这个匿名函数赋值给了变量fn，所以，通过变量fn就可以调用该函数。
  上述两种定义完全等价，注意第二种方式按照完整语法需要在函数体末尾加一个;，表示赋值语句结束。
  采用函数表达式声明函数时，function命令后面不带有函数名。如果加上函数名，该函数名只在函数体内部有效，在函数体外部无效。
  

  ---

  3.Function构造函数
  var fn = new Function(arg..,函数体)
  你可以传递任意数量的参数给Function构造函数，只有最后一个参数会被当做函数体，如果只有一个参数，该参数就是函数体。

  ---

  如果同一个函数被多次声明，后面的声明就会覆盖前面的声明。
  如果同时采用function命令和赋值语句声明同一个函数，最后总是采用赋值语句的定义。 参考资料
  根据ECMAScript的规范，不得在非函数的代码块中声明函数。
• (function(n){})(n) IIFE = Immediately-Invoked Function Expression,立即调用的函数表达式
  匿名函数自执行,可以初始化各项值,但如果需要的变量并不是一开始初始化有的,则不可以,否则无法读取。
  
• x => x * x

  
  						//单个参数
  						var result = x => x * x
  						function (x) {
  						    return x * x;
  						}
  						//语句块
  						x => {
  						    if (x > 0) {
  						        return x * x;
  						    }
  						    else {
  						        return - x * x;
  						    }
  						}
  						//多个参数
  						(x, y) => x * x + y * y
  					

  箭头函数相当于匿名函数，省略了return。
  箭头函数本身返回的是一个函数，将一个箭头函数赋值给一个变量后，运行其才能执行该箭头函数，箭头函数左侧的为函数参数。
  箭头函数内部的this是词法作用域，由上下文确定，修订了以前用that保存this的情况。 参考资料

[-]内部

• return 如果没有return语句，函数执行完毕后也会返回结果，只是结果为undefined.
• arguments 函数的参数对象，类数组对象，但不是数组，实际上arguments最常用于判断传入参数的个数。
  严格模式下为只读对象，不允许修改。 对象值 描述 arguments[0] 第一个参数名字 arguments.length 参数的个数 arguments.callee 主体函数本身，拥有这个参数对象的函数 (严格模式禁用) rest参数：
  

  
  						function foo(a, b, ...rest) {
  						    console.log('a = ' + a);
  						    console.log('b = ' + b);
  						    console.log(rest);
  						    //rest: [array]
  						}
  					

• this

  当前环境	this指向
  函数	非严格模式：window strict模式：undefined
  对象	object 直接定义对象的函数，并单独存储函数后，调用函数时不可行，除非以obj.fn()进行调用。 对象属性函数里的函数（闭包）调用对象时可指定var that = this来获取正确this

  参考资料1 | 参考资料2

[-]方法

• fn.apply(obj,[arg]) fn.apply(作用域，[传递参数]/arguments)
  要指定函数的this指向哪个对象，可以用函数本身的apply方法，它接收两个参数，第一个参数就是需要绑定的this变量，第二个参数是Array，表示函数本身的参数。
• fn.call(obj,arg) fn.call(作用域，[传递参数]),apply与call均让函数作用于特定作用域,call必须明确传入每一个参数。
  apply()把参数打包成Array再传入；call()把参数按顺序传入
  对普通函数调用，我们通常把this绑定为null。
  如果参数为空、null和undefined，则默认传入全局对象。
• fn.bind(obj) bind(作用目标) 创建一个作用于某目标的函数实例
  bind()方法会创建一个新函数。当这个新函数被调用时，bind()的第一个参数将作为它运行时的 this, 之后的一序列参数将会在传递的实参前传入作为它的参数。

[+]Generator

• function*()
• yield val
• g.next()

[-] 定时器

• setTimeout(fn,time) 在指定的毫秒数后调用函数或计算表达式
  setTimeout还允许添加更多的参数，它们将被传入推迟执行的函数（回调函数），IE 9.0及以下版本，只允许setTimeout有两个参数，不支持更多的参数。
  当time=0时的应用，同样需等待队列完成
• setInterval(fn,time) 按照指定的周期（以毫秒计）来调用函数或计算表达式
• clearTimeout(timeout) 取消由 setTimeout() 方法设置的 timeout
• clearInterval(timeout) 取消由 setInterval() 设置的 timeout

[-]JSON

• json 概念：
  它是一种表示结构化数据的形式，JSON是一个格式化的字符串，文件格式后缀为.json

  ---

  语法：
  简单值：字符串、数值、布尔值、null，不支持undefined
  对象：一组无序的键值对
  数组：一组有序的值的列表，可以通过索引来访问

  ---

  JSON与JS的区别：
  JSON字符串必须使用双引号（单引号会导致语法错误），且对象的属性必须加双引号
  在JS中直接引入一段JSON数据应该用单引号将其括起来，因为它其实代表一个字符串
  如：'{"name" : "Lee","age" : 100}' JSON数组与对象比普通JS少了分号与赋值，其本身表示的是字符串

  ---

  兼容性：
  IE7及IE7-需要引用库文件 json-js <!--[if lte IE 7]> json2.js <![endif]-->

  ---

  执行优先级：
  toJSON() --> 过滤参数 --> 标准序列化 --> 缩进 如在toJSON中已被过滤的键值则就算过滤参数中仍有设置也已无效
• JSON.stringify(obj,[arr(key)|fn(key,val)|null],[space|num]) js对象 -> json字符串

  ---

  参数1：传入的对象。
  如有键值为函数时，会排除该成员。我们可以在转换前将函数用.toString()方法转换为字符串来避免以上问题的发生。
  如有键值为日期对象时，会转为字符串。

  ---

  参数2：用于转换结果的函数或数组
  当为数组时，显示指定的key，['key1','key2']
  当为函数时，每个键值对根据函数规则处理，function(key,value){...return value}，函数需返回新的value。如果此函数返回 undefined，则排除成员。

  ---

  参数3：缩进空格，当不传入fn只设置缩进时，第2个参数传入null。如果space 是一个数字，则返回值文本在每个级别缩进指定数目的空格。
• JSON.parse(json,[fn(key,val)]) json字符串 -> js对象
  转换函数需返回value值。
• obj.toJSON:fn(){return json} JS对象中添加toJSON()方法，自定义过滤一些数据，返回新的对象

  
  	var xiaoming = {
  	    name: '小明',
  	    age: 14,
  	    gender: true,
  	    height: 1.65,
  	    grade: null,
  	    'middle-school': '\"W3C\" Middle School',
  	    skills: ['JavaScript', 'Java', 'Python', 'Lisp'],
  	    toJSON: function () {
  	        return { // 只输出name和age，并且改变了key：
  	            'Name': this.name,
  	            'Age': this.age
  	        };
  	    }
  	};
  
  	JSON.stringify(xiaoming); // '{"Name":"小明","Age":14}'
  

[-]Ajax

[-]数学

• Math.random() 返回 0 ~ 1 之间的随机数
  1.随机颜色16进制：Math.floor( Math.random() * 16777215 ).toString( 16 )
  2.2个值之间的随机值：function random(min,max){return min + (max-min)*Math.random();}
  参考资料
• Math.max/min(x,y,z..n) 返回 x,y,z,...,n 中的最高/低值
  参数中最大的值。如果没有参数，则返回 -Infinity。如果有某个参数为 NaN，或是不能转换成数字的非数字值，则返回 NaN。
• Math.abs(x)返回 x 的绝对值
• Math.ceil/floor/round(x)对数进行上/下舍入/四舍五入
• Math.sqrt(x)返回x的平方根
• Math.pow(x,y)返回x的y次幂
• Math.exp(x)返回E(x)的指数
• Math.log(x)返回数的自然对数（底为e）
• Math.CONST

  属性	描述
  E	返回算术常量 e，即自然对数的底数（约等于2.718）
  LN2	返回 2 的自然对数（约等于0.693）
  LN10	返回 10 的自然对数（约等于2.302）
  LOG2E	返回以 2 为底的 e 的对数（约等于 1.414）
  LOG10E	返回以 10 为底的 e 的对数（约等于0.434）
  PI	返回圆周率（约等于3.14159）
  SQRT1_2	返回返回 2 的平方根的倒数（约等于 0.707）
  SQRT2	返回 2 的平方根（约等于 1.414）

• Math.三角函数

  函数	描述
  Math.sin(x)	返回数的正弦
  >Math.asin(x)	返回 x 的反正弦值
  Math.cos(x)	返回数的余弦
  Math.acos(x)	返回 x 的反余弦值
  Math.tan(x)	返回角的正切
  Math.atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值
  Math.atan2(y,x)	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）

[-]日期时间

• new Date([arg..,timestamp]) 返回：日期对象

  ---

  无参数时：创建计算机当前时间的日期对象
  var date = new Date();
  Sat Oct 07 2017 01:20:24 GMT+0800 (中国标准时间)

  ---

  有参数时：创建指定时间的日期对象
  var date = new Date(2015, 5, 19, 20, 15, 30, 123);
  var date = new Date(1435146562875);
  当前时间是浏览器从本机操作系统获取的时间，所以不一定准确，因为用户可以把当前时间设定为任何值。
• date.getFullYear(){2017}年份
• date.getMonth(){0~11}月份，范围0~11
• date.getDate(){1~31}日期
• date.getDay(){1~7}星期
• date.getHours(){0~24}时，24小时制
• date.getMinutes(){0~60}分
• date.getSeconds(){0~60}秒
• date.getMilliseconds(){0~1000}毫秒
• Date.now(){timestamp}当前时间戳
• date.getTime(){timestamp}时间戳，等同于date.valueOf()
• Date.parse(ISO){timestamp} 解析一个符合ISO 8601格式的字符串，并返回对应时间戳
  var d = Date.parse('2015-06-24T19:49:22.875+08:00');
  d; // 1435146562875
• date.toString() Sat Oct 07 2017 01:36:58 GMT+0800 (中国标准时间)
• date.toLocaleString() 2017/10/7 上午1:33:06
• date.toUTCString() Fri, 06 Oct 2017 17:33:06 GMT

[-]正则表达式

• new RegExp('exp') 第一种方式是直接通过/正则表达式/写出来，第二种方式是通过new RegExp('正则表达式')创建一个RegExp对象。
  var re1 = /ABC\-001/;
  var re2 = new RegExp('ABC\\-001');
  注意，如果使用第二种写法，因为字符串的转义问题，字符串的两个\\实际上是一个\。

  ---

  修饰符：
  i：忽略大小写。
  g：全局匹配。
  m：多行模式。
  参考资料
• RegExp.test(str) 返回：true/false
• RegExp.exec(str) 返回：匹配值/null
  全局匹配可以多次执行exec()方法来搜索一个匹配的字符串。当我们指定g标志后，每次运行exec()，正则表达式本身会更新lastIndex属性，表示上次匹配到的最后索引。

[-]错误处理

• new Error('msg') 错误对象属性：

  属性	描述
  err.message	错误提示信息
  err.name	错误名称（非标准属性）
  err.stack	错误的堆栈（非标准属性）

  
  原生错误类型：

  名称	描述
  SyntaxError	解析代码时发生的语法错误
  ReferenceError	引用一个不存在的变量时发生的错误；将一个值分配给无法分配的对象
  RangeError	当一个值超出有效范围时发生的错误
  TypeError	变量或参数不是预期类型时发生的错误
  URIError	URI相关函数的参数不正确时抛出的错误
  EvalError	eval函数没有被正确执行
  自定义错误	参考资料

  
  
  如果在一个函数内部发生了错误，它自身没有捕获，错误就会被抛到外层调用函数，如果外层函数也没有捕获，该错误会一直沿着函数调用链向上抛出，直到被JavaScript引擎捕获，代码终止执行。所以，我们不必在每一个函数内部捕获错误，只需要在合适的地方来个统一捕获，一网打尽。

  ---

  涉及到异步代码，无法在调用时捕获，原因就是在捕获的当时，回调函数并未执行。
  类似的，当我们处理一个事件时，在绑定事件的代码处，无法捕获事件处理函数的错误。
• throw err throw语句的作用是中断程序执行，抛出一个意外或错误。它接受一个表达式作为参数，可以抛出各种值。
  throw可以接受各种值作为参数。JavaScript引擎一旦遇到throw语句，就会停止执行后面的语句，并将throw语句的参数值，返回给用户。
• try{..}cath(e){..}finally{..}

  
  						try {
  						    //可能出错的语句
  						    throw new Error('出错了!');
  						} catch (e) {
  						    //捕获e错误对象,try中抛出的错误对象
  						} finally {
  						    //总会执行
  						    //执行finally代码块以后，程序就中断在错误抛出的地方。
  						}
  					

• source map Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。参考资料

[+]控制台

• console.log() console.log()
  console.debug()
  console.info() - 蓝色图标
  console.warn() - 黄色三角
  console.error() - 红色叉叉
  console.table() - 表格显示
  console.clear() - 清空
• console.count(var) 用于计数，输出它被调用了多少次
• console.dir(dom) 该方法对于输出 DOM 对象非常有用，因为会显示 DOM 对象的所有属性。
  console.dirxml(dom) : 以目录树的形式，显示 DOM 节点
• console.assert(false,'msg') 参考资料
• console.time/timeEnd(name) time方法表示计时开始，timeEnd方法表示计时结束。它们的参数是计时器的名称。
  放在一个需要计时的代码起始与末尾。
• console.profile/profileEnd(name) 新建一个性能测试器。类同time，在profile面板中，可以看到这个性能调试器的运行结果
• console.group/groupend(name) 分组展示，可用鼠标折叠展开。
  console.groupCollapsed() 默认第一次是折叠的。
• console.trace() 显示当前执行的代码在堆栈中的调用路径
• debugger debugger语句主要用于除错，作用是设置断点

[+]笔记

• 避免变量未定义报错 1.条件判断：取属性的时候可多加一层判断，以防属性值对象报错。
  if (banner && banner.length)
  2.未定义检测：typeof v === "undefined"
  

[-]文档

• MDN Web技术文档
• ES6支持程度
• ECMAScript5规范
• Javascript参考手册
• 全栈API参考手册

[-]教程

• ES5教程
• ES6教程
• TypeScript
• CoffeeScript

[-]动态

• 前端库大全
• 掘金社区
• 知乎话题

[-]工具

• CodePen
• Bejson

[-] DOM

• DOM API

[-] Node

• node.nodeName 返回元素的标记名（大写）。
  如果节点是一个元素节点，则返回标签名；如为属性节点，则返回属性名。
• node.nodeType 返回元素的节点类型（数值）。
  参考资料
• node.nodeValue 返回元素的节点值
  需先取到文本节点，再取文本节点的值。
  由于只有Text节点、Comment节点、XML文档的CDATA节点有文本值，因此只有这三类节点的nodeValue可以返回结果，其他类型的节点一律返回null。同样的，也只有这三类节点可以设置nodeValue属性的值。对于那些返回null的节点，设置nodeValue属性是无效的。

[-] NodeList

• nodelist.item(i) 等同于nodelist[i]
• nodelist.length 节点列表长度

[-] Document

• doc.readyState 返回当前文档的状态
  
  1. uninitalized - 还未开始载入
  2. loading - 载入中
  3. interactive - 已加载，文档与用户可以开始交互
  4. complete - 载入完成
• doc.referrer 返回载入当前文档的来源文档的URL。
  如果当前文档不是通过超级链接访问的，则为null。
• doc.activeElement 返回当前获取焦点元素
• doc.designMode 值为'on'/'off'，IE6-10为大写。 参考资料
  控制当前文档是否可编辑，通常用在制作所见即所得编辑器。
  打开iframe元素包含的文档的designMode属性，就能将其变为一个所见即所得的编辑器。
  iframe.contentDocument.designMode = 'on'
• doc.lastModified 返回文档最后被修改的日期和时间
  10/19/2017 15:24:30
• doc.cookie 设置或返回与当前文档有关的所有cookie
  key=value;...
• doc.domain 返回当前文档的域名
  如果无法获取域名，该属性返回null。
• doc.URL/documentURI 返回文档的URL，必须为大写。
  document.documentURI属性和document.URL属性都返回一个字符串，表示当前文档的网址。不同之处是documentURI属性可用于所有文档（包括 XML 文档），URL属性只能用于 HTML 文档。
• doc.inputEncoding 返回文档的字符编码
  IE8及以下，Oprea不支持
• doc.characterSet 返回渲染当前文档的字符集，比如UTF-8、ISO-8859-1。
• doc.baseURI 返回文档绝对基础URI
  如果无法取到这个值，则返回null。
  该属性为只读。
  IE不支持
• doc.doctype 返回文档类型声明。
  IE8及以下返回null。支持XML。
• doc.defaultView 在浏览器中返回document对象所在的window对象，否则返回null。

[-] Element

• new Image()

  属性	描述
  src	图像src属性值，可读写
  alt	图像alt描述内容
  width	宽度
  height	高度
  naturalWidth	图像的原始宽度，只读
  naturalHeight	图像的原始高度，只读
  complete	返回一个布尔值，表示图表是否已经加载完成
  onload	指定一个图像加载完成后的回调函数
  crossOrigin	图像跨域的CORS设置
  isMap	图像是否为服务器端的image-map，可读写
  useMap	设置图像的usemap属性

• ele.attributes 返回一个元素的属性类数组对象。

  ---

  document.body.attributes[0]
  document.body.attributes.bgcolor
  document.body.attributes['ONLOAD']
• ele.dataset HTML元素节点的标准属性（即在标准中定义的属性），会自动成为元素节点对象的属性。
  href/src/action/method/htmlfor(label for)/...
  data-* 自定义属性，使用dataset.xxx设置
• ele.id 设置或返回元素的id
• ele.tagName 返回指定元素的大写标签名，与nodeName属性的值相等
• dom.title 设置或返回当前文档/元素的标题
• ele.accessKey 设置或返回accessKey一个元素。
  document.getElementById('w3c').accessKey="w"
  可使用Alt + accessKey 设置的键位快捷访问该元素。
• ele.tabIndex 设置或返回元素的标签顺序
  即通过tab键切换时的顺序
  参考资料
• ele.dir 设置或返回一个元素中的文本方向。
  dir = ltr / rtl
• ele.ownerDocument 返回当前节点所在的顶层文档对象，即document对象。

[-] Text

• txt.data data属性等同于nodeValue属性，用来设置或读取Text节点的内容
• txt.length 返回当前Text节点的文本长度。

[-] Attribute

• attr.name 返回属性名称
• attr.value 设置或返回属性值
• attr.specified 检查属性节点是否存在值，返回布尔值
  注意先需获取到的是属性节点

[-] 集合归类

• HTMLCollection （1）HTMLCollection实例对象的成员只能是Element节点，NodeList实例对象的成员可以包含其他节点。
  （2）HTMLCollection实例对象都是动态集合，节点的变化会实时反映在集合中。NodeList实例对象可以是静态集合(如query方法)。
  （3）HTMLCollection实例对象可以用id属性或name属性引用节点元素，NodeList只能使用数字索引引用。
  var elem = document.forms.namedItem('myForm');
  var elem = document.forms['myForm'];
  
• window.document 对于正常的网页，直接使用document或window.document。
  对于iframe载入的网页，使用iframe节点的contentDocument属性。
  对Ajax操作返回的文档，使用XMLHttpRequest对象的responseXML属性。
  对于包含某个节点的文档，使用该节点的ownerDocument属性。
• doc.documentElement 返回文档的根节点（html元素）
• doc.body/head 返回文档的body/head元素
• doc.images 返回文档中所有image对象引用
• doc.embeds 返回网页中所有嵌入对象，即embed标签
• doc.links 返回文档中所有的a.href + area标签。
  document.links.$id > document.links.$name 可按id和name访问,同名时id高于name,同id时,取顺序在前的
  document.links[i] 可按索引访问
• doc.anchors 返回文档中所有的锚点的集合。即带有name属性的a标签。
  document.anchors.length
• doc.forms 返回文档中所有表单的集合。
  document.forms[0]
  document.forms.name1
• doc.scripts 返回页面中所有脚本的集合

[-] 层级查找

• ele.parentNode 返回元素的父节点
• ele.parentElement 返回元素的父element节点
  如果当前节点没有父节点，或者父节点类型不是Element节点，则返回null。
• dom.childNodes 返回元素的子节点数组
• dom.firstChild 返回元素的第一个子节点。
  如果不存在则返回null
• dom.lastChild 返回元素的最后一个子元素。
• dom.hasChildNodes() 检查元素是否具有任何子元素，返回布尔值
• dom.contains(node) 返回一个布尔值，表示参数节点是否为当前节点的后代节点。
  注意，如果将当前节点传入contains方法，会返回true。虽然从意义上说，一个节点不应该包含自身。

[-] 序列查找

• ele.nextSibling 返回该元素之后紧跟的一个节点（处在同一树层级中）
  如没有则返回null
• ele.previousSibling 返回该元素之前紧跟的一个节点（处在同一树层级中）
  如没有则返回null

[-] 条件筛选

• dom.getElementById('id') 返回拥有指定ID的第一个对象的引用。
  如果没有指定ID的元素返回null。
• dom.getElementsByTagName('tag') 返回带有指定标签名的对象的集合。
  *返回文档的所有元素。
  *返回的元素集合中的0为html
• dom.getElementsByClassName('cls') 返回文档中所有指定类名的元素集合。
  IE8及以下不支持。
• dom.getElementsByName('name') 返回带有指定名称的对象的集合。
• dom.querySelector('cssExp') 返回dom范围中匹配指定css选择器的第一个元素。
  传入的是css选择器，且仅返回第一个元素。
  IE8支持，IE6-7不支持。
• dom.querySelectorAll('cssExp') 返回dom范围中匹配指定css选择器的全部元素。
  HTML5新引入，IE8不支持。
  此方式生成的集合，无法用.访问到id和name。是nodelist，非HTMLcollection。
  静态集合，非动态。
• doc.elementFromPoint(x,y) 返回位于页面指定视窗位置最上层的Element子节点。
  如果位于该位置的HTML元素不可返回（比如文本框的滚动条），则返回它的父元素（比如文本框）。如果坐标值无意义（比如负值或超过视口大小），则返回null。

[-] 文本

• doc.creatTextNode('str') 创建文本节点
  这个方法可以确保返回的节点，被浏览器当作文本渲染，而不是当作HTML代码渲染。因此，可以用来展示用户的输入，避免XSS攻击。
• dom.normalize() 合并相邻的文本节点并删除空的文本节点
• txt.splitText(n) splitText方法将Text节点一分为二，变成两个毗邻的Text节点。它的参数就是分割位置（从零开始），分割到该位置的字符前结束。如果分割位置不存在，将报错。
  分割后，该方法返回分割位置后方的字符串，而原Text节点变成只包含分割位置前方的字符串。
• ele.textContent 设置或返回节点的文本内容（返回所有子节点的文本）
  textContent属性自动忽略当前节点内部的HTML标签，返回所有文本内容。
  同理对textContent的字符串设置中如有标签，当做字符串处理，不会解析为Html标签
  IE8及以下不支持
• ele.innerHTML 设置或返回元素的内容
  如果插入的文本包含 HTML 标签，会被解析成为节点对象插入 DOM。注意，如果文本之中含有script标签，虽然可以生成script节点，但是插入的代码不会执行。
• ele.outerHTML 返回一个字符串，内容为指定元素节点的所有HTML代码，包括它自身和包含的所有子元素。
  被替换后，原变量将保存原信息在内存中
• window.getSelection() 返回一个Selection对象，表示用户现在选中的文本。
  使用Selction对象的toString方法可以得到选中的文本。

[-] 添加

• doc.creatElement('tag') 创建元素节点
• ele.cloneNode([true/false]) 克隆该节点，包括属性和值。
  传入true表示递归复制该节点的所有子孙节点。
• doc.importNode(node,deep) 把一个节点从另一个文档复制到该文档以便应用。
  第2个参数为必须，true代表还要复制该节点的所有子孙节点。
  IE8及以下不支持。
  参考资料
• doc.creatDocumentFragment() 创建一个虚拟的节点对象，节点对象包含所有属性和方法。
  var temp=document.createDocumentFragment();
• doc.creatComment('str') 创建注释节点

[-] 修改

• dom.appendChild(node) 向目标节点末尾添加新的子节点。 (如为原存在于原文档中的节点则原位置会被移除)
  你可以使用 appendChild() 方法移除元素到另外一个元素。
  如果文档树中已经存在了 newchild，它将从文档树中删除，然后重新插入它的新位置。
  如果 newchild 是 DocumentFragment 节点，则不会直接插入它，而是把它的子节点按序插入当前节点的 childNodes[] 数组的末尾。
  
• dom.insertBefore(node,exist) 向目标节点前添加新的节点。
  如果被添加的节点是原文档中的节点，则原节点会被移除。
• ele.replaceChild(new,old) 将某个子节点替换为另一个。
  它返回被替换走的那个节点

[-] 删除

• dom.removeChild(node) 删除指定的子节点。
  删除成功则返回被删除的节点，删除失败返回null。
• dom.remove() 将当前元素节点从DOM树删除

[-] 其它

• doc.write('exp') 向文档写入内容
  
• doc.writeln('exp') 向文档写入内容，并在末尾添加一个换行符
• doc.open([MIME],[replace]) 打开一个输出流来收集docment.write()方法输出的内容。
  MIMEtype，默认值是 "text/html"。
  replace，当此参数设置后，可引起新文档从父文档继承历史条目。
  它实际上等于清除当前文档，重新写入内容。
• doc.close() 关闭用 document.open() 方法打开的输出流，并显示选定的数据。

[-] MutationObserver

• new MutationObserver(fn(arr,obs)) 使用时，首先使用MutationObserver构造函数，新建一个观察器实例，同时指定这个实例的回调函数。
  回调函数，会在每次 DOM 变动后调用。该回调函数接受两个参数，第一个是变动数组，第二个是观察器实例
• obs.observe(dom,option) observe方法用来开始监听，它接受两个参数
  第一个参数是所要观察的 DOM 节点
  第二个参数是一个配置对象，用来指定所要观察的特定变动

  
      var article = document.querySelector('article');
  
      var  options = {
        'childList': true,
        'attributes':true
      } ;
  
      observer.observe(article, options);
  

  观察器所能观察的 DOM 变动类型（即上面代码的options对象），有以下几种
  childList：子节点的变动。
  attributes：属性的变动。
  characterData：节点内容或节点文本的变动。
  subtree：所有后代节点的变动。
  attributeOldValue：类型为布尔值，表示观察attributes变动时，是否需要记录变动前的属性值。
  characterDataOldValue：类型为布尔值，表示观察characterData变动时，是否需要记录变动前的值。
  attributeFilter：类型为数组，表示需要观察的特定属性（比如['class','src']）
• obs.disconnect() 停止观察。调用该方法后，DOM 再发生变动，也不会触发观察器
• obs.takeRecords() 清除变动记录，即不再处理未处理的变动。该方法返回变动记录的数组。
• MutationRecord DOM 每次发生变化，就会生成一条变动记录。这个变动记录对应一个MutationRecord对象，该对象包含了与变动相关的所有信息。Mutation Observer 处理的是一个个MutationRecord对象所组成的数组。

  ---

  type：观察的变动类型（attribute、characterData或者childList）。
  target：发生变动的DOM节点。
  addedNodes：新增的DOM节点。
  removedNodes：删除的DOM节点。
  previousSibling：前一个同级节点，如果没有则返回null。
  nextSibling：下一个同级节点，如果没有则返回null。
  attributeName：发生变动的属性。如果设置了attributeFilter，则只返回预先指定的属性。
  oldValue：变动前的值。这个属性只对attribute和characterData变动有效，如果发生childList变动，则返回null。

[-] 属性

• ele.getAttribute('attr') 返回指定元素的属性值
  等同 getAttributeNode('attr').value
• ele.removeAttribute('attr') 从元素中删除指定的属性
• ele.setAttribute('attr','val') 设置元素指定的属性值
  IE8及以下不支持
• ele.hasAttribute('attr') 检测元素是否具有某个属性，返回true/false
  IE8及以下不支持

[-] 交互

• ele.focus() 设置元素获取焦点
• ele.blur() 设置元素移除焦点
• dom.hasFocus() 检查元素是否获取焦点，返回布尔值
• ele.contentEditable 设置或返回元素的内容是否可编辑
  返回inherit/true/false
  如果父级元素是可编辑，则子元素内容也是可编辑的
• ele.isContentEditable 返回元素的内容是否可编辑
  返回true/false

[-] 类名

• ele.className 设置或返回元素的class属性，每个class之间用空格分割。
• ele.classList 返回该元素的类的一个对象。 IE10以下不支持。
  

  方法	描述
  .value	完整类名
  .add(class1,class2,...)	添加新的类名，如果已经存在则不会添加
  .remove(class1,class2,...)	移除指定类名，如果移除不存在的类名，不会报错
  .toggle(class,true/false)	切换指定类名。 第一个参数为切换的类名。 如果存在时，移除并返回false；如果不存在，添加并返回true。 第二个参数，为强制设置布尔值。
  .contains(class)	返回布尔值，判断指定类名是否存在
  .length	类名个数
  .item(i) / [i]	返回索引上的类名

[-] 样式

• ele.style[.prop] 设置或返回元素的样式属性
  返回的是一个对象，通过style.classname来设置具体，只取行内。
  其中cssText属性，可以读写或删除整个样式
• window.getComputedStyle(dom,[':before'])[.prop] 返回一个包含该节点最终样式信息的对象。
  所谓“最终样式信息”，指的是各种CSS规则叠加后的结果。

  ---

  getComputedStyle方法还可以接受第二个参数，表示指定节点的伪元素（比如:before、:after、:first-line、:first-letter等）。
• style.getPropertyValue(prop) 读取某个CSS属性
• style.setProperty(prop,val) 设置某个CSS属性
• style.removeProperty(prop) 删除某个CSS属性

[-] 样式表

• doc.styleSheets 返回网页的所有样式表的类数组对象
  它包括link节点加载的样式表和style节点内嵌的样式表。

  属性	描述	示例
  media	media属性表示这个样式表是用于屏幕（screen），还是用于打印（print），或两者都适用（all）。该属性只读，默认值是screen。	document.styleSheets[0].media.mediaText //all
  disabled	一旦样式表设置了disabled属性，这张样式表就将失效。注意，disabled属性只能在JavaScript脚本中设置，不能在HTML语句中设置。	document.querySelector('#linkElement').disabled = 'disabled';
  href	href属性是只读属性，返回StyleSheet对象连接的样式表地址。对于内嵌的style节点，该属性等于null。	document.styleSheets[0].href
  type	type属性返回StyleSheet对象的type值，通常是text/css	document.styleSheets[0].type // "text/css"
  title	title属性返回StyleSheet对象的title值。	-
  parentStyleSheet	CSS的@import命令允许在样式表中加载其他样式表。parentStyleSheet属性返回包含了当前样式表的那张样式表。如果当前样式表是顶层样式表，则该属性返回null。	-
  ownerNode	ownerNode属性返回StyleSheet对象所在的DOM节点，通常是link或style。对于那些由其他样式表引用的样式表，该属性为null。	document.styleSheets[0].ownerNode // [object HTMLLinkElement]
  cssRules	cssRules属性指向一个类似数组的对象，里面每一个成员就是当前样式表的一条CSS规则。	sheet.cssRules[0].cssText styleSheet.cssRules[0].style.color = 'red';

• sheet.insertRule('str',n) 在当前样式表的cssRules对象插入CSS规则
• sheet.deleteRule(n) 删除cssRules对象的CSS规则
• cssRule.*

  属性	描述
  cssText	返回当前规则的文本
  parentStyleSheet	返回定义当前规则的样式表对象
  parentRule	返回包含当前规则的那条CSS规则。
  type	返回有一个整数值，表示当前规则的类型 1：样式规则，部署了CSSStyleRule接口 3：输入规则，部署了CSSImportRule接口 4：Media规则，部署了CSSMediaRule接口 5：字体规则，部署了CSSFontFaceRule接口
  selectorText	返回当前规则的选择器 //.class
  style.prop	style属性返回一个对象

  CSSStyleDeclaration对象

[-] 尺寸

• ele.clientWidth 返回内容的可视宽度（不包括边框，边距或滚动条）
  即元素宽度 - 边框 - 边距 - 17px(滚动条)
• ele.clientHeight 返回元素的可视高度，包括填充，不包括边框+滚动条+边距
  即元素高度 - 边框 - 边距 - 17px(滚动条)
• ele.scrollWidth 返回元素的宽度，包括填充，不包括边框+滚动条+边距，但包括带滚动条的隐蔽地方
  即当有子元素的溢出宽度时，等于子元素的宽度，否则等于可视宽度
• ele.scrollHeight 返回元素的高度，包括填充，不包括边框+滚动条+边距，但包括带滚动条的隐蔽地方
  即当有子元素的溢出高度时，等于子元素的高度，否则等于可视高度
• ele.offsetWidth 返回元素的宽度，包括填充，也包括边框+滚动条，不包括边距
  即元素盒模型宽度
• ele.offsetHeight 返回元素的高度，包括填充，也包括边框+滚动条，不包括边距
  即元素盒模型高度

[-] 偏移

• ele.offsetLeft 返回当前元素的相对水平偏移
• ele.offsetTop 返回当前元素的相对垂直偏移
• ele.offsetParent 返回当前元素的偏移容器
• ele.getBoundingClientRect().left/top 某个元素距离视口左上角的坐标

[-] 滚动

• ele.scrollLeft 当元素有overflow时生效，设置或返回距左边缘起始点的滚动位置点
• ele.scrollTop 当元素有overflow时生效，设置或返回距顶部边缘起始点的滚动位置点
• window.scrollTo(x,y) 把内容滚动到指定的坐标
• window.scrollBy(x,y) 按照指定的像素值来滚动内容
• window.pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置
  IE8及以下不支持，用document.documentElement.scrollLeft来替代
• window.pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置
  IE8及以下不支持，用document.documentElement.scrollTop来替代

[-] window

• window.innerWidth 返回窗口的文档显示区的宽度（包括滚动条）
  var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
• window.innerHeight 返回窗口的文档显示区的高度（包括滚动条）
  var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

[-] screen

• screen.width 返回屏幕的总宽度
• screen.height 返回屏幕的总高度
• screen.availWidth 返回屏幕的宽度（不包括Windows任务栏）
• screen.availHeight 返回屏幕的高度（不包括Windows任务栏）

[-] 移动

• window.moveTo(x,y) 用于移动浏览器窗口到指定位置。它接受两个参数，分别是窗口左上角距离屏幕左上角的水平距离和垂直距离，单位为像素。
• window.moveBy(x,y) 将窗口移动到一个相对位置。它接受两个参数，分别是窗口左上角向右移动的水平距离和向下移动的垂直距离，单位为像素。

[-] 监听触发

• dom.addEventListener(type,fn(e)[,false]) 添加事件监听
  内部的this对象总是指向触发事件的那个节点。
  IE8=-：attachEvent()
  

  
                              if (document.addEventListener) {
                                  document.addEventListener("click", myFunction);
                              } else if (document.attachEvent) {
                                  document.attachEvent("onclick", myFunction);
                              }
                              function myFunction() {
                                  alert("Hello World!");
                              }
                          

  ---

  type：事件名称，大小写敏感。
  listener：监听函数。事件发生时，会调用该监听函数。
  useCapture：布尔值，表示监听函数是否在捕获阶段（capture）触发（参见后文《事件的传播》部分），默认为false（监听函数只在冒泡阶段被触发）。老式浏览器规定该参数必写，较新版本的浏览器允许该参数可选。为了保持兼容，建议总是写上该参数。
• dom.removeEventListener(type,fn(e)[,false]) 移除事件监听
  IE8=-：detachEvent()
  两个参数均为必须，指定要移除的事件及要移除的函数。
• dom.dispatchEvent(event) 触发事件,参数是一个Event对象的实例
  dispatchEvent方法在当前节点上触发指定事件，从而触发监听函数的执行。该方法返回一个布尔值，只要有一个监听函数调用了Event.preventDefault()，则返回值为false，否则为true。

  ---

  
      para.addEventListener('click', hello, false);
      var event = new Event('click');
      para.dispatchEvent(event);
  

• bind HTML中:
  JavaScript 中:

  object.onclick=function(){..};

  JS中监听：

  object.addEventListener('click',fn)

  ---

  当监听函数部署在Element节点的on-属性上面，this不会指向触发事件的元素节点，除非函数内容也写在标签中写明。 参考资料

[-] 自定义事件

• new CustomEvent(type,option) 参考资料
  CustomEvent构造函数的第一个参数是事件名称，第二个参数是一个对象，可传递数据
  IE模拟支持

  
  (function () {
    function CustomEvent ( event, params ) {
      params = params || { bubbles: false, cancelable: false, detail: undefined };
      var evt = document.createEvent( 'CustomEvent' );
      evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
      return evt;
     }
  
    CustomEvent.prototype = window.Event.prototype;
  
    window.CustomEvent = CustomEvent;
  })();
  

• document.createEvent($etype) var event = document.createEvent('Event')
  createEvent方法接受一个字符串作为参数，可能的值参见下表“数据类型”一栏。使用了某一种“事件类型”，就必须使用对应的事件初始化方法。

  事件类型	事件初始化方法
  UIEvents	event.initUIEvent
  MouseEvents	event.initMouseEvent
  MutationEvents	event.initMutationEvent
  HTMLEvents	event.initEvent
  Event	event.initEvent
  CustomEvent	event.initCustomEvent
  KeyboardEvent	event.initKeyEvent

• event.initEvent(type,true,true,data) 事件对象的initEvent方法，用来初始化事件对象，还能向事件对象添加属性。该方法的参数必须是一个使用Document.createEvent()生成的Event实例，而且必须在dispatchEvent方法之前调用。

  
      var event = document.createEvent('Event');
      event.initEvent('my-custom-event', true, true, {foo:'bar'});
      someElement.dispatchEvent(event);
  

  4个参数：
  type：事件名称，格式为字符串。
  bubbles：事件是否应该冒泡，格式为布尔值。可以使用event.bubbles属性读取它的值。
  cancelable：事件是否能被取消，格式为布尔值。可以使用event.cancelable属性读取它的值。
  option：为事件对象指定额外的属性。
• UIEvent 参考资料

[-] 事件对象

• new Event(type[,option]) 参考资料
  事件发生以后，会生成一个事件对象，作为参数传给监听函数。浏览器原生提供一个Event对象，所有的事件都是这个对象的实例，或者说继承了Event.prototype对象。Event对象本身就是一个构造函数，可以用来生成新的实例。

  ---

  bubbles：布尔值，可选，默认为false，表示事件对象是否冒泡。
  cancelable：布尔值，可选，默认为false，表示事件是否可以被取消。
  

  
  var ev = new Event(
    'look',
    {
      'bubbles': true,
      'cancelable': false
    }
  );
  document.dispatchEvent(ev);
  

  IE8及以下版本，事件对象不作为参数传递，而是通过window对象的event属性读取，并且事件对象的target属性叫做srcElement属性。所以，以前获取事件信息，往往要写成下面这样。

  
  function myEventHandler(event) {
    var actualEvent = event || window.event;
    var actualTarget = actualEvent.target || actualEvent.srcElement;
    // ...
  }
  

• e.type 返回当前 Event 对象表示的事件的名称
• e.target 返回触发此事件的元素（事件的目标节点）
• e.currentTarget 返回其事件监听器触发该事件的元素,不一定是点击的元素,是最终监听的元素
• e.bubbles 返回布尔值，指示事件是否是起泡事件类型
• e.cancelable 返回布尔值，指示事件是否可拥可取消的默认动作
• e.defaultPrevented 返回一个布尔值，表示该事件是否调用过preventDefault方法
• e.timeStamp 返回事件生成的日期和时间
  该属性返回的是一个高精度时间戳，也就是说，毫秒之后还带三位小数，精确到微秒。并且，这个值不再从Unix纪元开始计算，而是从PerformanceTiming.navigationStart开始计算，即表示距离用户导航至该网页的时间。如果想将这个值转为Unix纪元时间戳，就要计算event.timeStamp + performance.timing.navigationStart。
• e.isTrusted 返回一个布尔值，表示该事件是否为真实用户触发。
• e.eventPhase 返回事件传播的当前阶段
  0：事件没有发生
  1：从window对象传导到目标节点，称为“捕获阶段”（capture phase）。
  2：在目标节点上触发，称为“目标阶段”（target phase）。
  3：从目标节点传导回window对象，称为“冒泡阶段”（bubbling phase）。
• e.preventDefault() 通知浏览器不要执行与事件关联的默认动作
• e.stopPropagation() 阻止冒泡
• e.stopImmediatePropagation() stopPropagation方法只会阻止当前监听函数的传播，不会阻止节点上的其他click事件的监听函数。如果想要不再触发那些监听函数，可以使用stopImmediatePropagation方法。

[-] 鼠标事件类型

• click 点击事件
  鼠标左键/中间：onmousedown -> onmouseup -> onclick
  鼠标右键：onmousedonw -> onmouseup -> oncontextmenu
• dbclick 双击事件
• mousedown 鼠标按下
• mouseup 鼠标按键被松开
• contextmenu 在用户点击鼠标右键打开上下文菜单时触发
• mouseover 鼠标移到某元素之上，支持冒泡
• mouseout 鼠标从某元素移开，支持冒泡
• mouseenter 鼠标移到某元素之上，不支持冒泡，不可取消
• mouseleave 鼠标从某元素移开，不支持冒泡，不可取消
• mousemove 鼠标被移动

[-] 鼠标事件对象

• new MouseEvent(typeArg, mouseEventInit) 鼠标事件，第一个参数是事件名称，第二个参数是一个事件初始化对象。 参考资料
• e.button 返回当事件被触发时，哪个鼠标按钮被点击
  -1没有按下
  0左键，1中键，2右键
  IE8及-：1左键，4中键，2右键
• e.buttons buttons属性返回一个3个比特位的值，表示同时按下了哪些键。它用来处理同时按下多个鼠标键的情况。

  ---

  1：二进制为001，表示按下左键。
  2：二进制为010，表示按下右键。
  4：二进制为100，表示按下中键或滚轮键。
• e.clientX/clientY 返回当事件被触发时，鼠标指针在浏览器中的水平/垂直坐标
• e.screenX/screenY 返回当事件被触发时，鼠标指针在屏幕中的水平/垂直坐标
• e.movementX/movementY 返回一个水平位移，单位为像素，表示当前位置与上一个mousemove事件之间的水平/垂直距离
• e.relatedTarget 返回事件的次要相关节点。对于那些没有次要相关节点的事件，该属性返回null。

  事件名称	target属性	relatedTarget属性
  focusin	接受焦点的节点	丧失焦点的节点
  focusout	丧失焦点的节点	接受焦点的节点
  mouseenter	将要进入的节点	将要离开的节点
  mouseleave	将要离开的节点	将要进入的节点
  mouseout	将要离开的节点	将要进入的节点
  mouseover	将要进入的节点	将要离开的节点
  dragenter	将要进入的节点	将要离开的节点
  dragexit	将要离开的节点	将要进入的节点

• e.detail 属性返回一个数值，表示事件的某种信息。具体含义与事件类型有关，对于鼠标事件，表示鼠标按键在某个位置按下的次数，比如对于dblclick事件，detail属性的值总是2。

[-] 滚轮事件

• wheel 该事件在鼠标滚轮在元素上下滚动时触发。
• new WheelEvent("syntheticWheel",option) 浏览器提供一个WheelEvent构造函数，可以用来生成滚轮事件的实例。它接受两个参数，第一个是事件名称，第二个是配置对象。
  该事件除了继承了MouseEvent、UIEvent、Event的属性，还有几个自己的属性。
• e.deltaX 返回一个数值，表示滚轮的水平滚动量。
• e.deltaY 返回一个数值，表示滚轮的垂直滚动量。
• e.deltaZ 返回一个数值，表示滚轮的Z轴滚动量。
• e.deltaMode 返回一个数值，表示滚动的单位，适用于上面三个属性。0表示像素，1表示行，2表示页。

[-] 键盘事件类型

• keydown 某个键盘按键被按下
• keypress 某个键盘按键被按下并松开
  onkeydown -> onkeypress -> onkeyup
  在所有浏览器中 onkeypress 事件不是适用于所有按键，如： ALT, CTRL, SHIFT, ESC

  ---

  如果用户一直按键不松开，就会连续触发键盘事件，触发的顺序如下
  (keydown -> keypress)*n ->keyup
• keyup 某个键盘按键被松开

[-] 键盘事件对象

• new KeyboardEvent(typeArg, KeyboardEventInit) 参考资料
• e.key 在按下按键时返回按键的标识符
  如果同时按下一个控制键和一个符号键，则返回符号键的键名。比如，按下Ctrl+a，则返回a。如果无法识别键名，则返回字符串Unidentified。
  Backspace，Tab，Enter，Shift，Control，Alt，CapsLock，Esc，Spacebar，PageUp，PageDown，End，Home，Left，Right，Up，Down，PrintScreen，Insert，Del，Win，F1～F12，NumLock，Scroll
• e.keyCode 返回按键事件触发的键的值的字符代码 参考资料
• e.altKey/ctrlKey/shiftKey/metaKey

  属性	返回值	描述
  altKey	true/false/1/0	返回当事件被触发时，"ALT" 是否被按下
  ctrlKey	true/false/1/0	返回当事件被触发时，"CTRL" 键是否被按下
  shiftKey	true/false/1/0	返回当事件被触发时，"SHIFT" 键是否被按下
  metaKey	true/false/1/0	Meta 键（Mac键盘是一个四瓣的小花，Windows键盘是Windows键）

[-] 进度事件

• new ProgressEvent 进度事件用来描述一个事件进展的过程，比如XMLHttpRequest对象发出的HTTP请求的过程、img、audio、video、style、link加载外部资源的过程。下载和上传都会发生进度事件。
  lengthComputable：
  返回一个布尔值，表示当前进度是否具有可计算的长度。如果为false，就表示当前进度无法测量。
  total：
  返回一个数值，表示当前进度的总长度。如果是通过HTTP下载某个资源，表示内容本身的长度，不含HTTP头部的长度。如果lengthComputable属性为false，则total属性就无法取得正确的值。
  loaded：
  返回一个数值，表示当前进度已经完成的数量。该属性除以total属性，就可以得到目前进度的百分比。
• abort 当进度事件被中止时触发。如果发生错误，导致进程中止，不会触发该事件。
• error 由于错误导致资源无法加载时触发
  包括img/input-type-img/object/script/style/body/frameset等
  不支持冒泡，不可取消
• load 进度成功结束时触发
  有时候，图片加载会在脚本运行之前就完成，尤其是当脚本放置在网页底部的时候，因此有可能使得load和error事件的监听函数根本不会被执行。所以，比较可靠的方式，是用complete属性先判断一下是否加载完成。
  

  
      function loaded() {
        // code after image loaded
      }
  
      if (image.complete) {
        loaded();
      } else {
        image.addEventListener('load', loaded);
      }
  

  由于DOM没有提供像complete属性那样的，判断是否发生加载错误的属性，所以error事件的监听函数最好放在img元素的HTML属性中，这样才能保证发生加载错误时百分之百会执行。

• loadstart 进度开始时触发
• loadend 进度停止时触发，发生顺序排在error事件\abort事件\load事件后面
• progress 当操作处于进度之中，由传输的数据块不断触发
• timeout 进度超过限时触发

[-] 文档事件

• DOMContentLoaded 页面解析完成（IE9+） 参考资料
  当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架de完成加载。

  ---

  DOM文档加载的步骤为:
  1. 解析HTML结构。
  2. 加载外部脚本和样式表文件。
  3. 解析并执行脚本代码。
  4. DOM树构建完成。//DOMContentLoaded
  5. 加载图片等外部文件。
  6. 页面加载完毕。//load

  ---

  注意，网页的JavaScript脚本是同步执行的，所以定义DOMContentLoaded事件的监听函数，应该放在所有脚本的最前面。否则脚本一旦发生堵塞，将推迟触发DOMContentLoaded事件。
  IE8及以下不支持
• readystatechange readystatechange事件发生在Document对象和XMLHttpRequest对象，当它们的readyState属性发生变化时触发。
  IE8不支持DOMContentLoaded事件，但是支持这个事件。因此，可以使用readystatechange事件，在低版本的IE中代替DOMContentLoaded事件。
• beforeunload 该事件在即将离开页面（刷新或关闭）时触发
  只要在该事件的回调函数中，调用了event.preventDefault()，或者event.returnValue属性的值是一个非空的值，就会自动跳出一个确认框，让用户确认是否关闭网页。如果用户点击“取消”按钮，网页就不会关闭。
  

  
      window.addEventListener('beforeunload', function (e) {
        var confirmationMessage = '确认关闭窗口？';
  
        e.returnValue = confirmationMessage;
        return confirmationMessage;
      });;
  

• load/error load事件在页面加载成功时触发，error事件在页面加载失败时触发。
  注意，页面从浏览器缓存加载，并不会触发load事件。
• pageshow/pagehide 该事件在用户访问页面时触发、离开当前网页跳转到另外一个页面时触发
  类似于 onload 事件，onload 事件在页面第一次加载时触发， onpageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发。第一次加载时，它的触发顺序排在load事件后面。

  ---

  e.persisted ? true/false
  为了查看页面是直接从服务器上载入还是从缓存中读取，你可以使用 PageTransitionEvent 对象的 属性来判断。 如果页面从浏览器的缓存中读取该属性返回 ture，否则返回 false。
  IE10及以下不支持
• scroll 当文档被滚动时发生的事件
  由于该事件会连续地大量触发，所以它的监听函数之中不应该有非常耗费计算的操作。推荐的做法是使用requestAnimationFrame或setTimeout控制该事件的触发频率，然后可以结合customEvent抛出一个新事件。
  

  
      (function() {
        var throttle = function(type, name, obj) {
          var obj = obj || window;
          var running = false;
          var func = function() {
            if (running) { return; }
            running = true;
            requestAnimationFrame(function() {
              obj.dispatchEvent(new CustomEvent(name));
              running = false;
            });
          };
          obj.addEventListener(type, func);
        };
  
        // 将scroll事件重定义为optimizedScroll事件
        throttle('scroll', 'optimizedScroll');
      })();
  
      window.addEventListener('optimizedScroll', function() {
        console.log("Resource conscious scroll callback!");
      });
  

• resize 窗口或框架被重新调整大小(window、body、frameset)
  该事件也会连续地大量触发，所以最好像上面的scroll事件一样，通过throttle函数控制事件触发频率。
• hashchange 该事件在当前 URL 的锚部分发生修改时触发
  e.oldURL 变化前URL
  e.newURL 变化后URL

  ---

  同源政策中iframe通讯的应用

[-] 焦点事件

• focus 对象获得焦点时发生，不支持冒泡
  通常用于 input, select, 和a.
  由于focus和blur事件不会冒泡，只能在捕获阶段触发，所以addEventListener方法的第三个参数需要设为true。
• blur 对象失去焦点时发生，不支持冒泡
  经常用于Javascript验证代码，一般用于表单输入框
• focusin 元素即将获取焦点时触发，支持冒泡，Firefox不支持
• focusout 元素即将失去焦点时触发，支持冒泡，Firefox不支持
• e.target 返回事件的目标节点
• e.relatedTarget 返回一个element节点

  事件类型	相关节点
  focusin	失去焦点的节点
  focusout	将要接受焦点的节点

[-] 表单事件

• change 表单元素的内容改变时触发
  域的内容改变时发生，也可用于单选框与复选框改变后触发的事件。
  常用于input, keygen, select, textarea。

  ---

  change事件与input事件的最大不同，就是不会连续触发，只有当全部修改完成时才会触发
  激活单选框（radio）或复选框（checkbox）时触发。
  用户提交时触发。比如，从下列列表（select）完成选择，在日期或文件输入框完成选择。
  当文本框或textarea元素的值发生改变，并且丧失焦点时触发。
• input 元素获取用户输入时触发
  该事件仅在input或textarea元素的值发生改变时触发，打开contenteditable属性的元素，只要值发生变化，也会触发input事件。。
  input事件的一个特点，就是会连续触发，比如用户每次按下一次按键，就会触发一次input事件。
  oninput事件在元素值发生变化是立即触发，onchange在元素失去焦点时触发
  IE8及以下不支持
• select 仅在“文本框”(input/textarea)中的文本被选中时发生
• reset 表单重置时触发
• submit 在表单提交时触发
  注意，submit事件的发生对象是form元素，而不是button元素（即使它的类型是submit），因为提交的是表单，而不是按钮。

[-] 剪贴板事件

• copy 用户拷贝元素上的内容时触发（包括img）
• cut 用户剪切元素内容时触发
  对于不可编辑的元素，除非设置contenteditable 为 "true"
• paste 用户粘贴元素内容时触发
  对于不可编辑的元素，除非设置contenteditable 为 "true"
• e.clipboardData 该属性存放剪贴的数据,只读属性

[-] 动画事件

• animationstart css动画开始时触发
  webkitAnimationStart / mozAnimationStart
• animationiteration css动画重复播放时触发
  webkitAnimationInteration / mozAnimationInteration
• animationend css动画结束时触发
  webkitAnimationEnd / mozAnimationEnd
• transitionend css完成过渡后触发
  如果过渡在完成前移除，例如 CSS transition-property 属性被移除，过渡事件将不被触发
  webkitTransitionEnd / mozTransitionEnd / oTransitionEnd

[-] 其它事件

• message 该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发
• toggle 该事件在用户打开或关闭
  元素时触发
• more..

[-] 窗口

• window.print() 打印当前窗口内容
• window.open([url],[pos],[specs]) 打开一个新浏览器窗口或查找一个已命名的窗口。
  url:打开指定的页面的URL，如果没有指定URL，打开与新的空白窗口。
  name:指定target属性或窗口的名称，_blank/_parent/_self/_top/$name
  specs:指定尺寸是显示模式等。
  返回值：新创建的窗口
  参考资料
• window.close() 关于浏览器窗口
• window.opener 返回对创建此窗口的窗口的引用
• window.focus() 激活指定当前窗口，使其获得焦点

[-] 框架

• window.name 用于设置当前浏览器窗口的名字,当浏览器窗口关闭后，所保存的值就会消失
• window.frames 返回一个类似数组的对象，成员为页面内所有框架窗口，包括frame元素和iframe元素。window.frames[0]表示页面中第一个框架窗口。
• window.length 返回在当前窗口中frames的数量（包括iframes）
• window.parent 返回父窗口对象。
• window.self 返回对当前窗口的引用。
• window.top 返回当前窗口的最顶层浏览器窗口
  可通过window.top!=window.self判断在iframe中

[-] 弹窗

• alert('msg') 显示带有一段消息和一个确认按钮的警告框
• confirm('msg') 显示一个带有指定消息和确认及取消按钮的对话框
  点击确定返回true，否则返回false。
• prompt('msg',[txt]) 显示可提示用户进行输入的对话框
  txt为默认填写的内容，可选。
  返回用户输入的字符串。

[-] Navigator

• navigator.appVersion 返回浏览器的平台和版本信息
• navigator.userAgent 返回由客户机发送服务器的user-agent 头部的值
• navigator.platform 返回运行浏览器的操作系统平台
  Win32
• navigator.plugins 返回一个类似数组的对象，成员是浏览器安装的插件，比如Flash、ActiveX等。
• navigator.geolocation 返回一个Geolocation对象，包含用户地理位置的信息。

[-] Location

• location.href 返回完整的url
• location.hash 返回一个url的锚部分：#hash
• location.search 返回一个url的查询部分：?x=search
• location.pathname 返回url路径（除去域名协议部分）
• location.hostname 返回url的主机名
  www.xxx.com
• location.port 返回url服务器使用的端口
• location.protocol 返回一个url协议
  http:
• location.reload([true]) 重新载入当前文档。当设置true时，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档
• location.replace(url) 用新的文档替换当前文档
• location.assign(url) 载入一个新的文档

[-] 渲染

• window.requestAnimationFrame(fn) 一般浏览器是每秒60帧，即显示频率是16.7ms，这也是为何setTimeout的定时器值推荐最小使用16.7ms的原因（16.7 = 1000 / 60, 即每秒60帧）。
  参考资料 | 浏览器渲染原理

  
      (function() {
          var lastTime = 0;
          var vendors = ['webkit', 'moz'];
          for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
              window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
              window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||    // name has changed in Webkit
                                            window[vendors[x] + 'CancelRequestAnimationFrame'];
          }
  
          if (!window.requestAnimationFrame) {
              window.requestAnimationFrame = function(callback, element) {
                  var currTime = new Date().getTime();
                  var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
                  var id = window.setTimeout(function() {
                      callback(currTime + timeToCall);
                  }, timeToCall);
                  lastTime = currTime + timeToCall;
                  return id;
              };
          }
          if (!window.cancelAnimationFrame) {
              window.cancelAnimationFrame = function(id) {
                  clearTimeout(id);
              };
          }
      }());
  

[-] Cookie

• navigator.cookieEnabled 返回一个布尔值，表示浏览器是否打开 Cookie 功能。
• document.cookie Cookie 的值必须写成key=value的形式。
  注意，等号两边不能有空格。
  另外，写入 Cookie 的时候，必须对分号、逗号和空格进行转义（它们都不允许作为 Cookie 的值），这可以用encodeURIComponent方法达到。
  document.cookie一次只能写入一个 Cookie，而且写入并不是覆盖，而是添加，读取的时候一次性读取全部。
  删除一个 Cookie 的唯一方法是设置其expires为一个过去的日期。

  ---

  expires : 指定cookie过期时间，格式采用Date.toUTCString()的格式
  domain : 指定cookie所在的域名
  path : 用来指定路径，必须是绝对路径（比如/、/mydir），如果未指定，默认为请求该 Cookie 的网页路径。
  secure : 指定Cookie只能在加密协议HTTPS下发送到服务器
  max-age : 指定Cookie有效期，比如60 * 60 * 24 * 365（即一年31536e3秒）
  HttpOnly : 设置该Cookie不能被JavaScript读取
  
• document.domain Cookie 是服务器写入浏览器的一小段信息，只有同源的网页才能共享。但是，两个网页一级域名相同，只是二级域名不同，浏览器允许通过设置document.domain共享 Cookie。同样适应于iframe通信获取DOM。
• js-cookie

[-]Info

• !doctype html HTML5
  
  HTML4无框架
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  HTML4有框架
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
• lang 简体中文 html lang="zh-cmn-Hans"
  繁体中文 html lang="zh-cmn-Hant"
  参考资料
• title标题
• charset HTML5
  ">
  HTML4
  ">
• base 定义页面中所有链接的默认地址或默认目标。
  注释：如果使用了base标签，则必须具备 href 属性或者 target 属性或者两个属性都具备。

[-]Name

• (SEO)

  name	content
  author	作者
  description	描述
  keywords	关键词
  generator	创建者/程序
  copyright	版权信息
  revised	页面的最新版本 ( David, 2008/8/8/ )

• viewport ">
  width viewport 宽度(数值/device-width)
  height viewport 高度(数值/device-height)
  initial-scale 初始缩放比例
  maximum-scale 最大缩放比例
  minimum-scale 最小缩放比例
  user-scalable 是否允许用户缩放(yes/no)
  minimal-ui 在页面加载时最小化上下状态栏(iOS7.1)
• robots "> 设定为all：文件将被检索，且页面上的链接可以被查询；
  设定为none：文件将不被检索，且页面上的链接不可以被查询；
  设定为index：文件将被检索；
  设定为follow：页面上的链接可以被查询；
  设定为noindex：文件将不被检索，但页面上的链接可以被查询；
  设定为nofollow：文件将不被检索，页面上的链接可以被查询。
  参考资料
• google
  设置搜索引擎的检索，仅对google有效
  告诉 Google 不显示网站链接的搜索框
  告诉 Google 不提供此页面的翻译
  参考资料

[-]http-equiv

• X-UA-Compatible

  
                          
                          //强制使用IE最高版本及谷歌内核
  
                          
                          //360安全浏览器默认使用极速模式渲染
                      

  
  360浏览器内核控制 Meta 标签说明文档
• Cache-Control不允许百度转码
  旧写法：
  ">
  新写法：
  ">
• refresh ">
  定时让网页在指定的时间n内，跳转到页面http://yourlink；
• windows-target ">
  强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用
• Page-Enter "> Duration持续时间（单位：秒）
  Transition滤镜类型。表示使用哪种特效，取值为0-23:
  

  0 矩形缩小	1矩形扩大	2 圆形缩小	3 圆形扩大	4 下到上刷新	5 上到下刷新
  6 左到右刷新	7 右到左刷新	8 竖百叶窗	9 横百叶窗	10 错位横百叶窗	11 错位竖百叶窗
  12 点扩散	13 左右到中间刷新	14 中间到左右刷新	15 中间到上下	16 上下到中间	17 右下到左上
  18 右上到左下	19 左上到右下	20 左下到右上	21 横条	22 竖条	23 以上22种随机选择一种

• expires "> 网页到期时间
• pragma "> 禁止缓存和脱机浏览
• set-cookie "> Cookie过期自动删除
• pics-label "> IE网页评级
• Content-Security-Policy

  <meta http-equiv="Content-Security-Policy" content="default-src 'self'">

  对外部资源加载的限制（允许控制从哪里加载资源）
  参考资料
• x-dns-prefetch-control
  通过设置为 “off” 完全退出 DNS 预取
  强制查询特定主机名 参考资料

[-]Link

• stylesheet 可配合条件注释或指定media媒体查询引入样式表
  

• icon 小ICON图标
  参考资料1 | 参考资料2
• dns-prefetch 提前域名解析
  参考资料1 | 参考资料2
• canonical
  有助于防止出现内容重复的问题
  参考资料

[-]Script

• script 可以写在body区域或底部,推荐放在底部加载

  ---

  type : 如果type属性的值，浏览器不认识，那么它不会执行其中的代码。
  integrity : 指定了外部脚本Hash签名，一旦有人改了这个脚本，导致签名不匹配，浏览器就会拒绝加载。

  ---

  defer : 延迟加载
  async : 异步加载
  一般来说，如果脚本之间没有依赖关系，就使用async属性，如果脚本之间有依赖关系，就使用defer属性。如果同时使用async和defer属性，后者不起作用，浏览器行为由async属性决定。
  参考资料
  
• noscript 禁用脚本提示
• IE9- IE9-支持HTML5
  IE9-支持媒体查询
  IE9-支持CSS3选择器
  modernizr

[+]Windows

• msapplication-TileColor Windows磁贴颜色

• msapplication-TileImage Windows磁贴图标

• msapplication-tap-highlight windows phone 点击无高光

[+]iOS

• apple-mobile-web-app-capable 启用 WebApp 全屏模式

• format-detection 禁止识别电话号码/邮件

• apple-itunes-app

• apple-touch-icon 触摸图标，大多数情况下一个180*180即可

[+]Other

• UC Browser

• QQ Browser

[-] Touch事件类型

• touchstart 用户接触触摸屏时触发
• touchend 用户不再接触触摸屏时（或者移出屏幕边缘时）触发
• touchmove 用户移动触摸点时触发
  如果触摸的半径、角度、力度发生变化，也会触发该事件
• touchcancel 当触点由于某些原因被中断时触发

[-] Touch对象

• new Touch() Touch对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。
• touch.identifier identifier属性表示Touch实例的独一无二的识别符。它在整个触摸过程中保持不变。
• touch.target target属性返回一个Element节点，代表触摸发生的那个节点。
• touch.screenX/screenY 触摸点相对于屏幕左上角的横坐标和纵坐标，与页面是否滚动无关。
• touch.client/clientY 表示触摸点相对于浏览器视口左上角的横坐标和纵坐标，与页面是否滚动无关。
• touch.pageX/pageY 表示触摸点相对于当前页面左上角的横坐标和纵坐标，包含了页面滚动带来的位移。
• touch.radiusX/radiusY/rotationAngle radiusX属性和radiusY属性，分别返回触摸点周围受到影响的椭圆范围的X轴和Y轴，单位为像素
  rotationAngle属性表示触摸区域的椭圆的旋转角度，单位为度数，在0到90度之间。
  上面这三个属性共同定义了用户与屏幕接触的区域，对于描述手指这一类非精确的触摸，很有帮助。指尖接触屏幕，触摸范围会形成一个椭圆，这三个属性就用来描述这个椭圆区域。
• touch.force force属性返回一个0到1之间的数值，表示触摸压力。0代表没有压力，1代表硬件所能识别的最大压力。

[-] TouchList对象

• TouchList TouchList对象是一个类似数组的对象，成员是与某个触摸事件相关的所有触摸点。比如，用户用三根手指触摸，产生的TouchList对象就有三个成员，每根手指对应一个Touch对象。
• touchList.length 返回touchList对象的成员数量
• touchList.indentified(id) 列表中标示符与指定值匹配的第一个Touch 对象会被返回
• touchList.item(index) 返回列表中以指定值作为索引的 Touch 对象

[-] TouchEvent对象

• new TouchEvent() TouchEvent对象继承Event对象和UIEvent对象，表示触摸引发的事件。
• touchEvent.type 触摸事件的类型
• touchEvent.touches 返回一个TouchList对象，当前屏幕上所有触摸点的集合列表
  参考资料
• touchEvent.targetTouches 返回一个TouchList对象，绑定事件的那个节点上的触摸点的集合列表
• touchEvent.changedTouches 返回一个TouchList对象，触发事件时改变的触摸点的集合
  对于touchstart事件，它代表被激活的触摸点；对于touchmove事件，代表发生变化的触摸点；对于touchend事件，代表消失的触摸点（即不再被触碰的点）
• touchEvent.altKey/ctrlKey/metaKey/shiftKey 返回一个布尔值，表示触摸的同时，是否按下某个键。

[-] 开源库

• hammer.js
• fastclick

[-] Drag事件类型

• drag 拖拉过程中，在被拖拉的节点上持续触发

  ---

  拖拉过程只触发以下这些拖拉事件，尽管鼠标在移动，但是鼠标事件不会触发。
  将文件从操作系统拖拉进浏览器，不会触发dragStart和dragend事件。
  dragenter和dragover事件的监听函数，用来指定可以放下（drop）拖拉的数据。由于网页的大部分区域不适合作为drop的目标节点，所以这两个事件的默认设置为当前节点不允许drop。如果想要在目标节点上drop拖拉的数据，首先必须阻止这两个事件的默认行为，或者取消这两个事件。
• dragstart 拖拉开始时在被拖拉的节点上触发
  该事件的target属性是被拖拉的节点。
  通常应该在这个事件的监听函数中，指定拖拉的数据。
• dragend 拖拉结束时（释放鼠标键或按下escape键）在被拖拉的节点上触发
  该事件的target属性是被拖拉的节点。
  它与dragstart事件，在同一个节点上触发。不管拖拉是否跨窗口，或者中途被取消，dragend事件总是会触发的。
• dragenter 拖拉进入当前节点时，在当前节点上触发
  该事件的target属性是当前节点。
  通常应该在这个事件的监听函数中，指定是否允许在当前节点放下（drop）拖拉的数据。如果当前节点没有该事件的监听函数，或者监听函数不执行任何操作，就意味着不允许在当前节点放下数据。在视觉上显示拖拉进入当前节点，也是在这个事件的监听函数中设置。
• dragover 拖拉到当前节点上方时，在当前节点上持续触发
  该事件的target属性是当前节点。
  该事件与dragenter事件基本类似，默认会重置当前的拖拉事件的效果（DataTransfer对象的dropEffect属性）为none，即不允许放下被拖拉的节点，所以如果允许在当前节点drop数据，通常会使用preventDefault方法，取消重置拖拉效果为none。
• dragleave 拖拉离开当前节点范围时，在当前节点上触发
  该事件的target属性是当前节点。
  在视觉上显示拖拉离开当前节点，就在这个事件的监听函数中设置。
• dragexit 当元素不再是拖动操作的选择目标时触发此事件
• drop 被拖拉的节点或选中的文本，释放到目标节点时，在目标节点上触发。
  注意，如果当前节点不允许drop，即使在该节点上方松开鼠标键，也不会触发该事件。如果用户按下Escape键，取消这个操作，也不会触发该事件。该事件的监听函数负责取出拖拉数据，并进行相关处理。

[-] Drag事件对象

• new DragEvent() 继承MouseEvent对象，因此也就继承了UIEvent和Event对象。 参考资料
  element节点默认不可拖拉，如果不取消拖拉事件或者阻止默认行为，就不可能在div节点上drop被拖拉的节点。
• dragEvent.DataTransfer 参考资料
  所有的拖拉事件都有一个dataTransfer属性，用来保存需要传递的数据。这个属性的值是一个DataTransfer对象。
  拖拉的数据保存两方面的数据：数据的种类（又称格式）和数据的值。数据的种类是一个MIME字符串，比如 text/plain或者image/jpeg，数据的值是一个字符串。

[-] DataTransfer对象

• dataTransfer.dropEffect dropEffect属性一般在dragenter和dragover事件的监听函数中设置

  值	描述
  copy	复制被拖拉的节点
  move	移动被拖拉的节点
  link	创建指向被拖拉的节点的链接
  none	无法放下被拖拉的节点

• dataTransfer.effectAllowed 设置本次拖拉中允许的效果

  值	描述
  copy	复制被拖拉的节点
  move	移动被拖拉的节点
  link	创建指向被拖拉的节点的链接
  copyLink	允许copy或link
  copyMove	允许copy或move
  linkMove	允许link或move
  all	允许所有效果
  uninitialized	默认值，等同于all
  none	无法放下被拖拉的节点

• dataTransfer.files files属性是一个FileList对象，包含一组本地文件，可以用来在拖拉操作中传送。如果本次拖拉不涉及文件，则属性为空的FileList对象。
• dataTransfer.types types属性是一个数组，保存每一次拖拉的数据格式，比如拖拉文件，则格式信息就为File。
• dataTransfer.setData(type,val) 设置事件所带有的指定类型的数据。它接受两个参数，第一个是数据类型，第二个是具体数据。
• dataTransfer.getData(type) 返回事件所带的指定类型的数据,通常是用setData方法添加的数据.
  如果指定类型的数据不存在，则返回空字符串。通常只有drop事件触发后，才能取出数据。如果取出另一个域名存放的数据，将会报错。
• dataTransfer.clearData(type) 删除事件所带的指定类型的数据。
  如果没有指定类型，则删除所有数据。如果指定类型不存在，则原数据不受影响。
• dataTransfer.setDragImage(img,x,y) 拖动过程中（dragstart事件触发后），浏览器会显示一张图片跟随鼠标一起移动，表示被拖动的节点。这张图片是自动创造的，通常显示为被拖动节点的外观，不需要自己动手设置。setDragImage方法可以用来自定义这张图片，它接受三个参数，第一个是img图片元素或者canvas元素，如果省略或为null则使用被拖动的节点的外观，第二个和第三个参数为鼠标相对于该图片左上角的横坐标和右坐标。

[-] 数据对象

• localStorage 保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。
• sessionStorage 保存的数据用于浏览器的一次会话，当会话结束（通常是该窗口关闭），数据被清空

[-] 数据操作

• storage.setItem('key','val') 存储数据
• storage.getItem('key') 读取数据
• storage.removeItem('key') 删除数据
• storage.clear() 清空数据
• storage.key(n) 获取索引的键名
• storage.length 数据长度

[-] 事件对象

• [event]storage 该事件在 Web Storage(HTML 5 Web 存储)更新时触发
  值得特别注意的是，该事件不在导致数据变化的当前页面触发。如果浏览器同时打开一个域名下面的多个页面，当其中的一个页面改变sessionStorage或localStorage的数据时，其他所有页面的storage事件会被触发，而原始页面并不触发storage事件。可以通过这种机制，实现多个窗口之间的通信。所有浏览器之中，只有IE浏览器除外，它会在所有页面触发storage事件。
• e.key 发生变化的键名
• e.oldValue 更新前的值。如果该键为新增加，则这个属性为null。
• e.newValue 更新后的值。如果该键被删除，则这个属性为null。
• e.url 原始触发storage事件的那个网页的网址。

[-] 数据库事件

• indexedDB 1.键值对存储。
  2.异步
  3.支持事务
  4.同域限制
  5.存储空间大
  6.支持二进制存储
  参考资料
• indexedDB.open('name',[ver]) 打开数据库（ver>=1）。返回一个对象IDBOpenDBRequest
  var openRequest = indexedDB.open("test",1);
• open.onupgradeneeded 第一次打开该数据库，或者数据库版本发生变化
• open.onsuccess 打开成功
• open.error 打开失败
• open.blocked 上一次的数据库连接还未关闭
• e.target.result 打开的IndexedDB数据库
  当成功时，等价于 open.result

[-] 数据库实例

• db.objectStoreNames.contains('store') 检查数据库是否包含某个“对象仓库”
• db.createObjectStore('store',[option]) 创建存放数据的“对象仓库”（object store）
  如果该对象仓库已经存在，就会抛出一个错误。
  keyPath : 指定属性作为键名
  autoIncrement : 使用自动递增的整数作为键名 1++
• db.transaction(['store'],'readwrite') 创建一个数据库事务。向数据库添加数据之前，必须先创建数据库事务。
  第一个参数是一个数组，里面是所涉及的对象仓库，通常是只有一个；
  第二个参数是一个表示操作类型的字符串。目前，操作类型只有两种：readonly（只读）和readwrite（读写）。添加数据使用readwrite，读取数据使用readonly。
  transaction方法返回一个事务对象，该对象的objectStore方法用于获取指定的对象仓库。

  
      var t = db.transaction(["firstOS"],"readwrite");
      var store = t.objectStore("firstOS");
  

[-] 事务对象

• tsc.objectStore('store') 获取指定的对象仓库
• tsc.onabort 事务中断
• tsc.complete 事务完成
• tsc.error 事务出错

[-] 对象仓库

• store.add(value,key) add方法的第一个参数是所要添加的数据，第二个参数是这条数据对应的键名（key），上面代码将对象o的键名设为1。如果在创建数据仓库时，对键名做了设置，这里也可以不指定键名。

  ---

  add方法是异步的，有自己的success和error事件，可以对这两个事件指定回调函数。
  

  
      var request = store.add(o,1);
  
      request.onerror = function(e) {
           console.log("Error",e.target.error.name);
          // error handler
      }
  
      request.onsuccess = function(e) {
          console.log("数据添加成功！");
      }
  

• store.get(key) 读取数据使用get方法，它的参数是数据的键名。
  get方法也是异步的，会触发自己的success和error事件，可以对它们指定回调函数。
• store.put(value,key) 更新记录
• store.delete(key) 删除记录
  delete也是一个异步操作，可以为它指定回调函数
• store.openCursor() 遍历数据
  openCursor方法也是异步的，有自己的success和error事件，可以对它们指定回调函数。
• store.createIndex(index,key,option) 创建索引
  createIndex方法接受三个参数，第一个是索引名称，第二个是建立索引的属性名，第三个是参数对象，用来设置索引特性。
• store.index(index) 从对象仓库返回指定的索引

[-] Web SQL

• openDatabase 使用现有的数据库或者新建的数据库创建一个数据库对象
  参数：数据库名称、版本号、描述文本、数据库大小、创建回调
  var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
  创建回调会在创建数据库后被调用
• db.transaction(fn) 控制一个事务，以及基于这种情况执行提交或者回滚
  参考资料
• executeSql(sql) 执行实际的 SQL 查询

[-] 实例属性

• new WebSocket(url) url格式为ws://path:80
• ws.readyState 返回实例对象的当前状态
  CONNECTING：值为0，表示正在连接。
  OPEN：值为1，表示连接成功，可以通信了。
  CLOSING：值为2，表示连接正在关闭。
  CLOSED：值为3，表示连接已经关闭，或者打开连接失败。
  
• ws.bufferedAmount 表示还有多少字节的二进制数据没有发送出去。它可以用来判断发送是否结束。
• ws.send(data) 实例对象的send()方法用于向服务器发送数据
• socket.io

[-] 相关事件

• ws.onopen(fn) 指定连接成功后的回调函数
  如果要指定多个回调函数，可以使用addEventListener方法。
• ws.onclose(fn) 指定连接关闭后的回调函数
• ws.onmessage(fn) 指定收到服务器数据后的回调函数
• ws.onerror(fn) 用于指定报错时的回调函数

[-] 文件

• new File() 通常情况下， File 对象是来自用户在一个input元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的 DataTransfer 对象，或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。
• file.lastModified 返回当前 File 对象所引用文件最后修改时间， 自 1970年1月1日0:00 以来的毫秒数。
• file.name 返回当前 File 对象所引用文件的名字
• file.size 返回文件的大小
• file.type 返回文件的MIME类型
• fileReader
• MIME类型

[-] performance.timing对象

• performance.timing 参考资料

  
      var t = performance.timing;
      var pageloadtime = t.loadEventStart - t.navigationStart; //页面加载的耗时
      var dns = t.domainLookupEnd - t.domainLookupStart; //域名解析的耗时
      var tcp = t.connectEnd - t.connectStart; //TCP连接的耗时
      var ttfb = t.responseStart - t.navigationStart; //读取页面第一个字节之前的耗时
  

• t.navigationStart 前浏览器窗口的前一个网页关闭，发生unload事件时的Unix毫秒时间戳。如果没有前一个网页，则等于fetchStart属性。
• t.unloadEventStart 如果前一个网页与当前网页属于同一个域名，则返回前一个网页的unload事件发生时的Unix毫秒时间戳。如果没有前一个网页，或者之前的网页跳转不是在同一个域名内，则返回值为0。
• t.unloadEventEnd 如果前一个网页与当前网页属于同一个域名，则返回前一个网页unload事件的回调函数结束时的Unix毫秒时间戳。如果没有前一个网页，或者之前的网页跳转不是在同一个域名内，则返回值为0。
• t.redirectStart 返回第一个HTTP跳转开始时的Unix毫秒时间戳。如果没有跳转，或者不是同一个域名内部的跳转，则返回值为0。
• t.redirectEnd 回最后一个HTTP跳转结束时（即跳转回应的最后一个字节接受完成时）的Unix毫秒时间戳。如果没有跳转，或者不是同一个域名内部的跳转，则返回值为0。
• t.fetchStart 返回浏览器准备使用HTTP请求读取文档时的Unix毫秒时间戳。该事件在网页查询本地缓存之前发生。
• t.domainLookupStart 回域名查询开始时的Unix毫秒时间戳。如果使用持久连接，或者信息是从本地缓存获取的，则返回值等同于fetchStart属性的值。
• t.domainLookupEnd 返回域名查询结束时的Unix毫秒时间戳。如果使用持久连接，或者信息是从本地缓存获取的，则返回值等同于fetchStart属性的值。
• t.connectStart 返回HTTP请求开始向服务器发送时的Unix毫秒时间戳。如果使用持久连接（persistent connection），则返回值等同于fetchStart属性的值。
• t.connectEnd 回浏览器与服务器之间的连接建立时的Unix毫秒时间戳。如果建立的是持久连接，则返回值等同于fetchStart属性的值。连接建立指的是所有握手和认证过程全部结束。
• t.secureConnectionStart 返回浏览器与服务器开始安全链接的握手时的Unix毫秒时间戳。如果当前网页不要求安全连接，则返回0。
• t.requestStart 返回浏览器向服务器发出HTTP请求时（或开始读取本地缓存时）的Unix毫秒时间戳。
• t.responseStart 返回浏览器从服务器收到（或从本地缓存读取）第一个字节时的Unix毫秒时间戳。
• t.responseEnd 回浏览器从服务器收到（或从本地缓存读取）最后一个字节时（如果在此之前HTTP连接已经关闭，则返回关闭时）的Unix毫秒时间戳
• t.domLoading 返回当前网页DOM结构开始解析时（即Document.readyState属性变为“loading”、相应的readystatechange事件触发时）的Unix毫秒时间戳。
• t.domInteractive 返回当前网页DOM结构结束解析、开始加载内嵌资源时（即Document.readyState属性变为“interactive”、相应的readystatechange事件触发时）的Unix毫秒时间戳。
• t.domContentLoadedEventStart 返回当前网页DOMContentLoaded事件发生时（即DOM结构解析完毕、所有脚本开始运行时）的Unix毫秒时间戳。
• t.domContentLoadedEventEnd 返回当前网页所有需要执行的脚本执行完成时的Unix毫秒时间戳。
• t.domComplete 返回当前网页DOM结构生成时（即Document.readyState属性变为“complete”，以及相应的readystatechange事件发生时）的Unix毫秒时间戳。
• t.loadEventStart 返回当前网页load事件的回调函数开始时的Unix毫秒时间戳。如果该事件还没有发生，返回0。
• t.loadEventEnd 返回当前网页load事件的回调函数运行结束时的Unix毫秒时间戳。如果该事件还没有发生，返回0。

[-] 相关方法

• performance.now() 返回当前网页自从performance.timing.navigationStart到当前时间之间的微秒数（毫秒的千分之一）。也就是说，它的精度可以达到100万分之一秒。
  可以通过两次调用performance.now方法，可以得到间隔的准确时间，用来衡量某种操作的耗时
• performance.mark(name) 为相应的视点做标记
• performance.clearMarks([name]) 用于清除标记，如果不加参数，就表示清除所有标记
• performance.getEntries()[n] 浏览器获取网页时，会对网页中每一个对象（脚本文件、样式表、图片文件等等）发出一个HTTP请求。performance.getEntries方法以数组形式，返回这些请求的时间统计信息，有多少个请求，返回数组就会有多少个成员。

[-] 用户行为

• performance.navigation 除了时间信息，performance还可以提供一些用户行为信息，主要都存放在performance.navigation对象上面。
• pn.type 该属性返回一个整数值，表示网页的加载来源，可能有以下4种情况： 0：网页通过点击链接、地址栏输入、表单提交、脚本操作等方式加载，相当于常数performance.navigation.TYPE_NAVIGATENEXT。
  1：网页通过“重新加载”按钮或者location.reload()方法加载，相当于常数performance.navigation.TYPE_RELOAD。
  2：网页通过“前进”或“后退”按钮加载，相当于常数performance.navigation.TYPE_BACK_FORWARD。
  255：任何其他来源的加载，相当于常数performance.navigation.TYPE_UNDEFINED。
• pn.redirectCount 该属性表示当前网页经过了多少次重定向跳转。

[-] 核心

• ele.getContext('2d') 获得渲染上下文和它的绘画功能
• ctx.save() 保存当前环境的状态
  参考资料
• ctx.restore() 返回之前保存过的路径状态和属性

[+] 绘制-矩形

• ctx.fillRect(x,y,w,h) 绘制一个填充的矩形
  x,y起始坐标，w,y宽度和高度
• ctx.strokeRect(x,y,w,h) 绘制一个矩形的边框（镂空的矩形）
• ctx.clearRect(x,y,w,h) 清除指定矩形区域，让清除部分完全透明

[+] 绘制-路径

• ctx.beginPath() 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。

  ---

  图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤。
  1.创建路径起始点。
  2.你使用画图命令去画出路径。
  3.把路径封闭。
  4.通过描边或填充路径区域来渲染图形。
  
• ctx.closePath() 闭合路径之后图形绘制命令又重新指向到上下文中
• path.moveTo(x,y) 将笔触移动到指定的坐标x以及y上
• path.lineTo(x,y) 绘制一条从当前位置到指定x以及y位置的直线
• path.arc(x,y,radius,startAngle,endAngle,aniclockwise) x:圆心x坐标
  y:圆心y坐标
  radius:半径
  startAngle: 起始弧度(x基准)
  endAngle: 结束弧度
  anticlockwise:true(逆时针)/false(顺时针)

  ---

  弧度，不是度数。 radians(弧度)=(Math.PI/180)*degrees(角度)
  360度圆：2*Math.PI
  180度半圆：Math.PI
• path.arcTo(x1,y1,x2,y2,radius) 创建两切线之间的弧/曲线 参考资料
• path.quadraticCurveTo(cp1x,cp1y,x,y) 绘制二次贝塞尔曲线
  cp1x,cp1y为一个控制点，x,y为结束点
• path.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) 绘制三次贝塞尔曲线
  cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。
• ctx.stroke() 通过线条来绘制图形轮廓
• ctx.fill() 通过填充路径的内容区域生成实心的图形
  使用fill方法会自动闭合

[+] 绘制-Path2D

• new Path2D([path/svg]) 新建一个Path2D对象
  可能将某一个路径作为变量——创建一个它的副本，或者将一个包含SVG path数据的字符串作为变量
  var path = new Path2D(); // 空的Path对象
  var path = new Path2D(path); // 克隆Path对象
  var path = new Path2D(d); // 从SVG建立Path对象
• ctx.stroke(path2d) 通过线条来绘制图形轮廓
• ctx.fill(path2d) 通过填充路径的内容区域生成实心的图形
  使用fill方法会自动闭合
• path2d.rect(x,y,w,h) 不同于SVG，HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他的图形的绘制都至少需要生成一条路径。不过，我们拥有众多路径生成的方法让复杂图形的绘制成为了可能。
  此方法绘制的是空的矩形，需使用stroke或fill方法进行描边或填充。
  当该方法执行的时候，moveTo()方法自动设置坐标参数（0,0）。也就是说，当前笔触自动重置回默认坐标。

[+] 绘制-文本

• ctx.fillText(text,x,y,[maxw]) 在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的
• ctx.strokeText(text,x,y,[maxw]) 在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的
• ctx.measure('text') 将返回一个 TextMetrics对象的宽度、所在像素，这些体现文本特性的属性
  参考资料

[+] 样式-模式

• ctx.fillStyle 设置图形的填充样式
• ctx.strokeStyle 设置图形轮廓的样式
• ctx.fill(mode) nonzero : 全部填充，默认
  evenodd : 奇偶交替

[+] 样式-颜色

• ctx.fillStyle ctx.fillStyle = '#ff3399'
  样式设置必须在绘制之前
• ctx.globalAlpha 透明度 0-1

[+] 样式-图案

• ctx.creatPattern(img,type) img:Image对象引用或另一个canvas
  type: repeat / repeat-x / repeat-y / no-repeat
  

[+] 样式-渐变

• ctx.creatLinearGradient(x1,y1,x2,y2) 创建一个canvasGradient对象，并且赋给图形的 fillStyle 或 strokeStyle 属性

  ---

  线性渐变
  渐变的起点 (x1,y1) 与终点 (x2,y2)
  var lineargradient = ctx.createLinearGradient(0,0,150,150);
• ctx.creatRadialGradient(x1,y1,r1,x2,y2,r2) 径向渐变
  前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。
  var radialgradient = ctx.createRadialGradient(75,75,0,75,75,100);
• gradient.addColorStop(position,color) position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。例如，0.5 表示颜色会出现在正中间。
  color 参数必须是一个有效的 CSS 颜色值（如 #FFF， rgba(0,0,0,1)，等等）。

[+] 样式-阴影

• ctx.shadowOffsetX 设置或返回阴影与形状的水平距离
• ctx.shadowOffsetY 设置或返回阴影与形状的垂直距离
• ctx.shadowBlur 设置或返回用于阴影的模糊级别
• ctx.shadowColor 设置或返回用于阴影的颜色

[+] 样式-线条

• ctx.lineWidth 设置线条宽度
  位置 x.5 来获取精确1px效果参考资料
• ctx.lineCap 设置线条末端样式
  butt:平直
  round:圆角
  square:向线条的每个末端添加正方形线帽,端点处加上了等宽且高度为一半线宽的方块。
• ctx.lineJoin 设定线条与线条间接合处的样式
  miter:创建尖角
  round:创建圆角
  bevel:创建斜角
  参考资料
• ctx.miterLimit 斜接长度：限制当两条线相交时交接处最大长度；
  参考资料
• ctx.setLineDash([len,space]) 设置当前虚线样式
  参数接受一个数组，来指定线段与间隙的交替
• ctx.lineDashOffset 设置虚线样式的起始偏移量
• ctx.getLineDash() 返回一个包含当前虚线样式的数组

[+] 样式-文本

• ctx.font 字体属性 '10px Arial'
• ctx.textAlign 文本对齐方式
  start(默认), end, left, right , center
• ctx.textBaseline 基线对齐方式
  top, hanging, middle, alphabetic(默认), ideographic, bottom

[-] 图像

• ctx.drawImage(img,x,y) 渲染图片在canvas里
  image如果是svg图像必须在svg根指定元素的宽高
  x,y为目标在canvas里的起始坐标
• ctx.drawImage(img,x,y,w,h) 指定大小，缩放
• ctx.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh) 图片切片。
  前一组表示切片源位置和大小，后一组表示目标显示的位置和大小

[+] 变换

• ctx.translate(x,y) 移动
• ctx.rotate(angle) 以原点为中心旋转
  这个方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。
• ctx.scale(x,y) 缩放
  水平/垂直缩放,0~1,1~+
• ctx.transform(m11,m12,m21,m22,dx,dy) 替换绘图的当前转换矩阵
  m11：水平方向的缩放
  m12：水平方向的偏移
  m21：竖直方向的偏移
  m22：竖直方向的缩放
  dx：水平方向的移动
  dy：竖直方向的移动
  
• ctx.setTransform(m11,m12,m21,m22,dx,dy) 这个方法会将当前的变形矩阵重置为单位矩阵，然后用相同的参数调用 transform 方法。如果任意一个参数是无限大，那么变形矩阵也必须被标记为无限大，否则会抛出异常。从根本上来说，该方法是取消了当前变形,然后设置为指定的变形,一步完成。

[+] 合并与剪裁

• ctx.globalCompositeOperation 设置或返回如何将一个源（新的）图像绘制到目标（已有的）的图像上
  参考资料
• ctx.clip() 剪切

  
      function drawStar(ctx,r){
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(r,0);
        for (var i=0;i<9;i++){ ctx.rotate(math.pi="" 5);="" if(i%2="=" 0)="" {="" ctx.lineto((r="" 0.525731)*0.200811,0);="" }="" else="" ctx.lineto(r,0);="" ctx.closepath();="" ctx.fill();="" ctx.restore();="" <="" code="">

[+] ImageData对象

• ctx.creatImageData(w,h/img) ImageData对象中存储着canvas对象真实的像素数据，它包含以下几个只读属性:
  width：图片宽度，单位是像素
  height：图片高度，单位是像素
  data：Uint8ClampedArray类型的一维数组，包含着RGBA格式的整型数据，范围在0至255之间（包括255）。
• ctx.getImageData(x,y,w,h) 获得一个包含画布场景像素数据的ImageData对像
• ctx.putImageData(data,x,y) 对场景进行像素数据写入

[+] 其它更多

• canvas MDN参考资料
  可直接在canvas标签中的内容来提示不支持canvas时的显示内容。
  Canvas 的默认大小为300像素×150像素
  IE9+
• Chart.js
• echarts

[+] 其它更多

• WebGL
• three.js three.js | 中文教程

[-] 基础

• viewBox viewBox="x, y, width, height"
  可视区域
  当设定了固定尺寸，且尺寸大于可视区时，相当于放大了图片指定区域的效果

[+] 图形

• rect x=起始水平,y=起始垂直,width=宽度,height=高度,rx=圆角水平半径,ry=圆角垂直半径
• circle cx=圆心水平,cy=圆心垂直,r=半径
• ellipse cx=圆心水平,cy=圆心垂直,rx=椭圆水平半径,ry=椭圆垂直半径
• line x1=起始水平坐标,y1起始垂直坐标,x2=结束水平坐标,y2=结束垂直坐标
• polygon points="x1,y1 x2,y2 ...,xN,yN"
  定义多边形每个角的x和y坐标,每一组数x,y xn,yn每一组点之间用空格分开
• polyline points="x1,y1 x2,y2 ...,xN,yN"
  定义折线每个点的x和y坐标,每一组数x,y xn,yn每一组点之间用空格分开
• path d="M150 0 L75 200 L225 200 Z" 定义路径
  所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
  M = moveto （移动到）
  L = lineto （连线）
  H = horizontal lineto （水平连线）
  V = vertical lineto （垂直连线）
  C = curveto （曲线）
  S = smooth curveto （平滑曲线）
  Q = quadratic Bézier curve （二次贝塞尔曲线）
  =》M x0 y0 q x1 y1 x2 y2 小写代表相对,即后面的值表示正数+水平向下/负数-水平向上
  T = smooth quadratic Bézier curveto （平滑贝塞尔曲线）
  A = elliptical Arc （椭圆弧形）
  Z = closepath （闭合路径）
• path路径 d=". . ."

[+] 文本

• text 文字，基于基线对齐
• textPath 路径文字 textPath xlink:href="#id"
  超出路径的部分不会被渲染
  位移控制：
  水平：x(起始位置点),text-anchor:start/end/middle(文字的哪个点对齐文本x起始点),startOffset:%(文本以哪个开始作为与路径对齐的点),dx(切线起点)
  垂直：y(无),dy(法线位置,dx/dy会对后续字符一起影响)
• tspan text中多行文本,可拥有单独样式
• a xlink:href a标签可以添加到任意图形上
  链接文本,应包围在text外面,xlink:title提示

[+] 样式

• fill(#fff)填充颜色
• fill-opacity(0-1)填充透明度
• stroke(#f39)轮廓颜色
• stroke-opacity(0-1)轮廓线透明度
• stroke-width(8)轮廓宽度(可不要单位)
• stroke-linecap(round)轮廓笔触样式
  butt:结尾柄
  round:圆
  square:方
• stroke-dasharray虚线样式
  自定义虚线的结构
  stroke-dasharray="5,5"
  stroke-dasharray="20,10,5,5,5,10"
  SVG描边动画,设置stroke-dasharray: 1000;stroke-dashoffset: 1000;设置keyframe{ to{stroke-dashoffset: 0;}}
• transform变换是基于自身坐标系！矩阵等同线性代数矩阵

[+] 渐变

• linearGradient线性渐变
  id="id 属性可为渐变定义一个唯一的名称。引用必须"
  gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'.使用视图框或对象，以确定相对位置矢量点。 （默认为'objectBoundingBox）"
  gradientTransform="适用于渐变的转变"
  x1="渐变向量x启动点（默认0％）"
  y1="渐变向量y启动点（默认0％）"
  x2="渐变向量x的终点。 （默认100％）"
  y2="渐变向量y的终点。 （默认0％）"
  spreadMethod="'pad' or 'reflect' or 'repeat'"
  xlink:href="reference to another gradient whose attribute values are used as defaults and stops included. Recursive"
• radialGradient径向渐变
  gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. 使用视图框或对象以确定相对位置的矢量点。 （默认为'objectBoundingBox）"
  gradientTransform="适用于渐变的变换"
  cx="渐变的中心点（数字或％ - 50％是默认）"
  cy="渐变的中心点。 （默认50％）"
  r="渐变的半径。 （默认50％）"
  fx="渐变的焦点。 （默认0％）"
  fy="渐变的焦点。 （默认0％）"
  spreadMethod="'pad' or 'reflect' or 'repeat'"
  xlink:href="引用到另一个渐变，其属性值作为默认值。递归"

[+] 滤镜

• filter 所有互联网的SVG滤镜定义在defs元素中。defs元素定义短并含有特殊元素（如滤镜）定义。 filter标签用来定义SVG滤镜。filter标签使用必需的id属性来定义向图形应用哪个滤镜
• feBlend与图像相结合的滤镜
• feOffset过滤阴影
• feGaussianBlur高斯模糊
• feColorMatrix用于彩色滤光片转换
• feComponentTransfer
• feComposite
• feConvolveMatrix
• feDiffuseLighting
• feDisplacementMap
• feFlood
• feImage
• feMerge
• feMorphology
• feSpecularLightingfeTile
• feTurbulence
• feDistantLight用于照明过滤
• fePointLight用于照明过滤
• feSpotLight用于照明过滤

[+] 动画

• set 可以在特定时间之后修改某个属性值
  参考资料
• animate随时间动态改变属性
  attributeName="目标属性名称"
  from="起始值"
  to="结束值"
  dur="持续时间"
  repeatCount="动画时间将发生"
• animateColor定义随着时间的推移颜色转换
  by="相对偏移值"
  from="起始值"
  to="结束值"
• animateMotion使元素沿着动作路径移动
  calcMode="动画的插补模式。可以是'discrete', 'linear', 'paced', 'spline'"
  path="运动路径"
  keyPoints="沿运动路径的对象目前时间应移动多远"
  rotate="应用旋转变换"
  xlink:href="一个URI引用元素，它定义运动路径"
• animateTransform 动画上一个目标元素变换属性，从而使动画控制平移，缩放，旋转或倾斜
  by="相对偏移值"
  from="起始值"
  to="结束值"
  type="类型的转换其值是随时间变化。可以是 'translate', 'scale', 'rotate', 'skewX', 'skewY'"

[+] 其它

• preserveAspectRatio preserveAspectRatio="xMidYMid meet" 参考资料
  第1个值表示，viewBox如何与SVG viewport对齐，自由组合；
  xMin viewport和viewBox左边对齐
  xMid viewport和viewBox x轴中心对齐
  xMax viewport和viewBox右边对齐
  YMin viewport和viewBox上边缘对齐。注意Y是大写。
  YMid viewport和viewBox y轴中心点对齐。注意Y是大写。
  YMax viewport和viewBox下边缘对齐。注意Y是大写。
  第2个值表示，如何维持高宽比（如果有）。
  meet 保持纵横比缩放viewBox适应viewport
  slice 保持纵横比同时比例小的方向放大填满viewport
  none 扭曲纵横比以充分适应viewport
• g编组
• defs引用的元素容器
• pattern定义一个可用于平铺的图案,fill:url(#id)
• use svg画布铺满整个浏览器,需要设置html+body~font-size:0;line-height:0;
  use xlink:href="#id"
• clipPathclipPath定义一个用于剪裁的形状,clip-path="url(#id)"通过引用对某个图像进行剪裁
  单词！！【定义】clipPath 《=》 【引用】clip-path="url(#id)"
  被剪裁形状内的区间为显示区间！！
  css制作遮罩动画中,遮罩图形的尺寸不可操作,只有transform属性
• mask蒙版
  maskUnits="'userSpaceOnUse' or 'objectBoundingBox'.设定裁剪面是否是相对完整的视窗或对象（默认：'objectBoundingBox'）"
  maskContentUnits="第二个掩码相对对象的图形位置使用百分比'userSpaceOnUse'或'objectBoundingBox'（默认：'userSpaceOnUse'）"
  x="裁剪面掩码（默认值：-10％）"
  y="裁剪面掩码（默认值：-10％）"
  width="裁剪面掩码（默认是：120％）"
  height="裁剪面掩码（默认是：120％）"
• image 定义图像
  x="图像的左上角的x轴坐标"
  y="图像的左上角的y轴坐标"
  width="图像的宽度". 必须.
  height="图像的高度". 必须.
  xlink:href="图像的路径". 必须.

[+] 资料

• 参考手册
• SVG Element
• SVG Property
• SVG API
• snap.svg
• D3

[-] MathML

• MathML
• KaTeX

[-]

[-]

[-] WebRTC

• navigator.getUserMedia(option,sfn,efn) getUserMedia的第一个参数是一个对象，表示要获取哪些多媒体设备;
  第2个参数是一个回调函数，在获取多媒体设备成功时调用；
  第3个参数也是一个回调函数，在取多媒体设备失败时调用。
  参考资料
• MediaStreamTrack.getSources 如果本机有多个摄像头/麦克风，这时就需要使用MediaStreamTrack.getSources方法指定，到底使用哪一个摄像头/麦克风。
• SimpleWebRTC

[-] Application Cache

• Manifest

[-] Web Workers

• new Worker(file.js) 当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
  web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
• wk.terminate() 终止 web worker，并释放浏览器/计算机资源

[-] CORS

• CORS

[-] postMessage (窗口间)

• window.postMessage 跨文档通信 API（Cross-document messaging）。
• otherWindow.postMessage(msg,target) 给其他窗口发送消息。参考资料
• [event]message window.postMessage() 方法被调用时，会在所有页面脚本执行完毕之后（e.g., 在该方法之后设置的事件、之前设置的timeout 事件,etc.）向目标窗口派发一个 MessageEvent 消息。 该MessageEvent消息有四个属性需要注意： message 属性表示该message 的类型； data 属性为 window.postMessage 的第一个参数；origin 属性表示调用window.postMessage() 方法时调用页面的当前状态； source 属性记录调用 window.postMessage() 方法的窗口信息。
• e.source 发消息的窗口
• e.origin 消息发向的网址
• e.data 消息内容

[-] SSE (服务器->页面)

• new EventSource('url') EventSource 对象用于接收服务器发送事件通知，url规定发送更新的页面
• sse.onmessage(fn) e.data 接受的数据
  参考资料

[-] Notifications (页面->桌面)

• Notification.permission 用于读取用户给予的权限，它是一个只读属性，它有三种状态
  default：用户还没有做出任何许可，因此不会弹出通知。
  granted：用户明确同意接收通知。
  denied：用户明确拒绝接收通知。
• Notification.requestPermission() Notification.requestPermission方法用于让用户做出选择，到底是否接收通知。它的参数是一个回调函数，该函数可以接收用户授权状态作为参数。
• new Notification(title,[option]) Notification构造函数的title属性是必须的，用来指定通知的标题，格式为字符串。options属性是可选的，格式为一个对象，用来设定各种设置。

  ---

  body：通知内容，格式为字符串，用来进一步说明通知的目的。
  dir：文字方向，可能的值为 auto、ltr（从左到右）和rtl（从右到左），一般是继承浏览器的设置。
  lang：使用的语种，比如 en-US、zh-CN。
  tag：通知的 ID，格式为字符串。一组相同tag的通知，不会同时显示，只会在用户关闭前一个通知后，在原位置显示。
  icon：图标的 URL，用来显示在通知上。
• nt.onshow 通知显示给用户时触发该事件
• nt.onclick 用户点击通知时触发
• nt.onclose 用户关闭通知时触发
• nt.error 通知出错时触发（大多数发生在通知无法正确显示时）

[-] Permissions API

• navigator.permissions.query(option) 查询某个接口的许可情况

[-] Geolocation API

• navigator.getCurrentPosition(sfn,efn) 用来获取用户的地理位置
  参数为接受或拒绝的回调函数，回调函数的参数是一个event对象
• e.timestamp 返回获得位置信息的具体时间
• e.coords coords属性指向一个对象，包含了用户的位置信息
  coords.latitude：纬度
  coords.longitude：经度
  coords.accuracy：精度
  coords.altitude：海拔
  coords.altitudeAccuracy：海拔精度（单位：米）
  coords.heading：以360度表示的方向
  coords.speed：每秒的速度（单位：米）
  大多数桌面浏览器不提供上面列表的后四个值。
• e.code geoError的参数也是一个event对象。event.code属性表示错误类型，有四个值
  0：未知错误，浏览器没有提示出错的原因，相当于常量event.UNKNOWN_ERROR。
  1：用户拒绝授权，相当于常量event.PERMISSION_DENIED。
  2：没有得到位置，GPS或其他定位机制无法定位，相当于常量event.POSITION_UNAVAILABLE。
  3：超时，GPS没有在指定时间内返回结果，相当于常量event.TIMEOUT。
  
• navigator.geolocation.watchPosition(sfn,efn,option) 可以用来监听用户位置的持续改变
• navigator.geolocation.clearWatch(watchID) 取消监听

[-] Vibration API

• navigator.vibrate(time) 用于在浏览器中发出命令，使得设备振动
  vibrate方法可以使得设备振动，它的参数就是振动持续的毫秒数。
  vibrate方法还可以接受一个数组作为参数，表示振动的模式。偶数位置的数组成员表示振动的毫秒数，奇数位置的数组成员表示等待的毫秒数。
  vibrate是一个非阻塞式的操作，即手机振动的同时，JavaScript代码继续向下运行。要停止振动，只有将0毫秒或者一个空数组传入vibrate方法。

[-] Orientation API

• [event]deviceorientation 一旦设备的方向发生变化，会触发deviceorientation事件，可以对该事件指定回调函数。
• e.alpha 表示围绕z轴的旋转，从0到360度。当设备水平摆放时，顶部指向地球的北极，alpha此时为0。
• e.beta 表示围绕x轴的旋转，从-180度到180度。当设备水平摆放时，beta此时为0。
• e.gramma 表示围绕y轴的选择，从-90到90度。当设备水平摆放时，gramma此时为0。

[-] 基本

• *通配
• #idID
• .class样式
• tagName标签元素名
• selector1,...,selectorN逗号分隔多个

[-] 层级

• E F全后代
• E>F子辈
• E+F相邻
• E~F兄弟

[-] 序列

• :first第一个
• :last最后一个
• :eq(index)索引第N个
• :gt(index)索引大于
• :lt(index)索引小于
• :even索引偶数，实际奇数
• :odd索引奇数，实际偶数

[-] 条件

• :not(selector)不含,无需引号,not(div,a)或not(div a)
• :has(selector)含
• :focus获得焦点,有focus方法的,不只是表单
• :animated正在执行动画
• :hidden隐藏的
• :visible可见的
• :lang(zh-cn)语言指定

[-] 内容

• :root等价html
• :headerH1~H6
• :targetHASH目标元素
• :contains(text)包含文本
• :empty空/无子元素
• :parent有子元素

[-] 属性

• [att]含属性
• [att=val]为..
• [att!=val]不为..
• [att^=val]以..开始
• [att$=val]以..结束
• [att*=val]含..(str)
• [att1][attN]同时满足..

[+] 子元素

• :first-child第一个子元素
• :first-of-type父元素中第一个此类元素
• :last-child最后一个子元素
• :last-of-type父元素中最后一个此类元素
• :nth-child(n)第N个子元素
• :nth-of-type(n)父元素中第N个此类元素
• :nth-last-child(n)倒数第N个子元素
• :nth-last-of-type(n)父元素中倒数第N个此类元素
• :only-child唯一子元素
• :only-of-type唯一同类子元素

[+] 表单

• :input所有input
• :texttype为text
• :passwordtype为password
• :radiotype为radio
• :checkboxtype为checkbox
• :submittype为submit
• :imagetype为image
• :resettype为reset
• :buttontype为button
• :filetype为file
• :hiddentype为hidden

[-] 表单对象属性

• :enabled所有可用
• :disabled所有禁用
• :checked所有被多选/单选选中元素
• :selected所有被下拉选中元素

[-] 基本

• $(selector) 返回匹配的元素集合
  
  传入参数

  selector,[context]	选择器表达式,查找范围：返回选择器对象的引用对象 $('div.foo').click(function() { $('span', this).addClass('bar'); // 限定查找范围 });
  HttpTags,[props]	创建DOM元素,元素属性：返回包含了这些DOM元素引用的JQ对象 $("<div/>", { "class": "test", text: "Click me!", click: function(){ $(this).toggleClass("test"); } }).appendTo("body");
  element / elementArray	DOM 元素或 DOM元素数组： 返回DOM封装到 jQuery 对象 $('div.foo').click(function() { $(this).slideUp(); });
  object	普通 JavaScript 对象：封装成jQuery 对象并返回 // 定义一个普通 JavaScript 对象 var foo = {foo:'bar', hello:'world'}; // 封装成 jQuery 对象 var $foo = $(foo); // 绑定一个事件 $foo.on('custom', function (){ console.log('custom event was called'); }); // 触发这个事件 $foo.trigger('custom');
  callback	如果传入一个函数，则在 document 上绑定一个 ready 事件监听函数，当 DOM 结构加载完成时执行。 jQuery(function($) { // 你可以在这里继续使用$作为别名... });
  jQuery Object	如果传入一个 jQuery 对象，则创建该 jQuery 对象的一个副本并返回，副本与传入的jQuery 对象引用完全相同的 DOM 元素。
  空	返回一个空的jQuery对象。

  more info »
• .length(.size())jQuery 对象中元素的个数
• .index([sel])
  无参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。
  如果参数是一组DOM元素或者jQuery对象，那么返回值就是传递的元素相对于原先集合的位置。
  如果参数是一个选择器，那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素，则返回-1。
• .get(index)/[index]取得其中一个匹配的元素
• .each(fn[i,ele]) 静态方法 jQuery.each() 是一个通用的遍历迭代方法，用于无缝地遍历对象和数组。
  对于数组和含有 length 属性的类数组对象（如函数参数对象 arguments） ，该方法通过下标遍历，从 0 到 length-1 ；
  对于其他对象则通过属性名遍历（for-in） 。
  在遍历过程中，如果回调函数返回 false，则结束遍历。
  函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）
  返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。
  返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。
  .each() 方法用来让DOM循环结构更简单更不易出错。它会迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。更重要的是，回调函数是在当前DOM元素为上下文的语境中触发的。因此关键字 this 总是指向这个元素。
• .toArray() 把jQuery集合中所有DOM元素恢复成一个数组。
• jQuery.noConflict() more info »
  关于命名
  1.将 jQuery 库在 Base 库之前引入，那么“$”的所有权就归 Base 库所有，而 jQuery 可以直接用 jQuery 对象调用，或者创建一个“$$”符给 jQuery 使用。
  var $$ = jQuery; //创建一个$$的 jQuery 对象
  $(function () { //这是 Base 的$
  alert($('#box').ge(0)); //这是 Base 的$
  alert($$('#box').width()); //这是 jQuery 的$$
  });
  2.如果将 jQuery 库在 Base 库之后引入， 那么 “$” 的所有权就归 jQuery 库所有， 而 Base库将会冲突而失去作用。这里，jQuery 提供了一个方法：
  jQuery.noConflict(); //将$符所有权剔除
  var $$ = jQuery;
  $(function () {
  alert($('#box').ge(0));
  alert($$('#box').width());
  });
  3.继续内部使用$作为参数：
  jQuery.noConflict(); //将$符所有权剔除
  jQuery(function ($) {
  alert($('#box').ge(0));
  });

[-] 数据

• .date()在匹配元素上存储任意相关数据 或 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值
  more info »
• .removeDate() .removeData()方法允许我们移除用.data()绑定的值。
  当带name参数调用的时候，.removeData()
  将删除那个特有的值，当不带任何参数的时候，所有的值将被移除。
  从jQuery的内部.data() 缓存不影响任何在文档中的HTML5的data-属性，使用.removeAttr()可以移除这些属性。
  当使用.removeData("name")时，如果没有这个属性名字是在内部数据缓存，jQuery将试图在元素上找到一个 data-的属性。
  为了避免重复查询 data- 属性，将这个名称设置为无论是null 或 undefined的值(例如 .data("name", undefined))，而不是使用.removeData()。
  more info »

[-] 队列

• .queue([name],fn[next])无名称则为fx动画队列,返回第一个元素关联的函数队列或修改
• .dequeue([name])出队(移除)并执行元素函数队列的下一个函数（非动画函数需要手动调用dequeue）
• .delay(time,[name])延迟
• .clearQueue()移除队列

[-] 插件

• jQuery.extend(obj)ex
• jQuery.fn.extend(arg)ex

  
            ;(function($){
             $.fn.extend({
               'method':function(){
                 //some code
                 return this;
               }
             })
            })(jQuery);
            

  
  JQ插件中的this就是已经封装过的元素是JQ对象，在JQ插件内部进行JQ方法中的This是DOM元素需要自己再封装

[-] 数组/对象操作

• $.each(obj,fn[i,val]) 遍历执行对象/数组,回调函数i为数组索引index或对象属性name,val为原值
  不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。 回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。 如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。
  more info »
• $.map(obj,fn[val,i]) 遍历执行对象/数组,this为全局window对象,返回新的对象/数组
  more info »
• $.grep(arr,fn[ele,index]) 数组过滤,原始数组不受影响.回调函数ele为元素,index为索引
  more info »
• $.inArray(val,arr,fromi) 数组元素查找,类似indexOf,没有返回-1
  more info »
• $.merge(arr1,arr2) 数组合并
  第一个用于合并的数组，其中将会包含合并后的第二个数组的内容。
  第二个用于合并的数组，该数组不会被修改，其中的内容将会被合并到第一个数组中。
  more info »
• $.unique(arrDOM) 数组DOM重复元素删除
  排序数组，并移除任何重复的节点。 如果一个节点和已经在数组中的节点完全相同，那么它被认为是重复的; 两个不同的节点具有相同的属性是被认为不重复的.

[-] 测试操作

• $.type(data)判断数据类型
• $.isWindow(data)判断数据是否为 window 对象
• $.isNumeric(data)判断数据是否为数值
• $.isArray(obj) 判断是否为数组对象，是返回 true
• $.isFunction(obj) 判断是否为函数，是返回 true
• $.isEmptyObject(obj) 判断是否为空对象，是返回 true
• $.isPlainObjet(obj) 判断是否为纯粹对象，是返回 true
  通过 "{}" 或者 "new Object" 创建的
• $.contains(obj) 判断 DOM 节点是否含另一个 DOM 节点， 是返回 true

[-] 其他

• $.now()$.now()方法是表达式(new Date).getTime()返回数值的一个简写
• $.trim(str)等同字符串trim()方法,去掉前后空格
• $.noop一个空函数
  当你仅仅想要传递一个空函数的时候，就用他吧。
  这对一些插件作者很有用，当插件提供了一个可选的回调函数接口，那么如果调用的时候没有传递这个回调函数，就用jQuery.noop来代替执行。
• $.proxy(obj,fn)调整this指针
  more info »

[-] 属性

• attr({key,[val|fn]})attr('key') 获取第一个元素指定属性的值,如遍历获取则需each
  attr('key','value') 设置key的值为value
  attr('key',fn[index,old-value]) 回调参数:索引,原值
  attr({key1:'value1',key2:'value2'}) 设置多个属性的值,用逗号分隔
• removeAttr(key)removeAttr('key') 从每一个匹配的元素中删除某个属性
• prop({key,[true/false|fn]})prop('key') 获取匹配元素中第一个元素的属性
  prop('key',true/false) 设置每一个匹配元素的一个属性
  prop('key',fn[index,old-value]) 回调参数:索引,原值
  prop({key1:'value1',key2:'value2'})"
• removeProp(key)removeProp('key') 从每一个匹配的元素中删除某个属性

[-] CSS类

• addClass(class|fn)addClass('name') 添加一个样式
  addClass('name1 name2') 添加多个样式,空格分开
  addClass(fn[index,old-value]) 回调参数:索引,原样式名;返回一个或空格隔开的class名
• removeClass(class|fn)removeClass('name') 移除一个样式
  removeClass('name1 name2') 移除多个样式,空格分开
  removeClass(fn[index,old-value]) 回调参数:索引,原样式名;返回一个或空格隔开的class名
• toggleClass(class|fn[,sw])toggleClass('name') 元素如果存在（不存在）就删除（添加）一个类
  toggleClass('name',switch) 要切换的CSS类名,用于决定元素是否包含class的switch case值
  toggleClass(fn[index,old-value],switch) 回调参数:索引,原样式名;返回一个或空格隔开的class名

[-] HTML代码/文本/值

• html([text|fn])html() 无参数,返回元素集合中第一个元素的内容
  html('text') 设置所有选择器元素的内容
  html(fn[index,old-value]) 返回一个HTML字符串,回调参数:索引,原先的HTML值
  *限HTML/XHTML
• text([text|fn])text() 无参数,返回元素集合中第一个元素的内容
  text('text') 设置所有选择器元素的内容
  text(fn[index,old-value]) 返回字符串,回调参数:索引,原先的值
  *可用于XML
• val([val|fn|arr])val() 无参数,返回元素集合中第一个元素的值
  val('text') 设置所有选择器元素属性值
  val(fn[index,old-value]) 返回要设置的值,回调参数:索引,原先的值
  val('value') 设定一个select/checkbox的值
  val(['value1','value2']) 设定多选时的多个select/checkbox的值

[-] CSS

• css({key,[val|fn]})css('key') 获取第一个元素的样式值
  css('key','value') 设置每一个匹配元素一个指定的样式
  prop('key',fn[index,old-value]) 回调参数:索引,原值
  css({key1:'value1',key2:'value2'}) 设置每一个匹配元素多个指定的样式
  *坐标和尺寸注意加px单位,属性值加引号!
• jQuery.cssHooks

[-] 元素位置[!px]

• offset().l/toffset() 计算元素在视窗中的坐标,返回值对对象
  offset().left 获得元素视窗水平坐标
  offset().top 获得元素视窗垂直坐标
  *offset()值已包含scroll后实际视窗位置
• offset({top:y,left:x})offset({top:y,left:x}) 设置元素视窗坐标
  *计算的坐标以元素外围为起始点，包含padding和border，不包含margin
  *设置值对时不需要引号，且不带单位
• position().l/t [!arg]position() 获取相对父元素的偏移值对对象
  position().left 水平位移
  position().top 垂直位移
  *不能用于设置，只能获取，可通过获取后设置新的变量值赋值给css
  *计算的坐标以元素外围为起始点，包含padding和border，不包含margin
  *注意Body清空padding margin否则继承出问题
• scrollTop([y])获取/设置匹配元素相对滚动条垂直的偏移
  通过offset可获取元素位置,设置$(document).scrollTop(num)跳转至对应锚点
  
• scrollLeft([x]) 获取/设置匹配元素相对滚动条水平的偏移

[-] 指针位置

• e.pageX鼠标指针所在文档位置,已计算scroll
  event.screenX 原生JS:鼠标指针所在显示屏位置
  event.screenY 原生JS:鼠标指针所在显示屏位置

  ---

  
  event.clientX 原生JS:鼠标指针所在视窗位置,非文档位置
  计算文档位置：event.clientX+document.documentElement.scrollLeft || document.body.scrollLeft
  event.clientY 原生JS:鼠标指针所在视窗位置,非文档位置
  计算文档位置：event.clientY+document.documentElement.scrollTop || document.body.scrollTop

  ---

  
  clientWidth=document.documentElement.clientWidth|| document.body.clientWidth
  在页面上返回内容的可视宽度（不包括边框，边距或滚动条）
  clientHeight= document.documentElement.clientHeight|| document.body.clientHeight
  在页面上返回内容的可视高度（不包括边框，边距或滚动条）

  ---

  
  scrollWidth=document.documentElement.scrollWidth|| document.body.scrollWidth
  返回元素的整个宽度（包括带滚动条的隐蔽的地方）
  scrollHeight=document.documentElement.scrollHeight|| document.body.scrollHeight
  返回整个元素的高度（包括带滚动条的隐蔽的地方）
• e.pageY鼠标指针所在文档位置,已计算scroll

[+] 元素尺寸

• height([val|fn])height() 无参数,获取第一个元素的高度
  height(y) 设置所有元素的高度,无单位 height(fn[index,old-value]) 回调参数:索引,原值.返回一个数值
• width([val|fn])width() 无参数,获取第一个元素的宽度
  width(x) 设置所有元素的宽度,无单位 width(fn[index,old-value]) 回调参数:索引,原值.返回一个数值
• innerHeight([y])获取/设置内高，含padding，不含边框和margin
• innerWidth([x])获取/设置内宽，含padding，不含边框和margin
• outerHeight([y])获取/设置外高,含padding,border,margin
• outerWidth([x])获取/设置外宽,含padding,border,margin