中心考核

你学到的每一点东西都要重视起来，学到的每一点东西都要深究，学到的每一点东西都要记录下来，很整齐，很有规律的记录，并且时常回顾

github地址

基础题

1. 标签+文本+注释

2. html5语义化参考资料

   语义化存在的意义:
   结构清晰;
   具有良好的可读性;
   对屏幕阅读器等辅助工具友好;
   对搜索引擎友好;
   便于团队开发和维护;

   • 结构相关标签
   • 文本相关标签、、

3. DTD:DOCTYPE声明。DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。

4. 常用的meta标签githubgist是什么 常用的meta标签整理--一丝

5. 块级元素、行内元素

6. css定位和清除浮动：
   css定位机制：普通流，浮动，绝对定位
   清除浮动的方式:
   1.父元素设置 overflow：hidden
   2.父元素设置overflow：auto
   3.父元素也设置浮动

推荐清除浮动代码
//给高度塌陷的父元素加上 clearfix 类名
 .clearfix:before,
.clearfix:after {
       content: "";
       display: table;
       clear: both;
} ```
7. BFC:  
    - 触发BFC的机制：
            
            float 除了none以外的值 
             
            overflow 除了visible 以外的值（hidden，auto，scroll ） 
             
            display (table-cell，table-caption，inline-block) 
             
            position（absolute，fixed） 
             
            fieldset元素
    - BFC特性：
    
            1)块级格式化上下文会阻止外边距叠加
            2)块级格式化上下文不会重叠浮动元素
            3)块级格式化上下文通常可以包含浮动  
8. 左栏定宽，右栏宽度自适应 `padding-left:aside的宽度`，注意`文档流`
[参考资料：强大的负边距](http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html)
    - 负边距对普通文档流元素的影响

            ABC
            B(margin-left:-10px;)
            A没有动。B宽度没有改变。C向左移动10px。AB内容有重叠
                
    - 负边距可以增加元素的宽度
            子元素宽度超出父元素
            父元素设置负边距包括子元素
            父元素设置overflow：hidden
            父元素正常囊括子元素
    - 负边距对浮动元素的影响
            浮动元素“流”
            下面的也会跑到上面去，会折叠
            但里面文字会发生环绕
9. 圣杯布局

            
            
            
                
                
                
            
            
            
    
                  
    
                     
        
                          
        
                          
        
                          
    
                     
   
                  

            
            
            
10. js判断数据类型：
    `Object.prototype.toString.call(a).slice(8,-1)`  
    这行代码可以判断的js类型有：
    `Array/Boolean/String/Function/Object/RegExp/Null/Undefined/Date/Number`
11. 判断数组中最大的数：`Array.sort()`引申：array、string的相关一系列方法
12. 事件委托

            
            
            
                
                
                
            
            
                

                    
item1
                    
item2
                    
item3
 
                
   
                增加节点
                
            
            
 13. 变量提升，函数提升，闭包原理和作用
 14. this指向，改变this指向call(参数里面可以有包含的数组)apply(只能是逗号分隔的参数[array联想])
 15. 继承  [不要再使用new了](http://www.infoq.com/cn/articles/javascript-instantiation-and-inheritance)
 

         if(!Object.create){//object.create()是ES5新增方法
                Object.create= (function(){
                    function F(){}   //创建中介函数（bridge）
                    return function(obj) {
                        if(arguments.length !== 1) {
                            throw new Error("仅支持一个参数");
                        }
                        F.prototype = obj;   //原形绑定
                        return new F();      //返回实例
                    }
                })()
        //最终返回的结果，既是F的实例属性，享有F构造函数中的所有属性和方法(因为F构造函数为空，所以完全不用担心会有多余不想要的属性方法存在)，[[prototype]]又指向F.prototype,返回的结果是一个对象！！！
        }
        function Person(name, age) {
                this.name = name;
                this.age = age;
        }
        Person.prototype.walk = function() {//写到了prototype中，walk一定是想要共享的方法
                console.log("走路....");
        } 
        function Child(name, age, address) {
                Person.call(this, name, age);//这里继承了person构造函数中想要传递的一些属性
                this.address = address;
        }
        Child.prototype = Object.create(Person.prototype);//不要再使用new了！
        Child.prototype.talk = function() {
            console.log("说话ing.....")
        }
        //不用new的原因是因为你不想要Child继承Person构造函数中的所有属性和方法，而是想让他单独继承Person.prototype中共享的属性和方法。


##附加题
####移动端
0. 响应式页面的做法：媒体查询[@参考资料](http://blog.csdn.net/lee_magnum/article/details/12144187)，流体网格（%），flex模式
2. `box-sizing:   content-box | border-box`
    - 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 )
此属性表现为怪异模式下的盒模型。(会缩小本身的width，为了和原来设置的width保持一致)[具体详见css](http://css.doyoe.com/)
3. flex布局: 见笔记“felx学习笔记”
######Flex
> [学习资料：阮一峰语法篇](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)  
> [学习资料：阮一峰实例篇](http://www.ruanyifeng.com/blog/2015/07/flex-examples.html)  

任何元素都可以指定为flex布局
display：flex/inline-flex（display:-webkit-flex;webkit前缀）
设置为flex布局之后，子元素的float、clear、vertical-align属性失效
flex布局默认首行左对齐

flex容器，flex项目
水平的主轴（main axis）
垂直的交叉轴（cross axis）
主轴的开始位置（main start）
主轴的结束位置（main end）
交叉轴的开始位置（cross start）
交叉轴的结束位置（cross end）
单个项目占据的主轴空间（main size）
单个项目占据的交叉轴空间（cross size）

容器的属性
flex-direction(主轴的方向):row/row-reverse/column/column-reverse
flex-wrap(是否换行):nowrap/wrap/wrap-reverse
flex-flow:(flex-direction和flex-wrap的简写)
justify-content(项目在主轴上的对齐方式):flex-start/flex-end/center/space-between/space-around
align-items(项目在交叉轴上的对齐方式):flex-start/flex-end/center/baseline/stretch
align-content(多根轴线的对齐方式):flex-start/flex-end/center/space-between/space-around/stretch

项目的属性
order:整数（次序）
flex-grow:整数（放大比例）
flex-shrink：整数（缩小比例）
flex-basis:

flex属性:
flex-grow,flex-shrink,flex-basis的简写

align-self属性:
auto,flex-start,flex-end,center,baseline ```

