你学到的每一点东西都要重视起来，学到的每一点东西都要深究，学到的每一点东西都要记录下来，很整齐，很有规律的记录，并且时常回顾
基础题
-
标签+文本+注释
-
html5语义化参考资料
语义化存在的意义:
结构清晰;
具有良好的可读性;
对屏幕阅读器等辅助工具友好;
对搜索引擎友好;
便于团队开发和维护;- 结构相关标签
<header><nav><article><section><aside><footer> - 文本相关标签
<i>、<b>、<em>
- 结构相关标签
-
DTD:DOCTYPE声明。DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。
-
常用的meta标签githubgist是什么 常用的meta标签整理--一丝
-
块级元素、行内元素
-
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. 圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.main{
float: left;
width: 100%;
background-color: #00FFFF;
height: 100px;
}
.sub{
float: left;
width: 190px;
height: 100px;
margin-left: -100%;
background-color: #00FF00;
}
.extra{
float: left;
width: 190px;
height: 100px;
margin-left: -190px;
background-color: #FF0000;
}
#hd{
width: 100%;
height: 100px;
background-color: #FFFF00;
}
</style>
</head>
<body>
<div id="page">
<div id="hd"></div>
<div id="bd">
<div class="main"></div>
<div class="sub"></div>
<div class="extra"></div>
</div>
<div id="ft"></div>
</div>
</body>
</html>
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. 事件委托
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
li{
cursor: pointer;
}
</style>
</head>
<body>
<div class="item">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</div>
<button>增加节点</button>
<script type="text/javascript">
var item = document.getElementsByClassName('item')[0],
li = document.getElementsByTagName('li'),
btn = document.getElementsByTagName('button')[0];
item.addEventListener('click',function(e){
if(e.target && e.target.nodeName == 'LI'){
console.log(e.target.innerText);
}
},false)
btn.addEventListener('click',function(e){
var newLi = document.createElement('li');
newLi.innerText = "新的li";
item.appendChild(newLi);
},false)
</script>
</body>
</html>
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 ```
- rem是什么，作用，怎么用
- rem是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
- em（font size of the element）是指相对于父元素的字体大小的单位。
- 在移动端的开发过程中，通常讲单位设置成rem，可以保证比例，针对不同的屏幕，可以进行媒体查询在最开始的时候设置html的font-size
- 熟悉的移动端框架
- css3动画GPU启动
Nodejs
- V8内存分代机制
- 创建一个绑定3000端口的http服务器，返回页面hello world，创建一个请求端，访问“127.0.0.1：3000”请求方式GET，打印出返回数据，相应状态，响应头
- 利用cluster模块，简单实现负载均衡
- 利用express完成简单的路由请求代码app.js，（地址：127.0.0.1/ 相应：返回GET或POST参数）
- 利用mongoose创建一个PersonSchema，字段：name（String），年龄：age（Number，min：0 max：150），身份证号：“idCard”（String必填 获取方法getldCard）
游戏开发
- js动画，
window.requestAnimationFrame页面3s红变绿 - 直径20px小球，页面中心为原点，55px为半径做2s一圈的无限圆周运动
- canvas标签：windowToCanvas(x,y)判断鼠标在canvas中的坐标
- 画1px得直线，填充环绕规则是什么
- 判断两个小球是否碰撞
网友评论