你學到的每一點東西都要重視起來，學到的每一點東西都要深究，學到的每一點東西都要記錄下來，很整齊，很有規律的記錄，并且時常回顧
基礎題
標簽+文本+注釋
-
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得直線，填充環繞規則是什么
- 判斷兩個小球是否碰撞