4. rem是什么，作用，怎么用

参考资料，腾讯ISUX

- rem是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。  
- em（font size of the element）是指相对于父元素的字体大小的单位。  
- 在移动端的开发过程中，通常讲单位设置成rem，可以保证比例，针对不同的屏幕，可以进行媒体查询在最开始的时候设置html的font-size

5. 熟悉的移动端框架
6. css3动画GPU启动

Nodejs

1. V8内存分代机制
2. 创建一个绑定3000端口的http服务器，返回页面hello world，创建一个请求端，访问“127.0.0.1：3000”请求方式GET，打印出返回数据，相应状态，响应头
3. 利用cluster模块，简单实现负载均衡
4. 利用express完成简单的路由请求代码app.js，（地址：127.0.0.1/ 相应：返回GET或POST参数）
5. 利用mongoose创建一个PersonSchema，字段：name（String），年龄：age（Number，min：0 max：150），身份证号：“idCard”（String必填 获取方法getldCard）

游戏开发

1. js动画，window.requestAnimationFrame页面3s红变绿
2. 直径20px小球，页面中心为原点，55px为半径做2s一圈的无限圆周运动
3. canvas标签：windowToCanvas(x,y)判断鼠标在canvas中的坐标
4. 画1px得直线，填充环绕规则是什么
5. 判断两个小球是否碰撞