diff --git a/.gitignore b/.gitignore index 496ee2c..086538f 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -.DS_Store \ No newline at end of file +.DS_Store +_book diff --git a/AUTHORS b/AUTHORS new file mode 100644 index 0000000..954458c --- /dev/null +++ b/AUTHORS @@ -0,0 +1,13 @@ +Li Xinyang +Li Xinyang +rwang23 +hcy003 +Fred.W. +tinglin92 +Tinglin +Sylvia Zhang +leikn +The Gitter Badger +Osub <814566123@qq.com> +Chenyu +nifanle diff --git a/Booklist.md b/Booklist.md index 389c7c1..4a636d6 100644 --- a/Booklist.md +++ b/Booklist.md @@ -2,14 +2,14 @@ **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* -- [Booklist](#booklist) +- [书单](#%E4%B9%A6%E5%8D%95) - [HTML](#html) - [CSS](#css) - [JavaScript](#javascript) -# Booklist +# 书单 ## HTML @@ -25,3 +25,8 @@ N/A - DOM Scripting: Web Design with JavaScript and the Document Object Model - AdvancED DOM Scripting: Dynamic Web Design Techniques - JavaScript: The Definitive Guide + +## Version Control + +- [Git 简明指南](http://rogerdudler.github.io/git-guide/index.zh.html) +- [Git Pro](https://git-scm.com/book/en/v2) diff --git a/DO_NOT_OPEN/Quiz0.html b/DO_NOT_OPEN/Quiz0.html deleted file mode 100644 index 35f8f7a..0000000 --- a/DO_NOT_OPEN/Quiz0.html +++ /dev/null @@ -1,56 +0,0 @@ - - - - - - 图书畅销榜 - - - - - -

图书畅销榜

- - - diff --git a/DO_NOT_OPEN/Quiz1.html b/DO_NOT_OPEN/Quiz1.html deleted file mode 100644 index c079e7f..0000000 --- a/DO_NOT_OPEN/Quiz1.html +++ /dev/null @@ -1,50 +0,0 @@ - - - - - 运费详情 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

运费详情
地域	寄达地	首重（元/1000g）	续重（元/1000g）
一区	浙江、上海、江苏	6	1
一区	江西、安徽	7	1
二区	吉利、黑龙江、云南	10	6
三区	新疆、西藏	15	10

- - \ No newline at end of file diff --git a/DO_NOT_OPEN/Quiz3.html b/DO_NOT_OPEN/Quiz3.html deleted file mode 100644 index 25601fe..0000000 --- a/DO_NOT_OPEN/Quiz3.html +++ /dev/null @@ -1,50 +0,0 @@ - - - - - 表单 - - - - - - \ No newline at end of file diff --git a/JavascriptDesignPattern/JavascriptDesignPattern.md b/JavascriptDesignPattern/JavascriptDesignPattern.md deleted file mode 100644 index 353c511..0000000 --- a/JavascriptDesignPattern/JavascriptDesignPattern.md +++ /dev/null @@ -1,1847 +0,0 @@ - - -**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* - -- [JavaScript 程序设计](#javascript-%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1) - - [JavaScript 介绍](#javascript-%E4%BB%8B%E7%BB%8D) - - [调试器](#%E8%B0%83%E8%AF%95%E5%99%A8) - - [基本语法](#%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95) - - [变量标示符](#%E5%8F%98%E9%87%8F%E6%A0%87%E7%A4%BA%E7%AC%A6) - - [关键字与保留字](#%E5%85%B3%E9%94%AE%E5%AD%97%E4%B8%8E%E4%BF%9D%E7%95%99%E5%AD%97) - - [字符敏感](#%E5%AD%97%E7%AC%A6%E6%95%8F%E6%84%9F) - - [严格模式](#%E4%B8%A5%E6%A0%BC%E6%A8%A1%E5%BC%8F) - - [注释](#%E6%B3%A8%E9%87%8A) - - [类型系统](#%E7%B1%BB%E5%9E%8B%E7%B3%BB%E7%BB%9F) - - [标准类型](#%E6%A0%87%E5%87%86%E7%B1%BB%E5%9E%8B) - - [变量转换表](#%E5%8F%98%E9%87%8F%E8%BD%AC%E6%8D%A2%E8%A1%A8) - - [类型识别](#%E7%B1%BB%E5%9E%8B%E8%AF%86%E5%88%AB) - - [内置对象](#%E5%86%85%E7%BD%AE%E5%AF%B9%E8%B1%A1) - - [标准内置对象](#%E6%A0%87%E5%87%86%E5%86%85%E7%BD%AE%E5%AF%B9%E8%B1%A1) - - [Object](#object) - - [Object.create](#objectcreate) - - [Object.prototype.toString](#objectprototypetostring) - - [Object.prototype.hasOwnProperty](#objectprototypehasownproperty) - - [Boolean](#boolean) - - [String](#string) - - [String.prototype.indexOf](#stringprototypeindexof) - - [String.prototype.replace](#stringprototypereplace) - - [String.prototype.split](#stringprototypesplit) - - [Number](#number) - - [Number.prototype.toFixed](#numberprototypetofixed) - - [Array](#array) - - [Array.prototype.splice](#arrayprototypesplice) - - [Array.prototype.forEach](#arrayprototypeforeach) - - [Function](#function) - - [自定义对象构造器](#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%AF%B9%E8%B1%A1%E6%9E%84%E9%80%A0%E5%99%A8) - - [Function.prototype.apply](#functionprototypeapply) - - [Function.prototype.bind](#functionprototypebind) - - [子类构造器](#%E5%AD%90%E7%B1%BB%E6%9E%84%E9%80%A0%E5%99%A8) - - [函数调用](#%E5%87%BD%E6%95%B0%E8%B0%83%E7%94%A8) - - [函数参数](#%E5%87%BD%E6%95%B0%E5%8F%82%E6%95%B0) - - [arguments](#arguments) - - [值专递](#%E5%80%BC%E4%B8%93%E9%80%92) - - [函数重载](#%E5%87%BD%E6%95%B0%E9%87%8D%E8%BD%BD) - - [RegExp](#regexp) - - [RegExp.prototype.test](#regexpprototypetest) - - [Date](#date) - - [标准内置对象](#%E6%A0%87%E5%87%86%E5%86%85%E7%BD%AE%E5%AF%B9%E8%B1%A1-1) - - [Math](#math) - - [Math.floor](#mathfloor) - - [Math.random](#mathrandom) - - [JSON](#json) - - [JSON.stringify](#jsonstringify) - - [JSON.parse](#jsonparse) - - [全局对象](#%E5%85%A8%E5%B1%80%E5%AF%B9%E8%B1%A1) - - [NaA](#naa) - - [parseInt](#parseint) - - [eval](#eval) - - [encodedURIComponent](#encodeduricomponent) - - [变量作用域](#%E5%8F%98%E9%87%8F%E4%BD%9C%E7%94%A8%E5%9F%9F) - - [作用域介绍](#%E4%BD%9C%E7%94%A8%E5%9F%9F%E4%BB%8B%E7%BB%8D) - - [静态作用域](#%E9%9D%99%E6%80%81%E4%BD%9C%E7%94%A8%E5%9F%9F) - - [动态作用域](#%E5%8A%A8%E6%80%81%E4%BD%9C%E7%94%A8%E5%9F%9F) - - [JavaScript 变量作用域](#javascript-%E5%8F%98%E9%87%8F%E4%BD%9C%E7%94%A8%E5%9F%9F) - - [词法环境](#%E8%AF%8D%E6%B3%95%E7%8E%AF%E5%A2%83) - - [组成](#%E7%BB%84%E6%88%90) - - [创建](#%E5%88%9B%E5%BB%BA) - - [结构](#%E7%BB%93%E6%9E%84) - - [关于词法环境的问题](#%E5%85%B3%E4%BA%8E%E8%AF%8D%E6%B3%95%E7%8E%AF%E5%A2%83%E7%9A%84%E9%97%AE%E9%A2%98) - - [with 语句](#with-%E8%AF%AD%E5%8F%A5) - - [try-catch 句法](#try-catch-%E5%8F%A5%E6%B3%95) - - [带名称的函数表达式](#%E5%B8%A6%E5%90%8D%E7%A7%B0%E7%9A%84%E5%87%BD%E6%95%B0%E8%A1%A8%E8%BE%BE%E5%BC%8F) - - [表达式与运算符](#%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%B8%8E%E8%BF%90%E7%AE%97%E7%AC%A6) - - [表达式](#%E8%A1%A8%E8%BE%BE%E5%BC%8F) - - [运算符](#%E8%BF%90%E7%AE%97%E7%AC%A6) - - [===](#) - - [==](#) - - [例外规则](#%E4%BE%8B%E5%A4%96%E8%A7%84%E5%88%99) - - [!](#) - - [&&](#&&) - - [||](#%7C%7C) - - [元算符优先级（Operator Precedence）](#%E5%85%83%E7%AE%97%E7%AC%A6%E4%BC%98%E5%85%88%E7%BA%A7%EF%BC%88operator-precedence%EF%BC%89) - - [语句](#%E8%AF%AD%E5%8F%A5) - - [条件控制语句](#%E6%9D%A1%E4%BB%B6%E6%8E%A7%E5%88%B6%E8%AF%AD%E5%8F%A5) - - [循环控制语句](#%E5%BE%AA%E7%8E%AF%E6%8E%A7%E5%88%B6%E8%AF%AD%E5%8F%A5) - - [for-in](#for-in) - - [异常处理语句](#%E5%BC%82%E5%B8%B8%E5%A4%84%E7%90%86%E8%AF%AD%E5%8F%A5) - - [with 语句](#with-%E8%AF%AD%E5%8F%A5-1) - - [闭包](#%E9%97%AD%E5%8C%85) - - [闭包的应用](#%E9%97%AD%E5%8C%85%E7%9A%84%E5%BA%94%E7%94%A8) - - [保存变量现场](#%E4%BF%9D%E5%AD%98%E5%8F%98%E9%87%8F%E7%8E%B0%E5%9C%BA) - - [封装](#%E5%B0%81%E8%A3%85) - - [面向对象](#%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1) - - - -# JavaScript 程序设计 - -## JavaScript 介绍 - -前端开发三要素，`HTML`（描述网页内容），`CSS`（描述样式），`JavaScript`（控制网页行为）。JavaScript 为解释型编程语言，运行环境也很广泛。 - -![](../img/J/javascript-history.png) - -![](../img/J/javascript-env.png) - -**JavaScript**的引入方法如下： - -```javascript - - - - - - - - - - - - - - - - -``` - -## 调试器 - -调试工具都内置于主流浏览器中（Firefox 中需独立下载 Firebug）。更多关于 Google Chrome DevTools 的信息可以在[这里](https://developer.chrome.com/devtools)找到。 - -## 基本语法 - -### 变量标示符 - -**变量**的命名 - -```javascript -var _name = null; -var $name = null; -var name0 = null; -``` - -### 关键字与保留字 - -JavaScript 在语言定义中保留的字段，这些字段在语言使用中存在特殊意义或功能，在程序编写的过程中不可以当做变量或函数名称使用。无需记忆，报错修改即可。 - -### 字符敏感 - -字符串的大小写是有所区分的，不同字符指代不同的变量。 - -### 严格模式 - -**增益** - -- 消除语法中不合理与不安全的问题，保证代码正常运行 -- 提高编译效率，增加运行速度 - -**使用方法** - -```javascript - -"use strict"; -(function(){ - console.log('>>> Hello, world!'); -})() - - -(function(){ - "use strict"; - console.log('>>> Hello, world!'); -})() -``` - -严格模式与标准模式的区别： - -- 严格模式下隐式声明或定义变量被静止 -- 严格模式下对象重名的属性在严格模式下被静止 -- 严格模式下 `arguments.callee()` 被禁用 -- 严格模式下 `with()` 语句 -- 更多限制 - -### 注释 - -```javascript -/* - 多行注释，不可嵌套 - */ - -// 单行注释 -``` - -## 类型系统 - -![](../img/J/javascript-variable-type.jpg) - -### 标准类型 - -**原始类型**： - -- Undefined -- Null -- Boolean -- String -- Number - -**引用类型**： -- Object - -```javascript -var obj = {}; - -var bool = new Boolean(true); -var str = new String("hello"); -var num = new Number(1); -var obj0 = new Object(); -``` - -原始类型和引用类型的区别： - -原始类型储存在栈（Stack）中储存变量的值，而引用类型在栈中保存的是所引用内容储存在堆（Heap）中的值。类似于指针的概念，引用类型并非储存变量真实数值而是地址，所以对已引用类型的复制其实只是复制了相同的地址而非实际的变量值。 - -**Undefined** 值：undefined 出现场景： - -- 以声明为赋值的变量 `var obj;` -- 获取对象不存在的属性 `var obj = {x: 0}; obj.y;` -- 无返回值函数的执行结果 `function f(){}; var obj = f();` -- 函数参数没有传入 `function f(i){console.log(i)}; f();` -- `void(expression)` - -**Null** 值：null 出现场景： - -- 获取不存在的对象 `document.getElementById('not-exist-element')` - -**Boolean** 值：true, false 出现场景： - -- 条件语句导致的系统执行的隐式类型转换 `if(隐式转换){}` -- 字面量或变量定义 `var bool = true;` - -**String** 值：字符串出现场景： - -- `var str = 'Hello, world!';` - -**Number** 值：整型直接量，八进制直接量（0-），十六进制直接量（0x-)，浮点型直接量出现场景： - -- `1026` -- `3.14` -- `1.2e5` -- `0x10` - -**Object** 值：属性集合出现场景： - -- `var obj = {name: 'Xinyang'};` - -### 变量转换表 - -|Value|Boolean|Number|String| -|-----|-------|------|------| -|undefined|false|NaN|"undefined"| -|null|false|0|"null"| -|true|true|1|"true"| -|false|false|0|"false"| -|''|false|0|''| -|'123'|true|123|'123'| -|'1a'|true|NaN|'1a'| -|0|false|0|"0"| -|1|true|1|"1"| -|Infinity|true|Infinity|"Infinity"| -|NaN|false|NaN|'NaN'| -|{}|true|NaN|"[object Object]"| - -### 类型识别 - -- `typeof` -- `Object.prototype.toString` -- `constructor` -- `instanceof` - -**typeof**： -- 可以是标准类型（Null 除外） -- 不可识别具体的对象类型（Function 除外） - -**Object.prototype.toString**： -- 可是识别标准类型及内置对象类型（例如，Object, Date, Array） -- 不能识别自定义对象类型 - -**constructor**： -- 可以识别标准类型（Undefined/Null 除外） -- 可识别内置对象类型 -- 可识别自定义对象类型 - -```javascript -function getConstructiorName(obj) { - return obj && obj.constructor && obj.constructor.toString().match(/function\s*([^(]*)/)[1]; -} -getConstructiorName([]) === "Array"; // true -``` - -**instanceof**： -- 不可判别原始类型 -- 可判别内置对象类型 -- 可判别自定义对象类型 - -## 内置对象 - -通常情况下只有对象才存在方法，但 JavaScript 不同它具有12种内置对象。内置对象又分为两类，普通对象（属性和方法）与构造器对象（可用于实例化普通对象，它还包含原型对象属性和方法，及实例对象属性和方法）。 - -**JavaScript 对象原型链的简要说明** - -``` -function Point(x, y) { - this.x = x; - this.y = y; -} -Point.prototype.move = function(x, y) { - this.x += x; - this.y += y; -} -var p = new Point(1, 1); -p.move(2,2); -``` - -`__proto__` 称之为原型链，有如下特点： - -1. `__proto__` 为对象内部的隐藏属性 -1. `__proto__` 为实例化该对象的构造器的 `prototype` 对象的引用，因此可以直接方法 `prototype` 的所有属性和方法 -1. 除了 `Object` 每个对象都有一个 `__proto__` 属性且逐级增长形成一个链，原型链顶端是一个 `Object` 对象。 -1. 在调用属性或方法时，引擎会查找自身的属性如果没有则会继续沿着原型链逐级向上查找，直到找到该方法并调用。 -1. `__proto__` 跟浏览器引擎实现相关，不同的引擎中名字和实现不尽相同(chrome、firefox中名称是 `__proto__` ，并且可以被访问到，IE中无法访问)。基于代码兼容性、可读性等方面的考虑，不建议开发者显式访问 `__proto__` 属性或通过 `__proto__`更改原型链上的属性和方法，可以通过更改构造器` prototype` 对象来更改对象的 `__proto__` 属性。 - -**构造器对象与普通对象的区别** - -![](../img/O/object-with-constructor-and-regular-object.png) - -1. 构造器对象原型链中的 `__proto__` 是一个 `Function.prototype` 对象的引用，因此可以调用 `Function.prototype`的属性及方法 -1. 构造器对象本身有一个 `prototype` 属性，用该构造器实例化对象时该 `prototype` 会被实例对象的 `__proto__` 所引用 -1. 构造器对象本身是一个 `function` 对象，因此也会有自身属性 - -### 标准内置对象 - -**构造器对象** - -- Object -- Boolean -- String -- Number -- Function -- Array -- RegExp -- Date -- Error - -**其他对象** - -- Math -- JSON -- 全局对象 - -### Object - -> 构造器的原型对象在对象实例化时将会被添加到实例对象的原型链当中。 -> `__proto__` 为原型链属性，编码时不可被显像调用。但是实例化对象可以调用原型链上的方法。 - -用 String/Number 等构造器创建的对象原型链顶端对象始终是一个Object对象，因此这些对象可以调用Object的原型对象属性和方法。所以 String/Number 等构造器是 Object 的子类。 - -更多关于 Object 的内容可以在[这里](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)找到。 - -**构造器说明**： -- Object 是属性和方法的集合 -- String/Number/Boolean/Array/Date/Error 构造器均为 Object 的子类并集成 Object 原型对象的属性及方法。 - -**实例化方法** -``` -var obj0 = new Object({name: 'X', age: 13}); -// 常用方法 -var obj1 = {name: 'Q', age: 14}; -``` - -**属性及方法** -- prototype -- create -- keys -- ... - -**原型对象属性及其方法 -- constructor -- toString -- valueOf -- hasOwnProperty -- ... - -**实例对象属性及方法** - -无 - -#### Object.create - -功能：基于原型对象创造新对象 - -```javascript -// Object.create(prototype[, propertiesObject]) -var prototype = {name: 'X', age: 13}; -var obj = Object.create(proto); -``` - -#### Object.prototype.toString - -功能：获取方法调用者的标准类型 - -```javascript -// objectInstance.toString() -var obj = {}; -obj.toString(); // Object -``` - -#### Object.prototype.hasOwnProperty - -功能：判断一个属性是否是一个对象的自身属性 - -```javascript -// objectInstance.hasOwnProperty("propertyName") -var obj = Object.create({a: 1, b: 2}); -obj.c = 3; -obj.hasOwnProperty('a'); // false -obj.hasOwnProperty('c'); // true -``` - -### Boolean - -**构造器说明**：值为 true 与 false - -**属性及方法** -- prototype - -**原型对象属性及其方法 -- constructor, toString, valueOf - -### String - -**构造器说明**：单双引号内的字符串 - -**实例化方法** -```javascript -'Hello, world!' -var str0 = 'Xinyang'; -var str1 = new String('Xinyang'); -``` - -**属性及方法** -- prototype -- fromCharCode（转换 ASCII 代码为字符） - -**原型对象属性及其方法** -- constructor -- indexOf -- replace -- slice -- split -- charCodeAt -- toLowerCase -- ... - -#### String.prototype.indexOf - -功能：获取子字符串在字符串中的索引 - -```javascript -// stringObject.indexOf(searchValue, fromIndex) -var str = "I am X. From China!"; -var index = str.indexOf('a'); // 2 -str.indexOf('a', index + 1); // 16 -str.indexOf('Stupid'); // -1 字符串不存在 -``` - -#### String.prototype.replace - -功能：查找字符串替换成目标文字 - -```javascript -// stringObject.replace(regexp/substr, replacement) -var str = "apple is bad"; -str = str.replace('bad', 'awesome'); -``` - -#### String.prototype.split - -功能：按分隔符将分隔符分成字符串数组 - -```javascript -// stringObject.split(separator, arrayLength) -var str = '1 2 3 4'; -str.split(' '); // ['1', '2', '3', '4']; -str.split(' ', 3); // ['1', '2', '3']; -str.split(/\d+/); // ["", " ", " ", " ", ""] -``` - -### Number - -**构造器说明**：整型直接量，八进制直接量（0-），十六进制直接量（0x-)，浮点型直接量 - -**实例化方法** - -```javascript -10 -1.2e5 -var count = 0x10; -var pi = new Number(3.1415); -``` - -**属性及方法** -- prototype -- MAX_VALUE -- MIN_VALUE -- NaN -- NEGATIVE_INFINITY -- POSITIVE_INFINITY - -**原型对象属性及其方法** -- constructor -- toFixed -- toExponential -- ... - -#### Number.prototype.toFixed - -功能：四舍五入至指定小数位 - -```javascript -// numberObject.toFixed(num) -var num0 = 3.14; -num0.toFixed(1); // 3.1 -var num1 = 3.35; -num1.toFixed(1); // 3.4 -``` - -### Array - -**构造器说明**：定义数组对象 - -**实例化方法** - -```javascript -var a0 = [1, 'abc', true, function(){}]; -var a1 = new Array(); -var a2 = new Array(1, 'abc', true); -``` - -**属性及方法** -- prototype -- isArray - -**原型对象属性及其方法** -- constructor -- splice -- forEach -- find -- concat -- pop -- push -- reverse -- shift -- slice -- ... - -#### Array.prototype.splice - -功能：从数组中删除或添加元素，返回被删除的元素列表（作用域原有数组） - -```javascript -// arrayObject.splice(start, deleteCount[, item1[, item2[, ...]]]) -var arr = ['1', '2', 'a', 'b', '6']; -var ret = arr.splice(2, 2, '3', '4', '5'); // ['a', 'b'] -arr; // ['1', '2', '3', '4', 5', '6'] -``` - -#### Array.prototype.forEach - -功能：遍历元素组并调用回调函数 - -```javascript -// arrayObject.forEach(callback[, thisArg]) -// 回调函数 -// function callback(value, index, arrayObject) {...} -// value - 当前值 index - 当前索引 arrayObject - 数组本身 -function logArray(value, index, arrayObject) { - console.log(value); - console.log(value === array[index]); -} -[2, 5, , 9].forEach(logArray); -``` - -### Function - -**构造器说明**：定义函数或新增对象构造器 - -**实例化方法** - -```javascript -// 对象实例化 -var f0 = new Function('i', 'j', 'return (i + j)'); -// 函数关键字语句 -function f1(i, j){return i + j;} -// 函数表达式 -var f3 = function(i, j){return i + j;}; -``` - -**属性及方法** -- prototype - -**原型对象属性及其方法** -- constructor -- apply -- call -- bind - -**实例对象属性和方法** -- length -- prototype -- arguments -- caller - -#### 自定义对象构造器 - -```javascript -function Point(x, y) { - this.x = x; - this.y = y; -} - -Point.prototype.move = function(x, y) { - this.x += x; - this.y += y; -} - -var p = new Point(1, 2); -``` - -#### Function.prototype.apply - -功能：通过参数指定调用者和函数参数并执行该函数 - -```javascript -// functionObj.apply(thisArg[, argsArray]) -function Point(x, y) { - this.x = x; - this.y = y; -} - -Point.prototype.move = function(x, y) { - this.x += x; - this.y += y; -} - -var p = new Point(1, 1); -var circle = {x: 1, y: 1, r: 1}; -p.move.apply(circle, [2, 1]); // {x: 3, y: 2, r: 1} -``` - -#### Function.prototype.bind - -功能：通过参数指定函数调用者和函数参数并返回该函数的引用 - -```javascript -// functionObj.bind(thisArg[, arg1[, arg2[, ...]]]) -function Point(x, y) { - this.x = x; - this.y = y; -} - -Point.prototype.move = function(x, y) { - this.x += x; - this.y += y; -} - -var p = new Point(1, 1); -var circle = {x: 1, y: 1, r: 1}; -var circleMoveRef = p.move.bind(circle, 2, 1); -setTimeout(circleMoveRef, 1000); // {x: 3, y: 2, r: 1} - -// 之间使用 circleMoveRef() 效果等同于 apply() -circleMoveRef(); -``` - -#### 子类构造器 - -```javascript -function Circle(x, y, r) { - Point.apply(this, [x, y]); - this.radius = r; -} -Circle.prototype = Object.create(Point.prototype); -Circle.prototype.constructor = Circle; -Circle.prototype.area = function(){ - return Math.PI * this.radius * this.radius; -} - -var c = new Circle(1, 2, 3); -c.move(2, 2); -c.area(); -``` - -#### 函数调用 - -- `()` -- `apply` -- `call` - -#### 函数参数 - -- 形参个数不一定等于实参个数 -- 值专递 -- 通过参数类型检查实现函数重载 - -##### arguments - -arguments 的常用属性 -- length 实参个数 -- 0...arguments.length-1 实参属性名称（key） -- callee 函数本身 - -```javascript -function max(a, b) { - if (max.length === arguments.length) { - return a>b?a:b; - } else { - var _max = arguments[0]; - for(var i = 0; i < arguments.length; i++) { - if (_max < arguments[i]) { - _max = arguments[i]; - } - } - return _max; - } -} -``` - -##### 值专递 - -函数参数的值专递是参数复制都是栈内存中的复制。 - -![](../img/M/memory-management.jpg) - -```javascript -// 原始类型 -function plusplus(num) { - return num++; -} -var count = 0; -var result = plusplus(count); // result = 1; count = 0; - -// 引用类型 -function setName(obj) { - obj.name = 'obama'; -} -var president = {name: 'bush'}; -setName(president); // {name: 'obama'}; -``` - -##### 函数重载 - -以 `Require.JS` 中的 `define()` 为例： - -```javascript -define(function(){ - var add = function(x, y) { - return x + y; - }; - return { - add: add - }; -}) - -define(['lib'], function(){ - var add = function(x, y) { - return x + y; - }; - return { - add: add - }; -}) - -define('math', ['lib'], function(){ - var add = function(x, y) { - return x + y; - }; - return { - add: add - }; -}) - -// define 的实现代码 -/** - * The function that handles definitions of modules. Differs from - * require() in that a string for the module should be the first argument, - * and the function to execute after dependencies are loaded should - * return a value to define the module corresponding to the first argument's - * name. - */ -define = function (name, deps, callback) { - var node, context; - - //Allow for anonymous modules - if (typeof name !== 'string') { - //Adjust args appropriately - callback = deps; - deps = name; - name = null; - } - - //This module may not have dependencies - if (!isArray(deps)) { - callback = deps; - deps = null; - } - - // 省略以下代码 - // ... -}; -``` - -### RegExp - -**构造器说明**：用于定义正则表达式，一个 RegExp 对象包含一个正则表达式和关联的标志 - -**定义方法** -- `/pattern/flags` -- `new RegExp(pattern[, flags]);` - -**属性及方法** -- prototype - -**原型对象属性及其方法** -- constructor -- test -- exec -- ... - -#### RegExp.prototype.test - -功能：使用正则表达式对字符串进行测试，并返回测试结果 - -```javascript -// regexObj.text(str) -var reg = /^abc/i; -reg.test('Abc123'); // true -reg.test('1Abc1234'); // false -``` - -### Date - -**构造器说明**：用于定义日期对象 - -**定义方法** -```javascript -var date0 = new Date(); -var date1 = new Date(2014, 3, 1, 7, 1, 1, 100); -``` - -**属性及方法** -- prototype -- parse -- now -- ... - -**原型对象属性及其方法** -- constructor -- Date -- getDate -- getHours -- setDate -- setHours -- ... - -### 标准内置对象 - -#### Math - -**对象说明**：拥有属性和方法的单一对象主要用于数字计算 - -**对象属性**： -- E -- PI -- SQRT2 -- ... - -**对象方法**： -- floor -- random -- abs -- max -- cos -- ceil - -##### Math.floor - -功能：向下取整 - -```javascript -// Math.floor(num) -Math.floor(0.97); // 0 -Math.floor(5.1); // 5 -Math.floor(-5.1); //6 -``` - -相似方法：`ceil`，`round` - -##### Math.random - -功能：返回 0~1 之间的浮点数 - -```javascript -// Math.random() -Math.random(); // 0.14523562323461 -``` - -#### JSON - -**对象说明**：用于存储和交换文本信息 - -**对象方法**： -- parse -- stringify - -##### JSON.stringify - -功能：将 JSON 对象转换为字符转 - -```javascript -// JSON.stringify(value[, replacer[, space]]) -var json = {'name': 'X'}; -JSON.stringify(json); // "{"name":"X"}" -``` - -##### JSON.parse - -功能：将 JSON 字符转转换为对象 - -``` -// JSON.parse(text[, reviver]) -var jsonStr = '{"name":"X"}'; -JSON.parse(jsonStr); // {name: 'X'} -``` - -#### 全局对象 - -全局对象定义了一系列的属性和方法在编程过程中可以被之间调用。 - -属性：NaN，Infinity，undefined - -方法： -- parseInt -- parseFloat -- isNaN -- isFinite -- eval - -处理 URI 方法： -- encodedURIComponent -- decodeURIComponent -- encodedURI -- decodeURI - -构造器属性： -- Boolean -- String -- Number -- Object -- Function -- Array -- Date -- Error -- ... - -对象属性： -- Math -- JSON - -##### NaA - -非数字值：表示错误或无意义的运算结果，NaN 参与运算仍会返回 NaA，且 NaN 不等于任何值，包括它本身。可以使用 `isNaN()` 判断运算结果的类型是否为 NaN。 - -```javascript -isNaN(NaN); // true -isNaN(4 - '2a'); // true; -``` - -##### parseInt - -功能：转换字符串成数字 - -```javascript -// parseInt(string[, radix]) -// radix - 为进制数 -parseInt('010'); // 10 -parseInt('010', 8) // 8 -parseInt('010', 16) // 16 - -parseInt('0x1f'); // 31 -parseInt('0x1f', 16); // 31 -parseInt('1f'); // 1 -parseInt('1f', 16); // 31 -``` - -##### eval - -功能：计算字符串并执行其中的 JavaScript 代码（会带来安全性和代码逻辑问题，通常不建议使用） - -```javascript -// eval(string) -var res = '{"error": "0", "msg": "OK"}; -var obj; -if (!JSON) { - obj = eval('(' + res + ')'); -} else { - obj = JSON.parse(res); -} -``` - -##### encodedURIComponent - -功能：将 URI 参数中的特殊字符，中文等作为 URI 的一部分进行编码 - -```javascript -var uri = "http://w3schools.com/my test.asp?name=ståle&car=saab"; -var res = encodeURIComponent(uri); - -// 结果 -// http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab -``` - -## 变量作用域 - -变量的作用域值的是变量的生命周期和作用范围（全局与局部作用域的区别）。 - -### 作用域介绍 - -#### 静态作用域 - -静态作用域有称为词法作用域，即指其在编译的阶段就可以决定变量的引用。**静态作用域**只更变量定义的位置有关与代码执行的顺序无关。 - -```javascript -var x = 0; -function foo() { - alert(x); -} - -function bar() { - var x = 20; - foo(); -} - -foo(); -``` - -![](../img/S/scope-lexical-scope.png) - -#### 动态作用域 - -动态作用域的变量引用只可在程序运行时刻决定（其通常通过动态栈来进行管理）。 - -```javascript -var x = 0; -function foo() { - alert(x); -} - -function bar() { - var x = 20; - foo(); -} - -foo(); -``` - -![](../img/S/scope-dynamic-scope.gif) - -### JavaScript 变量作用域 - -JavaScript （1）使用静态作用域，（2）其没有块级作用域（只有函数作用域，就是只有 function 用于可以定义作用域），（3）在 ES5 之作使用词法环境来管理作用域。 - -#### 词法环境 - -##### 组成 - -用来描述静态作用域的数据结构。 - -- 环境记录（record）（指形参，变量，函数等） -- 外部词法环境的引用（outer） - -##### 创建 - -在一段代码执行之前，先初始化词法环境。会被初始化的有： - -- 形参 -- 函数定义（创建函数对象，会保存当前作用域。见下图） -- 变量定义（所有初始化值均为 `undefined`） - -![](../img/S/scope-function-init.png) - -##### 结构 - -```javascript -var x = 10; -function foo(y) { - var z = 30; - function bar(q) { - return x + y + z + q; - } - return bar; -} -var bar = foo(20); -bar(40); -``` - -**全局词法作用域（初始化状态）** - -![](../img/S/scope-global-init.png) - -**函数词法作用域** - -![](../img/S/scope-structure.jpg) - -#### 关于词法环境的问题 - -**命名冲突** - -形参，函数定义，变量名称命名冲突。其中的优先级的排序如下： - -``` -函数定义 > 形参 > 变量 -``` - -**`arguments` 的使用** - - 为函数中定义好的变量。 - -**函数表达式与函数定义的区别** - -- 函数表达式是在执行时才创建函数对象。 -- 函数定义为在代码执行之前就进行创建的。 - -#### with 语句 - -`with` 会创造一个临时作用域。 - -```javascript -var foo = 'abc'; -with({ - foo: 'bar'; -}) { - function f() { - alert(foo); - }; - (function() { - alert(foo); - })(); - f(); -} -``` - -#### try-catch 句法 - -``` -try { - var e = 10; - throw new Error(); -} catch (e) { - function f() { - alert(e); - } - (function() { - alert(e); - })(); - f(); -} -``` - -#### 带名称的函数表达式 - -**下面例子为不常规的写法** - -``` -(function A(){ - A = 1; - alert(A); -})(); -``` - -![](../img/S/scope-function-with-name.png) - -## 表达式与运算符 - -### 表达式 - -表达式为 JavaScript 的短语可执行并生成值。 - -```javascript -1.7 // 字面量 -"1.7" -var a = 1; -var b = '2'; -var c = (1.7 + a) * '3' - b -``` - -### 运算符 - -- 算数运算符（`+` `-` `*` `/` `%`） -- 关系运算符（`>` `<` `==` `!=` `>=` `<=` `===` `!==`) -- 逻辑运算符（`!` `&&` `||`） -- 位运算符（`&` `|` `^` `~` `<<` `>>`） -- 负值运算符（`=`） -- 条件运算符（`?:`） -- 逗号运算符（`,`） -- 对象运算符（`new` `delete` `.` `[]` `instanceof`） - -#### === - -全等运算符用于盘对左右两边的对象或值是否类型相同且值相等。 - -**伪代码拆解** - -```javascript -function totalEqual(a, b) { - if (a 和 b 类型相同) { - if (a 和 b 是引用类型) { - if (a 和 b 是同一引用) - return true; - else - return false; - } else { // 值类型 - if (a 和 b 值相等) - return true; - else - return false; - } - } else { - return false; - } -} -``` - -**例子** - -```javascript -var a = "123"; -var b = "123"; -var c = "4"; -var aObj = new String("123"); -var bObj = new String("123"); -var cObj = aObj; - -a === aObj // false -aObj === bObj // false -aObj === cObj // true -a === b // true -a === c // false -``` - -#### == - -`==` 用于判断操作符两边的对象或值是否相等。 - -**伪代码拆解** - -```javascript -function equal(a, b) { - if (a 和 b 类型相同) { - return a === b; - } else { // 类型不同 - return Number(a) === Number(b); // 优先转换数值类型 - } -} -``` - -**例子** - -```javascript -"99" == 99; // true -new String("99") == 99; // true -true == 1; // true -false == 0; // true -'\n\n\n' == // true -``` - -##### 例外规则 - -- `null == undefined` 结果为真 `true` -- 在有 `null`/`undefined` 参与的 `==` 运算是不进行隐式转换。 - -```javascript -0 == null; // false -null == false; // false -"undefined" == undefined; // false -``` - -#### ! - -`!x` 用于表达 x 表达式的运行结果转换成布尔值（Boolean）之后取反的结果。`!!x` 则表示取 x 表达式的运行结果的布尔值。 - -```javascript -var obj = {}; -var a = !obj // false; -var a = !!obj // true; -``` - -#### && - -`x && y` 如果 x 表达式的运行交过转换成 Boolean 值为 false 则不运行表达式 y 而直接返回 x 表达式的运行结果。**相反**，如果 x 表达式的运行交过转换成 Boolean 值为 true 则运行表达式 y 并返回 y 表达式的运行结果。 - -**伪代码拆解** - -```javascript -var ret = null; -if (!!(ret = x)) { - return y; -} else { - return ret; -} -``` - -**例子** - -```javascript -var a = 0 && (function(){return 1 + 1;})(); // 0 -var b = 1 && (function(){return 1 + 1;})(); // 2 -``` - -#### || - -`x || y` 如果 x 表达式的运行结果转换为 Boolean 值为 true，则不运行表达式 y 而直接返回表达式 x 的运算结果。（与 `&&` 方式相反） - -**伪代码拆解** - -```javascript -var ret = null; -if (!!(ret = x)) { - return ret; -} else { - return y; -} -``` - -**例子** - -```javascript -var a = 0 || (function(){return 1 + 1;})(); // 2 -var b = 1 || (function(){return 1 + 1;})(); // 1 -``` - -### 元算符优先级（Operator Precedence） - -- `+` `-` `*` `/` 高于 `&&` -- `*` `/` 高于 `+` `-` -- `&&` 高于 `?:` -- `()` 内优先级高于之外 - -NOTE：和数学上的算术优先级类似，同级从**左到右**计算。如有疑问加上 `()` 既可解决优先级问题。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Precedence	Operator type	Associativity	Individual operators
19	Grouping	n/a	`( … )`
18	Member Access	left-to-right	`… . …`
	Computed Member Access	left-to-right	`… [ … ]`
	new (with argument list)	n/a	`new … ( … )`
17	Function Call	left-to-right	`… ( … )`
17	new (without argument list)	right-to-left	`new …`
16	Postfix Increment	n/a	`… ++`
16	Postfix Decrement	n/a	`… --`
15	Logical NOT	right-to-left	`! …`
	Bitwise NOT	right-to-left	`~ …`
	Unary Plus	right-to-left	`+ …`
	Unary Negation	right-to-left	`- …`
	Prefix Increment	right-to-left	`++ …`
	Prefix Decrement	right-to-left	`-- …`
	typeof	right-to-left	`typeof …`
	void	right-to-left	`void …`
	delete	right-to-left	`delete …`
14	Multiplication	left-to-right	`… * …`
	Division	left-to-right	`… / …`
	Remainder	left-to-right	`… % …`
13	Addition	left-to-right	`… + …`
13	Subtraction	left-to-right	`… - …`
12	Bitwise Left Shift	left-to-right	`… << …`
	Bitwise Right Shift	left-to-right	`… >> …`
	Bitwise Unsigned Right Shift	left-to-right	`… >>> …`
11	Less Than	left-to-right	`… < …`
	Less Than Or Equal	left-to-right	`… <= …`
	Greater Than	left-to-right	`… > …`
	Greater Than Or Equal	left-to-right	`… >= …`
	in	left-to-right	`… in …`
	instanceof	left-to-right	`… instanceof …`
10	Equality	left-to-right	`… == …`
	Inequality	left-to-right	`… != …`
	Strict Equality	left-to-right	`… === …`
	Strict Inequality	left-to-right	`… !== …`
9	Bitwise AND	left-to-right	`… & …`
8	Bitwise XOR	left-to-right	`… ^ …`
7	Bitwise OR	left-to-right	`… \| …`
6	Logical AND	left-to-right	`… && …`
5	Logical OR	left-to-right	`… \|\| …`
4	Conditional	right-to-left	`… ? … : …`
3	Assignment	right-to-left	`… = …`
			`… += …`
			`… -= …`
			`… *= …`
			`… /= …`
			`… %= …`
			`… <<= …`
			`… >>= …`
			`… >>>= …`
			`… &= …`
			`… ^= …`
			`… \|= …`
2	yield	right-to-left	`yield …`
1	Spread	n/a	`...` …
0	Comma / Sequence	left-to-right	`… , …`

- -## 语句 - -### 条件控制语句 - -```javascript -if (expression) {statement} -else if (expression) {statement1} -else {statement2} - -// JavaScript 中的 case 可以使用整型，字符串，甚至表达式 -switch(persion.type) { - case "teacher": - statement1 - break; - case "student": - statement2 - break; - default: - statement3 - break; -} -``` - -### 循环控制语句 - -```javascript -while(expression) {statement} - -// 至少执行一次 -do {statement} while(expression); - -for (initialise; test_expresiion; increment) {statement} - -// 跳过下面代码并进入下一轮循环 -continue; - -// 退出当前循环 -break; -``` - -#### for-in - -用于遍历对象的**全部**属性。 - -```javascript -function Car(id, type, color) { - this.type = type; - this.color = color; - this.id = id; -} - -var benz = new Car('benz', 'black', 'red'); -Car.prototype.start = function(){ - console.log(this.type + ' start'); -} - -for (var key in benz) { - console.log(key + ':' benz[key]); -} - -// 输出结果 -type:black -color:red -id:benz -start:function (){ - console.log(this.type + ' start'); -} - -// ----------- - -// 如不需原型对象上的属性可以使用 hasOwnProperty -for (var key in benz) { - if (benz.hasOwnProperty(key)) { - console.log(key + ':' benz[key]); - } -} - -// 输出结果 -type:black -color:red -id:benz -``` - -### 异常处理语句 - -```javascript -try/catch/finally -throw -``` - -### with 语句 - -`with` 语句是 JavaScript 中特有的语句形式，其用于缩短特定情况下必须书写的代码量。它可以暂时改变变量的作用域，将`with`语句中的对象添加至作用域链的头部。**缺点**就是导致 JavaScript 语句的可执行性下降，所以通常情况下因尽可能的避免使用。 - -```javascript -// 使用 with 之前 -(function(){ - var x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10); - var y = Math.tan(14 * Math.E); -})(); - -// 使用 with -(function(){ - with(Math) { - var x = cos(3 * PI) + sin(LN10); - var y = tan(14 * E); - } -})(); -``` - -![](../img/W/with-scope.png) - -```javascript -frame[1].document.forms[0].name.value = ""; -frame[1].document.forms[0].address.value = ""; -frame[1].document.forms[0].email.value = ""; - -with(frame[1].document.[0]) { - name.value = ""; - address.value = "" - email.value = ""; -} - -``` - -## 闭包 - -- 闭包有函数和与其相关的引用环境的组合而成 -- 闭包允许函数访问其引用环境中的变量（又称自由变量） -- 广义上来说，所有 JavaScript 的函数都可以成为闭包，因为 JavaScript 函数在创建时保存了当前的词法环境。 - -``` -function add() { - var i = 0; - return function() { - alert(i++); - } -} -var f = add(); -f(); -f(); -``` - -### 闭包的应用 - -#### 保存变量现场 - -```javascript - -// 错误方法 -var addHandlers = function(nodes) { - for (var i = 0, len = nodes.length; i < len; i++) { - nodes[i].onclick = function(){ - alert(i); - } - } -} - -// 正确方法 -var addHandlers = function(nodes) { - var helper = function(i) { - return function() { - alert(i); - } - } - - var (var i = 0, len = nodes.length; i < len; i++) { - nodes[i].onclick = helper(i); - } -} -``` - -#### 封装 - -```javascript - -// 将 observerList 封装在 observer 中 -var observer = (function(){ - var observerList = []; - return { - add: function(obj) { - observerList.push(obj); - }, - empty: function() { - observerList = []; - }, - getCount: function() { - return observerList.length; - }, - get: function() { - return observerList; - } - }; -})(); -``` - -## 面向对象 - -

This work by Li Xinyang is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. \ No newline at end of file diff --git a/Progress.md b/Progress.md deleted file mode 100644 index c3b019b..0000000 --- a/Progress.md +++ /dev/null @@ -1,84 +0,0 @@ - - -**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* - -- [Javascript程序设计 20/23](#javascript%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1-2023) -- [页面制作 39/41](#%E9%A1%B5%E9%9D%A2%E5%88%B6%E4%BD%9C-3941) - - - -# Javascript程序设计 20/23 - -|章节|课题|状态|时间戳| -|----|----|----|------| -|JS介绍|JS介绍|★|1505272223| -|调试器|调试器|★|1505272223| -|基本语法|基本语法|★|1505272223| -|类型系统|基本类型|★|1505272223| -|类型系统|类型识别|★|1505281609| -|内置对象|简介|★|1505292247| -|内置对象|Object|★|1505292247| -|内置对象|String|★|1505292248| -|内置对象|Number|★|1505292248| -|内置对象|Boolean|★|1505312132| -|内置对象|String, Number, Boolean|★|1505312132| -|内置对象|Array|★|1505312132| -|内置对象|Function|★|1505312132| -|内置对象|RegExp, Date, Error|★|1505312132| -|内置对象|Math, JSON|★|1505312132| -|内置对象|全局对象|★|1505312132| -|表达式, 运算符|表达式, 运算符|★|1506091507| -|语句|语句|★|1506091507| -|变量作用域|变量作用域|★|150738| -|闭包|闭包|★|1506091529| -|面向对象|简介||| -|面向对象|原型||| -|面向对象|JS面向对象||| - -# 页面制作 39/41 - -|章节|课题|状态|时间戳| -|----|----|----|------| -|Photoshop|工具, 面板, 视图|★|1505251953| -|Photoshop|测量, 取色|★|1505251953| -|Photoshop|切图|★| 1505252051| -|Photoshop|保存|★| 1505262108| -|Photoshop|修改维护|★| 1505262117| -|Photoshop|图片优化与合并|★|1505262225| -|开发调试|开发工具|★| 1505251248| -|开发调试|调试工具|★| 1505251248| -|HTML|概念|★|1505262243| -|HTML|HTML 文档|★|1505262243| -|HTML|语法|★|1505262243| -|HTML|章节标签|★|1505271407| -|HTML|文本标签|★|1505271428| -|HTML|组标签|★|1505271435| -|HTML|资源标签|★|1505272024| -|HTML|表格标签|★|1505272025| -|HTML|表单标签|★|1505272025| -|HTML|语义化|★|1505272032| -|HTML|实体字符|★|1505272033| -|CSS|简介|★|1505312302| -|CSS|语法|★|1506011814| -|CSS|简单选择器|★|1506011814| -|CSS|其他选择器|★|1506011814| -|CSS|继承, 优先, 层级|★|1506011814| -|CSS|字体|★|1506011856| -|CSS|对齐方式|★|1506012147| -|CSS|格式处理|★|1506031421| -|CSS|文本修饰|★|1506031435| -|CSS|高级选项|★|1506031436| -|CSS|盒子模型 I|★|1506031530| -|CSS|盒子模型 II|★|1506031531| -|CSS|背景 I|★|1506042223| -|CSS|背景 II|★|1506042223| -|CSS|布局 display|★|1506051313| -|CSS|布局 position|★|1506051313| -|CSS|布局 float|★|1506051723 -|CSS|布局 flex|★|1506062334| -|CSS|变形 2D|★|1506071407| -|CSS|变形 3D|★|1506071407| -|CSS|动画 transition|★|1506071626| -|CSS|动画 animation|★|1506071626| - -

This work by Li Xinyang is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. \ No newline at end of file diff --git a/README.md b/README.md index c7d41c7..1ad96d2 100644 --- a/README.md +++ b/README.md @@ -1,48 +1,63 @@ - - -**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* +# 前端开发笔记本 -- [知识体系内容记录](#%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB%E5%86%85%E5%AE%B9%E8%AE%B0%E5%BD%95) - - [Javascript 程序设计](#javascript-%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1) - - [页面制作](#%E9%A1%B5%E9%9D%A2%E5%88%B6%E4%BD%9C) - - [DOM 编程](#dom-%E7%BC%96%E7%A8%8B) - - [页面架构](#%E9%A1%B5%E9%9D%A2%E6%9E%B6%E6%9E%84) - - [产品前端架构](#%E4%BA%A7%E5%93%81%E5%89%8D%E7%AB%AF%E6%9E%B6%E6%9E%84) -- [相关资源](#%E7%9B%B8%E5%85%B3%E8%B5%84%E6%BA%90) -- [相关链接](#%E7%9B%B8%E5%85%B3%E9%93%BE%E6%8E%A5) +[![Join the chat at https://gitter.im/li-xinyang/FEND_Note](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/li-xinyang/FEND_Note?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) - +点击[这里](https://www.gitbook.com/read/book/li-xinyang/frontend-notebook)开始在 GitBook 阅读！ -## 知识体系内容记录 +点击[这里](http://wiki.jikexueyuan.com/project/fend_note/)开始在极客学院 Wiki 阅读！（中国大陆访问速度较快） -![](img/C/career-path.jpg) +前端开发笔记本的 GitHub 项目地址在[这里](https://github.com/li-xinyang/FEND_Note)。如果你觉得这个项目不错，请点击 **Star** 一下，您的支持是我最大的动力。 -### Javascript 程序设计 + -![](http://progressed.io/bar/87?title=Progress) [详情](JavascriptDesignPattern/JavascriptDesignPattern.md) +Star -### 页面制作 + Watch -![](http://progressed.io/bar/100?title=Progress) [详情](WebCreation/WebCreation.md) + Fork -### DOM 编程 + Download -![](http://progressed.io/bar/0?title=Progress) [详情](#) +![笔记路径规划](img/C/career-path.jpg) -### 页面架构 +《前端笔记本》涵盖了 Web 前端开发所需的全部基本知识以及所对应的学习路径。它并不能当做一本完整的学习材料来进行前端的学习，因为在有限的篇幅中无法深入的展开每一个单独的知识点。它更适合作为一个学习清单或者是查询手册，结合其他在各个方面更专业的图书或者官方文档来进行同步学习。在学习过程中为了能达到最佳的学习效果，也可将每个技术点实现并进行适当的拓展。 -![](http://progressed.io/bar/0?title=Progress) [详情](#) +### 写作进程 -### 产品前端架构 +*第一版草稿* 完成时间 1507252244 -![](http://progressed.io/bar/0?title=Progress) [详情](#) +| 章节 | 名称 | 进程 | +| :--- | :-------------- | :-------------------------------- | +| 第一章 | 页面制作 | ![](http://progressed.io/bar/100) | +| 第二章 | JavaScript 程序设计 | ![](http://progressed.io/bar/100) | +| 第三章 | DOM 编程 | ![](http://progressed.io/bar/100) | +| 第四章 | 页面构架 | ![](http://progressed.io/bar/100) | +| 第五章 | 前端产品构架 | ![](http://progressed.io/bar/100) | -## 相关资源 +### 成就 -- [书单](Booklist.md) +**1508311803** - 100 Stars: [@dszls](https://github.com/dszls), thank you! -## 相关链接 +**1511071358** - 200 Stars: [@cschenchen](https://github.com/cschenchen) + +**1511222144** - 300 Stars: [@lujun9972](https://github.com/lujun9972) + +**1512102333** - 400 Stars: [@Niefee](https://github.com/Niefee) + +**1601231619** - 500 Stars: [@wangdsh](https://github.com/wangdsh) + +**1603261510** - 600 Stars: [@lty2226262](https://github.com/lty2226262) + +### 相关链接 - [NEC](http://nec.netease.com/) {N: nice, E: easy, C: css;} -

This work by Li Xinyang is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. \ No newline at end of file +### 声明 + +前端笔记本大纲及内容由[网易云课堂前端专业](http://mooc.study.163.com/smartSpec/detail/12001.htm_)改编 + +

This work by Li Xinyang is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. + + + + diff --git a/SUMMARY.md b/SUMMARY.md new file mode 100644 index 0000000..dbfaee6 --- /dev/null +++ b/SUMMARY.md @@ -0,0 +1,68 @@ +# Summary + +- [页面制作](chapter1/00_intro.md) + - [Photoshop](chapter1/01_photoshop.md) + - [工具、面板、视图](chapter1/01_01_tool_panel_view.md) + - [测量及取色](chapter1/01_02_measurement_and_color.md) + - [切图](chapter1/01_03_slice.md) + - [图片保存](chapter1/01_04_save_image.md) + - [图片优化与合并](chapter1/01_05_image_optimisation.md) + - [开发及调试工具](chapter1/02_dev_tools.md) + - [Sublime 编辑器](chapter1/02_01_sublime.md) + - [Atom 编辑器](chapter1/02_02_atom.md) + - [HTML](chapter1/03_html.md) + - [HTML 简介](chapter1/03_01_html_intro.md) + - [HTML 语法](chapter1/03_02_html_sytax.md) + - [HTML 标签](chapter1/03_05_html_tags.md) + - [实体字符](chapter1/03_03_html_ascii_encoding.md) + - [浏览器兼容](chapter1/03_04_cross_browser.md) + - [CSS](chapter1/04_css_intro.md) + - [语法](chapter1/04_01_css_sytax.md) + - [选择器](chapter1/04_02_selector.md) + - [文本](chapter1/04_03_text.md) + - [盒模型](chapter1/04_04_box_model.md) + - [背景](chapter1/04_05_background.md) + - [布局](chapter1/04_06_layout.md) + - [变形](chapter1/04_07_transform.md) + - [动画](chapter1/04_08_animation.md) + - [常见布局样例](chapter1/04_09_layout_demo.md) +- [JavaScript 程序设计](chapter2/00_intro.md) + - [JavaScript 介绍](chapter2/01_javascript_intro.md) + - [调试器](chapter2/02_dev_tools.md) + - [基础语法](chapter2/03_basic_syntax.md) + - [类型系统](chapter2/04_data_type.md) + - [类型判断](chapter2/11_js_type_determin.md) + - [内置对象](chapter2/05_internal_object.md) + - [变量作用域](chapter2/06_scope.md) + - [表达式与运算符号](chapter2/07_statement_and_operator.md) + - [语句](chapter2/08_statement.md) + - [闭包](chapter2/09_closure.md) + - [面向对象](chapter2/10_object.md) + - [正则表达式](chapter2/12_reg_exp.md) +- [DOM 编程](chapter3/00_intro.md) + - [文档树（DOM Tree）](chapter3/01_dom_tree.md) + - [节点操作](chapter3/02_node_manipulation.md) + - [操作属性](chapter3/03_attribute.md) + - [样式操作](chapter3/04_style_manipulation.md) + - [事件](chapter3/05_events.md) + - [多媒体（视频与音频）](chapter3/08_multimedia.md) + - [Canvas](chapter3/07_canvas.md) + - [BOM](chapter3/10_bom.md) + - [数据通信](chapter3/09_network.md) + - [数据存储](chapter3/11_storage.md) + - [动画](chapter3/06_animation.md) + - [表单操作](chapter3/12_form_manipulation.md) + - [列表操作](chapter3/13_list_manipulation.md) +- [页面架构](chapter4/00_intro.md) + - [CSS Reset](chapter4/01_CSS_Reset.md) + - [布局解决方案](chapter4/02_layout.md) + - [响应式布局](chapter4/03_responsive.md) + - [页面优化](chapter4/04_page_optimisation.md) + - [规范与模块化](chapter4/05_modulation.md) +- [产品前端架构](chapter5/00_intro.md) + - [协作流程](chapter5/01_collaboration.md) + - [接口设计](chapter5/02_design_api.md) + - [版本控制](chapter5/03_version_control.md) + - [技术选型](chapter5/04_tech_selection.md) + - [开发实践](chapter5/05_development.md) +- [附录 A：书单](Booklist.md) diff --git a/SampleCode/CSS/Animation.html b/SampleCode/CSS/Animation.html new file mode 100644 index 0000000..da692ae --- /dev/null +++ b/SampleCode/CSS/Animation.html @@ -0,0 +1,57 @@ + + + + + + Animation + + + + +

动画 animation

+ + + + diff --git a/SampleCode/CSS/AnimationPractice.html b/SampleCode/CSS/AnimationPractice.html new file mode 100644 index 0000000..97c9338 --- /dev/null +++ b/SampleCode/CSS/AnimationPractice.html @@ -0,0 +1,151 @@ + + + + + + Animation Practice + + + + +

3D 正方体组合旋转

back

front

right

left

botto

top

+ + + + diff --git a/SampleCode/CSS/Transform2D.html b/SampleCode/CSS/Transform2D.html new file mode 100644 index 0000000..2ce8dfd --- /dev/null +++ b/SampleCode/CSS/Transform2D.html @@ -0,0 +1,185 @@ + + + + + + Transform 2D + + + + +

Transform 2D

可忽略所有`:after`的样式

transform (translate & rotate)

translate(50%) -> rotate(45deg)

+
+ +

rotate(45deg) -> translate(50%)

+
+ +

translate-origin

transform-origin: 100% 100%

+
+ +

scale

scale(0.5)

+
+ +

rotate(45deg) scale(1.5, 2)

+
+ + +

skew

skew(-45deg, 45deg)

+
+ + + + diff --git a/SampleCode/CSS/Transform3D.html b/SampleCode/CSS/Transform3D.html new file mode 100644 index 0000000..8fcfcb7 --- /dev/null +++ b/SampleCode/CSS/Transform3D.html @@ -0,0 +1,236 @@ + + + + + + Transfomr 3D + + + + +

Transform 3D

可以忽略所有`:after`的样式

rotate

+ +

perspective-origin

top

50% 50%

bottom

+ +

translate3d(x, y, z)

(10px, 10px, 200px)

(0, 0, -100px)

(0, 0, 0)

+ +

scale3d

改变轴的比例

scale3d(1.2, 1.2, 1)

+ +

rotate3d

(0, 0, 1, 45deg)

(1, 1, 1, 45deg)

(-1, -1, -1, 45deg)

+ +

transform-style

preserve-3d

+ +

flat

+ +

backface-visibility

visible

hidden

+ + + + diff --git a/SampleCode/CSS/Transition.html b/SampleCode/CSS/Transition.html new file mode 100644 index 0000000..119f279 --- /dev/null +++ b/SampleCode/CSS/Transition.html @@ -0,0 +1,193 @@ + + + + + + Transition + + + + +

动画 - Transition

transition

无过度

有过度

+ +

transition-property

none

+ +

all

+ +

left

+ +

color

+ +

多个动画，多个时间

multipe

+ + + + diff --git a/SampleCode/Layout/00_center_horizontal.html b/SampleCode/Layout/00_center_horizontal.html new file mode 100644 index 0000000..aacc672 --- /dev/null +++ b/SampleCode/Layout/00_center_horizontal.html @@ -0,0 +1,74 @@ + + + + + 水平居中 + + + + + + +

inline-block + text-align

+ + + +

table + margin

+ + + +

absolute + transform

+ + + + +

flex + justify-content

+ + + + diff --git a/SampleCode/Layout/01_center_vertical.html b/SampleCode/Layout/01_center_vertical.html new file mode 100644 index 0000000..7320d1a --- /dev/null +++ b/SampleCode/Layout/01_center_vertical.html @@ -0,0 +1,41 @@ + + + + + + 垂直居中 + + + + + + +

+ + + + + diff --git a/SampleCode/Layout/02multiple_column.html b/SampleCode/Layout/02multiple_column.html new file mode 100644 index 0000000..0dfef6e --- /dev/null +++ b/SampleCode/Layout/02multiple_column.html @@ -0,0 +1,16 @@ + + + + + 多列布局 - 一列定宽 + + +

+ + + diff --git a/TOC.md b/TOC.md new file mode 100644 index 0000000..dbfaee6 --- /dev/null +++ b/TOC.md @@ -0,0 +1,68 @@ +# Summary + +- [页面制作](chapter1/00_intro.md) + - [Photoshop](chapter1/01_photoshop.md) + - [工具、面板、视图](chapter1/01_01_tool_panel_view.md) + - [测量及取色](chapter1/01_02_measurement_and_color.md) + - [切图](chapter1/01_03_slice.md) + - [图片保存](chapter1/01_04_save_image.md) + - [图片优化与合并](chapter1/01_05_image_optimisation.md) + - [开发及调试工具](chapter1/02_dev_tools.md) + - [Sublime 编辑器](chapter1/02_01_sublime.md) + - [Atom 编辑器](chapter1/02_02_atom.md) + - [HTML](chapter1/03_html.md) + - [HTML 简介](chapter1/03_01_html_intro.md) + - [HTML 语法](chapter1/03_02_html_sytax.md) + - [HTML 标签](chapter1/03_05_html_tags.md) + - [实体字符](chapter1/03_03_html_ascii_encoding.md) + - [浏览器兼容](chapter1/03_04_cross_browser.md) + - [CSS](chapter1/04_css_intro.md) + - [语法](chapter1/04_01_css_sytax.md) + - [选择器](chapter1/04_02_selector.md) + - [文本](chapter1/04_03_text.md) + - [盒模型](chapter1/04_04_box_model.md) + - [背景](chapter1/04_05_background.md) + - [布局](chapter1/04_06_layout.md) + - [变形](chapter1/04_07_transform.md) + - [动画](chapter1/04_08_animation.md) + - [常见布局样例](chapter1/04_09_layout_demo.md) +- [JavaScript 程序设计](chapter2/00_intro.md) + - [JavaScript 介绍](chapter2/01_javascript_intro.md) + - [调试器](chapter2/02_dev_tools.md) + - [基础语法](chapter2/03_basic_syntax.md) + - [类型系统](chapter2/04_data_type.md) + - [类型判断](chapter2/11_js_type_determin.md) + - [内置对象](chapter2/05_internal_object.md) + - [变量作用域](chapter2/06_scope.md) + - [表达式与运算符号](chapter2/07_statement_and_operator.md) + - [语句](chapter2/08_statement.md) + - [闭包](chapter2/09_closure.md) + - [面向对象](chapter2/10_object.md) + - [正则表达式](chapter2/12_reg_exp.md) +- [DOM 编程](chapter3/00_intro.md) + - [文档树（DOM Tree）](chapter3/01_dom_tree.md) + - [节点操作](chapter3/02_node_manipulation.md) + - [操作属性](chapter3/03_attribute.md) + - [样式操作](chapter3/04_style_manipulation.md) + - [事件](chapter3/05_events.md) + - [多媒体（视频与音频）](chapter3/08_multimedia.md) + - [Canvas](chapter3/07_canvas.md) + - [BOM](chapter3/10_bom.md) + - [数据通信](chapter3/09_network.md) + - [数据存储](chapter3/11_storage.md) + - [动画](chapter3/06_animation.md) + - [表单操作](chapter3/12_form_manipulation.md) + - [列表操作](chapter3/13_list_manipulation.md) +- [页面架构](chapter4/00_intro.md) + - [CSS Reset](chapter4/01_CSS_Reset.md) + - [布局解决方案](chapter4/02_layout.md) + - [响应式布局](chapter4/03_responsive.md) + - [页面优化](chapter4/04_page_optimisation.md) + - [规范与模块化](chapter4/05_modulation.md) +- [产品前端架构](chapter5/00_intro.md) + - [协作流程](chapter5/01_collaboration.md) + - [接口设计](chapter5/02_design_api.md) + - [版本控制](chapter5/03_version_control.md) + - [技术选型](chapter5/04_tech_selection.md) + - [开发实践](chapter5/05_development.md) +- [附录 A：书单](Booklist.md) diff --git a/WebCreation/WebCreation-CSS-1.md b/WebCreation/WebCreation-CSS-1.md deleted file mode 100644 index f1f1f40..0000000 --- a/WebCreation/WebCreation-CSS-1.md +++ /dev/null @@ -1,707 +0,0 @@ - - -**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* - -- [文本](#%E6%96%87%E6%9C%AC) - - [字体](#%E5%AD%97%E4%BD%93) - - [改变字号](#%E6%94%B9%E5%8F%98%E5%AD%97%E5%8F%B7) - - [改变字体](#%E6%94%B9%E5%8F%98%E5%AD%97%E4%BD%93) - - [加粗字体](#%E5%8A%A0%E7%B2%97%E5%AD%97%E4%BD%93) - - [倾斜字体](#%E5%80%BE%E6%96%9C%E5%AD%97%E4%BD%93) - - [更改行距](#%E6%9B%B4%E6%94%B9%E8%A1%8C%E8%B7%9D) - - [font shorthand](#font-shorthand) - - [改变文字颜色](#%E6%94%B9%E5%8F%98%E6%96%87%E5%AD%97%E9%A2%9C%E8%89%B2) - - [对齐方式](#%E5%AF%B9%E9%BD%90%E6%96%B9%E5%BC%8F) - - [文字居中](#%E6%96%87%E5%AD%97%E5%B1%85%E4%B8%AD) - - [文本垂直对齐](#%E6%96%87%E6%9C%AC%E5%9E%82%E7%9B%B4%E5%AF%B9%E9%BD%90) - - [文本缩进](#%E6%96%87%E6%9C%AC%E7%BC%A9%E8%BF%9B) - - [格式处理](#%E6%A0%BC%E5%BC%8F%E5%A4%84%E7%90%86) - - [保留空格格式](#%E4%BF%9D%E7%95%99%E7%A9%BA%E6%A0%BC%E6%A0%BC%E5%BC%8F) - - [文字换行](#%E6%96%87%E5%AD%97%E6%8D%A2%E8%A1%8C) - - [文本装饰](#%E6%96%87%E6%9C%AC%E8%A3%85%E9%A5%B0) - - [文字阴影](#%E6%96%87%E5%AD%97%E9%98%B4%E5%BD%B1) - - [文本装饰（下划线等）](#%E6%96%87%E6%9C%AC%E8%A3%85%E9%A5%B0%EF%BC%88%E4%B8%8B%E5%88%92%E7%BA%BF%E7%AD%89%EF%BC%89) - - [高级设置](#%E9%AB%98%E7%BA%A7%E8%AE%BE%E7%BD%AE) - - [省略字符](#%E7%9C%81%E7%95%A5%E5%AD%97%E7%AC%A6) - - [更换鼠标形状](#%E6%9B%B4%E6%8D%A2%E9%BC%A0%E6%A0%87%E5%BD%A2%E7%8A%B6) - - [强制继承](#%E5%BC%BA%E5%88%B6%E7%BB%A7%E6%89%BF) -- [盒模型](#%E7%9B%92%E6%A8%A1%E5%9E%8B) - - [属性](#%E5%B1%9E%E6%80%A7) - - [width](#width) - - [height](#height) - - [padding](#padding) - - [margin](#margin) - - [margin 合并](#margin-%E5%90%88%E5%B9%B6) - - [border](#border) - - [border-radius](#border-radius) - - [overflow](#overflow) - - [box-sizing](#box-sizing) - - [box-shadow](#box-shadow) - - [outline](#outline) - - [TRBL](#trbl) - - [值缩写](#%E5%80%BC%E7%BC%A9%E5%86%99) -- [背景](#%E8%83%8C%E6%99%AF) - - [background-color](#background-color) - - [background-image](#background-image) - - [background-repeat](#background-repeat) - - [background-attachment](#background-attachment) - - [background-position](#background-position) - - [Sprite 的使用](#sprite-%E7%9A%84%E4%BD%BF%E7%94%A8) - - [linear-gradient](#linear-gradient) - - [radial-gradient](#radial-gradient) - - [repeat-*-gradient](#repeat--gradient) - - [background-origin](#background-origin) - - [background-clip](#background-clip) - - [background-size](#background-size) - - [background shorthand](#background-shorthand) - - - -### 文本 - -

See the Pen FEND_Fonts by Li Xinyang (@li-xinyang) on CodePen.

- - -#### 字体 - -##### 改变字号 - -`font-size: | | | | inherit` - -- `` 有 small large medium -- `` 有 smaller larger - -```stylus -div - font-size 12px - p#sample0 - font-size 16px - p#sample1 - font-size 2em - p#sample2 - font-size 200% -``` - -NOTE：以上两值在开发中并不常用。`2em` 与 `200%` 都为父元素默认大小的两倍（参照物为父元素的字体大小 `12px`）。 - -##### 改变字体 - -`font-family: [ | ]# ` - -`` 可选选项，但具体使用字体由浏览器决定 -- serif -- sans-serif -- cursive -- fantasy -- monospace - -```css -font-family: arial, Verdana, sans-serif; -``` - -NOTE：优先使用靠前的字体 - -##### 加粗字体 - -`font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900` - -```css -font-weight: normal; -font-weight: bold; -``` - -##### 倾斜字体 - -`font-style: normal | italic | oblique | inherit` - -`italic` 使用字体中的斜体，而 `oblique` 在没有斜体字体时强制倾斜字体。 - -##### 更改行距 - -`line-height: normal | | | ` - -`normal` 值为浏览器决定，在1.1至1.2之间（通常设置值为1.14左右） - -```css -/* length 类型 */ -line-height: 40px; -line-height: 3em; -/* percentage 类型 */ -line-height: 300%; -/* number 类型 */ -line-height: 3; -``` - -NOTE：当`line-height`为 `number` 类型时，子类直接继承其数值（不计算直接继承）。而当为 `percentage` 类型时，子类则会先计算再显示（先计算后继承）。 - -##### font shorthand - -`font: [ [ <‘font-style’> || || <‘font-weight’> || <‘font-stretch’> ]? <‘font-size’> [ / <‘line-height’> ]? <‘font-family’> ] | caption | icon | menu | message-box | small-caption | status-bar` - -```css -font: 30px/2 "Consolas", monospace; -font: italic bold 20px/1.5 arial, serif; -font: 20px arial, serif; -``` - -NOTE：当其他值为空时，均被设置为默认值。 - -##### 改变文字颜色 - -`color: ` - -```css -element { color: red; } -element { color: #f00; } -element { color: #ff0000; } -element { color: rgb(255,0,0); } -element { color: rgb(100%, 0%, 0%); } -element { color: hsl(0, 100%, 50%); } - -/* 50% translucent */ -element { color: rgba(255, 0, 0, 0.5); } -element { color: hsla(0, 100%, 50%, 0.5); } - -/* 全透明 */ -element { color: transparent' } -element { color: rgba(0, 0, 0, 0); } -``` - -#### 对齐方式 - -##### 文字居中 - -`text-align: start | end | left | right | center | justify | match-parent | start end` - -NOTE：默认为文本左对齐。 - -##### 文本垂直对齐 - -`vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | | ` - -NOTE：``的参照物为`line-height` - -##### 文本缩进 - -`text-indent: | && [ hanging || each-line ]` - -NOTE：缩进两个字可使用 `text-indent: 2em;` - -#### 格式处理 - -##### 保留空格格式 - -`white-space: normal | pre | nowrap | pre-wrap | pre-line` - -`pre` 行为同 `

` 一致。
-
-
- 
-  
-   
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
- 
-  New lines Spaces and tabs Text wrapping
normal Collapse Collapse Wrap
nowrap Collapse Collapse No wrap
pre Preserve Preserve No wrap
pre-wrap Preserve Preserve Wrap
pre-line Preserve Collapse Wrap
-
-##### 文字换行
-
-`word-wrap: normal | break-word`
-
-NOTE：允许长单词自动换行。
-
-`word-break: normal | break-all | keep-all`
-
-NOTE：`break-all` 单词中的任意字母间都可以换行。
-
-#### 文本装饰
-
-##### 文字阴影
-
-`text-shadow:none | #` 或 `text-shadow:none | [{2,3}&&?]#`
-
-```css
-p {
-  text-shadow: 1px 1px 1px #000,
-               3px 3px 5px blue;
-}
-```
-
-1. value = The X-coordinate X 轴偏移像素
-2. value = The Y-coordinate Y 轴偏移像素
-3. value = The blur radius  阴影模糊半径
-4. value = The color of the shadow 阴影颜色（默认为文字颜色）
-
-##### 文本装饰（下划线等）
-
-`text-decoration: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>`
-
-```css
-h1.under {
-    text-decoration: underline;
-}
-h1.over {
-    text-decoration: overline;
-}
-p.line {
-    text-decoration: line-through;
-}
-p.blink {
-    text-decoration: blink;
-}
-a.none {
-    text-decoration: none;
-}
-p.underover {
-    text-decoration: underline overline;
-}
-```
-
-#### 高级设置
-
-##### 省略字符
-
-`text-overflow: [ clip | ellipsis |  ]{1,2}`
-
-```css
-/* 常用配合 */
-text-overflow: ellipsis;
-overflow: hidden; /* 溢出截取 */
-white-space: nowrap; /* 禁止换行 */
-```
-
-##### 更换鼠标形状
-
-`cursor: [[,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ]] | inherit`
-
-**常用属性**
-
-`cursor: [,]*[auto | default | none | help | pointer | zoom-in | zoom-out | move]`
-
-- `` 图片资源地址代替鼠标默认形状
-- `` 默认光标
-- `` 隐藏光标
-- `` 手型光标
-- ``
-- ``
-- ``
-
-```css
-cursor: pointer;
-cursor: url(image-name.cur), pointer;
-/* 当 uri 失效时或者则会起作用 */
-```
-
-##### 强制继承
-
-`inherit` 会强制继承父元素的属性值。
-
-```css
-font-size: inherit;
-font-family: inherit;
-font-weight: inherit;
-...
-word-wrap: inherit;
-work-break: inherit
-text-showdow: inherit
-```
-
-NOTE：具体在使用时可查询文档
-
-### 盒模型
-
-See the Pen FEND_003_BoxModel by Li Xinyang (@li-xinyang) on CodePen.
-
-
-#### 属性
-
-![](../img/B/box-module.jpg)
-
-##### width
-
-**内容盒子宽**
-
-`width:  |  | auto | inherit`
-
-NOTE：通常情况下百分比得参照物为元素的父元素。`max-width` 与 `min-width` 可以设置最大与最小宽度。
-
-##### height
-
-**内容盒子高**
-
-`height:  |  | auto | inherit`
-
-NOTE：默认情况元素的高度为内容高度。`max-height` 与 `min-height` 可以设置最大与最小高度。
-
-##### padding
-
-![](../img/P/padding-sample.png)
-
-`padding: [ | ]{1,4} | inherit`
-
-##### margin
-
-![](../img/M/margin-sample.png)
-
-`margin: [ |  | auto]{1,4} | inherit`
-
-NOTE：`margin` 默认值为 `auto`
-
-Trick：
-
-```
-/* 可用于水平居中 */
-margin: 0 auto;
-```
-
-###### margin 合并
-
-![](../img/M/margin-merge.png)
-
-毗邻元素外间距（margin）会合并，既取相对较大的值。父元素与第一个和最后一个子元素的外间距也可合并。
-
-##### border
-
-![](../img/B/border-sample.png)
-
-```
-border: [ ||  || ] | inherit
-border-width: [ | thin | medium | thick]{1,4} | inherit
-border-style: [solid | dashed | dotted | ...]{1,4} |inherit
-border-colro: [ | transparent]{1,4} | inherit
-```
-
-NOTE：`border-color` 默认为元素字体颜色。
-
-##### border-radius
-
-![](../img/B/border-radius-sample1.png)
-
-```
-/* 水平半径/垂直半径 */
-border-radius: [  |  ]{1,4} [ / [  |  ]{1,4} ]?
-```
-
-NOTE：四个角的分解属性由左上角顺时针附值。
-
-##### overflow
-
-![](../img/O/overflow-sample.png)
-
-`overflow: visible | hidden | scroll | auto`
-
-NOTE：默认属性为 `visible`。使用 `overflow-x` 与 `overflow-y` 单独的设置水平和垂直方向的滚动条。
-
-##### box-sizing
-
-![](../img/B/box-sizing.png)
-
-![](../img/B/box-sizing1.png)
-
-`box-sizing: content-box | border-box | inherit`
-
-- `content-box` = 内容盒子宽高 + 填充（`Padding`）+ 边框宽（`border-width`）
-- `border-box` = 内容盒子宽高
-
-##### box-shadow
-
-![](../img/B/box-shadow.png)
-
-`box-shadown: none | [inset? && [   ? ? ? ] ]#`
-
-```html
-box-shadow: 4px  6px   3px  0px red;
-             |    |     |    |
-          水平偏移|     |    |
-               垂直偏移 |    |
-                    模糊半径 |
-                          阴影大小
-```
-
-NOTE：水平与垂直偏移可以为负值即相反方向偏移。颜色默认为文字颜色。阴影不占据空间，仅为修饰效果。
-
-##### outline
-
-```
-outline: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ]
-outline-width:  | thin | medium | thick | inherit
-outline-style: solid | dashed | dotted | ... | inherit
-outline-color:  | invert | inherit
-/* invert 与当前颜色取反色 */
-```
-
-NOTE：`outline` 与 `border` 相似但无法分别设置四个方向的属性。`outline` 并不占据空间，而 `border` 占据空间，且显示位于 `border` 以外。
-
-#### TRBL
-
-![](../img/T/TRBL.png)
-
-![](../img/B/border-radius-sample.png)
-
-TRBL (Top, Right, Bottom, Left) 即为顺时针从顶部开始。具有四个方向的属性都可以通过 `*-top` `*-right` `*-bottom` 与 `*-left` 单独对其进行设置。
-
-#### 值缩写
-
-下面的值缩写以 `padding` 为例。
-
-> 对面相等，后者省略；四面相等，只设一个。
-
-```html
-/*      四面值 */
-padding: 20px;
-padding: 20px 20px 20px 20px;
-
-/*      上下值 右左值 */
-padding: 20px   10px;
-padding: 20px 10px 20px 10px;
-
-/*       上值 右左值 下值 */
-padding: 20px 10px   30px;
-padding: 20px 10px 30px 10px;
-```
-
-
-### 背景
-
-#### background-color
-
-```
-background-color: 
-background-color: #f00;
-background-color: rgba(255, 0, 0, 0.5);
-background-color: transparent; /* 默认值 */
-```
-
-#### background-image
-
-```
-background-image: [, ]*
-/*  =  | none */
-background-image: url("../image/pic.png");
-background-image: url("../image/pic.png0"), url("../image/pic1.png");
-/* 多张背景图时，先引入的图片在上一层后引入则在下一层 */
-```
-
-NOTE：当`background-color` 与 `background-image` 共存时，背景颜色永远在最底层（于背景图片之下）。
-
-#### background-repeat
-
-`background-repeat` 需与背景图片数量一致。
-
-```
-background-repeat: [,  = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
-
-/*                   X 轴     Y 轴 */
-background-repeat: no-repeat repeat;
-```
-
-- `space` 平铺并在水平和垂直留有空隙，空隙的大小为图片均匀分布后完整覆盖显示区域的宽高
-- `round` 不留空隙平铺且覆盖显示区域，图标会被缩放以达到覆盖效果（缩放不一定等比）
-
-#### background-attachment
-
-当页面内容超过显示区域时，使用 `local` 使背景图片同页面内容一同滚动。
-
-```
-background-attachment: [, ]*
- = scroll | fixed | local
-```
-
-#### background-position
-
-```
-background-position: [, ]*
- = [left|center|right|top|bottom||]|[left|center|right|top|bottom||] [left|center|right|top|bottom||] | [center |[left|right][|]?]&&[center |[left|right][|]?]
-
-/* 默认位置为 */
-background-position: 0 0;
-
-/* percentage 是容器与图片的百分比重合之处*/
-background-position: 20% 50%;
-
-/* 等同效果 */
-background-position: 50% 50%;
-background-position: center center;
-
-background-position: 0 0;
-background-position: left top;
-
-background-position: 100% 100%;
-background-position: right bottom;
-
-/* 四个值时方向只为参照物 */
-background-position: right 10px top 20px;
-```
-
-![](../img/B/background-position.jpg)
-
-##### Sprite 的使用
-
-```html
-background-image: url(sprite.png)
-background-repeat: no-repeat;
-background-positon: 0 -100px
-```
-
-使用位置为负值将图片偏移使需要的图片位置上移并显示正确的图案。
-
-#### linear-gradient
-
-```
-linear-gradient()
-[[ | to [, ]+
- = [left | right] || [top | bottom]
- =  [ | ]?
-
-background-image: linear-gradient(red, blue);
-background-image: linear-gradient(to top, red, blue);
-background-image: linear-gradient(to right bottom, red, blue);
-background-image: linear-gradient(0deg, red, blue);
-background-image: linear-gradient(45deg, red, blue);
-background-image: linear-gradient(red, green, blue);
-background-image: linear-gradient(red, green 20%, blue);
-```
-
-![](../img/L/linear-gradient.jpg)
-
-#### radial-gradient
-
-```
-radial-gradient(   [ circle ||  ] [ at  ]? , | [ ellipse || [ |  ]{2}] [ at  ]? , | [ [ circle | ellipse ] ||  ] [ at  ]? , | at  ,  [ ,  ]+ )
-
- = closest-corner | closest-side | farthest-corner | farthest-side
- =  [  |  ]?
-
-background-image: radial-gradient(cloest-side, red, blue);
-background-image: radial-gradient(circle, red, blue);
-background-image: radial-gradient(circle 100px, red, blue);
-background-image: radial-gradient(red, blue);
-background-image: radial-gradient(100px 50px, red, blue);
-background-image: radial-gradient(100px 50px at 0 0, red, blue);
-background-image: radial-gradient(red, green 20%, blue);
-```
-
-![](../img/R/radial-gradient.jpg)
-
-#### repeat-*-gradient
-
-```
-background-image: repeating-linear-gradient(red, blue 20px, red 40px);
-background-image: repeating-radial-gradient(red, blue 20px, red 40px);
-```
-
-![](../img/R/repeating-gradient.jpg)
-
-#### background-origin
-
-**案例模型**
-
-![](../img/B/background-box-model.png)
-
-决定背景 (0,0) 坐标与 100% 坐标的区域。默认值为 `padding-box`。
-
-```
-[, ]*
- = border-box | padding-box | content-box
-
-background-image: url(red.png);
-background-repeat: no-repeat;
-
-background-origin: padding-box;
-background-origin: border-box;
-background-origin: content-box;
-```
-
-![](../img/B/background-origin.jpg)
-
-#### background-clip
-
-裁剪背景，默认值为`border-box`。
-
-```
-[, ]*
- = border-box | padding-box | content-box
-
-background-image: url(red.png);
-background-repeat: no-repeat;
-
-background-clip: border-box;
-background-clip: padding-box;
-background-clip: content-box;
-```
-
-![](../img/B/background-clip.jpg)
-
-#### background-size
-
-```
-[, ]*
- = [ |  | auto] {1, 2} | cover | contain
-
-background-image: url(red.png);
-background-repeat: no-repeat;
-background-position: 50% 50%;
-
-background-size: auto;
-background-size: 20px 20px;
-/* % 参照物为容器*/
-background-size: 50% 50%;
-/* 尽可能小，但宽度与高度不小过容器（充满容器） */
-background-size: cover;
-/* 尽可能大，但宽度与高度不超过容器（最大完全显示）*/
-background-size: contain;
-```
-
-![](../img/B/background-size.jpg)
-
-#### background shorthand
-
-```
-[
- =  ||  [/ ]? ||  ||  ||  || 
-
-/* 两个  第一个为 background-origin */
-/* 两个  第二个为 background-clip */
-/* 只出现一个  则即是 background-origin 也是 background-clip */
-
- =  || <'background-color'>
-
-background: url(red.png) 0 0/20px 20px no-repeat, url(blue.png) 50% 50%/contain no-repeat content-box green;
-```
-
-![](../img/B/background-shorthand.png)
diff --git a/WebCreation/WebCreation-CSS-2.md b/WebCreation/WebCreation-CSS-2.md
deleted file mode 100644
index 3103125..0000000
--- a/WebCreation/WebCreation-CSS-2.md
+++ /dev/null
@@ -1,856 +0,0 @@
-
-
-**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
-
-- [布局](#%E5%B8%83%E5%B1%80)
-  - [display](#display)
-    - [display:block](#displayblock)
-    - [display:inline](#displayinline)
-    - [display:inline-block](#displayinline-block)
-    - [display:none](#displaynone)
-  - [position](#position)
-    - [position:relative](#positionrelative)
-    - [position:absolute](#positionabsolute)
-    - [position:fixed](#positionfixed)
-    - [top/right/bottom/left](#toprightbottomleft)
-    - [z-index](#z-index)
-      - [z-index 栈](#z-index-%E6%A0%88)
-  - [float](#float)
-    - [clear](#clear)
-  - [flex](#flex)
-    - [flex 方向](#flex-%E6%96%B9%E5%90%91)
-      - [flex-direction](#flex-direction)
-      - [flex-wrap](#flex-wrap)
-      - [flex-flow](#flex-flow)
-      - [order](#order)
-    - [flex 弹性](#flex-%E5%BC%B9%E6%80%A7)
-      - [flex-basis](#flex-basis)
-      - [flex-grow](#flex-grow)
-      - [flex-shrink](#flex-shrink)
-      - [flex](#flex-1)
-    - [flex 对齐](#flex-%E5%AF%B9%E9%BD%90)
-      - [justify-content](#justify-content)
-      - [align-items](#align-items)
-      - [align-self](#align-self)
-      - [align-content](#align-content)
-- [变形](#%E5%8F%98%E5%BD%A2)
-  - [2D 变形](#2d-%E5%8F%98%E5%BD%A2)
-    - [transform](#transform)
-      - [rotate()](#rotate)
-      - [transform-origin](#transform-origin)
-      - [translate()](#translate)
-      - [scale()](#scale)
-      - [skew()](#skew)
-  - [3D 变形](#3d-%E5%8F%98%E5%BD%A2)
-    - [rotateY()](#rotatey)
-    - [perspective](#perspective)
-    - [perspective-origin](#perspective-origin)
-    - [translate3d()](#translate3d)
-    - [scale3d()](#scale3d)
-    - [rotate3d()](#rotate3d)
-    - [transform-style](#transform-style)
-    - [backface-visibility](#backface-visibility)
-- [动画](#%E5%8A%A8%E7%94%BB)
-  - [transition](#transition)
-    - [transition-property](#transition-property)
-    - [transition-duration](#transition-duration)
-    - [transition-delay](#transition-delay)
-    - [transition-timing-function](#transition-timing-function)
-  - [animation](#animation)
-    - [animation-name](#animation-name)
-    - [animation-duration](#animation-duration)
-    - [animation-timing-function](#animation-timing-function)
-    - [animation-iteration-count](#animation-iteration-count)
-    - [animation-direction](#animation-direction)
-    - [animation-play-state](#animation-play-state)
-    - [animation-delay](#animation-delay)
-    - [animation-fill-mode](#animation-fill-mode)
-    - [@keyframes](#@keyframes)
-
-
-
-
-### 布局
-
-Firefox 布局可视化 **Gecko Reflow Visualisation**，布局是指浏览器将元素以正确的大小摆放在正确的位置上。
-
-#### display
-
-设置元素的显示方式
-
-|display|默认宽度|可设置宽高|起始位置|
-|-------|--------|----------|--------|
-|block|父元素宽度|是|换行|
-|inline|内容宽度|否|同行|
-|inline-block|内容宽度|是|同行|
-
-##### display:block
-
-- 默认宽高为父元素宽高
-- 可设置宽高
-- 换行显示
-
-##### display:inline
-
-- 默认宽度为内容宽度
-- 不可设置宽高
-- 同行显示（元素内部可换行）
-
-##### display:inline-block
-
-- 默认宽度为内容宽度
-- 可设置宽高
-- 同行显示
-- 整块换行
-
-##### display:none
-
-- 设置元素不显示
-
-`display:none` 与 `visibility:hidden` 的区别为 `display:none` 不显示且不占位，但 `visibility:hidden` 不显示但占位。
-
-![](../img/G/gecko-reflow-visualisation.gif)
-
-#### position
-
-`position` 用于设置定位的方式与`top` `right` `bottom` `left` `z-index` 则用于设置参照物位置（必须配合定位一同使用）。
-
-```
-position: static | relative | absolute | fixed
-/* 默认值为 static */
-
-```
-
-##### position:relative
-
-- 相对定位的元素仍在文档流之中，并按照文档流中的顺序进行排列。
-- 参照物为元素本身的位置。
-
-NOTE：最常用的目的为改变元素层级和设置为绝对定位的参照物。
-
-![](../img/P/position-relative.png)
-
-##### position:absolute
-
-- 默认宽度为内容宽度
-- 脱离文档流
-- 参照物为第一个定位祖先或根元素（HTML 元素）
-
-![](../img/P/position-absolute.png)
-
-##### position:fixed
-
-- 默认宽度为内容宽度
-- 脱离文档流
-- 参照物为视窗
-
-NOTE：宽高的100%的参照依然为视窗（例：网页遮罩效果）
-
-![](../img/P/position-fixed.png)
-
-##### top/right/bottom/left
-
-![](../img/L/layout-position.png)
-
-其用于设置元素边缘与参照物边缘的距离，且设置的值可为负值。在同时设置相对方向时，元素将被拉伸。
-
-##### z-index
-
-其用于设置 Z 轴上得排序，默认值为 0 但可设置为负值。（如不做设置，则按照文档流的顺序排列。后面的元素将置于前面的元素之上）
-
-![](../img/L/layouy-position-zindex.png)
-
-###### z-index 栈
-
-父类容器的 `z-index` 优于子类 `z-index` 如图
-
-![](../img/L/layout-position-zindex-stack.jpg)
-
-#### float
-
-其可实现块级元素同行显示并存在于文档流之中。
-
-```
-float: left | right | none | inherit
-```
-
-- 默认宽度为内容宽度
-- 脱离文档流（会被父元素边界阻挡与`position`脱离文档流的方式不同）
-- 指的方向一直移动
-
-![](../img/F/float-right.png)
-
-**float 元素在同一文档流中**，当同时进行 `float` 时它们会按照文档流中的顺序排列。(当所有父元素中的所有元素脱离文档流之后，父元素将失去原有默认的内容高度)
-
-![](../img/F/float-right-all.jpg)
-
-**float 元素是半脱离文档流的**，对元素是脱离文档流，但对于内容则是在文档流之中的（既元素重叠但内容不重叠）。
-
-![](../img/F/float-half-off.png)
-
-##### clear
-
-```
-clear: both | left | right | none | inherit
-```
-
-- 应用于后续元素
-- 应用于块级元素（block）
-
-**使用方法**：
-
-1. 浮动后续空白元素 `.emptyDiv {clear: both}`
-1. clearfix 于父元素
-
-```
-/* clearfix */
-.clearfix:after {
-   content: "."; /* Older browser do not support empty content */
-   visibility: hidden;
-   display: block;
-   height: 0;
-   clear: both;
-}
-.clearfix {zoom: 1;} /* 针对 IE 不支持 :after */
-```
-
-#### flex
-
-![](../img/F/flex-container-and-item.jpg)
-
-弹性布局可用于多行自适应，多列自适应，间距自适应和任意对齐。
-
-**创建 flex container**
-
-```
-display: flex
-/* 弹性容器内的均为弹性元素*/
-```
-
-**flex item**
-
-只有弹性容器在文档流中的子元素才属于弹性元素。
-
-```
-
-  Block Element
-  
-  Inline Element
-  
-  Absolute Block Element
-  
-
-```
-
-##### flex 方向
-
-###### flex-direction
-
-```
-
-flex-direction: row | row-reverse | column | column-reverse
-```
-
-![](../img/F/flex-direciton.png)
-
-###### flex-wrap
-
-```
-
-flex-wrap: nowrap | wrap | wrap-reverse
-```
-
-![](../img/F/flex-wrap.png)
-
-###### flex-flow
-
-`flex-flow` 为 `flex-wrap` 与 `flex-direction` 的简写，建议使用此属性（避免同时使用两个属性来修改）。
-
-```
-flex-flow: <'flex-direction'> || <'flex-wrap'>
-```
-
-![](../img/F/flex-flow.png)
-
-###### order
-
-`order` 的值为相对的（同被设置和未被设置的值相比较），当均为设置时默认值为 0 则按照文档流中的顺序排列。
-
-```
-order: 
-
-```
-
-![](../img/F/flex-order0.png)
-![](../img/F/flex-order1.png)
-
-##### flex 弹性
-
-###### flex-basis
-
-其用于设置 `flex-item` 的初始宽高（并作为弹性的基础）。如果 `flex-direction` 是以 `row` 排列则设置**宽**，如以 `column` 排列则设置**高**。
-
-```
-flex-basis: main-size | 
-```
-
-###### flex-grow
-
-伸展因子，其为弹性布局中最重要的元素之一，`flex-grow` 设置元素可用空余空间的比例。`flex-container` 先安装宽度（`flex-basis`）进行布局，如果有空余空间就按照 `flex-grow` 中的比例进行分配。
-
-**Width/Height = flex-basis + flex-grow/sum(flow-grow) * remain**
-
-```
-flex-grow: 
-initial: 0
-
-```
-
-![](../img/F/flex-grow0.png)
-![](../img/F/flex-grow1.png)
-![](../img/F/flex-grow2.png)
-
-###### flex-shrink
-
-收缩因子，用于分配超出的负空间如何从可用空间中进行缩减。
-
-```
-flex-shrink: 
-initial: 1
-
-```
-
-**Width/Height = flex-basis + flow-shrink/sum(flow-shrink) * remain**
-
-remain 为负值，既超出的区域。
-
-![](../img/F/flex-shrink.png)
-
-###### flex
-
-其为 `flex-grow` `flex-shrink` `flex-basis` 的值缩写。
-
-```
-flex: <'flex-grow'> || <'flex-shrink'> || <'flex-basis'>
-initial: 0 1 main-size
-```
-
-##### flex 对齐
-
-###### justify-content
-
-其用于设置主轴（main-axis）上的对其方式。弹性元素根据主轴（横向和纵向均可）定位所以不可使用 `left` 与 `right` 因为位置为相对的。（行为相似的属性有 `text-align`）
-
-```
-justify-content: flex-start | flex-end | center | space-between | space-around
-
-```
-
-![](../img/F/flex-justify-content.png)
-
-###### align-items
-
-其用于设置副轴（cross-axis）上的对其方式。（行为相似的属性有 `vertical-align`）
-
-```
-align-items: flex-start | flex-end | center | baseline | stretch
-
-```
-
-![](../img/F/flex-align-items.png)
-
-###### align-self
-
-其用于设置单个 `flex-item` 在 cross-axis 方向上的对其方式。
-
-```
-align-self: auto | flex-start | flex-end | center | baseline | stretch
-
-```
-
-![](../img/F/flex-align-self.png)
-
-###### align-content
-
-其用于设置 cross-axis 方向上的对其方式。
-
-```
-align-content:flex-start | flex-end | center | space-between | space-around | stretch
-
-```
-
-![](../img/F/flex-align-content.png)
-
-### 变形
-
-#### 2D 变形
-
-##### transform
-
-`transform` 中可以写一个或多个方法。
-
-```
-trnasform: none | +
-transform: none
-
-transform: +
-
-transform: translate(50%) rotate(45deg);
-transform: rotate(45deg) transform(50%)
-
-```
-
-![](../img/T/transform-transform-function.png)
-
-###### rotate()
-
-```
-rotate()
-
-rotate(45deg);
-
-rotate(-60deg);
-
-```
-
-![](../img/T/transform-rotate.png)
-
-###### transform-origin
-
-其用于设置原点的位置（默认位置为元素中心）第一值为 X 方向，第二值为 Y 方向， 第三值为 Z 方向。（当值空出未写的情况下默认为 50%）
-
-```
-transform-origin: [  |  | left | center | right | top | bottom] | [ [  |  | left | center | right ] && [  |  | top | center | bottom ] ] ?
-
-
-
-transform-origin: 50% 50%;
-transform-origin: 0 0;
-transform-origin: right 50px 20px;
-transform-origin: top right 20px;
-```
-
-![](../img/T/transform-origin.png)
-
-###### translate()
-
-移动方法，参数分别代表 X 与 Y 轴的移动（偏移值均可为负值）。
-
-```
-translate([, ]?)
-
-
-translationX()
-translationY()
-
-transform: translate(50px);
-transform: translate(50px, 20%);
-
-transform: translate(-50px);
-transform: translate(20%);
-```
-
-![](../img/T/transform-traslate.png)
-
-###### scale()
-
-缩放方法，参数分别代表 X 与 Y 轴的缩放（缩放值均可为小数）。当第二值忽略时，默认设置为等同第一值。
-
-```
-scale( [, ]?)
-
-scaleX()
-scaleY()
-
-
-transform: scale(1.2);
-
-transform: scale(1, 1.2);
-
-transform: scaleX(1.2);
-
-transform: scaleY(1.2);
-```
-
-![](../img/T/transform-scale.png)
-
-###### skew()
-
-其为倾斜的方法。第一值为 Y 轴往 X 方向倾斜（逆时针），第二值为 X 轴往 Y 方向倾斜（顺时针）。（倾斜值可为负值）
-
-```
-skew([, ]?)
-
-skewX()
-skewY()
-
-transform: skew(30deg);
-transform: skew(30deg, 30deg);
-transform: skewX(30deg);
-transform: skewY(30deg);
-```
-
-![](../img/T/transform-skew.png)
-
-#### 3D 变形
-
-##### rotateY()
-
-3D 空间旋转。
-
-```
-transform: rotateY()
-```
-
-##### perspective
-
-其用于设置图片 Y 轴旋转后的透视效果。`` 可以理解为人眼与元素之间的距离，越紧则效果越明显。
-
-```
-perspective: none | 
-
-perspective: none;
-perspective: 2000px;
-perspective: 500px;
-```
-
-![](../img/T/transform-perspective.png)
-
-##### perspective-origin
-
-其为设定透视的角度（透视位置均可设定为负值）。
-
-```
-perspective-origin: [  |  | left | center | right | top | bottom] | [ [  |  | left | center | right ] && [  |  | top | center | bottom ] ]
-
-perspective-origin: 50% 50%
-
-perspective-origin: left bottom;
-perspective-origin: 50% -800px;
-perspective-origin: right;
-```
-
-![](../img/T/transform-perspective-origin.png)
-
-##### translate3d()
-
-```
-translate3d(, , )
-
-translateX()
-translateY()
-translateZ()
-
-transform: translate3d(10px, 20%, 50px);
-
-transform: translateX(10px);
-transform: translateY(20%);
-transform: translateZ(-100px);
-```
-
-![](../img/T/transform-translate3d.png)
-
-##### scale3d()
-
-```
-scale3d(, , )
-
-scaleX()
-scaleY()
-scaleZ()
-
-transform: scale3d(1.2, 1.2, 1);
-transform: scale3d(1, 1.2, 1);
-transform: scale3d(1.2, 1, 1);
-transform: scaleZ(5);
-
-```
-
-![](../img/T/transform-scale3d.png)
-
-##### rotate3d()
-
-取 X Y Z 三轴上的一点并于坐标原点连线，以连线为轴进行旋转（逆时针）。
-
-```
-rotate3d(, , , )
-
-rotateX()
-rotateY()
-rotateZ()
-
-transform: rotate3d(1, 0, 0, 45deg);
-
-transform: rotate3d(0, 1, 0, 45deg);
-
-transform: rotate3d(0, 0, 1, 45deg);
-
-transform: rotate3d(1, 1, 1, 45deg);
-```
-
-![](../img/T/transform-rotate3d.png)
-
-##### transform-style
-
-其用于设置保留内部的 3D 空间，原因是一个元素进行`transform`之后内部默认为`flat`。
-
-```
-transform-style: flat | perserve-3d
-
-
-
-transform-style: flat;
-transform-style: preserve-3d;
-```
-
-![](../img/T/transform-transform-style.png)
-
-##### backface-visibility
-
-其用于设置背面不可见。
-
-```
-backface-visibility: visible | hidden
-
-backface-visibility: visible;
-backface-visibility: hidden;
-```
-
-![](../img/T/transform-backface-visibility.png)
-
-### 动画
-
-#### transition
-
-其为众多 `` 的值缩写。（当两个时间同时出现是，第一个时间为动画长度，第二个时间为动画延时）
-
-```
-transition:  [',' ]*
-
- = [none | ] ||  ||  || 
-
-
-transition: none;
-transition: left 2s ease 1s, color 2s;
-transition: 2s;
-```
-
-##### transition-property
-
-```
-transition-property: none |  [ ',' ]*
-
- = all | 
-
-transition-property: none;
-
-transition-property: all;
-transition-property: left;
-transition-property: left, color;
-```
-
-##### transition-duration
-
-```
-transition-duration: [, ]*
-
-transition-duration: 0s;
-transition-duration: 1s;
-transition-duration: 1s, 2s, 3s;
-```
-
-##### transition-delay
-
-```
-transition-delay: [,]*
-
-transition-delay: 0s;
-transition-delay: 1s;
-transition-delay: 1s, 2s, 3s;
-```
-
-##### transition-timing-function
-
-```
-transition-timing-function: [',' ]*
-
-
- = ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(,,,) | step-start | step-end | steps()[, [start | end]]?)
-
-
-
-transition-timing-function: ease;
-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
-transition-timing-function: linear;
-transition-timing-function: cubic-bezier(0, 0, 1, 1);
-```
-
-![](../img/T/transition-timing-function.png)
-
-#### animation
-
-```
-animation:  [',' ]*
-
- =  ||  ||  ||  ||  ||  ||  || single-animation-play-state>
-
-animation: none;
-animation: abc 2s ease 0s 1 normal none running;
-animation: abc 2s;
-animation: abc 1s 2s both, abcd 2s both;
-
-```
-
-动画可自动运行，但`transition`需要触发。
-
-##### animation-name
-
-`animation-name` 的名字可自由定义。
-
-```
-animation-name: #
-
- = none | 
-
-animation-name: none;
-animation-name: abc;
-animation-name: abc, abcd;
-```
-
-##### animation-duration
-
-与 `transition-duration` 属性值类似。
-
-```
-animation-duration: [, ]*
-
-animation-duration: 0s;
-animation-duration: 1s;
-animation-duration: 1s, 2s, 3s;
-```
-
-##### animation-timing-function
-
-其与之前的 `transition-timing-function` 完全一模一样。
-
-```
-animation-timing-function: #
-
- = 
-
-animation-timing-function: ease;
-animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
-animation-timing-function: linear;
-animation-timing-function: cubic-bezier(0, 0, 1, 1);
-animation-timing-function: ease, linear;
-```
-
-##### animation-iteration-count
-
-其用于动画执行的次数（其默认值为 1）。
-
-```
-animation-iteration-count: #
-
- = infinite | 
-
-animation-iteration-count: 1;
-animation-iteration-count: infinite;
-animation-iteration-count: 1, 2, infinite;
-```
-
-##### animation-direction
-
-其用于定义动画的运动方向。
-
-```
-animation-direction:#
-
- = normal | reverse | alternate | alternate-revers
-
-animation-direction: reverse
-
-animation-direction: alternate
-
-animation-direction: alternate-revers
-
-```
-
-##### animation-play-state
-
-其用于设定动画的播放状态。
-
-```
-animation-play-state: #
-
- = running | paused
-
-animation-play-state: running;
-animation-play-state: pasued;
-animation-play-state: running, paused;
-```
-
-##### animation-delay
-
-其用于设置动画的延时，同 `transition-delay` 值相同。
-
-```
-animation-delay: [, ]*
-anim
-animation-delay: 0s;
-animation-delay: 1s;
-animation-delay: 1s, 2s, 3s;
-```
-
-##### animation-fill-mode
-
-其用于设置动画开始时，是否保持第一帧的动画和动画在结束时时候保持最后的状态。
-
-```
-animation-fill-mode: [',' ]*
-
- = none | backwards | forwards | both
-
-animation-fill-mode: none;
-
-animation-fill-mode: backwards;
-
-animation-fill-mode: forwards;
-
-animation-fill-mode: both;
-
-animation-fill-mode: forwards, backwards;
-```
-
-##### @keyframes
-
-其用于定义关键帧。
-
-```
-
-@keyframes abc {
-  from {opacity: 1; height: 100px;}
-  to {opacity: 0.5; height: 200px;}
-}
-
-
-@keyframes abcd {
-  0% {opacity: 1; height: 100px;}
-  100% {opacity: 0.5; height: 200px}
-}
-
-@keyframes flash {
-  0%, 50%, 100% {opacity: 1;}
-  25%, 75% {opacity: 0;}
-}
-
-
-animation: abc 0.5s both;
-animation: flash 0.5s both;
-animaiton: abc 0.5s both, flash 0.5s both;
-```
-
-![](../img/A/animation-sample.gif)
-
-
-
This work by Li Xinyang is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
\ No newline at end of file
diff --git a/WebCreation/WebCreation-DevelopmentTool.md b/WebCreation/WebCreation-DevelopmentTool.md
deleted file mode 100644
index 200ce83..0000000
--- a/WebCreation/WebCreation-DevelopmentTool.md
+++ /dev/null
@@ -1,27 +0,0 @@
-
-
-**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
-
-- [开发及调试工具](#%E5%BC%80%E5%8F%91%E5%8F%8A%E8%B0%83%E8%AF%95%E5%B7%A5%E5%85%B7)
-  - [Sublime 快捷键](#sublime-%E5%BF%AB%E6%8D%B7%E9%94%AE)
-
-
-
-## 开发及调试工具
-
-- 文本编辑器或 IDE (集成开发环境)
-- Google Chrome, Firefox Firebug, Safari Developer Tool
-
-NOTE: [Google Chrome DevTools Doc](https://developer.chrome.com/devtools)
-
-
-### Sublime 快捷键
-command/control + P 进入查找命令（Goto Anything）,此时有三种选择：
-
-* ‘:’ 输入行数找到对应行 （control + G）
-* ‘@’ 找到特定函数 （command/control + R）
-* ‘#’ 找到对应变量与块
-
-学会使用[Emmet](http://emmet.io/)插件可有效的帮助进行前端编程。
-
-
This work by Li Xinyang is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
\ No newline at end of file
diff --git a/WebCreation/WebCreation-Photoshop.md b/WebCreation/WebCreation-Photoshop.md
deleted file mode 100644
index 1174666..0000000
--- a/WebCreation/WebCreation-Photoshop.md
+++ /dev/null
@@ -1,188 +0,0 @@
-
-
-**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
-
-- [Photoshop](#photoshop)
-  - [工具, 面板, 视图](#%E5%B7%A5%E5%85%B7-%E9%9D%A2%E6%9D%BF-%E8%A7%86%E5%9B%BE)
-  - [测量及取色](#%E6%B5%8B%E9%87%8F%E5%8F%8A%E5%8F%96%E8%89%B2)
-  - [切图](#%E5%88%87%E5%9B%BE)
-  - [保存](#%E4%BF%9D%E5%AD%98)
-    - [保存格式的选择](#%E4%BF%9D%E5%AD%98%E6%A0%BC%E5%BC%8F%E7%9A%84%E9%80%89%E6%8B%A9)
-  - [图片修改与维护](#%E5%9B%BE%E7%89%87%E4%BF%AE%E6%94%B9%E4%B8%8E%E7%BB%B4%E6%8A%A4)
-  - [图片优化与合并](#%E5%9B%BE%E7%89%87%E4%BC%98%E5%8C%96%E4%B8%8E%E5%90%88%E5%B9%B6)
-    - [图片的兼容](#%E5%9B%BE%E7%89%87%E7%9A%84%E5%85%BC%E5%AE%B9)
-
-
-
-## Photoshop
-
-**切图** 从设计稿中切除网页的素材并在代码中引入图片 (复杂的图片或者解决兼容问题)
-
-```html
-// 设计稿 (*.psd) -> 产出物 (*png, *.jpg)
-
-
-
-
-```
-
-### 工具, 面板, 视图
-
-在全局设置下将单位修改为像素，因其在 CSS 中运用最广。设置工作区布局为切图及图片编辑做准备（所需窗口为信息窗口，图层窗口以及历史记录窗口）。
-
-![](../img/P/photoshop-mainWindow.png)
-
-**切图常用工具**
-
-|工具名|示意图|注释|
-|------|:----:|----|
-|移动工具| ![](../img/H/hwa_03.png)||
-|矩形选框工具| ![](../img/H/hwa_01.png)||
-|魔棒工具|![](../img/H/hwa_05.png)|（容差 Tolerance 越小选择的范围就越小）|
-|剪裁工具| ![](../img/H/hwa_06.png) ||
-|切片工具| ![](../img/H/hwa_07.png)||
-|缩放工具| ![](../img/H/hwa_34.png)||
-|取色器| ![](../img/H/hwa_31.png)||
-
-图层（单层元素）与组（类似于文件夹）的区别。
-
-**辅助视图**，在视图菜单下启动
-
-- 对齐，会启动靠近吸附功能
-- 标尺，Command + R
-- 参考线，Command + ;
-
-![](../img/P/photoshop-menu.png)
-
-NOTE: 所有工具及快捷键如下。
-
-![](../img/T/ToolsPanelOverview.png)
-
-### 测量及取色
-
-所有能接受数字的属性都需要测量并尽可能百分百的还原设计稿。
-
-- 宽度，高度 (width, height)
-- 内外边距 (padding, margin)
-- 边框 (border)
-- 定位 (position)
-- 文字大小 (font-size)
-- 行高 (line-height)
-- 背景位置 (background-position)
-
-NOTE: 测量时尽可能放大画布以减少误差。量取文字是为了减少误差尽量选取尺寸大的文字进行测量。
-
-![](../img/P/photoshop-measure&colorSelection.png)
-
-**选框工具的多用途**，增（Shift）减（Alt）以及交叉选择（Shift + Alt）。左右（或上下）使用分离选框选择可以得到整两个分离边框的距离总值。
-
-![](../img/T/rect-selection-tool.gif)
-
-所有能接受颜色的属性都需要取色。
-
-- 边框色
-- 背景色
-- 文字色
-
-NOTE: 使用魔棒工具可以迅速识别背景色是否没*线性*渐变的方法。Mac OS X 推荐使用 **Sip** 可在 Mac App Store 免费下载。
-
-### 切图
-
-修饰性图标和内容性图片需要（在 HTML 的 `` 之中，只需站位不需切图）切出。切出的内容性图片应保存为 `*.jpg` 格式，而修饰性图片因保存为 `png24`（IE6 不支持半透明） 或 `png8` 它们不支持全透明。
-
-**隐藏文字**，方法一，直接在图层中隐藏文字图层。方法二（两种，分别应对于纯色和有背景需要隐藏文本的情况）如下图所示，使用自由变换。
-
-![](../img/B/btn-remove-text.gif)
-
-**PNG24**切图方法
-- 移动工具选中所需图层（Ctrl 多选）
-- 右键合并图层（Ctrl + E）
-- 复制到新图层
-
-**PNG8**带背景切图方法
-- 合并可见图层（Shift + Ctrl + E）
-- 矩形选框选择内容
-- 魔棒工具去除多余部分（Alt + 选取）
-
-**可平铺**背景的切图方法
-- 用矩形选择一个区域
-- 复制至新图层
-
-NOTE: X 轴平铺需要占满图片的宽，Y 轴平铺需要占满图片的高。
-
-**切片**工具（大图化小的方法，将一大图分为多小图）
-- 拉参考线
-- 选择切片工具
-- 点击 “基于参考线的切片” 按钮
-- 选择切片选择工具
-- 保存于新图层
-
-### 保存
-
-将需要的内容保存在独立的文件里便于之后的导出。（存储于 Web 所用格式 Alt + Shift + Ctrl + S）
-
-如需保存**独立图层**则要把需要的图层拖到新建的透明背景的图层，或在图层上右键复制（Duplicate）图层选择地址为新文件即可。
-
-**图片与背景合并**的切图方法如下
-
-![](../img/S/save-image.gif)
-
-#### 保存格式的选择
-
-保存类型一：色彩丰富切无透明要求时保存为 `JPG` 格式并选用时候的品质（通常使用品质 80 ）。
-
-保存类型二：图片色彩不丰富，不伦透明与否一律保存为 `PNG8` 格式（256颜色，需特殊设置如下图）。
-
-![](../img/P/photoshop-saveFormat.png)
-
-保存类型三：图片有半透明的要求，保存为 `PNG24` 格式（不对图片进行压缩）。
-
-保存类型四：保留 PSD 源文件，以备不时之需。
-
-### 图片修改与维护
-
-维护与修改之一：**更改画布**大小以便增加新素材。
-
-![](../img/R/resize-canvas.gif)
-
-维护与修改之二：移动图标分两种，独立图层（移动工具拖动），于非独立图层（选取工具选中分离后移动工具拖动）。
-
-![](../img/M/move-layer.gif)
-
-维护与修改之三：**裁剪画布**的方法有两种，(1)用选取工具选取后图片裁取，(2)直接用裁剪工具裁剪画布。
-
-![](../img/C/crop-canvas.gif)
-
-**注意事项**：为了可维护性的考虑因适当的留出适当的空白区域以便修改所用和提高容错性。`PNG8`需更改图片颜色模式为 RGB 颜色（默认为索引颜色模式，颜色信息会被丢失）。
-
-![](../img/P/png8-color-mode.gif)
-
-### 图片优化与合并
-
-在 HTML 中使用背景图片的方法如下：
-
-```html
-
-
-
-```
-
-图片的**合并**就如同上面提到的切图后保存的过程。拼好的图称之为 **Sprite** 它能减少网络请求次数提高速度。图片压缩工具分为无损（ImageOptim 等工具，也可结合 Grunt 自动化构建工具一同使用）与有损压缩工具（TinyPng）。
-
-合并的图片可以以横向或纵向的排列，分类可将同属于一个模块（功能模块），大小相近（充分利用画布空间），颜色相近（减少文件大小）。
-
-#### 图片的兼容
-
-IE6 不支持 PNG24 半透明所以需要保存两份（sprite.png - png24 和 sprite-ie.png - 8）。在使用 CSS3 是让高级浏览器使用 CSS3 低级浏览器则使用切图。优雅降级指的是让低级浏览器不显示高级浏览器中的界面细节。
-
-
This work by Li Xinyang is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
\ No newline at end of file
diff --git a/WebCreation/WebCreation.md b/WebCreation/WebCreation.md
deleted file mode 100644
index 1c288cd..0000000
--- a/WebCreation/WebCreation.md
+++ /dev/null
@@ -1,74 +0,0 @@
-
-
-**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
-
-- [网页制作](#%E7%BD%91%E9%A1%B5%E5%88%B6%E4%BD%9C)
-  - [前端工程师概述](#%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%B8%88%E6%A6%82%E8%BF%B0)
-  - [Photoshop](#photoshop)
-  - [Development Tools](#development-tools)
-  - [HTML](#html)
-  - [CSS](#css)
-
-
-
-# 网页制作
-
-## 前端工程师概述
-
-**网页发展史**
-
-Web 1.0 -> Web 2.0（基于 Ajax） -> Web 3.0 （基于 HTML5）
-
-**网站开发协作流程**
-
-![](../img/D/development-flow.png)
-
-**前端职责**
-
-视觉稿（配色图标距离空间） + 交互稿（用户逻辑） = UI （用户界面）
-
-视觉稿 -> [页面制作]
-
-交互稿 -> [页面逻辑开发]
-
-**所需技能**
-
-- DOM (操作 HTML 及 CSS 的接口)
-- JavaScript (定义页面互动)
-- CSS (定义页面样式)
-- HTML (定义页面结果)
-- Photoshop (取图)
-
-## Photoshop
-
-[阅读更多](WebCreation-Photoshop.md)
-
-## Development Tools
-
-[阅读更多](WebCreation-DevelopmentTool.md)
-
-## HTML
-
-[阅读更多](WebCreation-HTML.md)
-
-## CSS
-
-[阅读第一部分](WebCreation-CSS-0.md)
-
-- 简介
-- 语法
-- 选择器
-
-[阅读第二部分](WebCreation-CSS-1.md)
-
-- 文本
-- 盒模型
-- 背景
-
-[阅读第三部分](WebCreation-CSS-2.md)
-
-- 布局
-- 变形
-- 动画
-
-
This work by Li Xinyang is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
\ No newline at end of file
diff --git a/assets/Bookcover.sketch b/assets/Bookcover.sketch
new file mode 100644
index 0000000..af44cbf
Binary files /dev/null and b/assets/Bookcover.sketch differ
diff --git a/book.json b/book.json
new file mode 100644
index 0000000..3144e18
--- /dev/null
+++ b/book.json
@@ -0,0 +1,6 @@
+{
+  "gitbook": ">=2.0.0",
+  "title":"Frontend Notebook",
+  "language":"zh-cn",
+  "description":"互联网前端开发过程全记录。从基础开始，从现在开始。"
+}
\ No newline at end of file
diff --git a/chapter1/00_intro.md b/chapter1/00_intro.md
new file mode 100644
index 0000000..10c7ea3
--- /dev/null
+++ b/chapter1/00_intro.md
@@ -0,0 +1,27 @@
+## 前端工程师概述
+
+[TOC]
+
+**网页发展史**
+
+Web 1.0 -> Web 2.0（基于 Ajax） -> Web 3.0 （基于 HTML5）
+
+**网站开发协作流程**
+
+![](../img/D/development-flow.png)
+
+**前端职责**
+
+视觉稿（配色图标距离空间） + 交互稿（用户逻辑） = UI（用户界面）
+
+视觉稿 -> 页面制作
+
+交互稿 -> 页面逻辑开发
+
+**所需技能**
+
+- DOM (操作 HTML 及 CSS 的接口)
+- JavaScript (定义页面互动)
+- CSS (定义页面样式)
+- HTML (定义页面结果)
+- Photoshop (取图)
\ No newline at end of file
diff --git a/chapter1/01_01_tool_panel_view.md b/chapter1/01_01_tool_panel_view.md
new file mode 100644
index 0000000..6ac5c61
--- /dev/null
+++ b/chapter1/01_01_tool_panel_view.md
@@ -0,0 +1,49 @@
+### 工具, 面板, 视图
+
+[TOC]
+
+在全局设置下将单位修改为像素，因其在 CSS 中运用最广 (**Preference** -> **Units & Rulers** -> **Units**) 。设置工作区布局为切图及图片编辑做准备（所需窗口为信息窗口，图层窗口以及历史记录窗口）。
+
+![](../img/P/photoshop-mainWindow.png)
+
+打开『信息窗口』、『图层窗口』、『历史纪录窗口』、『工具面板』、『选项』面板，可以通过 Window -> Workspace -> New WorkSpaces 保存工作区，以便下次打开。
+
+**切图常用工具**
+
+| 工具名    |           示意图            | 注释                                     |
+| ------ | :----------------------: | -------------------------------------- |
+| 移动工具   | ![](../img/H/hwa_03.png) |                                        |
+| 矩形选框工具 | ![](../img/H/hwa_01.png) | 需将自动选择调至选择图层                           |
+| 魔棒工具   | ![](../img/H/hwa_05.png) | （容差 Tolerance 越小选择的范围就越小）消除锯齿可以让选择区域光滑 |
+| 剪裁工具   | ![](../img/H/hwa_06.png) |                                        |
+| 切片工具   | ![](../img/H/hwa_07.png) | 在裁剪工具分支下                               |
+| 缩放工具   | ![](../img/H/hwa_34.png) | `Ctrl+加号`与`Ctrl+减号` 或者 `alt+鼠标滑轮`      |
+| 取色器    | ![](../img/H/hwa_31.png) |                                        |
+
+图层（单层元素）与组（类似于文件夹）的区别。
+
+**辅助视图**，在视图菜单下启动
+
+- 对齐，会启动靠近吸附功能
+- 标尺，Command + R
+- 参考线，Command + ;
+
+![](../img/P/photoshop-menu.png)
+
+NOTE: 所有工具及快捷键如下。
+
+![](../img/T/ToolsPanelOverview.png)
+
+### 常用快捷键
+
+**放大缩小画布**
+
+- 放大到100%大小：Ctrl+数字1
+- 放大：ctrl + 加号
+- 缩小：ctrl + 减号
+- alt + 滚轮
+
+**合并图层**
+
+- 合并图层：ctrl+E
+- 合并可见图层：ctrl+shift+E
\ No newline at end of file
diff --git a/chapter1/01_02_measurement_and_color.md b/chapter1/01_02_measurement_and_color.md
new file mode 100644
index 0000000..7ed486c
--- /dev/null
+++ b/chapter1/01_02_measurement_and_color.md
@@ -0,0 +1,40 @@
+
+
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [测量及取色](#%E6%B5%8B%E9%87%8F%E5%8F%8A%E5%8F%96%E8%89%B2)
+
+
+
+### 测量及取色
+
+所有能接受数字的属性都需要测量并尽可能百分百的还原设计稿。
+
+#### 测量
+
+- 宽度，高度 (width, height)
+- 内外边距 (padding, margin)
+- 边框 (border)
+- 定位 (position)
+- 文字大小 (font-size)
+- 行高 (line-height)，其为第一行的底端到第二行的底端。
+- 背景位置 (background-position)
+
+NOTE: 测量时尽可能放大画布以减少误差。量取文字是为了减少误差尽量选取尺寸大的文字进行测量。
+
+![](../img/P/photoshop-measure&colorSelection.png)
+
+**选框工具的多用途**，增（Shift）减（Alt）以及交叉选择（Shift + Alt）。左右（或上下）使用分离选框选择可以得到整两个分离边框的距离总值。
+
+![](../img/T/rect-selection-tool.gif)
+
+#### 取色
+
+所有能接受颜色的属性都需要取色。
+
+- 边框色
+- 背景色
+- 文字色
+
+NOTE：使用魔棒工具可以迅速识别背景色是否没*线性*渐变的方法。Mac OS X 推荐使用 **Sip** 可在 Mac App Store 免费下载。
+NOTE+：可以使用魔棒工具来判断颜色是否为渐变。
diff --git a/chapter1/01_03_slice.md b/chapter1/01_03_slice.md
new file mode 100644
index 0000000..657eca3
--- /dev/null
+++ b/chapter1/01_03_slice.md
@@ -0,0 +1,63 @@
+
+
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [切图](#%E5%88%87%E5%9B%BE)
+
+
+
+### 切图
+
+- **内容性图片** 指的是图片在页面是作为内容存在，如页面中的海报。
+- **修饰性图片** 指的是图片在页面中起修饰作用，如页面中的背景和图标。
+
+修饰性图标和内容性图片需要（在 HTML 的 `` 之中，只需站位不需切图）切出。切出的内容性图片应保存为 `*.jpg` 格式，而修饰性图片因保存为 `png24`（IE6 不支持半透明，Alpha 透明） 或 `png8` 它们均支持全透明。
+
+**隐藏文字**，方法一，直接在图层中隐藏文字图层。方法二（两种，分别应对于纯色和有背景需要隐藏文本的情况）如下图所示，使用自由变换。
+
+![](../img/B/btn-remove-text.gif)
+
+**PNG24**切图方法
+- 移动工具选中所需图层（Ctrl 多选）
+- 右键合并图层（Ctrl + E）
+- 复制到新图层
+
+**PNG8**带背景切图方法
+- 合并可见图层（Shift + Ctrl + E）
+- 矩形选框选择内容
+- 魔棒工具去除多余部分（Alt + 选取）
+
+**可平铺**背景的切图方法
+- 用矩形选择一个区域
+- 复制至新图层
+
+NOTE: X 轴平铺需要占满图片的宽，Y 轴平铺需要占满图片的高。
+
+**切片**工具（大图化小的方法，将一大图分为多小图）
+- 拉参考线
+- 选择切片工具
+- 点击 “基于参考线的切片” 按钮
+- 选择切片选择工具
+- 保存于新图层
+
+#### 如何开始切图
+
+##### 第一步：去掉所有文字，只留背景
+
+打开视觉稿后，用上面说过的方法去掉所有的文字，只留背景和图片（记得备份一下PSD文件）。
+
+![](../img/P/photoshop-without-image.png)
+
+##### 第二步：保存图片
+
+将去掉文字的图片保存起来。一般情况下内容性图片保存为jpg格式，图标类型的保存为png格式。
+
+![](../img/P/photoshop-cut-image.png)
+
+##### 第三步：构思页面的具体实现
+
+划分页面的结构，具体的实现方式。
+
+##### 第四步：一边编写HTML代码，一边测量、取色
+
+根据构思号的页面结构，开始编写HTML代码，并且开始进行测量和取色。
diff --git a/chapter1/01_04_save_image.md b/chapter1/01_04_save_image.md
new file mode 100644
index 0000000..bd4cd08
--- /dev/null
+++ b/chapter1/01_04_save_image.md
@@ -0,0 +1,53 @@
+
+
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [图片保存](#%E5%9B%BE%E7%89%87%E4%BF%9D%E5%AD%98)
+  - [保存格式的选择](#%E4%BF%9D%E5%AD%98%E6%A0%BC%E5%BC%8F%E7%9A%84%E9%80%89%E6%8B%A9)
+- [图片修改与维护](#%E5%9B%BE%E7%89%87%E4%BF%AE%E6%94%B9%E4%B8%8E%E7%BB%B4%E6%8A%A4)
+
+
+
+### 图片保存
+
+将需要的内容保存在独立的文件里便于之后的导出。（存储于 Web 所用格式 Alt + Shift + Ctrl + S）
+
+如需保存**独立图层**则要把需要的图层拖到新建的透明背景的图层，或在图层上右键复制（Duplicate）图层选择地址为新文件即可。
+
+**图片与背景合并**的切图方法如下
+
+![](../img/S/save-image.gif)
+
+#### 保存格式的选择
+
+保存类型一：色彩丰富切无透明要求时保存为 `JPG` 格式并选用时候的品质（通常使用品质 80 ）。
+
+保存类型二：图片色彩不丰富，不伦透明与否一律保存为 `PNG8` 格式（256颜色，需特殊设置如下图，需设置`杂边：无`  `无仿色`）。
+
+![](../img/P/photoshop-saveFormat.png)
+
+保存类型三：图片有半透明（Alpha 透明）的要求，保存为 `PNG24` 格式（不对图片进行压缩）。
+
+保存类型四：保留 PSD 源文件，以备不时之需。
+
+##### 如何保存
+
+一般使用『存储于 Web 所用格式』菜单（Alt + Shift + Ctrl + S）保存
+
+### 图片修改与维护
+
+维护与修改之一：**更改画布**大小以便增加新素材。
+
+![](../img/R/resize-canvas.gif)
+
+维护与修改之二：移动图标分两种，独立图层（移动工具拖动），于非独立图层（选取工具选中分离后移动工具拖动）。
+
+![](../img/M/move-layer.gif)
+
+维护与修改之三：**裁剪画布**的方法有两种，(1)用选取工具选取后图片裁取，(2)直接用裁剪工具裁剪画布。
+
+![](../img/C/crop-canvas.gif)
+
+**注意事项**：为了可维护性的考虑因适当的留出适当的空白区域以便修改所用和提高容错性。`PNG8`需更改图片颜色模式为 RGB 颜色（默认为索引颜色模式，颜色信息会被丢失）。
+
+![](../img/P/png8-color-mode.gif)
diff --git a/chapter1/01_05_image_optimisation.md b/chapter1/01_05_image_optimisation.md
new file mode 100644
index 0000000..1ed37f8
--- /dev/null
+++ b/chapter1/01_05_image_optimisation.md
@@ -0,0 +1,42 @@
+
+
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [图片优化与合并](#%E5%9B%BE%E7%89%87%E4%BC%98%E5%8C%96%E4%B8%8E%E5%90%88%E5%B9%B6)
+  - [图片的兼容](#%E5%9B%BE%E7%89%87%E7%9A%84%E5%85%BC%E5%AE%B9)
+
+
+
+### 图片优化与合并
+
+在 HTML 中使用背景图片的方法如下：
+
+```html
+
+
+
+```
+
+图片的**合并**就如同上面提到的切图后保存的过程。拼好的图称之为 **Sprite** 它能减少网络请求次数提高速度。图片压缩工具分为无损（ImageOptim 等工具，也可结合 Grunt 自动化构建工具一同使用）与有损压缩工具（TinyPng）。
+
+#### 图片合并
+
+图片合并建议方案：
+
+- 同个模块的图片合并
+- 大小相近的图片合并
+- 色彩相近的图片合并
+- 以上3种合并混合
+
+合并的图片可以以横向或纵向的排列，分类可将同属于一个模块（功能模块），大小相近（充分利用画布空间），颜色相近（减少文件大小）。
+
+#### 图片的兼容
+
+IE6 不支持 PNG24 半透明所以需要保存两份（sprite.png - png24 和 sprite-ie.png - 8）。在使用 CSS3 是让高级浏览器使用 CSS3 低级浏览器则使用切图。优雅降级指的是让低级浏览器不显示高级浏览器中的界面细节。
diff --git a/chapter1/01_photoshop.md b/chapter1/01_photoshop.md
new file mode 100644
index 0000000..1009b9d
--- /dev/null
+++ b/chapter1/01_photoshop.md
@@ -0,0 +1,22 @@
+
+
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [Photoshop](#photoshop)
+
+
+
+## Photoshop
+
+**切图** 从设计稿中切除网页的素材并在代码中引入图片 (复杂的图片或者解决兼容问题)
+
+```html
+// 设计稿 (*.psd) -> 产出物 (*png, *.jpg)
+
+
+
+
+```
\ No newline at end of file
diff --git a/chapter1/02_01_sublime.md b/chapter1/02_01_sublime.md
new file mode 100644
index 0000000..7e4c764
--- /dev/null
+++ b/chapter1/02_01_sublime.md
@@ -0,0 +1,109 @@
+
+
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [Sublime 编辑器](#sublime-%E7%BC%96%E8%BE%91%E5%99%A8)
+  - [介绍](#%E4%BB%8B%E7%BB%8D)
+  - [安装](#%E5%AE%89%E8%A3%85)
+    - [Windows/OS X](#windowsos-x)
+    - [Ubuntu](#ubuntu)
+  - [推荐插件](#%E6%8E%A8%E8%8D%90%E6%8F%92%E4%BB%B6)
+    - [1. Package Control](#1-package-control)
+    - [2.Emmet](#2emmet)
+    - [3.JQuery](#3jquery)
+    - [4.FileHeader](#4fileheader)
+    - [5.Pretty Json](#5pretty-json)
+    - [6.CSS Format](#6css-format)
+    - [7.ConvertToUTF8](#7converttoutf8)
+  - [用户自定义代码](#%E7%94%A8%E6%88%B7%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BB%A3%E7%A0%81)
+
+
+
+### Sublime 编辑器
+
+#### 介绍
+
+Sublime Text是一款性感的编辑器，具有优雅，快速，插件多等优势，不失为前端开发者的轻量高效编辑器。
+
+#### 安装
+
+##### Windows/OS X
+
+官方[站点](http://www.sublimetext.com/)下载安装即可。
+
+##### Ubuntu
+
+可参见 [Ubuntu 下使用 Sublime Text 并解决中文输入问题](http://www.zntec.cn/archives/ubuntu-sublime-text-fcitx.html)，用apt-get安装，解决任务栏，中文输入等多个问题。
+
+##### Sublime 快捷键
+command/control + P 进入查找命令（Goto Anything）,此时有三种选择：
+
+* `:` 输入行数找到对应行 （control + G）
+* `@` 找到特定函数 （command/control + R）
+* `#` 找到对应变量与块
+
+#### 推荐插件
+
+##### 1. Package Control
+
+以后的插件安装基本都靠他了，安装方法可以去[Package Control](https://packagecontrol.io/installation)查看，注意Sublime Text的版本问题。
+
+##### 2.Emmet
+
+前端神器，相信搞前端的没有不用的
+
+**下面插件在Edit 或者 Tools 里面看到插件功能：**
+
+##### 3.JQuery
+
+写JQuery怎么能不用他来增强你的提示？
+
+##### 4.FileHeader
+
+自动创建文件开头模板，并且会根据最后的保存时间修改更新时间
+
+##### 5.Pretty Json
+
+写json不格式话怎么行？
+
+##### 6.CSS Format
+
+css格式化
+
+##### 7.ConvertToUTF8
+
+GBK编码兼容
+
+#### 用户自定义代码
+
+Preferences - Settings - User 里面加入，全部的设置均为 `JSON` 文本。
+
+```
+"translate_tabs_to_spaces": true,
+"tab_size": 2,
+```
+把Tab对齐转化为空格对齐，tab_size 控制转化比例。
+
+```
+"trim_trailing_white_space_on_save": true,
+```
+
+自动移除行尾多余空格。
+
+```
+"ensure_newline_at_eof_on_save": true,
+```
+
+自动在文件末尾加入一个空行，git 用户相信知道是干嘛的。
+
+```
+"save_on_focus_lost": true,
+```
+
+ 窗口失去焦后立即保存文件。
+
+ ```
+ "bold_folder_labels": true,
+ ```
+
+侧栏文件夹加粗。
diff --git a/chapter1/02_02_atom.md b/chapter1/02_02_atom.md
new file mode 100644
index 0000000..2f0466d
--- /dev/null
+++ b/chapter1/02_02_atom.md
@@ -0,0 +1,749 @@
+### Atom 文本编辑器
+
+本文即为在 **Atom** 下编写完成，在写作过程中让我对这个崭新的 1.0 版本文本编辑器
+有了更多的了解。
+在阅读本文时注意快捷键于后面英文单词的对应可帮助记忆，在使用中忘记的快捷键以可以通过使用
+**查询面板**（后面会提到）进行查询。
+如果你在使用过程中发现了异常和错误可以到 **Atom** 所在的
+GitHub 仓库提交问题报告。同一款编辑器一同成长，愿力量与你同在！
+下面的快捷键均为 **Mac OS X** 默认设置。如你用的是 Windows 或者是 Linux，可能需要尝试将
+所有提到的 cmd 改为 ctrl。
+
+#### 基础中的基础
+
+开始之前先把下面这条快捷键记住。cmd+shift+P
+它会打开类似 Alfred 的快捷功能选择窗口，
+如果你从来没有听过 Alfred（此为 Mac OS X 特有应用） 那你应该赶紧去所搜引擎中找找了。
+
+**保存时间**
+
+|快捷键|描述|
+|-----|----|
+|`cmd-shift-S`|可以另存为 "Save As"|
+|`cmd-alt-S`|可以保存全部的 "Save All".|
+
+**打开文件与目录**
+
+如果在命令行环境中可以使用下面的方法一次打开多个目录。
+
+```bash
+# 打开目录
+atom ./hopes ./dreams
+
+# 获得帮助
+atom -h
+```
+
+|快捷键|描述|
+|-----|----|
+|`cmd-O`|打开文件|
+|`cmd-shift-O`|添加目录至当前编辑器窗口|
+
+`cmd-P` 可以打开 Fuzzy Finder 进行模糊搜索，默认可所搜区域为项目内所有文件。
+下面的命令可以对模糊所搜做一些限制，`cmd-B` 只所搜已打开的文件（存在与 Buffer 中的文件）。
+`cmd-shift-B`
+
+1.0 版本中在编辑器中添加的新文件无法使用 Fuzzy Finder（模糊寻找） 找到，重启后则可以解决。
+
+**边栏（树目录）**
+
+|快捷键|描述|
+|-----|----|
+|`cmd-\`|显示或隐藏边栏|
+|`ctrl-0`|聚焦边栏，聚焦后可以操作树目录中的文件|
+
+在聚焦后可以通过 `a` 来增加（add），`m` 来移动（move），`d` 来复制（duplicate）或者
+`delete` 来删除（此处为键盘删除键）。
+这里的操作并没有自动路径补全功能，之后可能需要插件支持。
+
+#### 开始使用
+
+**Atom** 中几乎所有的功能都是以插件的形式存在的。所有如何安装插件则就是我们第一件要做的事。
+除了图形界面安装的方法外，随 **Atom** 还安装了插件管理器叫做 `apm` 。通过它也可以直接安装
+和更新插件。简单说主题也是插件，所以安装主题与安装插件的步骤类似。
+
+*下面的操作均需要联网*
+
+```
+# 安装插件
+apm install 
+
+# 安装指定版本的插件
+apm install @
+
+# 查询插件
+apm search 
+
+# 查询插件详情
+apm view 
+```
+
+##### 移动光标
+
+**Atom** 的移动快方法同 **Emacs** 一致。在熟悉使用 **Atom** 后也很容易的转移至
+**Emacs** 的环境下熟练工作。
+
+单个字符的移动，效果于方向键一致。
+
+|快捷键|描述|
+|-----|----|
+|`ctrl-P`|上移（Previous）|
+|`ctrl-N`|下移（Next）|
+|`ctrl-B`|后移（Back）|
+|`ctrl-F`|前移（Forward）|
+
+在单个字符移动基础上，可以延展至更大范围的移动。例如，单词，整行。
+
+|快捷键|描述|
+|-----|----|
+|`alt-B`|向后以词为单位移动（英文），中文则以英文标点为间隔|
+|`alt-F`|向前以词为单位移动（英文），中文则以英文标点为间隔|
+|`ctrl-E`|移动至行末（End）|
+|`ctrl-A`|移动至此行首字符（Ahead)|
+|`ctrl-A`（敲击两次）|移动至此行行首（包括空格）|
+|`cmd-up`|移动至文件最顶|
+|`cmd-down`|移动至文件最低|
+
+`ctrl-G` 加数字可移动至**目标行**，使用 `row:column` 可以定位行数和列数，
+使用这个方法在查找错误时变得十分方便。
+
+`cmd-R` 可以**在当前文件中**（Buffer）按照符号来搜索，符号关键字指的是函数名（代码中）
+或标题（文档中）。
+
+
+
+
+
+##### 选择
+
+选择是在移动的基础上加入 `shift` 既可完成。特别的几种选择方法如下。
+
+|快捷键|描述|
+|-----|----|
+|`cmd-L`|选取整行|
+|`ctrl-shift-W`|选取当前单词（英文），中文则为整行|
+
+##### 编辑与删除
+
+**Atom** 如同其他的常用的文本编辑器一样可以直接编辑文字，并不存在特殊的模式。但了解下面的
+编辑技巧可以让你使用 **Atom** 更得心应手。
+
+**编辑操作**
+
+|快捷键|描述|
+|-----|----|
+|`ctrl-T`|交换光标两边的字符（Transpose）|
+|`ctrl-J`|将下一行同当前行合并（Join）|
+|`ctrl-cmd-up`|向上冒泡当前行|
+|`ctrl-cmd-down`|向下冒泡当前行|
+|`cmd-shift-D`|复制当前行（Duplicate）|
+|`cmd-K, cmd-U`|转换选中字符至全大写|
+|`cmd-K, cmd-L`|转换选中字符至全小|
+
+
+
+
+**删除操作**
+
+|快捷键|描述|
+|-----|----|
+|`ctrl-shift-K`|删除当前（Cut）|
+|`cmd-delete`|删除此行光标后全部字符|
+|`cmd-backspace`|删除至当前行首|
+|`ctrl-K`|切帖至行末（Cut）|
+|`alt-H`|删除前一个字符|
+|`alt-D`|删除后一个字符|
+
+**多个光标及选择**
+
+同 **Sublime Text** 相同，**Atom** 也同样有多光标的实现。
+按住cmd可以在文本中使用进行区域性选择。
+
+|快捷键|描述|
+|-----|----|
+|`cmd-click`|在点击处增加新光标|
+|`cmd-shift-L`|将选择区域转换为多光标|
+|`ctrl-shift-up`|在上一行增加新光标|
+|`ctrl-shift-down`|在下一行增加新光标|
+|`cmd-D`|选择下一个于当前被选字符相同的字符并添加新光标|
+|`cmd-ctrl-G`|选择全部于当前选中字符相同的字符并添加光标|
+
+##### 括号
+
+编程中最常打交道和需要跳出的莫属于括号和引号了。**Atom** 对于括号有很好的处理办法，
+各种括号在光标内移动都会被自动高亮（引号和 HTML 中的标签也会被高亮和自动补全）。
+选中内容后使用括号可以自动将选中内容包含在括号或引号内。
+
+|快捷键|描述|
+|-----|----|
+|`ctrl-M`|跳至最近的一个括号的起始位置|
+|`ctrl-cmd-M`|选中括号内的所有内容|
+|`alt-cmd-.`|关闭最近的一个 XML/HTML 标签|
+
+##### 搜索与替换
+
+|快捷键|描述|
+|-----|----|
+|`cmd-F`|当前文本中搜索|
+|`cmd-shift-F`|搜索整个项目|
+|`cmd-G`|找到下一个匹配的搜索结果|
+|`cmd-G-shift`|找到上一个匹配的搜索结果|
+
+在项目搜索中可以使用 wildcard 和指定目标的搜索路径。
+
+##### 代码片段（Snippets）
+
+代码片段让你在写代码时有飞一般的感觉，代码片段会将预先设置好的代码片段替换在当前文本中，
+并且设置焦点并用 tab 聚焦下一个焦点，
+或 shift + tab 聚焦上一个焦点。
+
+所有的代码片都存储在下面的目录中 `~/.atom/snippets.cson`，
+你可以通过 Open Your Snippets Menu 打开此文件。
+
+|快捷键|描述|
+|-----|----|
+|`alt-shift-S`|显示当前文件类型下的全部代码片段|
+
+当然制作代码片也有一个代码片，它就是 `snip` 。
+
+###### 制作代码片段
+
+下面是一个简单的代码片样例。
+
+```javascript
+'.source.js':
+  'console.log':
+    'prefix': 'log'
+    'body': 'console.log(${1: "crash"});$2'
+```
+
+- `.source.js` 为代码片可用的文件类型范围
+- `console.log` 为代码片内容描述
+- `prefix` 为代码片调用字符
+- `body` 代码片主体内容
+- `${1:'crash'}` 用于定义焦点，顺序及其默认值
+
+多行代码代码片
+
+```javascript
+'.source.js':
+  'if, else if, else':
+    'prefix': 'ieie'
+    'body': """
+      if (${1:true}) {
+        $2
+      } else if (${3:false}) {
+        $4
+      } else {
+        $5
+      }
+    """
+```
+
+
+
+##### 代码折叠
+
+可以点击代码行号边的箭头折叠当前层级的代码。
+
+|快捷键|描述|
+|-----|----|
+|`alt-cmd-[`|折叠当前层级|
+|`alt-cmd-]`|展开当前层级|
+|`alt-cmd-shift-{`|折叠全部层级|
+|`alt-cmd-shift-}`|展开全部层级|
+|`cmd-K, cmd-N`（层级数）|根据层级级别折叠|
+
+##### 多窗口模式
+
+任意一个窗口都可以无需的四面分割，分割的部分则依然使用标签来表示。
+
+|快捷键|描述|
+|-----|----|
+|`cmd-k arrow`|根据方向指定分割窗口|
+|`cmd-K, cmd-arrow`|聚焦指定方向的窗口|
+
+
+
+##### 解码（Encoding）
+
+**Atom** 支持多种解码格式（包括中文 GBK 的支持），也可自动识别解码方式
+（不能识别时则默认为 UTF-8）。当然你也可以使用这种方法将多种文本在多种解码格式直接转换。
+
+|快捷键|描述|
+|-----|----|
+|`ctrl-shift-U`|切换解码方式|
+
+##### 书签
+
+在 **Atom** 添加书签就如同你看书的时添加书签一样，它使你在书写代码时可以自如的跳转到你需要的
+位置。
+
+|快捷键|描述|
+|-----|----|
+|`F2-cmd`|可以在当前行切换标记书签|
+|`F2`|跳转至下一个书签|
+|`F2-shift`|跳转至上一个书签|
+|`F2-ctrl`|查看全部的书签|
+|`F2-cmd-shift`|清除全部标签|
+
+##### 扩展插件
+
+下面列出了笔者在日常 Web 开发中所易用的插件，这些插件满足了超过百分之九十笔者的开发需求。下面的这些插件均可以在官方插件管理器中进行下载和安装。
+
+```javascript
+[
+	{
+		"name": "advanced-new-file",
+		"version": "0.4.3"
+	},
+	{
+		"name": "advanced-open-file",
+		"version": "0.8.2"
+	},
+	{
+		"name": "atom-beautify",
+		"version": "0.28.8"
+	},
+	{
+		"name": "AtomicChar",
+		"version": "0.3.8"
+	},
+	{
+		"name": "autocomplete-paths",
+		"version": "1.0.2"
+	},
+	{
+		"name": "docblockr",
+		"version": "0.7.3"
+	},
+	{
+		"name": "ex-mode",
+		"version": "0.7.0"
+	},
+	{
+		"name": "file-icons",
+		"version": "1.6.2"
+	},
+	{
+		"name": "language-jade",
+		"version": "0.6.2"
+	},
+	{
+		"name": "linter",
+		"version": "1.3.0"
+	},
+	{
+		"name": "linter-jshint",
+		"version": "1.1.4"
+	},
+	{
+		"name": "markdown-toc",
+		"version": "0.3.0"
+	},
+	{
+		"name": "merge-conflicts",
+		"version": "1.3.5"
+	},
+	{
+		"name": "minimap",
+		"version": "4.12.2"
+	},
+	{
+		"name": "minimap-linter",
+		"version": "1.0.0"
+	},
+	{
+		"name": "open-in-browser",
+		"version": "0.4.6"
+	},
+	{
+		"name": "pigments",
+		"version": "0.9.3"
+	},
+	{
+		"name": "sort-lines",
+		"version": "0.11.0"
+	},
+	{
+		"name": "sync-settings",
+		"version": "0.6.0"
+	},
+	{
+		"name": "tab-switcher",
+		"version": "1.2.1"
+	},
+	{
+		"name": "theme-switcher",
+		"version": "1.1.0"
+	},
+	{
+		"name": "vim-mode",
+		"version": "0.57.0"
+	},
+	{
+		"name": "atom-dark-syntax",
+		"version": "0.27.0",
+		"theme": "syntax"
+	},
+	{
+		"name": "atom-dark-ui",
+		"version": "0.49.0",
+		"theme": "ui"
+	},
+	{
+		"name": "atom-light-syntax",
+		"version": "0.28.0",
+		"theme": "syntax"
+	},
+	{
+		"name": "atom-light-ui",
+		"version": "0.41.0",
+		"theme": "ui"
+	},
+	{
+		"name": "base16-tomorrow-dark-theme",
+		"version": "0.26.0",
+		"theme": "syntax"
+	},
+	{
+		"name": "base16-tomorrow-light-theme",
+		"version": "0.9.0",
+		"theme": "syntax"
+	},
+	{
+		"name": "one-dark-ui",
+		"version": "1.0.2",
+		"theme": "ui"
+	},
+	{
+		"name": "one-dark-syntax",
+		"version": "1.1.0",
+		"theme": "syntax"
+	},
+	{
+		"name": "one-light-syntax",
+		"version": "1.1.0",
+		"theme": "syntax"
+	},
+	{
+		"name": "one-light-ui",
+		"version": "1.0.2",
+		"theme": "ui"
+	},
+	{
+		"name": "solarized-dark-syntax",
+		"version": "0.38.1",
+		"theme": "syntax"
+	},
+	{
+		"name": "solarized-light-syntax",
+		"version": "0.22.1",
+		"theme": "syntax"
+	},
+	{
+		"name": "about",
+		"version": "1.0.1"
+	},
+	{
+		"name": "archive-view",
+		"version": "0.58.0"
+	},
+	{
+		"name": "autocomplete-atom-api",
+		"version": "0.9.2"
+	},
+	{
+		"name": "autocomplete-css",
+		"version": "0.9.0"
+	},
+	{
+		"name": "autocomplete-html",
+		"version": "0.7.2"
+	},
+	{
+		"name": "autocomplete-plus",
+		"version": "2.19.0"
+	},
+	{
+		"name": "autocomplete-snippets",
+		"version": "1.7.1"
+	},
+	{
+		"name": "autoflow",
+		"version": "0.25.0"
+	},
+	{
+		"name": "autosave",
+		"version": "0.22.0"
+	},
+	{
+		"name": "background-tips",
+		"version": "0.25.0"
+	},
+	{
+		"name": "bookmarks",
+		"version": "0.35.0"
+	},
+	{
+		"name": "bracket-matcher",
+		"version": "0.76.0"
+	},
+	{
+		"name": "command-palette",
+		"version": "0.36.0"
+	},
+	{
+		"name": "deprecation-cop",
+		"version": "0.53.1"
+	},
+	{
+		"name": "dev-live-reload",
+		"version": "0.46.0"
+	},
+	{
+		"name": "encoding-selector",
+		"version": "0.21.0"
+	},
+	{
+		"name": "exception-reporting",
+		"version": "0.36.0"
+	},
+	{
+		"name": "find-and-replace",
+		"version": "0.175.0"
+	},
+	{
+		"name": "fuzzy-finder",
+		"version": "0.87.0"
+	},
+	{
+		"name": "git-diff",
+		"version": "0.55.0"
+	},
+	{
+		"name": "go-to-line",
+		"version": "0.30.0"
+	},
+	{
+		"name": "grammar-selector",
+		"version": "0.47.0"
+	},
+	{
+		"name": "image-view",
+		"version": "0.54.0"
+	},
+	{
+		"name": "incompatible-packages",
+		"version": "0.24.1"
+	},
+	{
+		"name": "keybinding-resolver",
+		"version": "0.33.0"
+	},
+	{
+		"name": "link",
+		"version": "0.30.0"
+	},
+	{
+		"name": "markdown-preview",
+		"version": "0.150.0"
+	},
+	{
+		"name": "metrics",
+		"version": "0.51.0"
+	},
+	{
+		"name": "notifications",
+		"version": "0.57.0"
+	},
+	{
+		"name": "open-on-github",
+		"version": "0.37.0"
+	},
+	{
+		"name": "package-generator",
+		"version": "0.40.0"
+	},
+	{
+		"name": "release-notes",
+		"version": "0.53.0"
+	},
+	{
+		"name": "settings-view",
+		"version": "0.211.2"
+	},
+	{
+		"name": "snippets",
+		"version": "0.95.0"
+	},
+	{
+		"name": "spell-check",
+		"version": "0.59.0"
+	},
+	{
+		"name": "status-bar",
+		"version": "0.75.1"
+	},
+	{
+		"name": "styleguide",
+		"version": "0.44.0"
+	},
+	{
+		"name": "symbols-view",
+		"version": "0.100.0"
+	},
+	{
+		"name": "tabs",
+		"version": "0.82.0"
+	},
+	{
+		"name": "timecop",
+		"version": "0.31.0"
+	},
+	{
+		"name": "tree-view",
+		"version": "0.180.0"
+	},
+	{
+		"name": "update-package-dependencies",
+		"version": "0.10.0"
+	},
+	{
+		"name": "whitespace",
+		"version": "0.30.0"
+	},
+	{
+		"name": "wrap-guide",
+		"version": "0.35.0"
+	},
+	{
+		"name": "language-c",
+		"version": "0.45.0"
+	},
+	{
+		"name": "language-clojure",
+		"version": "0.16.0"
+	},
+	{
+		"name": "language-coffee-script",
+		"version": "0.41.0"
+	},
+	{
+		"name": "language-csharp",
+		"version": "0.6.0"
+	},
+	{
+		"name": "language-css",
+		"version": "0.32.1"
+	},
+	{
+		"name": "language-gfm",
+		"version": "0.80.0"
+	},
+	{
+		"name": "language-git",
+		"version": "0.10.0"
+	},
+	{
+		"name": "language-go",
+		"version": "0.31.0"
+	},
+	{
+		"name": "language-html",
+		"version": "0.40.0"
+	},
+	{
+		"name": "language-hyperlink",
+		"version": "0.14.0"
+	},
+	{
+		"name": "language-java",
+		"version": "0.15.0"
+	},
+	{
+		"name": "language-javascript",
+		"version": "0.85.0"
+	},
+	{
+		"name": "language-json",
+		"version": "0.15.0"
+	},
+	{
+		"name": "language-less",
+		"version": "0.28.1"
+	},
+	{
+		"name": "language-make",
+		"version": "0.14.0"
+	},
+	{
+		"name": "language-mustache",
+		"version": "0.12.0"
+	},
+	{
+		"name": "language-objective-c",
+		"version": "0.15.0"
+	},
+	{
+		"name": "language-perl",
+		"version": "0.28.0"
+	},
+	{
+		"name": "language-php",
+		"version": "0.27.0"
+	},
+	{
+		"name": "language-property-list",
+		"version": "0.8.0"
+	},
+	{
+		"name": "language-python",
+		"version": "0.38.0"
+	},
+	{
+		"name": "language-ruby",
+		"version": "0.57.0"
+	},
+	{
+		"name": "language-ruby-on-rails",
+		"version": "0.22.0"
+	},
+	{
+		"name": "language-sass",
+		"version": "0.40.0"
+	},
+	{
+		"name": "language-shellscript",
+		"version": "0.15.0"
+	},
+	{
+		"name": "language-source",
+		"version": "0.9.0"
+	},
+	{
+		"name": "language-sql",
+		"version": "0.17.0"
+	},
+	{
+		"name": "language-text",
+		"version": "0.7.0"
+	},
+	{
+		"name": "language-todo",
+		"version": "0.25.0"
+	},
+	{
+		"name": "language-toml",
+		"version": "0.16.0"
+	},
+	{
+		"name": "language-xml",
+		"version": "0.30.0"
+	},
+	{
+		"name": "language-yaml",
+		"version": "0.22.0"
+	}
+]
+```
diff --git a/chapter1/02_dev_tools.md b/chapter1/02_dev_tools.md
new file mode 100644
index 0000000..02962fd
--- /dev/null
+++ b/chapter1/02_dev_tools.md
@@ -0,0 +1,14 @@
+
+
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [开发及调试工具](#%E5%BC%80%E5%8F%91%E5%8F%8A%E8%B0%83%E8%AF%95%E5%B7%A5%E5%85%B7)
+
+
+
+## 开发及调试工具
+
+- 文本编辑器或 IDE (集成开发环境)
+- Google Chrome, Firefox Firebug, Safari Developer Tool
+
+NOTE: [Google Chrome DevTools Doc](https://developer.chrome.com/devtools)
diff --git a/chapter1/03_01_html_intro.md b/chapter1/03_01_html_intro.md
new file mode 100644
index 0000000..cfed17b
--- /dev/null
+++ b/chapter1/03_01_html_intro.md
@@ -0,0 +1,20 @@
+
+
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [HTML 简介](#html-%E7%AE%80%E4%BB%8B)
+
+
+
+### HTML 简介
+
+![](../img/H/html-overview.png)
+
+注意事项：
+
+- `` 必须首行定格
+- `` 为文档标题
+- `<meta charset="utf-8">` 文档解码格式
+- `<meta name="keywords" content="...">` 和 `<meta name="description" content="...">` 提供给搜索引擎使用
+- `<meta name="viewport" content="width=device-width, initial-scale=1.0">` 移动端浏览器的宽高与缩放
+- `<link>` 标签可以引入 favicon 和样式表 CSS 文件
\ No newline at end of file
diff --git a/chapter1/03_02_html_sytax.md b/chapter1/03_02_html_sytax.md
new file mode 100644
index 0000000..2db5d71
--- /dev/null
+++ b/chapter1/03_02_html_sytax.md
@@ -0,0 +1,25 @@
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [HTML 语法](#html-%E8%AF%AD%E6%B3%95)
+  - [全局属性](#%E5%85%A8%E5%B1%80%E5%B1%9E%E6%80%A7)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+### HTML 语法
+
+![](../img/H/html-syntax.png)
+
+**书写规范**：
+
+- 小写标签和属性
+- 属性值双引号
+- 代码因嵌套缩进
+
+#### 全局属性
+
+- id, `<div id='unique-element'></div>`，页面中唯一
+- class，`<button class='btn'>Click Me</button>`，页面中可重复出现
+- style，尽量避免
+- title，对于元素的描述类似于 Tooltip 的效果。
diff --git a/chapter1/03_03_html_ascii_encoding.md b/chapter1/03_03_html_ascii_encoding.md
new file mode 100644
index 0000000..61eec77
--- /dev/null
+++ b/chapter1/03_03_html_ascii_encoding.md
@@ -0,0 +1,149 @@
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [实体字符](#%E5%AE%9E%E4%BD%93%E5%AD%97%E7%AC%A6)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+### 实体字符
+
+实体字符（ASCII Encoding Reference）是用来在代码中以实体代替与HTML语法相同的字符，避免浏览解析错误。它的两种表示方式，第一种为 `&` 外加实体字符名称，例如 ` `，第二种为 `&` 加实体字符序号，例如 ` `。
+
+<table>
+    <caption>常用HTML字符实体（建议使用实体）：</caption>
+    <thead>
+        <tr>
+            <th>字符</th>
+            <th>名称</th>
+            <th>实体名</th>
+            <th>实体数</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>"</td>
+            <td>双引号</td>
+            <td>&quot;</td>
+            <td>&#34;</td>
+        </tr>
+        <tr>
+            <td>&</td>
+            <td>&符</td>
+            <td>&amp;</td>
+            <td>&#38;</td>
+        </tr>
+        <tr>
+            <td><</td>
+            <td>左尖括号（小于号）</td>
+            <td>&lt;</td>
+            <td>&#60;</td>
+        </tr>
+        <tr>
+            <td>></td>
+            <td>右尖括号（大于号）</td>
+            <td>&gt;</td>
+            <td>&#62;</td>
+        </tr>
+        <tr>
+            <td> </td>
+            <td>空格</td>
+            <td>&nbsp;</td>
+            <td>&#160;</td>
+        </tr>
+        <tr>
+            <td>　</td>
+            <td>中文全角空格</td>
+            <td>&amp;</td>
+            <td>&#12288;</td>
+        </tr>
+    </tbody>
+</table>
+
+<table>
+    <caption>常用特殊字符实体（不建议使用实体）：</caption>
+    <thead>
+        <tr>
+            <th>字符</th>
+            <th>名称</th>
+            <th>实体名</th>
+            <th>实体数</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>¥</td>
+            <td>元</td>
+            <td>&yen;</td>
+            <td>&#165;</td>
+        </tr>
+        <tr>
+            <td>¦</td>
+            <td>断竖线</td>
+            <td>&brvbar;</td>
+            <td>&#166;</td>
+        </tr>
+        <tr>
+            <td>©</td>
+            <td>版权</td>
+            <td>&copy;</td>
+            <td>&#169;</td>
+        </tr>
+        <tr>
+            <td>®</td>
+            <td>注册商标R</td>
+            <td>&reg;</td>
+            <td>&#174;</td>
+        </tr>
+        <tr>
+            <td>™</td>
+            <td>商标TM</td>
+            <td>&trade;</td>
+            <td>&#8482;</td>
+        </tr>
+        <tr>
+            <td>·</td>
+            <td>间隔符</td>
+            <td>&middot;</td>
+            <td>&#183;</td>
+        </tr>
+        <tr>
+            <td>«</td>
+            <td>左双尖括号</td>
+            <td>&laquo;</td>
+            <td>&#171;</td>
+        </tr>
+        <tr>
+            <td>»</td>
+            <td>右双尖括号</td>
+            <td>&raquo;</td>
+            <td>&#187;</td>
+        </tr>
+        <tr>
+            <td>°</td>
+            <td>度</td>
+            <td>&deg;</td>
+            <td>&#176;</td>
+        </tr>
+        <tr>
+            <td>×</td>
+            <td>乘</td>
+            <td>&times;</td>
+            <td>&#215;</td>
+        </tr>
+        <tr>
+            <td>÷</td>
+            <td>除</td>
+            <td>&divide;</td>
+            <td>&#247;</td>
+        </tr>
+        <tr>
+            <td>‰</td>
+            <td>千分比</td>
+            <td>&permil;</td>
+            <td>&#8240;</td>
+        </tr>
+    </tbody>
+</table>
+
+NOTE：具体所需可在使用时查询，无需记忆。
\ No newline at end of file
diff --git a/chapter1/03_04_cross_browser.md b/chapter1/03_04_cross_browser.md
new file mode 100644
index 0000000..4953169
--- /dev/null
+++ b/chapter1/03_04_cross_browser.md
@@ -0,0 +1,18 @@
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [浏览器兼容](#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+### 浏览器兼容
+
+主流浏览器都兼容 HTML5 的新标签，对于 IE8 及以下版本不认识 HTML5的新元素，可以使用 JavaScript 创建一个没用的元素来解决，例如：
+
+```javascript
+<script>
+    document.createElement("header");
+</script>
+```
+也可以使用 shiv 来解决兼容性问题，详情可参考 [HTML5 Shiv](https://github.com/afarkas/html5shiv)
\ No newline at end of file
diff --git a/WebCreation/WebCreation-HTML.md b/chapter1/03_05_html_tags.md
similarity index 56%
rename from WebCreation/WebCreation-HTML.md
rename to chapter1/03_05_html_tags.md
index 25cc18a..64abf97 100644
--- a/WebCreation/WebCreation-HTML.md
+++ b/chapter1/03_05_html_tags.md
@@ -2,74 +2,40 @@
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
 
-- [HTML](#html)
-  - [HTML 历史](#html-%E5%8E%86%E5%8F%B2)
-  - [HTML 简介](#html-%E7%AE%80%E4%BB%8B)
-  - [HTML 语法](#html-%E8%AF%AD%E6%B3%95)
-    - [全局属性](#%E5%85%A8%E5%B1%80%E5%B1%9E%E6%80%A7)
-  - [HTML 标签](#html-%E6%A0%87%E7%AD%BE)
-    - [文本标签](#%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE)
-    - [组合内容标签](#%E7%BB%84%E5%90%88%E5%86%85%E5%AE%B9%E6%A0%87%E7%AD%BE)
-    - [嵌入](#%E5%B5%8C%E5%85%A5)
-    - [资源标签](#%E8%B5%84%E6%BA%90%E6%A0%87%E7%AD%BE)
-      - [图标签](#%E5%9B%BE%E6%A0%87%E7%AD%BE)
-      - [热点区域标签](#%E7%83%AD%E7%82%B9%E5%8C%BA%E5%9F%9F%E6%A0%87%E7%AD%BE)
-    - [表格](#%E8%A1%A8%E6%A0%BC)
-    - [表单](#%E8%A1%A8%E5%8D%95)
-    - [语义化](#%E8%AF%AD%E4%B9%89%E5%8C%96)
-  - [实体字符](#%E5%AE%9E%E4%BD%93%E5%AD%97%E7%AC%A6)
-  - [浏览器兼容](#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9)
+- [HTML 标签](#html-%E6%A0%87%E7%AD%BE)
+  - [文本标签](#%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE)
+  - [组合内容标签](#%E7%BB%84%E5%90%88%E5%86%85%E5%AE%B9%E6%A0%87%E7%AD%BE)
+  - [嵌入](#%E5%B5%8C%E5%85%A5)
+  - [资源标签](#%E8%B5%84%E6%BA%90%E6%A0%87%E7%AD%BE)
+    - [图标签](#%E5%9B%BE%E6%A0%87%E7%AD%BE)
+    - [热点区域标签](#%E7%83%AD%E7%82%B9%E5%8C%BA%E5%9F%9F%E6%A0%87%E7%AD%BE)
+  - [表格](#%E8%A1%A8%E6%A0%BC)
+  - [表单](#%E8%A1%A8%E5%8D%95)
+  - [语义化](#%E8%AF%AD%E4%B9%89%E5%8C%96)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
-## HTML
-
-### HTML 历史
-
-HTML (Hyper Text Markup Language)，用于标记页面中的内容。
-
-![](../img/H/html-history.png)
-
-### HTML 简介
-
-![](../img/H/html-overview.png)
-
-注意事项：
-
-- `<!DOCTYPE html>` 必须首行定格
-- `<title>` 为文档标题
-- `<meta charset="utf-8">` 文档解码格式
-- `<meta name="keywords" content="...">` 和 `<meta name="description" content="...">` 提供给搜索引擎使用
-- `<meta name="viewport" content="width=device-width, initial-scale=1.0">` 移动端浏览器的宽高与缩放
-- `<link>` 标签可以引入 favicon 和样式表 CSS 文件
-
-### HTML 语法
-
-![](../img/H/html-syntax.png)
-
-**书写规范**：
-
-- 小写标签和属性
-- 属性值双引号
-- 代码因嵌套缩进
-
-#### 全局属性
-
-- id, `<div id='unique-element'></div>`，页面中唯一
-- class，`<button class='btn'>Click Me</button>`，页面中可重复出现
-- style，尽量避免
-- title，对于元素的描述类似于 Tooltip 的效果。
-
 ### HTML 标签
 
 **[HTML5 标签集合](http://www.html5star.com/manual/html5label-meaning)**
 
 ![](../img/H/html-elements.jpg)
 
+#### 文档章节
+
+`<body>` 页面内容
+`<header>` 文档头部
+`<nav>` 导航
+`<aside>` 侧边栏
+`<article>` 定义外部内容（如外部引用的文章）
+`<section>` 一个独立的块
+`<footer>` 尾部
+
 **页面通常结构**
 
 ![Web Structure](../img/S/structure.gif)
 
+
 #### 文本标签
 
 ```html
@@ -78,7 +44,7 @@ HTML (Hyper Text Markup Language)，用于标记页面中的内容。
 <!-- 当前窗口显示 -->
 <a href="http://sample-link.com" title="Sample Link" target="_self">Sample</a>
 <!-- 新窗口显示 -->
-<a href="http://sample-link.com" title="Sample Link" target="_blacnk">Sample</a>
+<a href="http://sample-link.com" title="Sample Link" target="_blank">Sample</a>
 <!-- iframe 中打开链接 -->
 <a href="http://sample-link.com" title="Sample Link" target="iframe-name">Sample</a>
 <iframe name="iframe-name" frameborder="0"></iframe>
@@ -108,6 +74,86 @@ HTML (Hyper Text Markup Language)，用于标记页面中的内容。
 - `<pre>`
 - `<blockquote>`
 
+#### 文档章节
+
+`<body>` 页面内容
+`<header>` 文档头部
+`<nav>` 导航
+`<aside>` 侧边栏
+`<article>` 定义外部内容（如外部引用的文章）
+`<section>` 一个独立的块
+`<footer>` 尾部
+
+#### 引用
+
+- `<cite>` 引用作品的名字、作者的名字等
+- `<q>` 引用一小段文字（大段文字引用用`<blockquote>`）
+- `<blockquote>` 引用大块文字
+- `<pre>` 保存格式化的内容（其空格、换行等格式不会丢失）
+
+```html
+<pre>
+  <code>
+    int main(void) {
+      printf('Hello, world!');
+      return 0;
+  }
+</code>
+</pre>
+```
+
+#### 代码
+
+`<code>` 引用代码
+
+#### 格式化
+
+`<b>` 加粗
+`<i>` 斜体
+
+#### 强调
+
+`<em>` 斜体。着重于强调内容，会改变语义的强调
+`<strong>` 粗体。着重于强调内容的重要性
+
+#### 换行
+
+`<br>` 换行
+
+#### 列表
+
+**无序列表**
+
+```html
+<ul>
+  <li>标题</li>
+  <li>结论</li>
+</ul>
+```
+
+**有序列表**
+
+```html
+<ol>
+  <li>第一</li>
+  <li>第二</li>
+</ol>
+```
+
+**自定义列表**
+
+```html
+<dl>
+  <dt>作者</dt>
+  <dd>爱因斯坦</dd>
+  <dt>作品</dt>
+  <dd>《相对论》</dd>
+  <dd>《时间与空间》</dd>
+</dl>
+```
+
+一个`<dt>`可以对应多个`<dd>`
+
 NOTE: `<dl>` 为自定义列表，其中包含一个或多个 `<dt>` 及 一个或多个 `<dd>`，并且`dt` 与 `dl`列表会有缩进的效果。`<pre>` 会保留换行和空格，通常与 `<code>` 一同使用。
 
 ```html
@@ -147,6 +193,7 @@ NOTE: `<dl>` 为自定义列表，其中包含一个或多个 `<dt>` 及 一个
   <track kind="subtitles" src="video.vtt" srclang="cn" label="cn">
 </video>
 ```
+
 #### 资源标签
 
 ##### 图标签
@@ -320,159 +367,4 @@ NOTE: `<dl>` 为自定义列表，其中包含一个或多个 `<dt>` 及 一个
 
 #### 语义化
 
-语义化（Semantic Tag）是指用合适的标签标识适当的内容，它可以起到搜索引擎优化（Search Engine Optimization），提高可访问性（例如盲人使用的屏幕阅读器），与此同时还可以提高代码的可读性。
-
-### 实体字符
-
-实体字符（ASCII Encoding Reference）是用来在代码中以实体代替与HTML语法相同的字符，避免浏览解析错误。它的两种表示方式，第一种为 `&` 外加实体字符名称，例如 ` `，第二种为 `&` 加实体字符序号，例如 ` `。
-
-<table>
-    <caption>常用HTML字符实体（建议使用实体）：</caption>
-    <thead>
-        <tr>
-            <th>字符</th>
-            <th>名称</th>
-            <th>实体名</th>
-            <th>实体数</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr>
-            <td>"</td>
-            <td>双引号</td>
-            <td>&quot;</td>
-            <td>&#34;</td>
-        </tr>
-        <tr>
-            <td>&</td>
-            <td>&符</td>
-            <td>&amp;</td>
-            <td>&#38;</td>
-        </tr>
-        <tr>
-            <td><</td>
-            <td>左尖括号（小于号）</td>
-            <td>&lt;</td>
-            <td>&#60;</td>
-        </tr>
-        <tr>
-            <td>></td>
-            <td>右尖括号（大于号）</td>
-            <td>&gt;</td>
-            <td>&#62;</td>
-        </tr>
-        <tr>
-            <td> </td>
-            <td>空格</td>
-            <td>&nbsp;</td>
-            <td>&#160;</td>
-        </tr>
-        <tr>
-            <td>　</td>
-            <td>中文全角空格</td>
-            <td> </td>
-            <td>&#12288;</td>
-        </tr>
-    </tbody>
-</table>
-
-<table>
-    <caption>常用特殊字符实体（不建议使用实体）：</caption>
-    <thead>
-        <tr>
-            <th>字符</th>
-            <th>名称</th>
-            <th>实体名</th>
-            <th>实体数</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr>
-            <td>¥</td>
-            <td>元</td>
-            <td>&yen;</td>
-            <td>&#165;</td>
-        </tr>
-        <tr>
-            <td>¦</td>
-            <td>断竖线</td>
-            <td>&brvbar;</td>
-            <td>&#166;</td>
-        </tr>
-        <tr>
-            <td>©</td>
-            <td>版权</td>
-            <td>&copy;</td>
-            <td>&#169;</td>
-        </tr>
-        <tr>
-            <td>®</td>
-            <td>注册商标R</td>
-            <td>&reg;</td>
-            <td>&#174;</td>
-        </tr>
-        <tr>
-            <td>™</td>
-            <td>商标TM</td>
-            <td>&trade;</td>
-            <td>&#8482;</td>
-        </tr>
-        <tr>
-            <td>·</td>
-            <td>间隔符</td>
-            <td>&middot;</td>
-            <td>&#183;</td>
-        </tr>
-        <tr>
-            <td>«</td>
-            <td>左双尖括号</td>
-            <td>&laquo;</td>
-            <td>&#171;</td>
-        </tr>
-        <tr>
-            <td>»</td>
-            <td>右双尖括号</td>
-            <td>&raquo;</td>
-            <td>&#187;</td>
-        </tr>
-        <tr>
-            <td>°</td>
-            <td>度</td>
-            <td>&deg;</td>
-            <td>&#176;</td>
-        </tr>
-        <tr>
-            <td>×</td>
-            <td>乘</td>
-            <td>&times;</td>
-            <td>&#215;</td>
-        </tr>
-        <tr>
-            <td>÷</td>
-            <td>除</td>
-            <td>&divide;</td>
-            <td>&#247;</td>
-        </tr>
-        <tr>
-            <td>‰</td>
-            <td>千分比</td>
-            <td>&permil;</td>
-            <td>&#8240;</td>
-        </tr>
-    </tbody>
-</table>
-
-NOTE：具体所需可在使用时查询，无需记忆。
-
-### 浏览器兼容
-
-主流浏览器都兼容 HTML5 的新标签，对于 IE8 及以下版本不认识 HTML5的新元素，可以使用 JavaScript 创建一个没用的元素来解决，例如：
-
-```javascript
-<script>
-    document.createElement("header");
-</script>
-```
-也可以使用 shiv 来解决兼容性问题，详情可参考 [HTML5 Shiv](https://github.com/afarkas/html5shiv)
-
-<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/80x15.png" /></a><br />This work by <a xmlns:cc="http://creativecommons.org/ns#" href="li-xinyang.com" property="cc:attributionName" rel="cc:attributionURL">Li Xinyang</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.
\ No newline at end of file
+语义化（Semantic Tag）是指用合适的标签标识适当的内容，它可以起到搜索引擎优化（Search Engine Optimization），提高可访问性（例如盲人使用的屏幕阅读器），与此同时还可以提高代码的可读性。简而言之也就是**在正确的地方使用正确的标签**
diff --git a/chapter1/03_html.md b/chapter1/03_html.md
new file mode 100644
index 0000000..6bef62d
--- /dev/null
+++ b/chapter1/03_html.md
@@ -0,0 +1,16 @@
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [HTML](#html)
+  - [HTML 历史](#html-%E5%8E%86%E5%8F%B2)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+## HTML
+
+### HTML 历史
+
+HTML (Hyper Text Markup Language)，用于标记页面中的内容。
+
+![](../img/H/html-history.png)
\ No newline at end of file
diff --git a/chapter1/04_01_css_sytax.md b/chapter1/04_01_css_sytax.md
new file mode 100644
index 0000000..29068fa
--- /dev/null
+++ b/chapter1/04_01_css_sytax.md
@@ -0,0 +1,159 @@
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [语法](#%E8%AF%AD%E6%B3%95)
+  - [浏览器私有属性](#%E6%B5%8F%E8%A7%88%E5%99%A8%E7%A7%81%E6%9C%89%E5%B1%9E%E6%80%A7)
+  - [属性值语法](#%E5%B1%9E%E6%80%A7%E5%80%BC%E8%AF%AD%E6%B3%95)
+    - [基本元素](#%E5%9F%BA%E6%9C%AC%E5%85%83%E7%B4%A0)
+    - [组合符号](#%E7%BB%84%E5%90%88%E7%AC%A6%E5%8F%B7)
+    - [数量符号](#%E6%95%B0%E9%87%8F%E7%AC%A6%E5%8F%B7)
+  - [@规则语法](#@%E8%A7%84%E5%88%99%E8%AF%AD%E6%B3%95)
+    - [@规则](#@%E8%A7%84%E5%88%99)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+### 语法
+
+```css
+/* 选择器 */
+.m-userlist {
+  /* 属性声明 */
+  margin: 0 0 30px;
+  /* 属性名:属性值; */
+}
+.m-userlist .list {
+  position: relative;
+  height: 100px;
+  overflow: hidden;
+}
+```
+
+#### 浏览器私有属性
+
+- Google Chrome, Safari (`-webkit`)
+- Firefox (`-moz-`)
+- IE (`-ms-`)
+- Opera (`-o-`)
+
+```css
+.pic {
+  -webkit-transform: rotate(-3deg);
+  -ms-transform: rotate(-3deg);
+  transform: rotate(-3deg);
+}
+```
+
+NOTE: 使用 [http://pleeease.io/play/](http://pleeease.io/play/) ，CSS 预处理器（Sass，Less，Stylus）或编辑器插件可自动添加浏览器厂商的私有属性前缀。
+
+#### 属性值语法
+
+```css
+margin: [ <length> | <percentage> | auto ]{1,4}
+/* 基本元素：<length>, <percentage>, auto*/
+/* 组合符号：[], | */
+/* 数量符号：{1,4} */
+```
+
+##### 基本元素
+
+**关键字**
+- auto
+- solid
+- bold
+- ...
+
+**类型**
+- 基本类型
+    - `<length>`
+    - `<percentage>`
+    - `<color>`
+    - ...
+- 其他类型
+    - <'padding-width'>
+    - <'color-stop'>
+- 符号
+    - `/`
+    - ','
+- inherit, initial
+
+##### 组合符号
+
+- `<'font-size'> <'font-family'>` （` ` 两项必存，顺序毕遵）
+    - 合法：`12px arial`
+    - 不合法：`2em`
+    - 不合法：`arial 14px`
+- `<length>&&<color>` (`&&` 两项必存，顺序无碍)
+    - 合法：green 2px
+    - 合法：1em orange
+    - 不合法：blue
+- `underline || overline || line-through || blink` (`||` 至少选一，顺序无碍)
+    - 合法：underline
+    - 合法：overline underline
+- `<color> | transparent`（`|` 只可选一，不可共存）
+    - 合法：orange
+    - 合法：transparent
+    - 不合法：orange transparent
+- `bold [thin || <length>]`（`[]` 分组之用，视为整体）
+    - 合法：bold thin
+    - 合法：bold 2em
+
+##### 数量符号
+
+- `<length>`（无则表示仅可出现一次）
+    - 合法：1px
+    - 合法：10em
+    - 不合法：1px 2px
+- `<color-stop>[, <color-stop>]+` (`+` 可出现一次或多次)
+    - 合法：#fff, red
+    - 合法：blue, green 50%, gray
+    - 不合法：red
+- `inset?&&<color>` (`?` 表示可选)
+    - 合法：inset orange
+    - 合法：red
+- `<length>{2,4}` (`{2,4}` 可出现次数和最少最多出现次数)
+    - 合法：1px 2px
+    - 合法：1px 2px 3px
+    - 不合法: 1px
+    - 不合法：1px 2px 3px 4px 5px
+- `<time>[, <time>]*`（`*` 出现 0 次或多次）
+    - 合法：1s
+    - 合法：1s,4ms
+- `<time>#`（`#` 出现一次或者多次，用`,`分隔）
+    - 合法：2s, 4s
+    - 不合法：1s 2s
+
+**CSS 规则示例**
+
+![](../img/C/css-value-rule.png)
+
+#### @规则语法
+
+```
+@import "subs.css";
+@charset "utf-8";
+@media print {
+  /* property: value */
+}
+@keyframes fadein {
+  /* property: value */
+}
+```
+
+- `@标示符 内容;`
+- `@标示符 内容{}`
+
+##### @规则
+
+**常用的规则**
+- `@media` （用于响应式布局）
+- `@keyframes` （CSS 动画的中间步骤）
+- `@font-face` （引入外部字体）
+
+**其他规则**（不常用）
+- `@import`
+- `@charset`
+- `@namespace`
+- `@page`
+- `@supports`
+- `@document`
diff --git a/WebCreation/WebCreation-CSS-0.md b/chapter1/04_02_selector.md
similarity index 50%
rename from WebCreation/WebCreation-CSS-0.md
rename to chapter1/04_02_selector.md
index e2389de..48362a8 100644
--- a/WebCreation/WebCreation-CSS-0.md
+++ b/chapter1/04_02_selector.md
@@ -2,209 +2,26 @@
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
 
-- [CSS](#css)
-  - [简介](#%E7%AE%80%E4%BB%8B)
-  - [语法](#%E8%AF%AD%E6%B3%95)
-    - [浏览器私有属性](#%E6%B5%8F%E8%A7%88%E5%99%A8%E7%A7%81%E6%9C%89%E5%B1%9E%E6%80%A7)
-    - [属性值语法](#%E5%B1%9E%E6%80%A7%E5%80%BC%E8%AF%AD%E6%B3%95)
-      - [基本元素](#%E5%9F%BA%E6%9C%AC%E5%85%83%E7%B4%A0)
-      - [组合符号](#%E7%BB%84%E5%90%88%E7%AC%A6%E5%8F%B7)
-      - [数量符号](#%E6%95%B0%E9%87%8F%E7%AC%A6%E5%8F%B7)
-    - [@规则语法](#@%E8%A7%84%E5%88%99%E8%AF%AD%E6%B3%95)
-      - [@规则](#@%E8%A7%84%E5%88%99)
-  - [选择器](#%E9%80%89%E6%8B%A9%E5%99%A8)
-    - [简单选择器](#%E7%AE%80%E5%8D%95%E9%80%89%E6%8B%A9%E5%99%A8)
-      - [标签选择器](#%E6%A0%87%E7%AD%BE%E9%80%89%E6%8B%A9%E5%99%A8)
-      - [类选择器](#%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8)
-      - [id 选择器](#id-%E9%80%89%E6%8B%A9%E5%99%A8)
-      - [通配符选择器](#%E9%80%9A%E9%85%8D%E7%AC%A6%E9%80%89%E6%8B%A9%E5%99%A8)
-      - [属性选择器](#%E5%B1%9E%E6%80%A7%E9%80%89%E6%8B%A9%E5%99%A8)
-      - [伪类选择器](#%E4%BC%AA%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8)
-    - [其他选择器](#%E5%85%B6%E4%BB%96%E9%80%89%E6%8B%A9%E5%99%A8)
-      - [伪元素选择器](#%E4%BC%AA%E5%85%83%E7%B4%A0%E9%80%89%E6%8B%A9%E5%99%A8)
-      - [组合选择器](#%E7%BB%84%E5%90%88%E9%80%89%E6%8B%A9%E5%99%A8)
-      - [选择器分组](#%E9%80%89%E6%8B%A9%E5%99%A8%E5%88%86%E7%BB%84)
-    - [继承、优先、层级](#%E7%BB%A7%E6%89%BF%E3%80%81%E4%BC%98%E5%85%88%E3%80%81%E5%B1%82%E7%BA%A7)
-      - [继承](#%E7%BB%A7%E6%89%BF)
-      - [优先](#%E4%BC%98%E5%85%88)
-        - [改变优先级](#%E6%94%B9%E5%8F%98%E4%BC%98%E5%85%88%E7%BA%A7)
-      - [层叠](#%E5%B1%82%E5%8F%A0)
+- [选择器](#%E9%80%89%E6%8B%A9%E5%99%A8)
+  - [简单选择器](#%E7%AE%80%E5%8D%95%E9%80%89%E6%8B%A9%E5%99%A8)
+    - [标签选择器](#%E6%A0%87%E7%AD%BE%E9%80%89%E6%8B%A9%E5%99%A8)
+    - [类选择器](#%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8)
+    - [id 选择器](#id-%E9%80%89%E6%8B%A9%E5%99%A8)
+    - [通配符选择器](#%E9%80%9A%E9%85%8D%E7%AC%A6%E9%80%89%E6%8B%A9%E5%99%A8)
+    - [属性选择器](#%E5%B1%9E%E6%80%A7%E9%80%89%E6%8B%A9%E5%99%A8)
+    - [伪类选择器](#%E4%BC%AA%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8)
+  - [其他选择器](#%E5%85%B6%E4%BB%96%E9%80%89%E6%8B%A9%E5%99%A8)
+    - [伪元素选择器](#%E4%BC%AA%E5%85%83%E7%B4%A0%E9%80%89%E6%8B%A9%E5%99%A8)
+    - [组合选择器](#%E7%BB%84%E5%90%88%E9%80%89%E6%8B%A9%E5%99%A8)
+    - [选择器分组](#%E9%80%89%E6%8B%A9%E5%99%A8%E5%88%86%E7%BB%84)
+  - [继承、优先、层级](#%E7%BB%A7%E6%89%BF%E3%80%81%E4%BC%98%E5%85%88%E3%80%81%E5%B1%82%E7%BA%A7)
+    - [继承](#%E7%BB%A7%E6%89%BF)
+    - [优先](#%E4%BC%98%E5%85%88)
+      - [改变优先级](#%E6%94%B9%E5%8F%98%E4%BC%98%E5%85%88%E7%BA%A7)
+    - [层叠](#%E5%B1%82%E5%8F%A0)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
-## CSS
-
-### 简介
-
-CSS (Cascading Stylesheet) 它用于设置页面的表现。CSS3 并不是一个完整的独立版本而是将不同的功能拆分成独立模块（例如，选择器模块，盒模型模块），这有利于不同功能的及时更新与发布也利于浏览器厂商的实习。
-
-![](../img/C/css3-history.png)
-
-**CSS 引入方法**
-```html
-// 外部样式表
-<head>
-  <link rel="stylesheet" type="text/css" href="style.css">
-</head>
-
-// 内部样式表
-<head>
-  <style type="text/css">
-    p {
-      margin: 10px;
-    }
-  </style>
-</head>
-
-// 内嵌样式(可在动态效果中同 JavaScript 一同使用)
-<p style="color: red">Sample Text</p>
-```
-
-### 语法
-
-```css
-/* 选择器 */
-.m-userlist {
-  /* 属性声明 */
-  margin: 0 0 30px;
-  /* 属性名:属性值; */
-}
-.m-userlist .list {
-  position: relative;
-  height: 100px;
-  overflow: hidden;
-}
-```
-
-#### 浏览器私有属性
-
-- Google Chrome, Safari (`-webkit`)
-- Firefox (`-moz-`)
-- IE (`-ms-`)
-- Opera (`-o-`)
-
-```css
-.pic {
-  -webkit-transform: rotate(-3deg);
-  -ms-transform: rotate(-3deg);
-  transform: rotate(-3deg);
-}
-```
-
-NOTE: 使用 [http://pleeease.io/play/](http://pleeease.io/play/) ，CSS 预处理器（Sass，Less，Stylus）或编辑器插件可自动添加浏览器厂商的私有属性前缀。
-
-#### 属性值语法
-
-```css
-margin: [ <length> | <percentage> | auto ]{1,4}
-/* 基本元素：<length>, <percentage>, auto*/
-/* 组合符号：[], | */
-/* 数量符号：{1,4} */
-```
-
-##### 基本元素
-
-**关键字**
-- auto
-- solid
-- bold
-- ...
-
-**类型**
-- 基本类型
-    - `<length>`
-    - `<percentage>`
-    - `<color>`
-    - ...
-- 其他类型
-    - <'padding-width'>
-    - <'color-stop'>
-- 符号
-    - `/`
-    - ','
-- inherit, initial
-
-##### 组合符号
-
-- `<'font-size'> <'font-family'>` （` ` 两项必存，顺序毕遵）
-    - 合法：`12px arial`
-    - 不合法：`2em`
-    - 不合法：`arial 14px`
-- `<length>&&<color>` (`&&` 两项必存，顺序无碍)
-    - 合法：green 2px
-    - 合法：1em orange
-    - 不合法：blue
-- `underline || overline || line-through || blink` (`||` 至少选一，顺序无碍)
-    - 合法：underline
-    - 合法：overline underline
-- `<color> | transparent`（`|` 只可选一，不可共存）
-    - 合法：orange
-    - 合法：transparent
-    - 不合法：orange transparent
-- `bold [thin || <length>]`（`[]` 分组之用，视为整体）
-    - 合法：bold thin
-    - 合法：bold 2em
-
-##### 数量符号
-
-- `<length>`（无则表示仅可出现一次）
-    - 合法：1px
-    - 合法：10em
-    - 不合法：1px 2px
-- `<color-stop>[, <color-stop>]+` (`+` 可出现一次或多次)
-    - 合法：#fff, red
-    - 合法：blue, green 50%, gray
-    - 不合法：red
-- `inset?&&<color>` (`?` 表示可选)
-    - 合法：inset orange
-    - 合法：red
-- `<length>{2,4}` (`{2,4}` 可出现次数和最少最多出现次数)
-    - 合法：1px 2px
-    - 合法：1px 2px 3px
-    - 不合法: 1px
-    - 不合法：1px 2px 3px 4px 5px
-- `<time>[, <time>]*`（`*` 出现 0 次或多次）
-    - 合法：1s
-    - 合法：1s,4ms
-- `<time>#`（`#` 出现一次或者多次，用`,`分隔）
-    - 合法：2s, 4s
-    - 不合法：1s 2s
-
-**CSS 规则示例**
-
-![](../img/C/css-value-rule.png)
-
-#### @规则语法
-
-```
-@import "subs.css";
-@charset "utf-8";
-@media print {
-  /* property: value */
-}
-@keyframes fadein {
-  /* property: value */
-}
-```
-
-- `@标示符 内容;`
-- `@标示符 内容{}`
-
-##### @规则
-
-**常用的规则**
-- `@media` （用于响应式布局）
-- `@keyframes` （CSS 动画的中间步骤）
-- `@font-face` （引入外部字体）
-
-**其他规则**（不常用）
-- `@import`
-- `@charset`
-- `@namespace`
-- `@page`
-- `@supports`
-- `@document`
-
 ### 选择器
 
 <p data-height="268" data-theme-id="15197" data-slug-hash="mJmwdK" data-default-tab="result" data-user="li-xinyang" class='codepen'>See the Pen <a href='http://codepen.io/li-xinyang/pen/mJmwdK/'>FEND_Selectors</a> by Li Xinyang (<a href='http://codepen.io/li-xinyang'>@li-xinyang</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
@@ -351,7 +168,7 @@ margin: [ <length> | <percentage> | auto ]{1,4}
 - `:target` 被锚点选中的目标元素 IE9+
 - `:lang()` 选中语言值为某类特殊值的元素 IE7+
 
-NOTE：请在使用时查找文档
+NOTE：`element:nth-of-type(n)` 指父元素下第 n 个 `element` 元素，`element:nth-child(n)` 指父元素下第 n 个元素且元素为 `element`，若不是，选择失败。具体细节请在使用时查找文档。
 
 ```html
 <div>
@@ -454,6 +271,3 @@ value = a * 1000 + b * 100 + c * 10 + d
 ##### 层叠
 
 层叠为相同属性根据优先级覆盖，如优先级相同则后面会覆盖前面的属性，而不同属性则会合并。
-
-
-<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/80x15.png" /></a><br />This work by <a xmlns:cc="http://creativecommons.org/ns#" href="li-xinyang.com" property="cc:attributionName" rel="cc:attributionURL">Li Xinyang</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.
\ No newline at end of file
diff --git a/chapter1/04_03_text.md b/chapter1/04_03_text.md
new file mode 100644
index 0000000..facd721
--- /dev/null
+++ b/chapter1/04_03_text.md
@@ -0,0 +1,324 @@
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [文本](#%E6%96%87%E6%9C%AC)
+  - [字体](#%E5%AD%97%E4%BD%93)
+    - [改变字号](#%E6%94%B9%E5%8F%98%E5%AD%97%E5%8F%B7)
+    - [改变字体](#%E6%94%B9%E5%8F%98%E5%AD%97%E4%BD%93)
+    - [加粗字体](#%E5%8A%A0%E7%B2%97%E5%AD%97%E4%BD%93)
+    - [倾斜字体](#%E5%80%BE%E6%96%9C%E5%AD%97%E4%BD%93)
+    - [更改行距](#%E6%9B%B4%E6%94%B9%E8%A1%8C%E8%B7%9D)
+    - [font shorthand](#font-shorthand)
+    - [改变文字颜色](#%E6%94%B9%E5%8F%98%E6%96%87%E5%AD%97%E9%A2%9C%E8%89%B2)
+  - [对齐方式](#%E5%AF%B9%E9%BD%90%E6%96%B9%E5%BC%8F)
+    - [文字居中](#%E6%96%87%E5%AD%97%E5%B1%85%E4%B8%AD)
+    - [文本垂直对齐](#%E6%96%87%E6%9C%AC%E5%9E%82%E7%9B%B4%E5%AF%B9%E9%BD%90)
+    - [文本缩进](#%E6%96%87%E6%9C%AC%E7%BC%A9%E8%BF%9B)
+  - [格式处理](#%E6%A0%BC%E5%BC%8F%E5%A4%84%E7%90%86)
+    - [保留空格格式](#%E4%BF%9D%E7%95%99%E7%A9%BA%E6%A0%BC%E6%A0%BC%E5%BC%8F)
+    - [文字换行](#%E6%96%87%E5%AD%97%E6%8D%A2%E8%A1%8C)
+  - [文本装饰](#%E6%96%87%E6%9C%AC%E8%A3%85%E9%A5%B0)
+    - [文字阴影](#%E6%96%87%E5%AD%97%E9%98%B4%E5%BD%B1)
+    - [文本装饰（下划线等）](#%E6%96%87%E6%9C%AC%E8%A3%85%E9%A5%B0%EF%BC%88%E4%B8%8B%E5%88%92%E7%BA%BF%E7%AD%89%EF%BC%89)
+  - [高级设置](#%E9%AB%98%E7%BA%A7%E8%AE%BE%E7%BD%AE)
+    - [省略字符](#%E7%9C%81%E7%95%A5%E5%AD%97%E7%AC%A6)
+    - [更换鼠标形状](#%E6%9B%B4%E6%8D%A2%E9%BC%A0%E6%A0%87%E5%BD%A2%E7%8A%B6)
+    - [强制继承](#%E5%BC%BA%E5%88%B6%E7%BB%A7%E6%89%BF)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+### 文本
+
+<p data-height="268" data-theme-id="15197" data-slug-hash="mJmwej" data-default-tab="result" data-user="li-xinyang" class='codepen'>See the Pen <a href='http://codepen.io/li-xinyang/pen/mJmwej/'>FEND_Fonts</a> by Li Xinyang (<a href='http://codepen.io/li-xinyang'>@li-xinyang</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
+<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
+
+#### 字体
+
+##### 改变字号
+
+`font-size: <absolute-size> | <relative-size> | <length> | <percentage> | inherit`
+
+- `<absolute-size>` 有 small large medium
+- `<relative-size>` 有 smaller larger
+
+```stylus
+div
+  font-size 12px
+  p#sample0
+    font-size 16px
+  p#sample1
+    font-size 2em
+  p#sample2
+    font-size 200%
+```
+
+NOTE：以上两值在开发中并不常用。`2em` 与 `200%` 都为父元素默认大小的两倍（参照物为父元素的字体大小 `12px`）。
+
+##### 改变字体
+
+`font-family: [ <family-name> | <generic-family> ]# `
+
+`<generic-family>` 可选选项，但具体使用字体由浏览器决定
+- serif
+- sans-serif
+- cursive
+- fantasy
+- monospace
+
+```css
+font-family: arial, Verdana, sans-serif;
+```
+
+NOTE：优先使用靠前的字体
+
+##### 加粗字体
+
+`font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900`
+
+```css
+font-weight: normal;
+font-weight: bold;
+```
+
+##### 倾斜字体
+
+`font-style: normal | italic | oblique | inherit`
+
+`italic` 使用字体中的斜体，而 `oblique` 在没有斜体字体时强制倾斜字体。
+
+##### 更改行距
+
+`line-height: normal | <number> | <length> | <percentage>`
+
+`normal` 值为浏览器决定，在1.1至1.2之间（通常设置值为1.14左右）
+
+```css
+/* length 类型 */
+line-height: 40px;
+line-height: 3em;
+/* percentage 类型 */
+line-height: 300%;
+/* number 类型 */
+line-height: 3;
+```
+
+NOTE：当`line-height`为 `number` 类型时，子类直接继承其数值（不计算直接继承）。
+而当为 `percentage` 类型时，子类则会先计算再显示（先计算后继承）。
+
+##### 字间距（字母间距）
+
+`letter-spacing: normal | <length>`
+
+其用于设置字间距或者字母间距，此属性适用于中文或西文中的字母。
+如果需要设置西文中词与词的间距或标签直接的距离则需要使用 `word-spacing`。
+
+`word-spacing: normal | <length>`
+
+##### font shorthand
+
+`font: [ [ <‘font-style’> || <font-variant-css21> || <‘font-weight’> || <‘font-stretch’> ]? <‘font-size’> [ / <‘line-height’> ]? <‘font-family’> ] | caption | icon | menu | message-box | small-caption | status-bar`
+
+```css
+font: 30px/2 "Consolas", monospace;
+font: italic bold 20px/1.5 arial, serif;
+font: 20px arial, serif;
+```
+
+NOTE：当其他值为空时，均被设置为默认值。
+
+##### 改变文字颜色
+
+`color: <color>`
+
+```css
+element { color: red; }
+element { color: #f00; }
+element { color: #ff0000; }
+element { color: rgb(255,0,0); }
+element { color: rgb(100%, 0%, 0%); }
+element { color: hsl(0, 100%, 50%); }
+
+/* 50% translucent */
+element { color: rgba(255, 0, 0, 0.5); }
+element { color: hsla(0, 100%, 50%, 0.5); }
+
+/* 全透明 */
+element { color: transparent' }
+element { color: rgba(0, 0, 0, 0); }
+```
+
+#### 对齐方式
+
+##### 文字居中
+
+`text-align: start | end | left | right | center | justify | match-parent | start end`
+
+NOTE：默认为文本左对齐。
+
+##### 文本垂直对齐
+
+`vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>`
+
+NOTE：`<percentage>`的参照物为`line-height`
+
+##### 文本缩进
+
+`text-indent: <length> | <percentage> && [ hanging || each-line ]`
+
+NOTE：缩进两个字可使用 `text-indent: 2em;`
+
+#### 格式处理
+
+##### 保留空格格式
+
+`white-space: normal | pre | nowrap | pre-wrap | pre-line`
+
+`pre` 行为同 `<pre>` 一致。
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th> </th>
+   <th>New lines</th>
+   <th>Spaces and tabs</th>
+   <th>Text wrapping</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th><code>normal</code></th>
+   <td>Collapse</td>
+   <td>Collapse</td>
+   <td>Wrap</td>
+  </tr>
+  <tr>
+   <th><code>nowrap</code></th>
+   <td>Collapse</td>
+   <td>Collapse</td>
+   <td>No wrap</td>
+  </tr>
+  <tr>
+   <th><code>pre</code></th>
+   <td>Preserve</td>
+   <td>Preserve</td>
+   <td>No wrap</td>
+  </tr>
+  <tr>
+   <th><code>pre-wrap</code></th>
+   <td>Preserve</td>
+   <td>Preserve</td>
+   <td>Wrap</td>
+  </tr>
+  <tr>
+   <th><code>pre-line</code></th>
+   <td>Preserve</td>
+   <td>Collapse</td>
+   <td>Wrap</td>
+  </tr>
+ </tbody>
+</table>
+
+##### 文字换行
+
+`word-wrap: normal | break-word`
+
+NOTE：允许长单词自动换行。
+
+`word-break: normal | break-all | keep-all`
+
+NOTE：`break-all` 单词中的任意字母间都可以换行。
+
+#### 文本装饰
+
+##### 文字阴影
+
+`text-shadow:none | <shadow-t>#` 或 `text-shadow:none | [<length>{2,3}&&<color>?]#`
+
+```css
+p {
+  text-shadow: 1px 1px 1px #000,
+               3px 3px 5px blue;
+}
+```
+
+1. value = The X-coordinate X 轴偏移像素
+2. value = The Y-coordinate Y 轴偏移像素
+3. value = The blur radius  阴影模糊半径
+4. value = The color of the shadow 阴影颜色（默认为文字颜色）
+
+##### 文本装饰（下划线等）
+
+`text-decoration: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>`
+
+```css
+h1.under {
+    text-decoration: underline;
+}
+h1.over {
+    text-decoration: overline;
+}
+p.line {
+    text-decoration: line-through;
+}
+p.blink {
+    text-decoration: blink;
+}
+a.none {
+    text-decoration: none;
+}
+p.underover {
+    text-decoration: underline overline;
+}
+```
+
+#### 高级设置
+
+##### 省略字符
+
+`text-overflow: [ clip | ellipsis | <string> ]{1,2}`
+
+```css
+/* 常用配合 */
+text-overflow: ellipsis;
+overflow: hidden; /* 溢出截取 */
+white-space: nowrap; /* 禁止换行 */
+```
+
+##### 更换鼠标形状
+
+`cursor: [[<funciri>,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ]] | inherit`
+
+**常用属性**
+
+`cursor: [<uri>,]*[auto | default | none | help | pointer | zoom-in | zoom-out | move]`
+
+- `<uri>` 图片资源地址代替鼠标默认形状
+- `<default>` 默认光标
+- `<none>` 隐藏光标
+- `<pointer>` 手型光标
+- `<zoom-in>`
+- `<zoom-out>`
+- `<move>`
+
+```css
+cursor: pointer;
+cursor: url(image-name.cur), pointer;
+/* 当 uri 失效时或者则会起作用 */
+```
+
+##### 强制继承
+
+`inherit` 会强制继承父元素的属性值。
+
+```css
+font-size: inherit;
+font-family: inherit;
+font-weight: inherit;
+...
+word-wrap: inherit;
+work-break: inherit
+text-showdow: inherit
+```
+
+NOTE：具体在使用时可查询文档
diff --git a/chapter1/04_04_box_model.md b/chapter1/04_04_box_model.md
new file mode 100644
index 0000000..599b40f
--- /dev/null
+++ b/chapter1/04_04_box_model.md
@@ -0,0 +1,187 @@
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [盒模型](#%E7%9B%92%E6%A8%A1%E5%9E%8B)
+  - [属性](#%E5%B1%9E%E6%80%A7)
+    - [width](#width)
+    - [height](#height)
+    - [padding](#padding)
+    - [margin](#margin)
+      - [margin 合并](#margin-%E5%90%88%E5%B9%B6)
+    - [border](#border)
+    - [border-radius](#border-radius)
+    - [overflow](#overflow)
+    - [box-sizing](#box-sizing)
+    - [box-shadow](#box-shadow)
+    - [outline](#outline)
+  - [TRBL](#trbl)
+  - [值缩写](#%E5%80%BC%E7%BC%A9%E5%86%99)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+### 盒模型
+
+盒子模型是网页布局的基石。它有**边框**、**外边距**、**内边距**、**内容**组成。
+
+**盒子 3D 模型**
+
+![](../img/B/box-model-3d.png)
+
+盒子由上到下依次分为五层，它们自上而下的顺序是。
+
+1. border 边框
+2. content + padding 内容与内边距
+3. background-image 背景图片
+4. background-color 背景颜色
+4. margin 外边距
+
+<p data-height="268" data-theme-id="15197" data-slug-hash="qdmPEE" data-default-tab="result" data-user="li-xinyang" class='codepen'>See the Pen <a href='http://codepen.io/li-xinyang/pen/qdmPEE/'>FEND_003_BoxModel</a> by Li Xinyang (<a href='http://codepen.io/li-xinyang'>@li-xinyang</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
+<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
+
+#### 属性
+
+![](../img/B/box-module.jpg)
+
+##### width
+
+**内容盒子宽**
+
+`width: <length> | <percentage> | auto | inherit`
+
+NOTE：通常情况下百分比得参照物为元素的父元素。`max-width` 与 `min-width` 可以设置最大与最小宽度。
+
+##### height
+
+**内容盒子高**
+
+`height: <length> | <percentage> | auto | inherit`
+
+NOTE：默认情况元素的高度为内容高度。`max-height` 与 `min-height` 可以设置最大与最小高度。
+
+##### padding
+
+![](../img/P/padding-sample.png)
+
+`padding: [<length> | <percentage>]{1,4} | inherit`
+
+##### margin
+
+![](../img/M/margin-sample.png)
+
+`margin: [<length> | <percentage> | auto]{1,4} | inherit`
+
+NOTE：`margin` 默认值为 `auto`
+
+Trick：
+
+```
+/* 可用于水平居中 */
+margin: 0 auto;
+```
+
+###### margin 合并
+
+![](../img/M/margin-merge.png)
+
+毗邻元素外间距（margin）会合并，既取相对较大的值。父元素与第一个和最后一个子元素的外间距也可合并。
+
+##### border
+
+![](../img/B/border-sample.png)
+
+```
+border: [<br-width> || <br-style> || <color>] | inherit
+border-width: [<length> | thin | medium | thick]{1,4} | inherit
+border-style: [solid | dashed | dotted | ...]{1,4} |inherit
+border-colro: [<color> | transparent]{1,4} | inherit
+```
+
+NOTE：`border-color` 默认为元素字体颜色。
+
+##### border-radius
+
+![](../img/B/border-radius-sample1.png)
+
+```
+/* 水平半径/垂直半径 */
+border-radius: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
+```
+
+NOTE：四个角的分解属性由左上角顺时针附值。
+
+##### overflow
+
+![](../img/O/overflow-sample.png)
+
+`overflow: visible | hidden | scroll | auto`
+
+NOTE：默认属性为 `visible`。使用 `overflow-x` 与 `overflow-y` 单独的设置水平和垂直方向的滚动条。
+
+##### box-sizing
+
+![](../img/B/box-sizing.png)
+
+![](../img/B/box-sizing1.png)
+
+`box-sizing: content-box | border-box | inherit`
+
+- `content-box` = 内容盒子宽高 + 填充（`Padding`）+ 边框宽（`border-width`）
+- `border-box` = 内容盒子宽高
+
+##### box-shadow
+
+![](../img/B/box-shadow.png)
+
+`box-shadown: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#`
+
+```html
+box-shadow: 4px  6px   3px  0px red;
+             |    |     |    |
+          水平偏移|     |    |
+               垂直偏移 |    |
+                    模糊半径 |
+                          阴影大小
+```
+
+NOTE：水平与垂直偏移可以为负值即相反方向偏移。颜色默认为文字颜色。阴影不占据空间，仅为修饰效果。
+
+##### outline
+
+```
+outline: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ]
+outline-width: <length> | thin | medium | thick | inherit
+outline-style: solid | dashed | dotted | ... | inherit
+outline-color: <color> | invert | inherit
+/* invert 与当前颜色取反色 */
+```
+
+NOTE：`outline` 与 `border` 相似但无法分别设置四个方向的属性。`outline` 并不占据空间，而 `border` 占据空间，且显示位于 `border` 以外。
+
+#### TRBL
+
+![](../img/T/TRBL.png)
+
+![](../img/B/border-radius-sample.png)
+
+TRBL (Top, Right, Bottom, Left) 即为顺时针从顶部开始。具有四个方向的属性都可以通过 `*-top` `*-right` `*-bottom` 与 `*-left` 单独对其进行设置。
+
+#### 值缩写
+
+下面的值缩写以 `padding` 为例。
+
+> 对面相等，后者省略；四面相等，只设一个。
+
+```html
+/*      四面值 */
+padding: 20px;
+padding: 20px 20px 20px 20px;
+
+/*      上下值 右左值 */
+padding: 20px   10px;
+padding: 20px 10px 20px 10px;
+
+/*       上值 右左值 下值 */
+padding: 20px 10px   30px;
+padding: 20px 10px 30px 10px;
+```
diff --git a/chapter1/04_05_background.md b/chapter1/04_05_background.md
new file mode 100644
index 0000000..cae2f0f
--- /dev/null
+++ b/chapter1/04_05_background.md
@@ -0,0 +1,231 @@
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [背景](#%E8%83%8C%E6%99%AF)
+  - [background-color](#background-color)
+  - [background-image](#background-image)
+  - [background-repeat](#background-repeat)
+  - [background-attachment](#background-attachment)
+  - [background-position](#background-position)
+    - [Sprite 的使用](#sprite-%E7%9A%84%E4%BD%BF%E7%94%A8)
+  - [linear-gradient](#linear-gradient)
+  - [radial-gradient](#radial-gradient)
+  - [repeat-*-gradient](#repeat--gradient)
+  - [background-origin](#background-origin)
+  - [background-clip](#background-clip)
+  - [background-size](#background-size)
+  - [background shorthand](#background-shorthand)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+### 背景
+
+#### background-color
+
+```
+background-color: <color>
+background-color: #f00;
+background-color: rgba(255, 0, 0, 0.5);
+background-color: transparent; /* 默认值 */
+```
+
+#### background-image
+
+```
+background-image: <bg-image>[, <bg-image>]*
+/* <bg-image> = <image> | none */
+background-image: url("../image/pic.png");
+background-image: url("../image/pic.png0"), url("../image/pic1.png");
+/* 多张背景图时，先引入的图片在上一层后引入则在下一层 */
+```
+
+NOTE：当`background-color` 与 `background-image` 共存时，背景颜色永远在最底层（于背景图片之下）。
+
+#### background-repeat
+
+`background-repeat` 需与背景图片数量一致。
+
+```
+background-repeat: <repeat-style>[, <repeat-style]*
+<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
+
+/*                   X 轴     Y 轴 */
+background-repeat: no-repeat repeat;
+```
+
+- `space` 平铺并在水平和垂直留有空隙，空隙的大小为图片均匀分布后完整覆盖显示区域的宽高
+- `round` 不留空隙平铺且覆盖显示区域，图标会被缩放以达到覆盖效果（缩放不一定等比）
+
+#### background-attachment
+
+当页面内容超过显示区域时，使用 `local` 使背景图片同页面内容一同滚动。
+
+```
+background-attachment: <attachment>[, <attachment>]*
+<attachment> = scroll | fixed | local
+```
+
+#### background-position
+
+```
+background-position: <position>[, <position>]*
+<position> = [left|center|right|top|bottom|<percentage>|<length>]|[left|center|right|top|bottom|<percentage>|<length>] [left|center|right|top|bottom|<percentage>|<length>] | [center |[left|right][<percentage>|<length>]?]&&[center |[left|right][<percentage>|<length>]?]
+
+/* 默认位置为 */
+background-position: 0 0;
+
+/* percentage 是容器与图片的百分比重合之处*/
+background-position: 20% 50%;
+
+/* 等同效果 */
+background-position: 50% 50%;
+background-position: center center;
+
+background-position: 0 0;
+background-position: left top;
+
+background-position: 100% 100%;
+background-position: right bottom;
+
+/* 四个值时方向只为参照物 */
+background-position: right 10px top 20px;
+```
+
+![](../img/B/background-position.jpg)
+
+##### Sprite 的使用
+
+```html
+background-image: url(sprite.png)
+background-repeat: no-repeat;
+background-positon: 0 -100px
+```
+
+使用位置为负值将图片偏移使需要的图片位置上移并显示正确的图案。
+
+#### linear-gradient
+
+```
+linear-gradient()
+[[<angle> | to <side-or-corner],]? <color-step>[, <color-stop>]+
+<side-or-corner> = [left | right] || [top | bottom]
+<color-stop> = <color> [<percentage> | <length>]?
+
+background-image: linear-gradient(red, blue);
+background-image: linear-gradient(to top, red, blue);
+background-image: linear-gradient(to right bottom, red, blue);
+background-image: linear-gradient(0deg, red, blue);
+background-image: linear-gradient(45deg, red, blue);
+background-image: linear-gradient(red, green, blue);
+background-image: linear-gradient(red, green 20%, blue);
+```
+
+![](../img/L/linear-gradient.jpg)
+
+#### radial-gradient
+
+```
+radial-gradient(   [ circle || <length> ] [ at <position> ]? , | [ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]? , | [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? , | at <position> , <color-stop> [ , <color-stop> ]+ )
+
+<extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
+<color-stop> = <color> [ <percentage> | <length> ]?
+
+background-image: radial-gradient(cloest-side, red, blue);
+background-image: radial-gradient(circle, red, blue);
+background-image: radial-gradient(circle 100px, red, blue);
+background-image: radial-gradient(red, blue);
+background-image: radial-gradient(100px 50px, red, blue);
+background-image: radial-gradient(100px 50px at 0 0, red, blue);
+background-image: radial-gradient(red, green 20%, blue);
+```
+
+![](../img/R/radial-gradient.jpg)
+
+#### repeat-*-gradient
+
+```
+background-image: repeating-linear-gradient(red, blue 20px, red 40px);
+background-image: repeating-radial-gradient(red, blue 20px, red 40px);
+```
+
+![](../img/R/repeating-gradient.jpg)
+
+#### background-origin
+
+**案例模型**
+
+![](../img/B/background-box-model.png)
+
+决定背景 (0,0) 坐标与 100% 坐标的区域。默认值为 `padding-box`。
+
+```
+<box>[, <box>]*
+<box> = border-box | padding-box | content-box
+
+background-image: url(red.png);
+background-repeat: no-repeat;
+
+background-origin: padding-box;
+background-origin: border-box;
+background-origin: content-box;
+```
+
+![](../img/B/background-origin.jpg)
+
+#### background-clip
+
+裁剪背景，默认值为`border-box`。
+
+```
+<box>[, <box>]*
+<box> = border-box | padding-box | content-box
+
+background-image: url(red.png);
+background-repeat: no-repeat;
+
+background-clip: border-box;
+background-clip: padding-box;
+background-clip: content-box;
+```
+
+![](../img/B/background-clip.jpg)
+
+#### background-size
+
+```
+<bg-size>[, <bg-size>]*
+<bg-size> = [<length> | <percentage> | auto] {1, 2} | cover | contain
+
+background-image: url(red.png);
+background-repeat: no-repeat;
+background-position: 50% 50%;
+
+background-size: auto;
+background-size: 20px 20px;
+/* % 参照物为容器*/
+background-size: 50% 50%;
+/* 尽可能小，但宽度与高度不小过容器（充满容器） */
+background-size: cover;
+/* 尽可能大，但宽度与高度不超过容器（最大完全显示）*/
+background-size: contain;
+```
+
+![](../img/B/background-size.jpg)
+
+#### background shorthand
+
+```
+[<bg-layer,]* <final-bg-layer>
+<bg-layer> = <bg-image> || <position> [/ <bg-size>]? || <repeat-style> || <attachment> || <box> || <box>
+
+/* 两个 <box> 第一个为 background-origin */
+/* 两个 <box> 第二个为 background-clip */
+/* 只出现一个 <box> 则即是 background-origin 也是 background-clip */
+
+<final-bg-layer> = <bg-layer> || <'background-color'>
+
+background: url(red.png) 0 0/20px 20px no-repeat, url(blue.png) 50% 50%/contain no-repeat content-box green;
+```
+
+![](../img/B/background-shorthand.png)
diff --git a/chapter1/04_06_layout.md b/chapter1/04_06_layout.md
new file mode 100644
index 0000000..61d3409
--- /dev/null
+++ b/chapter1/04_06_layout.md
@@ -0,0 +1,370 @@
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [布局](#%E5%B8%83%E5%B1%80)
+  - [display](#display)
+    - [display:block](#displayblock)
+    - [display:inline](#displayinline)
+    - [display:inline-block](#displayinline-block)
+    - [display:none](#displaynone)
+  - [position](#position)
+    - [position:relative](#positionrelative)
+    - [position:absolute](#positionabsolute)
+    - [position:fixed](#positionfixed)
+    - [top/right/bottom/left](#toprightbottomleft)
+    - [z-index](#z-index)
+      - [z-index 栈](#z-index-%E6%A0%88)
+  - [float](#float)
+    - [clear](#clear)
+  - [flex](#flex)
+    - [flex 方向](#flex-%E6%96%B9%E5%90%91)
+      - [flex-direction](#flex-direction)
+      - [flex-wrap](#flex-wrap)
+      - [flex-flow](#flex-flow)
+      - [order](#order)
+    - [flex 弹性](#flex-%E5%BC%B9%E6%80%A7)
+      - [flex-basis](#flex-basis)
+      - [flex-grow](#flex-grow)
+      - [flex-shrink](#flex-shrink)
+      - [flex](#flex-1)
+    - [flex 对齐](#flex-%E5%AF%B9%E9%BD%90)
+      - [justify-content](#justify-content)
+      - [align-items](#align-items)
+      - [align-self](#align-self)
+      - [align-content](#align-content)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+### 布局
+
+学习布局前须知道 CSS 中的定位机制。
+
+- 标准文档流（Normal Flow）
+- 浮动（Float）
+- 绝对定位（Absolute Positioning)
+
+**标准文档流**，从上到下，从左到右的输出文档内容。它由*块级*（block）元素和*行级*元素组成，且它们都是盒子模型。
+
+下面为 Firefox 布局可视化 **Gecko Reflow Visualisation**，布局是指浏览器将元素以正确的大小摆放在正确的位置上。
+
+![](../img/G/gecko-reflow-visualisation.gif)
+
+#### display
+
+设置元素的显示方式
+
+|display|默认宽度|可设置宽高|起始位置|
+|-------|--------|----------|--------|
+|block|父元素宽度|是|换行|
+|inline|内容宽度|否|同行|
+|inline-block|内容宽度|是|同行|
+
+##### display:block
+
+- 默认宽高为父元素宽高
+- 可设置宽高
+- 换行显示
+- 默认为block的元素：`<div>`, `<p>`, `<h1>` ~ `<h6>`, `<ul>`, `<form>`
+
+##### display:inline
+
+- 默认宽度为内容宽度
+- 不可设置宽高
+- 同行显示（元素内部可换行）
+- 默认为inline的元素：`<span>`, `<a>`, `<label>`, `<cite>`, `<em>`
+
+##### display:inline-block
+
+- 默认宽度为内容宽度
+- 可设置宽高
+- 同行显示
+- 整块换行
+- 默认为inline-block的元素：`<input>`, `<textarea>`, `<select>`, `<button>`
+
+##### display:none
+
+- 设置元素不显示
+
+`display:none` 与 `visibility:hidden` 的区别为 `display:none` 不显示且不占位，但 `visibility:hidden` 不显示但占位。
+
+#### position
+
+`position` 用于设置定位的方式与`top` `right` `bottom` `left` `z-index` 则用于设置参照物位置（必须配合定位一同使用）。
+
+**三种定位形式**
+
+- 静态定位（static）
+- 相对定位（relative）
+- 绝对定位（absolute、fixed）
+
+```
+position: static | relative | absolute | fixed
+/* 默认值为 static */
+```
+
+##### position:relative
+
+- 相对定位的元素仍在文档流之中，并按照文档流中的顺序进行排列。
+- 参照物为元素本身的位置。
+
+NOTE：最常用的目的为改变元素层级和设置为绝对定位的参照物。
+
+![](../img/P/position-relative.png)
+
+##### position:absolute
+
+建立以包含块为基准的定位，其随即拥有偏移属性和 `z-index` 属性。
+
+- 默认宽度为内容宽度
+- 脱离文档流
+- 参照物为第一个定位祖先或根元素（`<html>` 元素）
+
+![](../img/P/position-absolute.png)
+
+##### position:fixed
+
+- 默认宽度为内容宽度
+- 脱离文档流
+- 参照物为视窗
+
+NOTE：宽高的100%的参照依然为视窗（例：网页遮罩效果）
+
+![](../img/P/position-fixed.png)
+
+##### top/right/bottom/left
+
+![](../img/L/layout-position.png)
+
+其用于设置元素边缘与参照物边缘的距离，且设置的值可为负值。在同时设置相对方向时，元素将被拉伸。
+
+##### z-index
+
+其用于设置 Z 轴上得排序，默认值为 0 但可设置为负值。（如不做设置，则按照文档流的顺序排列。后面的元素将置于前面的元素之上）
+
+![](../img/L/layouy-position-zindex.png)
+
+###### z-index 栈
+
+父类容器的 `z-index` 优于子类 `z-index` 如图
+
+![](../img/L/layout-position-zindex-stack.jpg)
+
+#### float
+
+CSS 中规定的定位机制，其可实现块级元素同行显示并存在于文档流之中。浮动仅仅影响文档流中下一个紧邻的元素。
+
+```
+float: left | right | none | inherit
+```
+
+- 默认宽度为内容宽度
+- 脱离文档流（会被父元素边界阻挡与`position`脱离文档流的方式不同）
+- 指的方向一直移动
+
+![](../img/F/float-right.png)
+
+**float 元素在同一文档流中**，当同时进行 `float` 时它们会按照文档流中的顺序排列。(当所有父元素中的所有元素脱离文档流之后，父元素将失去原有默认的内容高度)
+
+![](../img/F/float-right-all.jpg)
+
+注意：**float 元素是半脱离文档流的**，对元素是脱离文档流，但对于内容则是在文档流之中的（既元素重叠但内容不重叠）。
+
+![](../img/F/float-half-off.png)
+
+##### clear
+
+```
+clear: both | left | right | none | inherit
+```
+
+- 应用于后续元素
+- 应用于块级元素（block）
+
+**使用方法**：
+
+优先级自上而下
+
+1. clearfix 于父元素
+1. 浮动后续空白元素 `.emptyDiv {clear: both}`
+1. 为受到影响的元素设置 `width: 100% overflow: hidden` 也可
+1. 块级元素可以使用 `<br>` 不建议使用，影响 HTML 结构
+
+```
+/* clearfix */
+.clearfix:after {
+   content: "."; /* Older browser do not support empty content */
+   visibility: hidden;
+   display: block;
+   height: 0;
+   clear: both;
+}
+.clearfix {zoom: 1;} /* 针对 IE 不支持 :after */
+```
+
+#### flex
+
+![](../img/F/flex-container-and-item.jpg)
+
+弹性布局可用于多行自适应，多列自适应，间距自适应和任意对齐。
+
+**创建 flex container**
+
+```
+display: flex
+/* 弹性容器内的均为弹性元素*/
+```
+
+**flex item**
+
+只有弹性容器在文档流中的子元素才属于弹性元素。
+
+```
+<div style="display: flex;">
+  <div>Block Element</div>
+  <!-- flex item: YES-->
+  <span>Inline Element</span>
+  <!-- flex item: YES-->
+  <div style="position:absolute;">Absolute Block Element</div>
+  <!-- flex item: YES-->
+</div>
+```
+
+##### flex 方向
+
+###### flex-direction
+
+```
+<!-- 默认值为 row -->
+flex-direction: row | row-reverse | column | column-reverse
+```
+
+![](../img/F/flex-direciton.png)
+
+###### flex-wrap
+
+```
+<!-- 默认值为 nowrap -->
+flex-wrap: nowrap | wrap | wrap-reverse
+```
+
+![](../img/F/flex-wrap.png)
+
+###### flex-flow
+
+`flex-flow` 为 `flex-wrap` 与 `flex-direction` 的简写，建议使用此属性（避免同时使用两个属性来修改）。
+
+```
+flex-flow: <'flex-direction'> || <'flex-wrap'>
+```
+
+![](../img/F/flex-flow.png)
+
+###### order
+
+`order` 的值为相对的（同被设置和未被设置的值相比较），当均为设置时默认值为 0 则按照文档流中的顺序排列。
+
+```
+order: <integer>
+<!-- 默认为 0 -->
+```
+
+![](../img/F/flex-order0.png)
+![](../img/F/flex-order1.png)
+
+##### flex 弹性
+
+###### flex-basis
+
+其用于设置 `flex-item` 的初始宽高（并作为弹性的基础）。如果 `flex-direction` 是以 `row` 排列则设置**宽**，如以 `column` 排列则设置**高**。
+
+```
+flex-basis: main-size | <width>
+```
+
+###### flex-grow
+
+伸展因子，其为弹性布局中最重要的元素之一，`flex-grow` 设置元素可用空余空间的比例。`flex-container` 先安装宽度（`flex-basis`）进行布局，如果有空余空间就按照 `flex-grow` 中的比例进行分配。
+
+**Width/Height = flex-basis + flex-grow/sum(flow-grow) * remain**
+
+```
+flex-grow: <number>
+initial: 0
+<!-- 默认值为 0 -->
+```
+
+![](../img/F/flex-grow0.png)
+![](../img/F/flex-grow1.png)
+![](../img/F/flex-grow2.png)
+
+###### flex-shrink
+
+收缩因子，用于分配超出的负空间如何从可用空间中进行缩减。
+
+```
+flex-shrink: <number>
+initial: 1
+<!-- 默认值为 1 -->
+```
+
+**Width/Height = flex-basis + flow-shrink/sum(flow-shrink) * remain**
+
+remain 为负值，既超出的区域。
+
+![](../img/F/flex-shrink.png)
+
+###### flex
+
+其为 `flex-grow` `flex-shrink` `flex-basis` 的值缩写。
+
+```
+flex: <'flex-grow'> || <'flex-shrink'> || <'flex-basis'>
+initial: 0 1 main-size
+```
+
+##### flex 对齐
+
+###### justify-content
+
+其用于设置主轴（main-axis）上的对其方式。弹性元素根据主轴（横向和纵向均可）定位所以不可使用 `left` 与 `right` 因为位置为相对的。（行为相似的属性有 `text-align`）
+
+```
+justify-content: flex-start | flex-end | center | space-between | space-around
+<!-- 默认值为 flex-start -->
+```
+
+![](../img/F/flex-justify-content.png)
+
+###### align-items
+
+其用于设置副轴（cross-axis）上的对其方式。（行为相似的属性有 `vertical-align`）
+
+```
+align-items: flex-start | flex-end | center | baseline | stretch
+<!-- 默认值为 stretch -->
+```
+
+![](../img/F/flex-align-items.png)
+
+###### align-self
+
+其用于设置单个 `flex-item` 在 cross-axis 方向上的对其方式。
+
+```
+align-self: auto | flex-start | flex-end | center | baseline | stretch
+<!-- 默认值为 auto -->
+```
+
+![](../img/F/flex-align-self.png)
+
+###### align-content
+
+其用于设置 cross-axis 方向上的对其方式。
+
+```
+align-content:flex-start | flex-end | center | space-between | space-around | stretch
+<!-- 默认为 stretch -->
+```
+
+![](../img/F/flex-align-content.png)
diff --git a/chapter1/04_07_transform.md b/chapter1/04_07_transform.md
new file mode 100644
index 0000000..e50f343
--- /dev/null
+++ b/chapter1/04_07_transform.md
@@ -0,0 +1,266 @@
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [变形](#%E5%8F%98%E5%BD%A2)
+  - [2D 变形](#2d-%E5%8F%98%E5%BD%A2)
+    - [transform](#transform)
+      - [rotate()](#rotate)
+      - [transform-origin](#transform-origin)
+      - [translate()](#translate)
+      - [scale()](#scale)
+      - [skew()](#skew)
+  - [3D 变形](#3d-%E5%8F%98%E5%BD%A2)
+    - [rotateY()](#rotatey)
+    - [perspective](#perspective)
+    - [perspective-origin](#perspective-origin)
+    - [translate3d()](#translate3d)
+    - [scale3d()](#scale3d)
+    - [rotate3d()](#rotate3d)
+    - [transform-style](#transform-style)
+    - [backface-visibility](#backface-visibility)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+### 变形
+
+#### 2D 变形
+
+[2D 变形示例代码](../SampleCode/CSS/Transform2D.html)
+
+##### transform
+
+`transform` 中可以写一个或多个方法。
+
+```
+transform: none | <transform-function>+
+transform: none
+<!-- 默认值为 none -->
+transform: <transform-function>+
+
+transform: translate(50%) rotate(45deg);
+transform: rotate(45deg) transform(50%)
+<!-- 变形函数顺序普通结果不同，原因是坐标位置发生了改变 -->
+```
+
+![](../img/T/transform-transform-function.png)
+
+###### rotate()
+
+```
+rotate(<angle>)
+
+rotate(45deg);
+<!-- 右边旋转，顺时针 -->
+rotate(-60deg);
+<!-- 左边旋转，逆时针 -->
+```
+
+![](../img/T/transform-rotate.png)
+
+###### transform-origin
+
+其用于设置原点的位置（默认位置为元素中心）第一值为 X 方向，第二值为 Y 方向， 第三值为 Z 方向。（当值空出未写的情况下默认为 50%）
+
+```
+transform-origin: [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ] <length>?
+
+<!-- 默认值为 50% 50% -->
+
+transform-origin: 50% 50%;
+transform-origin: 0 0;
+transform-origin: right 50px 20px;
+transform-origin: top right 20px;
+```
+
+![](../img/T/transform-origin.png)
+
+###### translate()
+
+移动方法，参数分别代表 X 与 Y 轴的移动（偏移值均可为负值）。
+
+```
+translate(<translation-value>[, <translation-value>]?)
+
+<!-- 也可单独设置 X 与 Y 轴的偏移 -->
+translationX(<translation-value>)
+translationY(<translation-value>)
+
+transform: translate(50px);
+transform: translate(50px, 20%);
+<!-- Y 轴偏移为偏移对象的高度，X 轴为宽度 -->
+transform: translate(-50px);
+transform: translate(20%);
+```
+
+![](../img/T/transform-traslate.png)
+
+###### scale()
+
+缩放方法，参数分别代表 X 与 Y 轴的缩放（缩放值均可为小数）。当第二值忽略时，默认设置为等同第一值。
+
+```
+scale(<number> [, <number>]?)
+
+scaleX(<number>)
+scaleY(<number>)
+
+<!-- 整体放大 1.2 倍 -->
+transform: scale(1.2);
+<!-- 高度拉伸 -->
+transform: scale(1, 1.2);
+<!-- 宽度拉伸 -->
+transform: scaleX(1.2);
+<!-- 高度拉伸 -->
+transform: scaleY(1.2);
+```
+
+![](../img/T/transform-scale.png)
+
+###### skew()
+
+其为倾斜的方法。第一值为 Y 轴往 X 方向倾斜（逆时针），第二值为 X 轴往 Y 方向倾斜（顺时针）。（倾斜值可为负值）
+
+```
+skew(<angle>[, <angle>]?)
+
+skewX(<angle>)
+skewY(<angle>)
+
+transform: skew(30deg);
+transform: skew(30deg, 30deg);
+transform: skewX(30deg);
+transform: skewY(30deg);
+```
+
+![](../img/T/transform-skew.png)
+
+#### 3D 变形
+
+[3D 变形示例代码](../SampleCode/CSS/Transform3D.html)
+
+##### rotateY()
+
+3D 空间旋转。
+
+```
+transform: rotateY(<angle>)
+```
+
+##### perspective
+
+![](../img/P/perspective-3d.PNG)
+
+其用于设置图片 Y 轴旋转后的透视效果。`<length>` 可以理解为人眼与元素之间的距离，越紧则效果越明显。
+
+```
+perspective: none | <length>
+
+perspective: none;
+perspective: 2000px;
+perspective: 500px;
+```
+
+![](../img/T/transform-perspective.png)
+
+##### perspective-origin
+
+其为设定透视的角度（透视位置均可设定为负值）。
+
+```
+perspective-origin: [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ]
+
+perspective-origin: 50% 50%
+<!-- 默认值为 50% 50% 正中间的位置进行透视-->
+perspective-origin: left bottom;
+perspective-origin: 50% -800px;
+perspective-origin: right;
+```
+
+![](../img/T/transform-perspective-origin.png)
+
+##### translate3d()
+
+```
+translate3d(<translate-value>, <translate-value>, <length>)
+
+translateX(<translate-value>)
+translateY(<translate-value>)
+translateZ(<length>)
+
+transform: translate3d(10px, 20%, 50px);
+<!-- %的参照物为自身元素 -->
+transform: translateX(10px);
+transform: translateY(20%);
+transform: translateZ(-100px);
+```
+
+![](../img/T/transform-translate3d.png)
+
+##### scale3d()
+
+```
+scale3d(<number>, <number>, <number>)
+
+scaleX(<number>)
+scaleY(<number>)
+scaleZ(<number>)
+
+transform: scale3d(1.2, 1.2, 1);
+transform: scale3d(1, 1.2, 1);
+transform: scale3d(1.2, 1, 1);
+transform: scaleZ(5);
+<!-- Z 轴的缩放扩大并不影响盒子大小 -->
+```
+
+![](../img/T/transform-scale3d.png)
+
+##### rotate3d()
+
+取 X Y Z 三轴上的一点并于坐标原点连线，以连线为轴进行旋转（逆时针）。
+
+```
+rotate3d(<number>, <number>, <number>, <angle>)
+
+rotateX(<angle>)
+rotateY(<angle>)
+rotateZ(<angle>)
+
+transform: rotate3d(1, 0, 0, 45deg);
+<!-- 上面等同于 X 轴旋转 -->
+transform: rotate3d(0, 1, 0, 45deg);
+<!-- 上面等同于 Y 轴旋转 -->
+transform: rotate3d(0, 0, 1, 45deg);
+<!-- 上面等同于 2D 旋转 -->
+transform: rotate3d(1, 1, 1, 45deg);
+```
+
+![](../img/T/transform-rotate3d.png)
+
+##### transform-style
+
+其用于设置保留内部的 3D 空间，原因是一个元素进行`transform`之后内部默认为`flat`。
+
+```
+transform-style: flat | perserve-3d
+
+<!-- 默认为 flat -->
+
+transform-style: flat;
+transform-style: preserve-3d;
+```
+
+![](../img/T/transform-transform-style.png)
+
+##### backface-visibility
+
+其用于设置背面不可见。
+
+```
+backface-visibility: visible | hidden
+
+backface-visibility: visible;
+backface-visibility: hidden;
+```
+
+![](../img/T/transform-backface-visibility.png)
diff --git a/chapter1/04_08_animation.md b/chapter1/04_08_animation.md
new file mode 100644
index 0000000..eb186b9
--- /dev/null
+++ b/chapter1/04_08_animation.md
@@ -0,0 +1,261 @@
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [动画](#%E5%8A%A8%E7%94%BB)
+  - [transition](#transition)
+    - [transition-property](#transition-property)
+    - [transition-duration](#transition-duration)
+    - [transition-delay](#transition-delay)
+    - [transition-timing-function](#transition-timing-function)
+  - [animation](#animation)
+    - [animation-name](#animation-name)
+    - [animation-duration](#animation-duration)
+    - [animation-timing-function](#animation-timing-function)
+    - [animation-iteration-count](#animation-iteration-count)
+    - [animation-direction](#animation-direction)
+    - [animation-play-state](#animation-play-state)
+    - [animation-delay](#animation-delay)
+    - [animation-fill-mode](#animation-fill-mode)
+    - [@keyframes](#@keyframes)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+
+### 动画
+
+[动画示例代码](../SampleCode/CSS/Animation.html)
+
+#### transition
+
+[过度动画](../SampleCode/CSS/Transition.html)
+
+其为众多 `<single-transition>` 的值缩写。（当两个时间同时出现是，第一个时间为动画长度，第二个时间为动画延时）
+
+```
+transition: <single-transition> [',' <single-transition>]*
+
+<single-transition> = [none | <single-transition-property>] || <time> || <single-transition-timing-function> || <time>
+
+
+transition: none;
+transition: left 2s ease 1s, color 2s;
+transition: 2s;
+```
+
+##### transition-property
+
+```
+transition-property: none | <single-traisition-property> [ ',' <single-transition-property>]*
+
+<single-transition-property> = all | <IDENT>
+
+transition-property: none;
+<!-- 默认值为 none -->
+transition-property: all;
+transition-property: left;
+transition-property: left, color;
+```
+
+##### transition-duration
+
+```
+transition-duration: <time>[, <time>]*
+
+transition-duration: 0s;
+transition-duration: 1s;
+transition-duration: 1s, 2s, 3s;
+```
+
+##### transition-delay
+
+```
+transition-delay: <time>[,<time>]*
+
+transition-delay: 0s;
+transition-delay: 1s;
+transition-delay: 1s, 2s, 3s;
+```
+
+##### transition-timing-function
+
+```
+transition-timing-function: <single-transition-timing-function>[',' <single-transition-timing-function>]*
+
+<!-- 默认函数为 ease -->
+<single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>,<number>,<number>,<number>) | step-start | step-end | steps(<integer>)[, [start | end]]?)
+
+<!-- 对于 cubic-bezier 的曲线，前两个值为 P1 的坐标，后两值为 P2 的坐标 -->
+
+transition-timing-function: ease;
+transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
+transition-timing-function: linear;
+transition-timing-function: cubic-bezier(0, 0, 1, 1);
+```
+
+![](../img/T/transition-timing-function.png)
+
+#### animation
+
+```
+animation: <single-animation> [',' <single-animation>]*
+
+<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || single-animation-play-state>
+
+animation: none;
+animation: abc 2s ease 0s 1 normal none running;
+animation: abc 2s;
+animation: abc 1s 2s both, abcd 2s both;
+<!-- 调用多个动画 -->
+```
+
+动画可自动运行，但`transition`需要触发。
+
+##### animation-name
+
+`animation-name` 的名字可自由定义。
+
+```
+animation-name: <single-animation-name>#
+
+<single-animation-name> = none | <IDENT>
+
+animation-name: none;
+animation-name: abc;
+animation-name: abc, abcd;
+```
+
+##### animation-duration
+
+与 `transition-duration` 属性值类似。
+
+```
+animation-duration: <time>[, <time>]*
+
+animation-duration: 0s;
+animation-duration: 1s;
+animation-duration: 1s, 2s, 3s;
+```
+
+##### animation-timing-function
+
+其与之前的 `transition-timing-function` 完全一模一样。
+
+```
+animation-timing-function: <timing-function>#
+
+<single-timing-function> = <single-transition-timing-function>
+
+animation-timing-function: ease;
+animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
+animation-timing-function: linear;
+animation-timing-function: cubic-bezier(0, 0, 1, 1);
+animation-timing-function: ease, linear;
+```
+
+##### animation-iteration-count
+
+其用于动画执行的次数（其默认值为 1）。
+
+```
+animation-iteration-count: <single-animation-iteration-count>#
+
+<single-animation-iteration-count> = infinite | <number>
+
+animation-iteration-count: 1;
+animation-iteration-count: infinite;
+animation-iteration-count: 1, 2, infinite;
+```
+
+##### animation-direction
+
+其用于定义动画的运动方向。
+
+```
+animation-direction:<single-animation-direction>#
+
+<single-animation-direction> = normal | reverse | alternate | alternate-revers
+
+animation-direction: reverse
+<!-- 动画相反帧的播放 -->
+animation-direction: alternate
+<!-- 往返执行动画 -->
+animation-direction: alternate-revers
+<!-- 相反的往返动画 -->
+```
+
+##### animation-play-state
+
+其用于设定动画的播放状态。
+
+```
+animation-play-state: <single-animation-play-state>#
+
+<single-animation-play-state> = running | paused
+
+animation-play-state: running;
+animation-play-state: pasued;
+animation-play-state: running, paused;
+```
+
+##### animation-delay
+
+其用于设置动画的延时，同 `transition-delay` 值相同。
+
+```
+animation-delay: <time>[, <time>]*
+anim
+animation-delay: 0s;
+animation-delay: 1s;
+animation-delay: 1s, 2s, 3s;
+```
+
+##### animation-fill-mode
+
+其用于设置动画开始时，是否保持第一帧的动画和动画在结束时时候保持最后的状态。
+
+```
+animation-fill-mode: <single-animation-fill-mode>[',' <single-animation-fill-mode>]*
+
+<single-animation-fill-mode> = none | backwards | forwards | both
+
+animation-fill-mode: none;
+<!-- 不做设置 -->
+animation-fill-mode: backwards;
+<!-- 动画开始时出现在第一帧的状态 -->
+animation-fill-mode: forwards;
+<!-- 动画结束时保留动画结束时的状态 -->
+animation-fill-mode: both;
+<!-- 开始和结束时都应保留关键帧定义的状态（通常设定） -->
+animation-fill-mode: forwards, backwards;
+```
+
+##### @keyframes
+
+其用于定义关键帧。
+
+```
+<!-- 写法一 -->
+@keyframes abc {
+  from {opacity: 1; height: 100px;}
+  to {opacity: 0.5; height: 200px;}
+}
+
+<!-- 写法二 -->
+@keyframes abcd {
+  0% {opacity: 1; height: 100px;}
+  100% {opacity: 0.5; height: 200px}
+}
+
+@keyframes flash {
+  0%, 50%, 100% {opacity: 1;}
+  25%, 75% {opacity: 0;}
+}
+
+<!-- 例子 -->
+animation: abc 0.5s both;
+animation: flash 0.5s both;
+animaiton: abc 0.5s both, flash 0.5s both;
+```
+
+![](../img/A/animation-sample.gif)
\ No newline at end of file
diff --git a/chapter1/04_09_layout_demo.md b/chapter1/04_09_layout_demo.md
new file mode 100644
index 0000000..eab5cd7
--- /dev/null
+++ b/chapter1/04_09_layout_demo.md
@@ -0,0 +1,118 @@
+### 常见布局样例
+
+#### 自动居中一列布局
+
+所需知识：
+
+- 标准文档流
+- 块级元素
+- margin 外边距属性
+
+```html
+<style type="text/css" media="screen">
+  article {
+    width: 800px;
+    margin: 0 auto;
+  }
+</style>
+
+<body>
+  <article>
+    <h1>Title</h1>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A natus repellendus, modi culpa, dolor ducimus debitis, facere dolorum cum aspernatur, soluta molestias est illo vel iusto esse ex ullam amet!</p>
+  </article>
+</body>
+```
+
+NOTE：设置 auto 会根据浏览器宽度自动设置外边距尺寸。在设置浮动或绝对定位则会使自动居中失效，因为其会脱离文档流。
+
+`(浏览器宽度 - 外包含层的宽度)/ 2 = 外边距`。
+
+#### 横向两列布局
+
+此方法也同时可以实现横向多列布局（原理与两列布局相同）。
+
+所需知识：
+
+- float 属性，使纵向排列的块级元素，横向排列
+- margin 属性，设置列之间的间距
+
+```html
+<style type="text/css" media="screen">
+  .clearfix:after {
+     content: "."; /* Older browser do not support empty content */
+     visibility: hidden;
+     display: block;
+     height: 0;
+     clear: both;
+  }
+  .clearfix {zoom: 1;} /* 针对 IE 不支持 :after */
+  body {
+    width: 930px;
+    margin: 0 auto; /* 横向居中 */
+  }
+  article {
+    width: 800px;
+    float: left;
+    margin-right: 10px;
+  }
+  aside {
+    width: 120px;
+    float: right;
+  }
+</style>
+<body class="clearfix">
+  <article>
+    <h1>Title</h1>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, quam, fugit. Accusamus voluptates nesciunt in, autem ipsa assumenda a iusto, reiciendis earum repudiandae, nulla natus blanditiis, aliquam asperiores commodi qui.</p>
+  </article>
+  <aside>
+    <h3>Aside Title</h3>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, molestiae!</p>
+  </aside>
+</body>
+```
+
+#### 绝对定位的横向两列布局
+
+应用场合较少，常用与一列定宽，另一列自适应。
+
+需要知识：
+
+- relative positon 父元素相对定位
+- absolute 自适应宽度元素绝对定位
+
+注意：固定宽度列的高度需大于自适应的列（原因是绝对定位会脱离文档流，不能撑开父元素）。
+
+```html
+<style type="text/css" media="screen">
+  body {
+    position: relative;
+    width: 100%;
+  }
+
+  article {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 800px;
+  }
+  aside {
+    position: absolute;
+    top: 0;
+    right:800px;
+    left: 0;
+  }
+</style>
+
+<body>
+  <article>
+    <h1>Title</h1>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error obcaecati sint minima totam fuga, tempora, id quia soluta officia iure eligendi sequi non dicta, doloribus accusamus odit fugiat quam quibusdam.</p>
+  </article>
+  <aside>
+    <h3>Aside Title</h3>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, doloremque.</p>
+  </aside>
+</body>
+```
diff --git a/chapter1/04_css_intro.md b/chapter1/04_css_intro.md
new file mode 100644
index 0000000..b94917b
--- /dev/null
+++ b/chapter1/04_css_intro.md
@@ -0,0 +1,36 @@
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [CSS](#css)
+  - [简介](#%E7%AE%80%E4%BB%8B)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+## CSS
+
+### 简介
+
+CSS (Cascading Stylesheet) 它用于设置页面的表现。CSS3 并不是一个完整的独立版本而是将不同的功能拆分成独立模块（例如，选择器模块，盒模型模块），这有利于不同功能的及时更新与发布也利于浏览器厂商的实习。
+
+![](../img/C/css3-history.png)
+
+**CSS 引入方法**
+```html
+// 外部样式表
+<head>
+  <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+
+// 内部样式表
+<head>
+  <style type="text/css">
+    p {
+      margin: 10px;
+    }
+  </style>
+</head>
+
+// 内嵌样式(可在动态效果中同 JavaScript 一同使用)
+<p style="color: red">Sample Text</p>
+```
diff --git a/chapter2/00_intro.md b/chapter2/00_intro.md
new file mode 100644
index 0000000..4dbc5f7
--- /dev/null
+++ b/chapter2/00_intro.md
@@ -0,0 +1,3 @@
+# JavaScript 程序设计
+
+Javascript 程序设计以 ECMAScript 5.1 为标准，从基本语法到原理深入,理解和编写Javascript程序。核心内容有语言简介、调试器、类型系统、内置对象、基本语法、变量作用域、闭包、面向对象编程等。
diff --git a/chapter2/01_javascript_intro.md b/chapter2/01_javascript_intro.md
new file mode 100644
index 0000000..487e587
--- /dev/null
+++ b/chapter2/01_javascript_intro.md
@@ -0,0 +1,31 @@
+## JavaScript 介绍
+
+前端开发三要素，`HTML`（描述网页内容），`CSS`（描述样式），`JavaScript`（控制网页行为）。JavaScript 为解释型编程语（程序不需要编译，程序在运行时才翻译成机器语言，每执 行一次都要翻译一次)，运行环境也很广泛（浏览器或操作系统中 NodeJS）。
+
+JavaScript 又分为两部分，ECMAScript 和 DOM。其中 JavaScript 的基本的语言属性（例如，变量，作用域等）都在 ECMAScript 中有详细的定义好比汉子在字典中的定义。DOM 中则定义如何修改文档结构（HTML 或 XML 等）。
+
+**JavaScript**的引入方法如下：
+
+```javascript
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Demo Page
+
+
+  
+
+  
+  
+  
+  
+  
+
+
+```
+
+![](../img/J/javascript-history.png)
+
+![](../img/J/javascript-env.png)
diff --git a/chapter2/02_dev_tools.md b/chapter2/02_dev_tools.md
new file mode 100644
index 0000000..a3fc6b2
--- /dev/null
+++ b/chapter2/02_dev_tools.md
@@ -0,0 +1,3 @@
+## 调试器
+
+调试工具都内置于主流浏览器中（Firefox 中需独立下载 Firebug）。更多关于 Google Chrome DevTools 的信息可以在[这里](https://developer.chrome.com/devtools)找到。
diff --git a/chapter2/03_basic_syntax.md b/chapter2/03_basic_syntax.md
new file mode 100644
index 0000000..ca895b1
--- /dev/null
+++ b/chapter2/03_basic_syntax.md
@@ -0,0 +1,62 @@
+## 基本语法
+
+### 变量标示符
+
+**变量**的命名
+
+```javascript
+var _name = null;
+var $name = null;
+var name0 = null;
+```
+
+### 关键字与保留字
+
+JavaScript 在语言定义中保留的字段，这些字段在语言使用中存在特殊意义或功能，在程序编写的过程中不可以当做变量或函数名称使用。无需记忆，报错修改即可。
+
+关键字与保留字可以在 [Mozilla 开发者站点](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar)找到。
+
+### 字符敏感
+
+字符串的大小写是有所区分的，不同字符指代不同的变量。
+
+### 严格模式
+
+**增益**
+
+- 消除语法中不合理与不安全的问题，保证代码正常运行
+- 提高编译效率，增加运行速度
+
+**使用方法**
+
+```javascript
+
+"use strict";
+(function(){
+  console.log('>>> Hello, world!');
+})()
+
+
+(function(){
+  "use strict";
+  console.log('>>> Hello, world!');
+})()
+```
+
+严格模式与标准模式的区别：
+
+- 严格模式下隐式声明或定义变量被静止
+- 严格模式下对象重名的属性在严格模式下被静止
+- 严格模式下 `arguments.callee()` 被禁用
+- 严格模式下 `with()` 语句
+- 更多限制
+
+### 注释
+
+```javascript
+/*
+  多行注释，不可嵌套
+ */
+
+// 单行注释
+```
diff --git a/chapter2/04_data_type.md b/chapter2/04_data_type.md
new file mode 100644
index 0000000..33f4e5b
--- /dev/null
+++ b/chapter2/04_data_type.md
@@ -0,0 +1,114 @@
+## 类型系统
+
+javascript 类型系统可以分为标准类型和对象类型，进一步标准类型又可以分为原始类型和引用类型，而对象类型又可以分为内置对象类型、普通对象类型、自定义对象类型。
+
+![](../img/J/javascript-variable-type.jpg)
+
+### 标准类型
+
+标准类型共包括了**6**个分别是：
+
+**原始类型（值类型）**：
+
+- Undefined `undefined`
+- Null `null`
+- Boolean `true`
+- String `'hello'`
+- Number `123`
+
+**引用类型（对象类型）**：
+- Object
+
+```javascript
+var obj = {};
+
+var bool = new Boolean(true);
+var str = new String("hello");
+var num = new Number(1);
+var obj0 = new Object();
+```
+
+原始类型和引用类型的区别：
+
+原始类型储存在栈（Stack）中储存变量的值，而引用类型在栈中保存的是所引用内容储存在堆（Heap）中的值。类似于指针的概念，引用类型并非储存变量真实数值而是地址，所以对已引用类型的复制其实只是复制了相同的地址而非实际的变量值。
+
+**Undefined** 值：undefined 出现场景：
+
+- 以声明为赋值的变量 `var obj;`
+- 获取对象不存在的属性 `var obj = {x: 0}; obj.y;`
+- 无返回值函数的执行结果 `function f(){}; var obj = f();`
+- 函数参数没有传入 `function f(i){console.log(i)}; f();`
+- `void(expression)`
+
+**Null** 值：null 出现场景：
+
+- 获取不存在的对象 `document.getElementById('not-exist-element')`
+
+**Boolean** 值：true, false 出现场景：
+
+- 条件语句导致的系统执行的隐式类型转换 `if(隐式转换){}`
+- 字面量或变量定义 `var bool = true;`
+
+**String** 值：字符串 出现场景：
+
+- `var str = 'Hello, world!';`
+
+**Number** 值：整型直接量，八进制直接量（0-），十六进制直接量（0x-)，浮点型直接量 出现场景：
+
+- `1026`
+- `3.14`
+- `1.2e5`
+- `0x10`
+
+**Object** 值：属性集合 出现场景：
+
+- `var obj = {name: 'Xinyang'};`
+
+### 变量转换表
+
+|Value|Boolean|Number|String|
+|-----|-------|------|------|
+|undefined|false|NaN|"undefined"|
+|null|false|0|"null"|
+|true|true|1|"true"|
+|false|false|0|"false"|
+|''|false|0|''|
+|'123'|true|123|'123'|
+|'1a'|true|NaN|'1a'|
+|0|false|0|"0"|
+|1|true|1|"1"|
+|Infinity|true|Infinity|"Infinity"|
+|NaN|false|NaN|'NaN'|
+|{}|true|NaN|"[object Object]"|
+
+### 类型识别
+
+- `typeof`
+- `Object.prototype.toString`
+- `constructor`
+- `instanceof`
+
+**typeof**：
+- 可以是标准类型（Null 除外）
+- 不可识别具体的对象类型（Function 除外）
+
+**Object.prototype.toString**：
+- 可是识别标准类型及内置对象类型（例如，Object, Date, Array）
+- 不能识别自定义对象类型
+
+**constructor**：
+- 可以识别标准类型（Undefined/Null 除外）
+- 可识别内置对象类型
+- 可识别自定义对象类型
+
+```javascript
+function getConstructiorName(obj) {
+  return obj && obj.constructor && obj.constructor.toString().match(/function\s*([^(]*)/)[1];
+}
+getConstructiorName([]) === "Array"; // true
+```
+
+**instanceof**：
+- 不可判别原始类型
+- 可判别内置对象类型
+- 可判别自定义对象类型
diff --git a/chapter2/05_internal_object.md b/chapter2/05_internal_object.md
new file mode 100644
index 0000000..9441fbf
--- /dev/null
+++ b/chapter2/05_internal_object.md
@@ -0,0 +1,793 @@
+
+
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [内置对象](#%E5%86%85%E7%BD%AE%E5%AF%B9%E8%B1%A1)
+  - [标准内置对象](#%E6%A0%87%E5%87%86%E5%86%85%E7%BD%AE%E5%AF%B9%E8%B1%A1)
+  - [Object](#object)
+    - [Object.create](#objectcreate)
+    - [Object.prototype.toString](#objectprototypetostring)
+    - [Object.prototype.hasOwnProperty](#objectprototypehasownproperty)
+  - [Boolean](#boolean)
+  - [String](#string)
+    - [String.prototype.indexOf](#stringprototypeindexof)
+    - [String.prototype.replace](#stringprototypereplace)
+    - [String.prototype.split](#stringprototypesplit)
+  - [Number](#number)
+    - [Number.prototype.toFixed](#numberprototypetofixed)
+  - [Array](#array)
+    - [Array.prototype.splice](#arrayprototypesplice)
+    - [Array.prototype.forEach](#arrayprototypeforeach)
+  - [Function](#function)
+    - [自定义对象构造器](#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%AF%B9%E8%B1%A1%E6%9E%84%E9%80%A0%E5%99%A8)
+    - [Function.prototype.apply](#functionprototypeapply)
+    - [Function.prototype.bind](#functionprototypebind)
+    - [子类构造器](#%E5%AD%90%E7%B1%BB%E6%9E%84%E9%80%A0%E5%99%A8)
+    - [函数调用](#%E5%87%BD%E6%95%B0%E8%B0%83%E7%94%A8)
+    - [函数参数](#%E5%87%BD%E6%95%B0%E5%8F%82%E6%95%B0)
+      - [arguments](#arguments)
+      - [值专递](#%E5%80%BC%E4%B8%93%E9%80%92)
+      - [函数重载](#%E5%87%BD%E6%95%B0%E9%87%8D%E8%BD%BD)
+  - [RegExp](#regexp)
+    - [RegExp.prototype.test](#regexpprototypetest)
+  - [Date](#date)
+  - [标准内置对象](#%E6%A0%87%E5%87%86%E5%86%85%E7%BD%AE%E5%AF%B9%E8%B1%A1-1)
+    - [Math](#math)
+      - [Math.floor](#mathfloor)
+      - [Math.random](#mathrandom)
+    - [JSON](#json)
+      - [JSON.stringify](#jsonstringify)
+      - [JSON.parse](#jsonparse)
+    - [全局对象](#%E5%85%A8%E5%B1%80%E5%AF%B9%E8%B1%A1)
+      - [NaA](#naa)
+      - [parseInt](#parseint)
+      - [eval](#eval)
+      - [encodedURIComponent](#encodeduricomponent)
+
+
+
+## 内置对象
+
+通常情况下只有对象才存在方法，但 JavaScript 不同它具有12种内置对象。内置对象又分为两类，普通对象（属性和方法）与构造器对象（可用于实例化普通对象，它还包含原型对象属性和方法，及实例对象属性和方法）。
+
+**JavaScript 对象原型链的简要说明**
+
+```javascript
+function Point(x, y) {
+  this.x = x;
+  this.y = y;
+}
+Point.prototype.move = function(x, y) {
+  this.x += x;
+  this.y += y;
+}
+var p = new Point(1, 1);
+p.move(2,2);
+```
+
+`__proto__` 称之为原型链，有如下特点：
+
+1. `__proto__` 为对象内部的隐藏属性
+1. `__proto__` 为实例化该对象的构造器的 `prototype` 对象的引用，因此可以直接方法 `prototype` 的所有属性和方法
+1. 除了 `Object` 每个对象都有一个 `__proto__` 属性且逐级增长形成一个链，原型链顶端是一个 `Object` 对象。
+1. 在调用属性或方法时，引擎会查找自身的属性如果没有则会继续沿着原型链逐级向上查找，直到找到该方法并调用。
+1. `__proto__` 跟浏览器引擎实现相关，不同的引擎中名字和实现不尽相同(chrome、firefox中名称是 `__proto__` ，并且可以被访问到，IE中无法访问)。基于代码兼容性、可读性等方面的考虑，不建议开发者显式访问 `__proto__` 属性或通过 `__proto__`更改原型链上的属性和方法，可以通过更改构造器` prototype` 对象来更改对象的 `__proto__` 属性。
+
+**构造器对象与普通对象的区别**
+
+![](../img/O/object-with-constructor-and-regular-object.png)
+
+1. 构造器对象原型链中的 `__proto__` 是一个 `Function.prototype` 对象的引用，因此可以调用 `Function.prototype`的属性及方法
+1. 构造器对象本身有一个 `prototype` 属性，用该构造器实例化对象时该 `prototype` 会被实例对象的 `__proto__` 所引用
+1. 构造器对象本身是一个 `function` 对象，因此也会有自身属性
+
+### 标准内置对象
+
+
+**构造器对象**
+
+- Object
+- Boolean
+- String
+- Number
+- Function
+- Array
+- RegExp
+- Date
+- Error
+
+**其他对象**
+
+- Math
+- JSON
+- 全局对象
+
+内置对象，其实也叫内置构造器，它们可以通过 `new` 的方式创建一个新的实例对象。内置对象所属的类型就叫内置对象类型。其声明方式如下：
+
+```javascript
+var i = new String("str");          // String Object
+var h = new Number(1);              // Number Object
+var g = new Boolean(true);          // Boolean Object
+var j = new Object({name : "Tom"}); // Object Object
+var k = new Array([1, 2, 3, 4]);    // Array Object
+var l = new Date();                 // Date Object
+var m = new Error();
+var n = new Function();
+var o = new RegExp("\\d");
+```
+
+注意：虽然标准类型中有`Boolean` `String` `Number` `Object`，内置对象类型中也有`Boolean` `String` `Number` `Object`，但它们其实是通过不同的声明方式来进行区别的。标准类型通过直接赋值，而对象类型则是通过构造器实现初始化。
+
+### Object
+
+> 构造器的原型对象在对象实例化时将会被添加到实例对象的原型链当中。
+> `__proto__` 为原型链属性，编码时不可被显像调用。但是实例化对象可以调用原型链上的方法。
+
+用 String/Number 等构造器创建的对象原型链顶端对象始终是一个Object对象，因此这些对象可以调用Object的原型对象属性和方法。所以 String/Number 等构造器是 Object 的子类。
+
+更多关于 Object 的内容可以在[这里](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)找到。
+
+**构造器说明**：
+- Object 是属性和方法的集合
+- String/Number/Boolean/Array/Date/Error 构造器均为 Object 的子类并集成 Object 原型对象的属性及方法。
+
+**实例化方法**
+```
+var obj0 = new Object({name: 'X', age: 13});
+// 常用方法
+var obj1 = {name: 'Q', age: 14};
+```
+
+**属性及方法**
+- prototype
+- create
+- keys
+- ...
+
+**原型对象属性及其方法
+- constructor
+- toString
+- valueOf
+- hasOwnProperty
+- ...
+
+**实例对象属性及方法**
+
+无
+
+#### Object.create
+
+功能：基于原型对象创造新对象
+
+```javascript
+// Object.create(prototype[, propertiesObject])
+var prototype = {name: 'X', age: 13};
+var obj = Object.create(proto);
+```
+
+#### Object.prototype.toString
+
+功能：获取方法调用者的标准类型
+
+```javascript
+// objectInstance.toString()
+var obj = {};
+obj.toString(); // Object
+```
+
+#### Object.prototype.hasOwnProperty
+
+功能：判断一个属性是否是一个对象的自身属性
+
+```javascript
+// objectInstance.hasOwnProperty("propertyName")
+var obj = Object.create({a: 1, b: 2});
+obj.c = 3;
+obj.hasOwnProperty('a'); // false
+obj.hasOwnProperty('c'); // true
+```
+
+### Boolean
+
+**构造器说明**：值为 true 与 false
+
+**属性及方法**
+- prototype
+
+**原型对象属性及其方法
+- constructor, toString, valueOf
+
+### String
+
+**构造器说明**：单双引号内的字符串
+
+**实例化方法**
+```javascript
+'Hello, world!'
+var str0 = 'Xinyang';
+var str1 = new String('Xinyang');
+```
+
+**属性及方法**
+- prototype
+- fromCharCode（转换 ASCII 代码为字符）
+
+**原型对象属性及其方法**
+- constructor
+- indexOf
+- replace
+- slice
+- split
+- charCodeAt
+- toLowerCase
+- ...
+
+#### String.prototype.indexOf
+
+功能：获取子字符串在字符串中的索引
+
+```javascript
+// stringObject.indexOf(searchValue, fromIndex)
+var str = "I am X. From China!";
+var index = str.indexOf('a'); // 2
+str.indexOf('a', index + 1); // 16
+str.indexOf('Stupid'); // -1 字符串不存在
+```
+
+#### String.prototype.replace
+
+功能：查找字符串替换成目标文字
+
+```javascript
+// stringObject.replace(regexp/substr, replacement)
+var str = "apple is bad";
+str = str.replace('bad', 'awesome');
+```
+
+#### String.prototype.split
+
+功能：按分隔符将分隔符分成字符串数组
+
+```javascript
+// stringObject.split(separator, arrayLength)
+var str = '1 2 3 4';
+str.split(' '); // ['1', '2', '3', '4'];
+str.split(' ', 3); // ['1', '2', '3'];
+str.split(/\d+/); // ["", " ", " ", " ", ""]
+```
+
+### Number
+
+**构造器说明**：整型直接量，八进制直接量（0-），十六进制直接量（0x-)，浮点型直接量
+
+**实例化方法**
+
+```javascript
+10
+1.2e5
+var count = 0x10;
+var pi = new Number(3.1415);
+```
+
+**属性及方法**
+- prototype
+- MAX_VALUE
+- MIN_VALUE
+- NaN
+- NEGATIVE_INFINITY
+- POSITIVE_INFINITY
+
+**原型对象属性及其方法**
+- constructor
+- toFixed
+- toExponential
+- ...
+
+#### Number.prototype.toFixed
+
+功能：四舍五入至指定小数位
+
+```javascript
+// numberObject.toFixed(num)
+var num0 = 3.14;
+num0.toFixed(1); // 3.1
+var num1 = 3.35;
+num1.toFixed(1); // 3.4
+```
+
+### Array
+
+**构造器说明**：定义数组对象
+
+**实例化方法**
+
+```javascript
+var a0 = [1, 'abc', true, function(){}];
+var a1 = new Array();
+var a2 = new Array(1, 'abc', true);
+```
+
+**属性及方法**
+- prototype
+- isArray
+
+**原型对象属性及其方法**
+- constructor
+- splice
+- forEach
+- find
+- concat
+- pop
+- push
+- reverse
+- shift
+- slice
+- ...
+
+#### Array.prototype.splice
+
+功能：从数组中删除或添加元素，返回被删除的元素列表（作用域原有数组）
+
+```javascript
+// arrayObject.splice(start, deleteCount[, item1[, item2[, ...]]])
+var arr = ['1', '2', 'a', 'b', '6'];
+var ret = arr.splice(2, 2, '3', '4', '5'); // ['a', 'b']
+arr; // ['1', '2', '3', '4', 5', '6']
+```
+
+#### Array.prototype.forEach
+
+功能：遍历元素组并调用回调函数
+
+```javascript
+// arrayObject.forEach(callback[, thisArg])
+// 回调函数
+// function callback(value, index, arrayObject) {...}
+// value - 当前值 index - 当前索引 arrayObject - 数组本身
+function logArray(value, index, arrayObject) {
+  console.log(value);
+  console.log(value === array[index]);
+}
+[2, 5, 6, 9].forEach(logArray);
+```
+
+### Function
+
+**构造器说明**：定义函数或新增对象构造器
+
+**实例化方法**
+
+```javascript
+// 对象实例化
+var f0 = new Function('i', 'j', 'return (i + j)');
+// 函数关键字语句
+function f1(i, j){return i + j;}
+// 函数表达式
+var f3 = function(i, j){return i + j;};
+```
+
+**属性及方法**
+- prototype
+
+**原型对象属性及其方法**
+- constructor
+- apply
+- call
+- bind
+
+**实例对象属性和方法**
+- length
+- prototype
+- arguments
+- caller
+
+#### 自定义对象构造器
+
+下面的代码声明一个 Point 增加了一个move方法，最后创建了一个 Point 的实例对象。
+
+```javascript
+function Point(x, y) {
+  this.x = x;
+  this.y = y;
+}
+
+Point.prototype.move = function(x, y) {
+  this.x += x;
+  this.y += y;
+}
+
+var p = new Point(1, 2);
+```
+
+#### Function.prototype.apply
+
+功能：通过参数指定调用者和函数参数并执行该函数
+
+```javascript
+// functionObj.apply(thisArg[, argsArray])
+function Point(x, y) {
+  this.x = x;
+  this.y = y;
+}
+
+Point.prototype.move = function(x, y) {
+  this.x += x;
+  this.y += y;
+}
+
+var p = new Point(1, 1);
+var circle = {x: 1, y: 1, r: 1};
+p.move.apply(circle, [2, 1]); // {x: 3, y: 2, r: 1}
+```
+
+#### Function.prototype.bind
+
+功能：通过参数指定函数调用者和函数参数并返回该函数的引用
+
+```javascript
+// functionObj.bind(thisArg[, arg1[, arg2[, ...]]])
+function Point(x, y) {
+  this.x = x;
+  this.y = y;
+}
+
+Point.prototype.move = function(x, y) {
+  this.x += x;
+  this.y += y;
+}
+
+var p = new Point(1, 1);
+var circle = {x: 1, y: 1, r: 1};
+var circleMoveRef = p.move.bind(circle, 2, 1);
+setTimeout(circleMoveRef, 1000); // {x: 3, y: 2, r: 1}
+
+// 之间使用 circleMoveRef() 效果等同于 apply()
+circleMoveRef();
+```
+
+#### 子类构造器
+
+```javascript
+function Circle(x, y, r) {
+  Point.apply(this, [x, y]);
+  this.radius = r;
+}
+Circle.prototype = Object.create(Point.prototype);
+Circle.prototype.constructor = Circle;
+Circle.prototype.area = function(){
+  return Math.PI * this.radius * this.radius;
+}
+
+var c = new Circle(1, 2, 3);
+c.move(2, 2);
+c.area();
+```
+
+#### 函数调用
+
+- `()`
+- `apply`
+- `call`
+
+#### 函数参数
+
+- 形参个数不一定等于实参个数
+- 值专递
+- 通过参数类型检查实现函数重载
+
+##### arguments
+
+arguments 的常用属性
+- length 实参个数
+- 0...arguments.length-1 实参属性名称（key）
+- callee 函数本身
+
+```javascript
+function max(a, b) {
+  if (max.length === arguments.length) {
+    return a>b?a:b;
+  } else {
+    var _max = arguments[0];
+    for(var i = 0; i < arguments.length; i++) {
+      if (_max < arguments[i]) {
+        _max = arguments[i];
+      }
+    }
+    return _max;
+  }
+}
+```
+
+##### 值专递
+
+函数参数的值专递是参数复制都是栈内存中的复制。
+
+![](../img/M/memory-management.jpg)
+
+```javascript
+// 原始类型
+function plusplus(num) {
+  return num++;
+}
+var count = 0;
+var result = plusplus(count); // result = 1; count = 0;
+
+// 引用类型
+function setName(obj) {
+  obj.name = 'obama';
+}
+var president = {name: 'bush'};
+setName(president); // {name: 'obama'};
+```
+
+##### 函数重载
+
+以 `Require.JS` 中的 `define()` 为例：
+
+```javascript
+define(function(){
+  var add = function(x, y) {
+    return x + y;
+  };
+  return {
+    add: add
+  };
+})
+
+define(['lib'], function(){
+  var add = function(x, y) {
+    return x + y;
+  };
+  return {
+    add: add
+  };
+})
+
+define('math', ['lib'], function(){
+  var add = function(x, y) {
+    return x + y;
+  };
+  return {
+    add: add
+  };
+})
+
+// define 的实现代码
+/**
+ * The function that handles definitions of modules. Differs from
+ * require() in that a string for the module should be the first argument,
+ * and the function to execute after dependencies are loaded should
+ * return a value to define the module corresponding to the first argument's
+ * name.
+ */
+define = function (name, deps, callback) {
+    var node, context;
+
+    //Allow for anonymous modules
+    if (typeof name !== 'string') {
+        //Adjust args appropriately
+        callback = deps;
+        deps = name;
+        name = null;
+    }
+
+    //This module may not have dependencies
+    if (!isArray(deps)) {
+        callback = deps;
+        deps = null;
+    }
+
+    // 省略以下代码
+    // ...
+};
+```
+
+### RegExp
+
+**构造器说明**：用于定义正则表达式，一个 RegExp 对象包含一个正则表达式和关联的标志
+
+**定义方法**
+- `/pattern/flags`
+- `new RegExp(pattern[, flags]);`
+
+**属性及方法**
+- prototype
+
+**原型对象属性及其方法**
+- constructor
+- test
+- exec
+- ...
+
+#### RegExp.prototype.test
+
+功能：使用正则表达式对字符串进行测试，并返回测试结果
+
+```javascript
+// regexObj.text(str)
+var reg = /^abc/i;
+reg.test('Abc123'); // true
+reg.test('1Abc1234'); // false
+```
+
+### Date
+
+**构造器说明**：用于定义日期对象
+
+**定义方法**
+```javascript
+var date0 = new Date();
+var date1 = new Date(2014, 3, 1, 7, 1, 1, 100);
+```
+
+**属性及方法**
+- prototype
+- parse
+- now
+- ...
+
+**原型对象属性及其方法**
+- constructor
+- Date
+- getDate
+- getHours
+- setDate
+- setHours
+- ...
+
+### 标准内置对象
+
+#### Math
+
+**对象说明**：拥有属性和方法的单一对象主要用于数字计算
+
+**对象属性**：
+- E
+- PI
+- SQRT2
+- ...
+
+**对象方法**：
+- floor
+- random
+- abs
+- max
+- cos
+- ceil
+
+##### Math.floor
+
+功能：向下取整
+
+```javascript
+// Math.floor(num)
+Math.floor(0.97); // 0
+Math.floor(5.1); // 5
+Math.floor(-5.1); //6
+```
+
+相似方法：`ceil`，`round`
+
+##### Math.random
+
+功能：返回 0~1 之间的浮点数
+
+```javascript
+// Math.random()
+Math.random(); // 0.14523562323461
+```
+
+#### JSON
+
+**对象说明**：用于存储和交换文本信息
+
+**对象方法**：
+- parse
+- stringify
+
+##### JSON.stringify
+
+功能：将 JSON 对象转换为字符转
+
+```javascript
+// JSON.stringify(value[, replacer[, space]])
+var json = {'name': 'X'};
+JSON.stringify(json); // "{"name":"X"}"
+```
+
+##### JSON.parse
+
+功能：将 JSON 字符转转换为对象
+
+```
+// JSON.parse(text[, reviver])
+var jsonStr = '{"name":"X"}';
+JSON.parse(jsonStr); // {name: 'X'}
+```
+
+#### 全局对象
+
+全局对象定义了一系列的属性和方法在编程过程中可以被之间调用。
+
+属性：NaN，Infinity，undefined
+
+方法：
+- parseInt
+- parseFloat
+- isNaN
+- isFinite
+- eval
+
+处理 URI 方法：
+- encodedURIComponent
+- decodeURIComponent
+- encodedURI
+- decodeURI
+
+构造器属性：
+- Boolean
+- String
+- Number
+- Object
+- Function
+- Array
+- Date
+- Error
+- ...
+
+对象属性：
+- Math
+- JSON
+
+##### NaA
+
+非数字值：表示错误或无意义的运算结果，NaN 参与运算仍会返回 NaA，且 NaN 不等于任何值，包括它本身。可以使用 `isNaN()` 判断运算结果的类型是否为 NaN。
+
+```javascript
+isNaN(NaN); // true
+isNaN(4 - '2a'); // true;
+```
+
+##### parseInt
+
+功能：转换字符串成数字
+
+```javascript
+// parseInt(string[, radix])
+// radix - 为进制数
+parseInt('010'); // 10
+parseInt('010', 8) // 8
+parseInt('010', 16) // 16
+
+parseInt('0x1f'); // 31
+parseInt('0x1f', 16); // 31
+parseInt('1f'); // 1
+parseInt('1f', 16); // 31
+```
+
+##### eval
+
+功能：计算字符串并执行其中的 JavaScript 代码（会带来安全性和代码逻辑问题，通常不建议使用）
+
+```javascript
+// eval(string)
+var res = '{"error": "0", "msg": "OK"};
+var obj;
+if (!JSON) {
+  obj = eval('(' + res + ')');
+} else {
+  obj = JSON.parse(res);
+}
+```
+
+##### encodedURIComponent
+
+功能：将 URI 参数中的特殊字符，中文等作为 URI 的一部分进行编码
+
+```javascript
+var uri = "http://w3schools.com/my test.asp?name=ståle&car=saab";
+var res = encodeURIComponent(uri);
+
+// 结果
+// http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab
+```
\ No newline at end of file
diff --git a/chapter2/06_scope.md b/chapter2/06_scope.md
new file mode 100644
index 0000000..e76394e
--- /dev/null
+++ b/chapter2/06_scope.md
@@ -0,0 +1,181 @@
+
+
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [变量作用域](#%E5%8F%98%E9%87%8F%E4%BD%9C%E7%94%A8%E5%9F%9F)
+  - [作用域介绍](#%E4%BD%9C%E7%94%A8%E5%9F%9F%E4%BB%8B%E7%BB%8D)
+    - [静态作用域](#%E9%9D%99%E6%80%81%E4%BD%9C%E7%94%A8%E5%9F%9F)
+    - [动态作用域](#%E5%8A%A8%E6%80%81%E4%BD%9C%E7%94%A8%E5%9F%9F)
+  - [JavaScript 变量作用域](#javascript-%E5%8F%98%E9%87%8F%E4%BD%9C%E7%94%A8%E5%9F%9F)
+    - [词法环境](#%E8%AF%8D%E6%B3%95%E7%8E%AF%E5%A2%83)
+      - [组成](#%E7%BB%84%E6%88%90)
+      - [创建](#%E5%88%9B%E5%BB%BA)
+      - [结构](#%E7%BB%93%E6%9E%84)
+    - [关于词法环境的问题](#%E5%85%B3%E4%BA%8E%E8%AF%8D%E6%B3%95%E7%8E%AF%E5%A2%83%E7%9A%84%E9%97%AE%E9%A2%98)
+    - [with 语句](#with-%E8%AF%AD%E5%8F%A5)
+    - [try-catch 句法](#try-catch-%E5%8F%A5%E6%B3%95)
+    - [带名称的函数表达式](#%E5%B8%A6%E5%90%8D%E7%A7%B0%E7%9A%84%E5%87%BD%E6%95%B0%E8%A1%A8%E8%BE%BE%E5%BC%8F)
+
+
+
+## 变量作用域
+
+变量的作用域值的是变量的生命周期和作用范围（全局与局部作用域的区别）。
+
+### 作用域介绍
+
+#### 静态作用域
+
+静态作用域有称为词法作用域，即指其在编译的阶段就可以决定变量的引用。**静态作用域**只更变量定义的位置有关与代码执行的顺序无关。
+
+```javascript
+var x = 0;
+function foo() {
+  alert(x);
+}
+
+function bar() {
+  var x = 20;
+  foo();
+}
+
+foo();
+```
+
+![](../img/S/scope-lexical-scope.png)
+
+#### 动态作用域
+
+动态作用域的变量引用只可在程序运行时刻决定（其通常通过动态栈来进行管理）。
+
+```javascript
+var x = 0;
+function foo() {
+  alert(x);
+}
+
+function bar() {
+  var x = 20;
+  foo();
+}
+
+foo();
+```
+
+![](../img/S/scope-dynamic-scope.gif)
+
+### JavaScript 变量作用域
+
+JavaScript （1）使用静态作用域，（2）其没有块级作用域（只有函数作用域，就是只有 function 用于可以定义作用域），（3）在 ES5 之作使用词法环境来管理作用域。
+
+#### 词法环境
+
+##### 组成
+
+词法环境用来描述静态作用域的数据结构。它由`环节记录`和`外部词法环境的引用`组成。
+
+- 环境记录（record）（指形参，变量，函数等）
+- 外部词法环境的引用（outer）
+
+##### 创建
+
+在一段代码执行之前，先初始化词法环境。会被初始化的有：
+
+- 形参
+- 函数定义（创建函数对象，会保存当前作用域。见下图）
+- 变量定义（所有初始化值均为 `undefined`）
+
+![](../img/S/scope-function-init.png)
+
+##### 结构
+
+```javascript
+var x = 10;
+function foo(y) {
+  var z = 30;
+  function bar(q) {
+    return x + y + z + q;
+  }
+  return bar;
+}
+var bar = foo(20);
+bar(40);
+```
+
+**全局词法作用域（初始化状态）**
+
+![](../img/S/scope-global-init.png)
+
+**函数词法作用域**
+
+![](../img/S/scope-structure.jpg)
+
+#### 关于词法环境的问题
+
+**命名冲突**
+
+形参，函数定义，变量名称命名冲突。其中的优先级的排序如下：
+
+```
+函数定义 > 形参 > 变量
+```
+
+**`arguments` 的使用**
+
+ 为函数中定义好的变量。
+
+**函数表达式与函数定义的区别**
+
+- 函数表达式是在执行时才创建函数对象。
+- 函数定义为在代码执行之前就进行创建的。
+
+#### with 语句
+
+`with` 会创造一个临时作用域。
+
+```javascript
+var foo = 'abc';
+with({
+  foo: 'bar';
+}) {
+  function f() {
+    alert(foo);
+  };
+  (function() {
+    alert(foo);
+  })();
+  f();
+}
+```
+
+#### try-catch 句法
+
+```
+try {
+  var e = 10;
+  throw new Error();
+} catch (e) {
+  function f() {
+    alert(e);
+  }
+  (function() {
+    alert(e);
+  })();
+  f();
+}
+```
+
+#### 带名称的函数表达式
+
+当一个函数表达式有了名称之后，JavaScript 会创建一个新的词法环境。并在这个词法环境中用有一个属性 A 指向这个函数，同时这个属性 A 指向的函数是不可被修改的。
+
+**下面例子为不常规的写法**
+
+```
+(function A(){
+  A = 1;
+  alert(A);
+})();
+```
+
+![](../img/S/scope-function-with-name.png)
diff --git a/chapter2/07_statement_and_operator.md b/chapter2/07_statement_and_operator.md
new file mode 100644
index 0000000..58010f6
--- /dev/null
+++ b/chapter2/07_statement_and_operator.md
@@ -0,0 +1,456 @@
+## 表达式与运算符
+
+### 表达式
+
+表达式为 JavaScript 的短语可执行并生成值。
+
+```javascript
+1.7 // 字面量
+"1.7"
+var a = 1;
+var b = '2';
+var c = (1.7 + a) * '3' - b
+```
+
+### 运算符
+
+- 算数运算符 （`+` `-` `*` `/` `%`）
+- 关系运算符 （`>` `<` `==` `!=` `>=` `<=` `===` `!==`)
+- 逻辑运算符 （`!` `&&` `||`）
+- 位运算符   （`&` `|` `^` `~` `<<` `>>`）
+- 负值运算符 （`=`）
+- 条件运算符 （`?:`）
+- 逗号运算符 （`,`）
+- 对象运算符 （`new` `delete` `.` `[]` `instanceof`）
+
+#### === 全等符号
+
+全等运算符用于盘对左右两边的对象或值是否类型相同且值相等。
+
+**伪代码拆解**
+
+```javascript
+function totalEqual(a, b) {
+  if (a 和 b 类型相同) {
+    if (a 和 b 是引用类型) {
+      if (a 和 b 是同一引用)
+        return true;
+      else
+        return false;
+    } else { // 值类型
+      if (a 和 b 值相等)
+        return true;
+      else
+        return false;
+    }
+  } else {
+    return false;
+  }
+}
+```
+
+**例子**
+
+```javascript
+var a = "123";
+var b = "123";
+var c = "4";
+var aObj = new String("123");
+var bObj = new String("123");
+var cObj = aObj;
+
+a === aObj      // false
+aObj === bObj   // false
+aObj === cObj   // true
+a === b         // true
+a === c         // false
+```
+
+#### ==
+
+`==` 用于判断操作符两边的对象或值是否相等。
+
+**伪代码拆解**
+
+```javascript
+function equal(a, b) {
+  if (a 和 b 类型相同) {
+    return a === b;
+  } else { // 类型不同
+    return Number(a) === Number(b); // 优先转换数值类型
+  }
+}
+```
+
+**例子**
+
+```javascript
+"99" == 99; // true
+new String("99") == 99; // true
+true == 1; // true
+false == 0; // true
+'\n\n\n' == // true
+```
+
+##### 例外规则
+
+- `null == undefined` 结果为真 `true`
+- 在有 `null`/`undefined` 参与的 `==` 运算是不进行隐式转换。
+
+```javascript
+0 == null; // false
+null == false; // false
+"undefined" == undefined; // false
+```
+
+#### ! 取反
+
+`!x` 用于表达 x 表达式的运行结果转换成布尔值（Boolean）之后取反的结果。`!!x` 则表示取 x 表达式的运行结果的布尔值。
+
+```javascript
+var obj = {};
+var a = !obj // false;
+var a = !!obj // true;
+```
+
+#### && 逻辑与
+
+`x && y` 如果 x 表达式的运行交过转换成 Boolean 值为 false 则不运行表达式 y 而直接返回 x 表达式的运行结果。**相反**，如果 x 表达式的运行交过转换成 Boolean 值为 true 则运行表达式 y 并返回 y 表达式的运行结果。
+
+**伪代码拆解**
+
+```javascript
+var ret = null;
+if (!!(ret = x)) {
+  return y;
+} else {
+  return ret;
+}
+```
+
+**例子**
+
+```javascript
+var a = 0 && (function(){return 1 + 1;})(); // 0
+var b = 1 && (function(){return 1 + 1;})(); // 2
+```
+
+#### || 逻辑或
+
+`x || y` 如果 x 表达式的运行结果转换为 Boolean 值为 true，则不运行 表达式 y 而直接返回表达式 x 的运算结果。（与 `&&` 方式相反）
+
+**伪代码拆解**
+
+```javascript
+var ret = null;
+if (!!(ret = x)) {
+  return ret;
+} else {
+  return y;
+}
+```
+
+**例子**
+
+```javascript
+var a = 0 || (function(){return 1 + 1;})(); // 2
+var b = 1 || (function(){return 1 + 1;})(); // 1
+```
+
+### 元算符优先级（Operator Precedence）
+
+- `+` `-` `*` `/` 高于 `&&`
+- `*` `/` 高于 `+` `-`
+- `&&` 高于 `?:`
+- `()` 内优先级高于之外
+
+NOTE：和数学上的算术优先级类似，同级从**左到右**计算。如有疑问加上 `()` 既可解决优先级问题。
+
+
+ 
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+  
+  
+   
+  
+  
+   
+  
+  
+   
+  
+  
+   
+  
+  
+   
+  
+  
+   
+  
+  
+   
+  
+  
+   
+  
+  
+   
+  
+  
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+ 
+Precedence Operator type Associativity Individual operators
19 Grouping n/a ( … )
18 Member Access left-to-right … . …
Computed Member Access left-to-right … [ … ]
new (with argument list) n/a new … ( … )
17 Function Call left-to-right … ( … )
new (without argument list) right-to-left new …
16 Postfix Increment n/a … ++
Postfix Decrement n/a … --
15 Logical NOT right-to-left ! …
Bitwise NOT right-to-left ~ …
Unary Plus right-to-left + …
Unary Negation right-to-left - …
Prefix Increment right-to-left ++ …
Prefix Decrement right-to-left -- …
typeof right-to-left typeof …
void right-to-left void …
delete right-to-left delete …
14 Multiplication left-to-right … * …
Division left-to-right … / …
Remainder left-to-right … % …
13 Addition left-to-right … + …
Subtraction left-to-right … - …
12 Bitwise Left Shift left-to-right … << …
Bitwise Right Shift left-to-right … >> …
Bitwise Unsigned Right Shift left-to-right … >>> …
11 Less Than left-to-right … < …
Less Than Or Equal left-to-right … <= …
Greater Than left-to-right … > …
Greater Than Or Equal left-to-right … >= …
in left-to-right … in …
instanceof left-to-right … instanceof …
10 Equality left-to-right … == …
Inequality left-to-right … != …
Strict Equality left-to-right … === …
Strict Inequality left-to-right … !== …
9 Bitwise AND left-to-right … & …
8 Bitwise XOR left-to-right … ^ …
7 Bitwise OR left-to-right … | …
6 Logical AND left-to-right … && …
5 Logical OR left-to-right … || …
4 Conditional right-to-left … ? … : …
3 Assignment right-to-left … = …
… += …
… -= …
… *= …
… /= …
… %= …
… <<= …
… >>= …
… >>>= …
… &= …
… ^= …
… |= …
2 yield right-to-left yield …
1 Spread n/a ... …
0 Comma / Sequence left-to-right … , …
diff --git a/chapter2/08_statement.md b/chapter2/08_statement.md
new file mode 100644
index 0000000..746c613
--- /dev/null
+++ b/chapter2/08_statement.md
@@ -0,0 +1,152 @@
+## 语句
+
+### 条件控制语句
+
+其中expression可以使用整型，字符串，甚至表达式
+
+```javascript
+if (expression0) {statement0}
+else if (expression1) {statement1}
+else {statement2}
+
+// JavaScript 中的 case 可以使用整型，字符串，甚至表达式
+switch(persion.type) {
+  case "teacher":
+    statement1
+    break;
+  case "student":
+    statement2
+    break;
+  default:
+    statement3
+    break;
+}
+```
+
+### 循环控制语句
+
+```javascript
+while(expression) {statement}
+
+// 至少执行一次
+do {statement} while(expression);
+
+for (initialise; test_expresiion; increment) {statement}
+
+// 跳过下面代码并进入下一轮循环
+continue;
+
+// 退出当前循环
+break;
+```
+
+#### for-in
+
+用于遍历对象的**全部**属性。
+
+```javascript
+function Car(id, type, color) {
+  this.type = type;
+  this.color = color;
+  this.id = id;
+}
+
+var benz = new Car('benz', 'black', 'red');
+Car.prototype.start = function(){
+    console.log(this.type + ' start');
+}
+
+for (var key in benz) {
+  console.log(key + ':' benz[key]);
+}
+
+// 输出结果
+type:black
+color:red
+id:benz
+start:function (){
+    console.log(this.type + ' start');
+}
+
+// -----------
+
+// 如不需原型对象上的属性可以使用 hasOwnProperty
+for (var key in benz) {
+  if (benz.hasOwnProperty(key)) {
+    console.log(key + ':' benz[key]);
+  }
+}
+
+// 输出结果
+type:black
+color:red
+id:benz
+```
+
+如不需原型对象上的属性可以使用 hasOwnProperty
+
+```javascript
+for (var key in benz) {
+  if (benz.hasOwnProperty(key)) {
+    console.log(key + ':' benz[key]);
+  }
+}
+/* 输出结果
+type:black
+color:red
+id:benz */
+```
+
+### 异常处理语句
+
+```javascript
+try{
+  // statements
+  throw new Error();
+catch(e){
+  // statements
+}
+finally{
+  // statements
+}
+```
+
+### with 语句
+
+`with` 语句是 JavaScript 中特有的语句形式，它主要有两个作用：
+
+其一，其用于缩短特定情况下必须书写的代码量。它可以暂时改变变量的作用域。
+
+```javascript
+// 使用 with 之前
+(function(){
+  var x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10);
+  var y = Math.tan(14 * Math.E);
+})();
+
+// 使用 with
+(function(){
+  with(Math) {
+    var x = cos(3 * PI) + sin(LN10);
+    var y = tan(14 * E);
+  }
+})();
+```
+
+![](../img/W/with-scope.png)
+
+其二，改变变量的作用域，将`with`语句中的对象添加至作用域链的头部。
+
+```javascript
+frame[1].document.forms[0].name.value = "";
+frame[1].document.forms[0].address.value = "";
+frame[1].document.forms[0].email.value = "";
+
+with(frame[1].document.[0]) {
+  name.value = "";
+  address.value = ""
+  email.value = "";
+}
+```
+
+**缺点**就是导致 JavaScript 语句的可执行性下降，所以通常情况下因尽可能的避免使用。
diff --git a/chapter2/09_closure.md b/chapter2/09_closure.md
new file mode 100644
index 0000000..2fbf4d7
--- /dev/null
+++ b/chapter2/09_closure.md
@@ -0,0 +1,82 @@
+
+
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [闭包](#%E9%97%AD%E5%8C%85)
+  - [闭包的应用](#%E9%97%AD%E5%8C%85%E7%9A%84%E5%BA%94%E7%94%A8)
+    - [保存变量现场](#%E4%BF%9D%E5%AD%98%E5%8F%98%E9%87%8F%E7%8E%B0%E5%9C%BA)
+    - [封装](#%E5%B0%81%E8%A3%85)
+
+
+
+
+## 闭包
+
+- 闭包有函数和与其相关的引用环境的组合而成
+- 闭包允许函数访问其引用环境中的变量（又称自由变量）
+- 广义上来说，所有 JavaScript 的函数都可以成为闭包，因为 JavaScript 函数在创建时保存了当前的词法环境。
+
+```
+function add() {
+  var i = 0;
+  return function() {
+    alert(i++);
+  }
+}
+var f = add();
+f();
+f();
+```
+
+### 闭包的应用
+
+#### 保存变量现场
+
+```javascript
+
+// 错误方法
+var addHandlers = function(nodes) {
+  for (var i = 0, len = nodes.length; i < len; i++) {
+    nodes[i].onclick = function(){
+      alert(i);
+    }
+  }
+}
+
+// 正确方法
+var addHandlers = function(nodes) {
+  var helper = function(i) {
+    return function() {
+      alert(i);
+    }
+  }
+
+  var (var i = 0, len = nodes.length; i < len; i++) {
+    nodes[i].onclick = helper(i);
+  }
+}
+```
+
+#### 封装
+
+```javascript
+
+// 将 observerList 封装在 observer 中
+var observer = (function(){
+  var observerList = [];
+  return {
+    add: function(obj) {
+      observerList.push(obj);
+    },
+    empty: function() {
+      observerList = [];
+    },
+    getCount: function() {
+      return observerList.length;
+    },
+    get: function() {
+      return observerList;
+    }
+  };
+})();
+```
\ No newline at end of file
diff --git a/chapter2/10_object.md b/chapter2/10_object.md
new file mode 100644
index 0000000..387d5f8
--- /dev/null
+++ b/chapter2/10_object.md
@@ -0,0 +1,434 @@
+
+
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [面向对象](#%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1)
+  - [程序设计方法](#%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1%E6%96%B9%E6%B3%95)
+    - [面向过程](#%E9%9D%A2%E5%90%91%E8%BF%87%E7%A8%8B)
+    - [面向对象](#%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1-1)
+      - [概念](#%E6%A6%82%E5%BF%B5)
+      - [基本特点](#%E5%9F%BA%E6%9C%AC%E7%89%B9%E7%82%B9)
+- [JavaScript 面向对象](#javascript-%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1)
+  - [constructor](#constructor)
+    - [自定义构造器](#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9E%84%E9%80%A0%E5%99%A8)
+      - [创建构造器的方法（3 种）](#%E5%88%9B%E5%BB%BA%E6%9E%84%E9%80%A0%E5%99%A8%E7%9A%84%E6%96%B9%E6%B3%95%EF%BC%883-%E7%A7%8D%EF%BC%89)
+  - [this](#this)
+    - [全局环境中](#%E5%85%A8%E5%B1%80%E7%8E%AF%E5%A2%83%E4%B8%AD)
+    - [构造器中](#%E6%9E%84%E9%80%A0%E5%99%A8%E4%B8%AD)
+    - [函数中](#%E5%87%BD%E6%95%B0%E4%B8%AD)
+  - [this 实例](#this-%E5%AE%9E%E4%BE%8B)
+  - [原型继承](#%E5%8E%9F%E5%9E%8B%E7%BB%A7%E6%89%BF)
+  - [原型链](#%E5%8E%9F%E5%9E%8B%E9%93%BE)
+    - [属性查找](#%E5%B1%9E%E6%80%A7%E6%9F%A5%E6%89%BE)
+    - [属性修改](#%E5%B1%9E%E6%80%A7%E4%BF%AE%E6%94%B9)
+    - [属性删除](#%E5%B1%9E%E6%80%A7%E5%88%A0%E9%99%A4)
+    - [Object.create(proto[, propertiesObject])](#objectcreateproto-propertiesobject)
+  - [面向对象的应用](#%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%BA%94%E7%94%A8)
+    - [全局变量](#%E5%85%A8%E5%B1%80%E5%8F%98%E9%87%8F)
+    - [封装](#%E5%B0%81%E8%A3%85)
+    - [继承](#%E7%BB%A7%E6%89%BF)
+      - [原型继承](#%E5%8E%9F%E5%9E%8B%E7%BB%A7%E6%89%BF-1)
+      - [类继承](#%E7%B1%BB%E7%BB%A7%E6%89%BF)
+
+
+
+## 面向对象
+
+### 程序设计方法
+
+程序设计描述系统如何通过程序来实现的过程，其为一种设计方法与语言实现无关。常见的设计方法有面向流程与面向对象。
+
+#### 面向过程
+
+以程序的过程为中心，采用自定而下逐步细化的方法来实现。常见的面向过程语言有 C、Fortran、Pascall。
+
+![](../img/P/procedure_programming.png)
+
+#### 面向对象
+
+将对象作为程序的基本单元，将程序分解为数据和操作的集合。常见的面向过程语言有 smalltalk（也是 Objective-C 的父亲）、Java、C++。
+
+![](../img/O/object-oriented-programming.png)
+
+##### 概念
+
+- 类（Class）、对象（Object）
+- 属性（Property）、方法（Method）
+
+##### 基本特点
+
+- 继承（Inheritance）
+- 封装（Encapsulation）
+- 多态（Polymorphism）
+
+## JavaScript 面向对象
+
+### constructor
+
+对象的构造器，也可称之为构造类型。
+
+```javascript
+// 使用 new 关键字创建
+var o = new Object();
+var a = new Array();
+var d = new Date();
+    |         |
+ object    constructor
+
+// 使用直接量创建
+var o = {name: 'Xinyang'};
+var a = [1, 2, 3];
+```
+
+#### 自定义构造器
+
+```javascript
+// constructor
+function Person(name, age, birthdate) {
+  this.name = name;
+  this.age = age;
+  this.birthdate = birthdate;
+  this.changeName = function(newAge) {
+    this.age = newAge;
+  }
+}
+
+// 创建对象
+var X = new Person('Stupid', 13, new Date(2015, 01, 01));
+var Q = new Person('Q', 12, new Date(2015, 01, 01));
+
+X.changeName('X');
+```
+
+##### 创建构造器的方法（3 种）
+
+- `function ClassName() {...}`
+- `var Class = function() {...}`
+- `var Class = new Function()`
+
+NOTE: 并不是所有函数都可以被当成构造器，例如 `var o = new Math.min()`。通常自定义的函数均可当做构造器来使用。内置对象的构造器也可被当做构造器。
+
+NOTE+：如果构造器有返还值并为对象类型，则对象将被直接返回。
+
+```javascript
+function Person(name, age, birthdate) {
+  this.name = name;
+  this.age = age;
+  this.birthdate = birthdate;
+  this.changeName = function(newAge) {
+    this.age = newAge;
+  }
+  // !!! 注意这里
+  return {};
+}
+
+var X = new Person('X', 13, new Date());
+console.log(X.name); // undefined;
+```
+
+### this
+
+`this` 在不同环境中指代的对象不同（`this` 指代的值可在函数运行过程中发生改变）。
+
+|出现场景|所指代值|
+|--------|--------|
+|全局环境|全局对象（window 在浏览器环境中时）|
+|constructor|创建的新实例对象|
+|函数调用|函数的调用者|
+|`new Function()`|全局对象|
+|`eval()`|调用上下文中的 `this`|
+
+#### 全局环境中
+
+全局环境中 `this` 指代全局对象，既 `window` 在浏览器环境中。
+
+```javascript
+// 以下的所有 this 均指代全局对象
+var a = 10;
+alert(this.a);
+
+this.b = 20;
+alert(b);
+
+c = 30;
+alert(this.c);
+```
+
+#### 构造器中
+
+构造器中的 `this` 指代的是即将被创建出的对象。
+
+```javascript
+// constructor
+function Person(name, age, birthdate) {
+  // 下面的指代即将被创建的对象
+  this.name = name;
+  this.age = age;
+  this.birthdate = birthdate;
+  this.changeName = function(newAge) {
+    this.age = newAge;
+  }
+}
+
+// 创建对象
+var X = new Person('Stupid', 13, new Date(2015, 01, 01));
+var Q = new Person('Q', 12, new Date(2015, 01, 01));
+
+X.changeName('X');
+```
+
+#### 函数中
+
+函数中的 `this` 指代函数的调用者。
+
+```javascript
+// constructor
+function Person(name, age, birthdate) {
+  // 下面的指代即将被创建的对象
+  this.name = name;
+  this.age = age;
+  this.birthdate = birthdate;
+  this.changeName = function(newAge) {
+    this.age = newAge;
+  }
+  this.gretting = function() {
+    // !!! 下面这个 this 指代调用它的对象，既上面的
+    // 上面的 gretting 左边的 this，既为即将被创建的对象
+    console.log('Hi, I am ' + this.name)
+  }
+}
+
+// 创建对象
+var X = new Person('Stupid', 13, new Date(2015, 01, 01));
+
+X.changeName('X');
+X.gretting();
+```
+
+NOTE: `new Function('console.log(this)')` 中的 `this` 均指代全局对象。`eval('console.log(this)` 则为调用上下文指代的 `this`。
+
+### this 实例
+
+下面的例子使用 `apply` 与 `call`。通过这两个方法来将一个对象中 `this` 指代的目标进行改变。
+
+```javascript
+function Point(x, y) {
+  this.x = x;
+  this.y = y;
+  this.move = function(x, y) {
+    this.x += x;
+    this.y += y;
+  }
+}
+
+var point = new Point(0, 0);
+point.move(1, 1);
+
+var circle = {x: 0, y: 1, r: 1};
+
+// 改变 point 中 move 方法 this 指代的对象至 circle
+point.move.apply(circle, [1, 1]);
+// 同样可以用类似的 call 方法，区别为参数需依次传入
+point.move.call(circle, 1, 1);
+```
+
+![](../img/T/this-sample.jpg)
+
+### 原型继承
+
+使用原型（prototype）可以解决重复定义实例对象拥有的完全一致的属性或方法（既共享原型中的属性或方法）。
+
+```javascript
+function Boss() {
+  this.age = 0;
+  this.birthdate = null;
+  this.name = '';
+  this.tasks = [];
+  this.title = 'Boss';
+  this.gretting = function() {console.log('I am a Boss!');};
+}
+
+var X = new Boss();
+var Q = new Boss();
+
+// X 与 Q 中具有完全一致（不必唯一的属性或方法）
+// 并耗用内存的共享部分
+// this.title 与 this.gretting
+```
+
+**改造后的构造器**
+
+```javascript
+function Boss() {
+  this.age = 0;
+  this.birthdate = null;
+  this.name = '';
+  this.tasks = [];
+}
+Boss.prototype = {
+  title: 'Boss',
+  gretting: function(){console.log('I am a Boss!');}
+}
+
+var X = new Boss();
+var Q = new Boss();
+
+// X 与 Q 中具有完全一致（不必唯一的属性或方法）
+// 并耗用内存的共享部分
+// this.title 与 this.gretting
+
+var X = new Boss();
+var Q = new Boss();
+
+// X 与 Q 拥有相同的原型 Boss.prototype
+```
+
+### 原型链
+
+使用原型继承的方法会产生原型链。JavaScript 中对于对象的查找、修改和删除都是通过原型链来完成的。
+
+**判断属性是否为对象本身**
+
+```javascript
+objectName.hasOwnProperty('propertyName');
+// 返回布尔值 true 或 false
+```
+
+#### 属性查找
+
+对象的属性查找会更随原型链依次查找，如果在当前环境中无法找到需要的属性则会继续向下一层原型中继续寻找。
+
+#### 属性修改
+
+在 JavaScript 中对于对象属性的修改永远只修改对象自身的属性（不论是来源于对象本身还是对象的原型）。当创建当前对象不存在属性时（即便原型拥有此属性），也会为此对象增加改属性。
+
+**修改原型上的属性**
+
+修改原型属性会印象所有被创建出的对象现有的属性和方法。
+
+```javascript
+ClassName.prototype.propertyName = 'new value';
+ClassName.prototype.methodName = function(){...};
+```
+
+#### 属性删除
+
+`delete objectName.propertyName` 只可删除对象自身的属性，无法删除对象的原型属性。
+
+#### Object.create(proto[, propertiesObject])
+
+其为ECMAScript 5 中提出的新建立对象的方式。在 `X` 中使用隐式的原型对象指向 `boss` 对象，并将其设为 `X` 对象的原型。
+
+```javascript
+var boss = {
+  title: 'Boss',
+  gretting: function(){console.log('Hi, I am a Boss!');}
+};
+
+var X = Object.create(boss);
+X.gretting(); // Hi, I am a Boss!
+```
+
+**低版本中实现 Object.create 功能**
+
+此种方式仍需使用 `ClassName.prototype` 的方式来实现。
+
+```javascript
+var clone = (function(){
+  var F = function(){};
+  return function(proto) {
+    F.prototype = proto;
+    return new F();
+  }
+})();
+```
+
+### 面向对象的应用
+
+#### 全局变量
+
+全局变量可在程序任意位置进行访问和修改的变量。滥用全局变量会导致，命名冲突，导致程序不稳定。
+
+**全局标量的三种定义方法：**
+
+- `var gloablVal = 'value';` 。
+- `window.gloablVal = 'value';` 附加于 `window` 对象上
+- `gloablVal = 'value';` 不使用 `var` 关键字，也附加于 `windwo` 对象
+
+NOTE：`delete` 无法删除在代码最顶端定义的全局标量 `var globale`
+
+#### 封装
+
+信息隐藏可以保证程序的稳定，将内部信息进行隐藏。其他语言中可词用访问权限来实现封装的概念，像 `private`、`public`。
+
+**JavaScript 中的封装**可使用函数的方法（闭包）。
+
+```javascript
+// 模拟 private 的属性
+function ClassName(){
+  var _property = '';
+  this.getProperty = function(){
+    return _property;
+  };
+}
+
+// 模拟 protected 属性，使用人为约束规则
+var pro = ClassName.prototype;
+pro._protectedMethod = function(){...};
+pro.publicMethod = function(){...};
+```
+
+#### 继承
+
+##### 原型继承
+
+原型继承的方式为 JavaScript 中固有的继承方式。
+
+```javascript
+var proto = {
+  action1: function(){},
+  action2: function(){}
+}
+
+var obj = Object.create(proto);
+```
+
+在不支持 EM5 中的实现方法：
+
+```javascript
+var clone = (function(){
+  var F = function(){};
+  return function(proto) {
+    F.prototype = proto;
+    return new F();
+  }
+})();
+```
+
+##### 类继承
+
+使用原型链继承的方式模拟其他语言类继承的特性。
+
+```javascript
+function ClassA() {
+  ClassA.classMethod = function(){};
+  ClassA.prototype.api = function(){};
+
+  function ClassB() {
+    ClassA.apply(this, argument);
+  }
+  ClassB.prototype = new ClassA();
+  ClassB.prototype.constructor = ClassB;
+  ClassB.prototype.api = function(){
+    ClassA.prototype.api.apply(this, arguments);
+  }
+}
+
+// ClassA 为父类
+// ClassB 为子类
+
+var b = new ClassB();
+b.api();
+```
+
+![](../img/C/class-inherence.jpg)
\ No newline at end of file
diff --git a/chapter2/11_js_type_determin.md b/chapter2/11_js_type_determin.md
new file mode 100644
index 0000000..feec85c
--- /dev/null
+++ b/chapter2/11_js_type_determin.md
@@ -0,0 +1,238 @@
+
+
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [类型识别](#%E7%B1%BB%E5%9E%8B%E8%AF%86%E5%88%AB)
+
+
+
+
+### 类型识别
+
+- `typeof`
+- `Object.prototype.toString`
+- `constructor`
+- `instanceof`
+
+**typeof**：
+- 可以是标准类型（Null 除外）
+- 不可识别具体的对象类型（Function 除外）
+
+**Object.prototype.toString**：
+- 可是识别标准类型及内置对象类型（例如，Object, Date, Array）
+- 不能识别自定义对象类型
+
+**constructor**：
+- 可以识别标准类型（Undefined/Null 除外）
+- 可识别内置对象类型
+- 可识别自定义对象类型
+
+```javascript
+function getConstructiorName(obj) {
+  return obj && obj.constructor && obj.constructor.toString().match(/function\s*([^(]*)/)[1];
+}
+getConstructiorName([]) === "Array"; // true
+```
+
+**instanceof**：
+- 不可判别原始类型
+- 可判别内置对象类型
+- 可判别自定义对象类型
+
+JavaScript的数据类型可以分为：标准类型和对象类型。
+
+`标准类型有`：undefined Null Boolean Date Number Object
+
+`对象类型（构造器类型）`：Boolean Date Number Object Array Date Error Function RegExp
+
+用来判断数据类型的一般有四种方式，分别是：
+
+- `typeof `
+- `Prototype.toString()`
+- `constructor`
+- `instanceof`
+
+**下面我们写一个HTML来检验一下：**
+
+```html
+
+
+    JavaScript类型判断
+    
+    
+
+
+    
+    
+        
+            
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+            
+        
+        
+        
+            
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+            
+        
+        
+        
+            
+            
+            
+            
+            
+        
+    typeof toString constructor instanceof
undefined 
Null 
Boolean 
Number 
String 
Object 
-----------------------
Boolean Object 
Number Object 
String Object 
Object Object 
Array Object 
Date Object 
Error Object 
Function Object 
RegExp Object 
-----------------------
Point Objct 
+
+
+```
+
+执行的结果如下：
+
+![](../img/J/javascript-type-judge.png)
+
+其中红色的单元格表示该判断方式不支持的类型。
\ No newline at end of file
diff --git a/chapter2/12_reg_exp.md b/chapter2/12_reg_exp.md
new file mode 100644
index 0000000..8f08d07
--- /dev/null
+++ b/chapter2/12_reg_exp.md
@@ -0,0 +1,88 @@
+## 正则表达式
+
+正则表达式为标书字符串规则的表达式。下面为两个例子为在 JavaScript 中的使用，
+
+- `/pattern/attrs`
+- `new RegExp(pattern, attrs)`
+
+### 锚点
+
+**锚点**用于匹配一个位置，下列为常用的锚点
+
+- `^` 起始的位置 `/^http/`
+- `$` 结尾的位置 `/\.jpg$/`
+- `\b` 单词边界
+
+### 字符类
+
+**字符类**用于匹配一类字符中的一个，下面为几个常用的例子，
+
+- `[abc]` 可用于匹配 `a` `b` 还有 `c`
+- `[0-9]` 可用于匹配一个数字
+- `[^0-9]` 可用于匹配一个**非**数字
+- `[a-z]` 可用于匹配一个字母
+- `.` 任意字符但换行符除外
+
+### 元字符
+
+**元字符**为具有特殊意义的字符。常见的有，
+
+- `^`, `$`, `\b`
+- `\d` 用于匹配数字 `[0-9]`
+- `\D` 用于匹配 `[^\d]`
+- `\s` 用于匹配空白符
+- `\S` 用于匹配非空白符 `[^\s]`
+- `\w` 用于匹配任意单词字符（例如程序中的变量字符） `[A-Za-z0-9_]`
+- `\W` 用于匹配非单词字符 `[^\W]`
+
+### 量词
+
+量词用于表现字符出现的次数。可用的连词如下，
+
+- `{m,n}` 用于表示出现 `m` 到 `n` 次之间。
+- `*` 用于表示出现 `0` 到无穷之间也就等同于 `{0,}`
+- `?` 用于表示出现 `0` 次到 `1` 次也等同于 `{0,1}`
+- `+` 用于表现出现 `1` 次以及一次以上也等同于 `{1,}`
+
+### 转移符
+
+**转义符**需要在匹配的字符是元字符的时候使用。使用 `\` 来进行转移即可。
+
+### 多选分支
+
+**多选分支**用于表示*或*的概念。`/thi(c|n)k/` 其又等同于 `/thi[cn]k/`。其还可以用于匹配文件扩展名 `/\.(png|jpg|jpeg|gif)$/` 。
+
+### 常用方法
+
+#### 测试：regxObj.test(str)
+
+其用于测试正则表达式与指定字符串是否匹配。
+
+```
+/123/.test(123); // true
+/123/.test(111); // false
+/123/.test('x123'); // true
+```
+
+#### 捕获
+
+其用于保存所匹配到的字符串为后续开发所用。`()` 可用于捕获，正则表达式再运行时会将其保存下来，`(?:)` 则不予保存。
+
+```
+// str.match(regexp)
+var url = 'http://www.google.com/query?test=li-xinyang#cool';
+var reg = /(https?:)\/\/([^\/]+)(\/[^\?]*)?(\?[^#]*)?(#.*)?/;
+
+var arr = url.match(reg);
+var protocol = arr[1];
+var host = arr[2];
+var pathname = arr[3];
+var search = arr[4];
+var hash = arr[5];
+```
+
+#### 搜索与替换
+
+`regexpObj.exec(str)` 可以提供更强大的检索，它可以提供更详尽的结果 `index` 也可以提供过程状态 `lastIndex`。
+
+`str.replace(regex/substr, replacement)` 可以使用正则表达式来对字符串进行替换。
diff --git a/chapter3/00_intro.md b/chapter3/00_intro.md
new file mode 100644
index 0000000..2a2c214
--- /dev/null
+++ b/chapter3/00_intro.md
@@ -0,0 +1,16 @@
+
+
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [DOM 编程艺术](#dom-%E7%BC%96%E7%A8%8B%E8%89%BA%E6%9C%AF)
+
+
+
+# DOM 编程艺术
+
+DOM 编程就是使用 W3C 定义的 API (Application Program Interface)
+来操作 HTML 文档
+（此处不局限于 HTML，亦可操作 XHTML、XML  等），使用户可以与进行页面交互。
+你需要了解节点、属性、样式等基本 DOM 操作，DOM 事件模型，数据存储
+(Cookie、Storage) 与数据通信 (Ajax) ，JavaScript 动画，音频、视频、Canvas
+等 HTML5 特性，表单、列表操作。
diff --git a/chapter3/01_dom_tree.md b/chapter3/01_dom_tree.md
new file mode 100644
index 0000000..a149359
--- /dev/null
+++ b/chapter3/01_dom_tree.md
@@ -0,0 +1,276 @@
+
+
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+  - [文档树](#%E6%96%87%E6%A1%A3%E6%A0%91)
+    - [HTML 转换 DOM 树](#html-%E8%BD%AC%E6%8D%A2-dom-%E6%A0%91)
+    - [节点遍历](#%E8%8A%82%E7%82%B9%E9%81%8D%E5%8E%86)
+    - [节点类型](#%E8%8A%82%E7%82%B9%E7%B1%BB%E5%9E%8B)
+    - [元素遍历](#%E5%85%83%E7%B4%A0%E9%81%8D%E5%8E%86)
+
+
+
+## 文档树
+
+Document Object Model (DOM) 为文档**对象**模型，
+它使用对象的表示方式来表示对应的文档结构及其中的内容。
+
+下面为一个样例 `p` 元素在文档中的对象所包含的所有属性。
+
+```html
+Hello, World!
+```
+
+```
+p#targetaccessKey: ""
+align: ""
+attributes: Named
+NodeMapbaseURI: ""
+childElementCount: 0
+childNodes: NodeList[1]
+children: HTMLCollection[0]
+classList: DOMTokenList[0]
+className: ""
+clientHeight: 0
+clientLeft: 0
+clientTop: 0
+clientWidth: 0
+contentEditable: "inherit"
+dataset: DOM
+StringMapdir: ""
+draggable: false
+firstChild: text
+firstElementChild: null
+hidden: false
+id: "target"
+innerHTML: "Hello, World!"
+innerText: "Hello, World!"
+isContentEditable: false
+lang: ""
+lastChild: text
+lastElementChild: null
+localName: "p"
+namespaceURI: "http://www.w3.org/1999/xhtml"
+nextElementSibling: null
+nextSibling: null
+nodeName: "P"
+nodeType: 1
+nodeValue: null
+offsetHeight: 0
+offsetLeft: 0
+offsetParent: null
+offsetTop: 0
+offsetWidth: 0
+onabort: null
+onautocomplete: null
+onautocompleteerror: null
+onbeforecopy: null
+onbeforecut: null
+onbeforepaste: null
+onblur: null
+oncancel: null
+oncanplay: null
+oncanplaythrough: null
+onchange: null
+onclick: null
+onclose: null
+oncontextmenu: null
+oncopy: null
+oncuechange: null
+oncut: null
+ondblclick: null
+ondrag: null
+ondragend: null
+ondragenter: null
+ondragleave: null
+ondragover: null
+ondragstart: null
+ondrop: null
+ondurationchange: null
+onemptied: null
+onended: null
+onerror: null
+onfocus: null
+oninput: null
+oninvalid: null
+onkeydown: null
+onkeypress: null
+onkeyup: null
+onload: null
+onloadeddata: null
+onloadedmetadata: null
+onloadstart: null
+onmousedown: null
+onmouseenter: null
+onmouseleave: null
+onmousemove: null
+onmouseout: null
+onmouseover: null
+onmouseup: null
+onmousewheel: null
+onpaste: null
+onpause: null
+onplay: null
+onplaying: null
+onprogress: null
+onratechange: null
+onreset: null
+onresize: null
+onscroll: null
+onsearch: null
+onseeked: null
+onseeking: null
+onselect: null
+onselectstart: null
+onshow: null
+onstalled: null
+onsubmit: null
+onsuspend: null
+ontimeupdate: null
+ontoggle: null
+onvolumechange: null
+onwaiting: null
+onwebkitfullscreenchange: null
+onwebkitfullscreenerror: null
+onwheel: null
+outerHTML: "Hello, World!"
+outerText: "Hello, World!"
+ownerDocument: document
+parentElement: null
+parentNode: null
+prefix: null
+previousElementSibling: null
+previousSibling: null
+scrollHeight: 0
+scrollLeft: 0
+scrollTop: 0
+scrollWidth: 0
+shadowRoot: null
+spellcheck: true
+style: CSSStyle
+DeclarationtabIndex: -1
+tagName: "P"
+textContent: "Hello, World!"
+title: ""
+translate: true
+webkitdropzone: ""
+__proto__: HTMLParagraphElement
+```
+
+通过使用 DOM 提供的 API (Application Program Interface)
+可以动态的修改节点（node），也就是对 DOM 树的直接操作。
+浏览器中通过使用 JavaScript 来实现对于 DOM 树的改动。
+
+**DOM 包含**
+
+- DOM Core
+- DOM HTML
+- DOM Style
+- DOM Event
+
+### HTML 转换 DOM 树
+
+```html
+
+
+  
+    My title
+  
+  
+    My Link
+    My header
+  
+
+```
+
+![](../img/D/dom-tree.gif)
+
+### 节点遍历
+
+在元素节点中提取自己所需的节点，并予以操作。
+
+```Javascript
+// Document.getElementsByTagName()
+// 更具标签名找到目标节点的集合，此例中为 My header
+var node = document.getElementsByTagName('h1')[0];
+
+// Node.parentNode;
+// 获得目标节点的父节点，此例中为 body 元素
+node.parentNode;
+
+// Node.firstChild
+// 获得目标节点的第一个子节点，此例中为 "My header"
+node.firstChild;
+
+// Node.lastChild
+// 获得目标节点的最后一个子节点，此例中为 "My header"
+node.lastChild;
+
+// Node.previousSibling;
+// 获得目标节点的前一个相邻节点
+node.previousSibling;
+
+// Node.nextSibling;
+// 获得目标节点的下一个相邻节点
+node.nextSibling;
+```
+
+### 节点类型
+
+**常用节点类型**
+
+- ELEMENT_NODE 可使用 `Document.createElement('elementName');` 创建
+- TEXT_NODE 可使用 `Document.createTextNode('Text Value');` 创建
+
+**不常用节点类型**
+
+- COMMENT_NODE
+- DOCUMENT_TYPE_NODE
+
+**不同节点对应的NodeType类型**
+
+此值可以通过 `Node.nodeType` 来获取。
+
+|节点编号|节点名称|
+|--------|--------|
+|1|Element|
+|2|Attribute|
+|3|Text|
+|4|CDATA Section|
+|5|Entity Reference|
+|6|Entity|
+|7|Processing Instrucion|
+|8|Comment|
+|9|Document|
+|10|Document Type|
+|11|Document Fragment|
+|12|Notation|
+
+NOTE：此处需要清楚`节点`和`元素`的区别。我们平常说的`元素`
+其实指的是节点中得`元素节点`，所以说`节点`包含`元素`，节点还包括文本节点、实体节点等。
+
+### 元素遍历
+
+元素节点符合 HTML DOM 树规则，所以它与 DOM 中存在的节点相似。
+
+```
+
+  Hello,
+    Xinyang!
+  回到
+    
+      主页
+    
+  。
+
+```
+
+```
+// 在选取元素节点后
+
+p.firstElementChild;       // Xinyang
+p.lastElementChild;        // 主页
+
+em.nextElementSibling;     // 主页
+em.previousElementSibling; // "Hello,"
+```
diff --git a/chapter3/02_node_manipulation.md b/chapter3/02_node_manipulation.md
new file mode 100644
index 0000000..1907fb2
--- /dev/null
+++ b/chapter3/02_node_manipulation.md
@@ -0,0 +1,307 @@
+
+
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+  - [节点操作](#%E8%8A%82%E7%82%B9%E6%93%8D%E4%BD%9C)
+    - [获取节点](#%E8%8E%B7%E5%8F%96%E8%8A%82%E7%82%B9)
+      - [接口获取节点](#%E6%8E%A5%E5%8F%A3%E8%8E%B7%E5%8F%96%E8%8A%82%E7%82%B9)
+        - [getElementById](#getelementbyid)
+        - [getElementsByTagName](#getelementsbytagname)
+        - [getElementsByClassName](#getelementsbyclassname)
+        - [querySelector / querySelectorAll](#queryselector--queryselectorall)
+    - [创建节点](#%E5%88%9B%E5%BB%BA%E8%8A%82%E7%82%B9)
+    - [修改节点](#%E4%BF%AE%E6%94%B9%E8%8A%82%E7%82%B9)
+    - [插入节点](#%E6%8F%92%E5%85%A5%E8%8A%82%E7%82%B9)
+      - [appendChild](#appendchild)
+      - [insertBefore](#insertbefore)
+    - [删除节点](#%E5%88%A0%E9%99%A4%E8%8A%82%E7%82%B9)
+    - [innerHTML](#innerhtml)
+
+
+
+## 节点操作
+
+因为 DOM 的存在，这使我们可以通过 JavaScript 来获取、创建、修改、或删除节点。
+
+NOTE：下面提供的例子中的 `element` 均为元素节点。
+
+### 获取节点
+
+**父子关系**
+
+- `element.parentNode`
+- `element.firstChild`/`element.lastChild`
+- `element.childNodes`/`element.children`
+
+**兄弟关系**
+
+- `element.previousSibling`/`element.nextSibling`
+- `element.previousElementSibling`/`element.nextElementSibling`
+
+通过节点直接的关系获取节点会导致代码维护性大大降低（节点之间的关系变化会直接影响到获取节点），而通过接口则可以有效的解决此问题。
+
+```html
+
+
+
+  
+  ELEMENT_NODE & TEXT_NODE
+
+
+  
+    First
+    Second
+    Third
+    Fourth
+  
+  Hello
+  
+
+
+```
+
+NTOE：细心地人会发现，在节点遍历的例子中，body、ul、li、p节点之间是没有空格的，因为如果有空格，那么空格就会被当做一个TEXT节点，从而用ulNode.previousSibling获取到得就是一个空的文本节点，而不是 `First` 节点了。即节点遍历的几个属性会得到所有的节点类型，而元素遍历只会得到相对应的元素节点。一般情况下，用得比较多得还是元素节点的遍历属性。
+
+**实现浏览器兼容版的element.children**
+
+有一些低版本的浏览器并不支持 `element.children` 方法，但我们可以用下面的方式来实现兼容。
+
+```html
+
+
+  
+  Compatible Children Method
+
+
+  
+    123
+    ppp
+    h1
+  
+  
+
+
+```
+
+NOTE：此兼容方法为初稿，还未进行兼容性测试。
+
+#### 接口获取元素节点
+
+- `getElementById`
+- `getElementsByTagName`
+- `getElementsByClassName`
+- `querySelector`
+- `querySelectorAll`
+
+|API|只作用于 `document`|唯一返回值|live|
+|---|:-----------------:|:--------:|:--:|
+|getElementById|√|√||
+|getElementsByTagName|||√|
+|getElementsByClassName|||√|
+|querySelectorAll||||
+|querySelector||√|||
+
+##### getElementById
+
+获取文档中指定 `id` 的节点**对象**。
+
+```javascript
+var element = document.getElementById('id');
+```
+
+##### getElementsByTagName
+
+动态的获取具有指定标签元素节点的集合（其返回值会被 DOM 的变化所影响，其值会发生变化）。此接口可直接通过元素而获取，不必直接作用于 `document` 之上。
+
+```javascript
+// 示例
+var collection = element.getElementsByTagName('tagName');
+
+// 获取指定元素的所有节点
+var allNodes = document.getElementsByTagName('*');
+
+// 获取所有 p 元素的节点
+var elements = document.getElementsByTagName('p');
+// 取出第一个 p 元素
+var p = elements[0];
+```
+
+##### getElementsByClassName
+
+获取指定元素中具有指定 `class` 的所有节点。多个 `class` 可的选择可使用空格分隔，与顺序无关。
+
+```javascript
+var elements = element.getElementsByClassName('className');
+```
+
+NOTE：IE9 及一下版本不支持 `getElementsByClassName`
+
+**兼容方法**
+
+```javascript
+function getElementsByClassName(root, className) {
+  // 特性侦测
+  if (root.getElementsByClassName) {
+    // 优先使用 W3C 规范接口
+    return root.getElementsByClassName(className);
+  } else {
+    // 获取所有后代节点
+    var elements = root.getElementsByTagName('*');
+    var result = [];
+    var element = null;
+    var classNameStr = null;
+    var flag = null;
+
+    className = className.split(' ');
+
+    // 选择包含 class 的元素
+    for (var i = 0, element; element = elements[i]; i++) {
+      classNameStr = ' ' + element.getAttribute('class') + ' ';
+      flag = true;
+      for (var j = 0, name; name = className[j]; j++) {
+        if (classNameStr.indexOf(' ' + name + ' ') === -1) {
+          flag = false;
+          break;
+        }
+      }
+      if (flag) {
+        result.push(element);
+      }
+    }
+    return result;
+  }
+}
+```
+
+##### querySelector / querySelectorAll
+
+获取一个 `list` （其返回结果不会被之后 DOM 的修改所影响，获取后不会再变化）符合传入的 CSS 选择器的第一个元素或全部元素。
+
+```javascript
+var listElementNode = element.querySelector('selector');
+var listElementsNodes = element.querySelectorAll('selector');
+
+var sampleSingleNode = element.querySelector('#className');
+var sampleAllNodes = element.querySelectorAll('#className');
+```
+
+NOTE: IE9 一下不支持 `querySelector` 与 `querySelectorAll`
+
+### 创建节点
+
+创建节点 -> 设置属性 -> 插入节点
+
+```javascript
+var element = document.createElement('tagName');
+```
+
+### 修改节点
+
+**textContent**
+
+获取或设置节点以及其后代节点的文本内容（对于节点中的所有文本内容）。
+
+```javascript
+element.textContent; // 获取
+element.textContent = 'New Content';
+```
+
+NOTE：不支持 IE 9 及其一下版本。
+
+**innerText** （不符合 W3C 规范）
+
+获取或设置节点以及节点后代的文本内容。其作用于 `textContent` 几乎一致。
+
+```javascript
+element.innerText;
+```
+
+NOTE：不符合 W3C 规范，不支持 FireFox 浏览器。
+
+**FireFox 兼容方案**
+
+```javascript
+if (!('innerText' in document.body)) {
+  HTMLElement.prototype.__defineGetter__('innerText', function(){
+    return this.textContent;
+  });
+  HTMLElement.prototype.__defineSetter__('innerText', function(s) {
+    return this.textContent = s;
+  });
+}
+```
+
+### 插入节点
+
+#### appendChild
+
+在指定的元素**内**追加一个元素节点。
+
+```javascript
+var aChild = element.appendChild(aChild);
+```
+
+#### insertBefore
+
+在指定元素的指定节点前插入指定的元素。
+
+```javascript
+var aChild = element.insertBefore(aChild, referenceChild);
+```
+
+### 删除节点
+
+删除指定的节点的子元素节点。
+
+```javascript
+var child = element.removeChild(child);
+```
+
+### innerHTML
+
+获取或设置指定节点之中所有的 HTML 内容。替换之前内部所有的内容并创建全新的一批节点（去除之前添加的**事件**和**样式**）。`innerHTML` 不检查内容，直接运行并替换原先的内容。
+
+NOTE：只建议在创建全新的节点时使用。不可在用户可控的情况下使用。
+
+```javascript
+var elementsHTML = element.innerHTML;
+```
+
+**存在的问题**
+
+- 低版本 IE 存在内存泄露
+- 安全问题（用户可以在名称中运行脚本代码）
diff --git a/chapter3/03_attribute.md b/chapter3/03_attribute.md
new file mode 100644
index 0000000..4f9fff0
--- /dev/null
+++ b/chapter3/03_attribute.md
@@ -0,0 +1,107 @@
+
+
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [属性操作](#%E5%B1%9E%E6%80%A7%E6%93%8D%E4%BD%9C)
+  - [HTML 属性与 DOM 属性的对应](#html-%E5%B1%9E%E6%80%A7%E4%B8%8E-dom-%E5%B1%9E%E6%80%A7%E7%9A%84%E5%AF%B9%E5%BA%94)
+  - [属性操作方式](#%E5%B1%9E%E6%80%A7%E6%93%8D%E4%BD%9C%E6%96%B9%E5%BC%8F)
+    - [Property Accessor](#property-accessor)
+    - [getAttribute / setAttribute](#getattribute--setattribute)
+    - [dataset](#dataset)
+
+
+
+## 属性操作
+
+### HTML 属性与 DOM 属性的对应
+
+每个 HTML 属性都会对应相应的 DOM 对象属性。
+
+```html
+
+  User Name: 
+  
+
+```
+
+```javascript
+input.id;        // 'username'
+input.type;      // 'text'
+input.className; // 'text'
+
+label.htmlFor;   // 'username'
+```
+
+### 属性操作方式
+
+#### Property Accessor
+
+通过属性方法符得到的属性为转换过的实例对象（并非全字符串）。
+
+**特点**
+
+- X 通用行差（命名异常，使用不同的命名方式进行访问）
+- X 扩展性差
+- √ 实用对象（取出后可直接使用）
+
+**读取属性**
+
+```html
+
+  User Name: 
+  
+
+```
+
+```javascript
+input.className; // 'text'
+input[id];        // 'username'
+```
+
+**写入属性**
+
+可增加新的属性或改写已有属性。
+
+```javascript
+input.value = 'new value';
+input[id] = 'new-id';
+```
+
+#### getAttribute / setAttribute
+
+**特点**
+
+- X 仅可获取字符串（使用时需转换）
+- √ 通用性强
+
+**读取属性**
+
+获取到的均为属性的**字符串**。
+
+```javascript
+var attribtue = element.getAttribute('attributeName');
+```
+
+**写入属性**
+
+可增加新的属性或改写已有属性。
+
+```javascript
+element.setAttribute('attributeName', value);
+```
+
+#### dataset
+
+自定义属性，其为 `HTMLElement` 上的属性也是 `data-*` 的属性集。主要用于在元素上保存数据。获取的均为**属性字符串**。数据通常使用 AJAX 获取并存储在节点之上。
+
+```html
+
+```
+
+```javascript
+div.dataset.id;         // '1234'
+div.dataset.username;   // 'x'
+div.dataset.email;      // 'mail@gmail.com'
+```
+
+NOTE：`dataset` 在低版本 IE 不可使用，但可通过 `getAttribute` 与 `setAttribute` 来做兼容。
diff --git a/chapter3/04_style_manipulation.md b/chapter3/04_style_manipulation.md
new file mode 100644
index 0000000..9b7fc1f
--- /dev/null
+++ b/chapter3/04_style_manipulation.md
@@ -0,0 +1,194 @@
+
+
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [样式操作](#%E6%A0%B7%E5%BC%8F%E6%93%8D%E4%BD%9C)
+  - [CSS 对应 DOM 对象](#css-%E5%AF%B9%E5%BA%94-dom-%E5%AF%B9%E8%B1%A1)
+    - [内部样式表](#%E5%86%85%E9%83%A8%E6%A0%B7%E5%BC%8F%E8%A1%A8)
+    - [行内样式](#%E8%A1%8C%E5%86%85%E6%A0%B7%E5%BC%8F)
+  - [更新样式](#%E6%9B%B4%E6%96%B0%E6%A0%B7%E5%BC%8F)
+    - [element.style](#elementstyle)
+    - [element.style.cssText](#elementstylecsstext)
+    - [更新 class](#%E6%9B%B4%E6%96%B0-class)
+    - [统一更新多个元素样式](#%E7%BB%9F%E4%B8%80%E6%9B%B4%E6%96%B0%E5%A4%9A%E4%B8%AA%E5%85%83%E7%B4%A0%E6%A0%B7%E5%BC%8F)
+  - [获取样式](#%E8%8E%B7%E5%8F%96%E6%A0%B7%E5%BC%8F)
+    - [element.style](#elementstyle-1)
+    - [window.getComputedStyle()](#windowgetcomputedstyle)
+
+
+
+## 样式操作
+
+通过 JavaScript 动态修改页面样式。
+
+### CSS 对应 DOM 对象
+
+![](../img/C/css-dom-overview.jpg)
+
+```html
+
+// var element = document.querySelector('link');
+// 对应于 element.sheet
+
+
+// var element = document.querySelector('style');
+// 对应于 element.sheet
+
+// 整个页面的全部样式（不包括行内样式）
+document.styleSheets
+
+Text Color
+// var element = document.querySelector('p');
+// 对应于 element.style
+```
+
+#### 内部样式表
+
+```html
+
+
+// 1.对应所有样式的列表
+// body{margin:30;}
+// p{color: #aaa; line-height:20px}
+element.sheet.cssRules;
+
+// 2.对应相应的 CSS 选择器
+// p
+element.sheet.cssRules[1].selectorText;
+
+// 3.对应一个样式
+// p{color: #aaa; line-height:20px}
+element.sheet.cssRules[1]
+
+// 4.对应所有样式的键值对
+// color: #aaa; line-height:20px
+element.sheet.cssRules[1].style;
+
+// 5.对应的属性值
+// #aaa
+element.sheet.cssRules[1].stlye.color;
+element.sheet.cssRules[1].lineHeight;
+```
+
+#### 行内样式
+
+其对应于 `CSSStyleDeclaration` 的对象。
+
+```html
+element.style.color;
+// 获取行内样式的键值对
+
+```
+
+### 更新样式
+
+#### element.style
+
+```javascript
+element.style.color = 'red';
+element.style.background = 'black';
+```
+
+增加样式后得到的结果
+
+```html
+
+```
+
+**缺点**
+
+- 每个属性的更新都需要一个命令
+- 命名异常（以驼峰命名法命名属性）
+
+#### element.style.cssText
+
+一次同时设置多个行内样式，其结果同 `element.style` 单独设置相同。
+
+```javascript
+element.style.cssText = 'color: red; background: black';
+```
+
+增加样式后得到的结果
+
+```html
+
+```
+
+**以上两种方式均将样式混合在逻辑当中。**
+
+#### 更新 class
+
+首先需要创建对应样式的 CSS 样式。
+
+```html
+.angry {
+  color: red;
+  background: black;
+}
+```
+
+然后再在 JavaScript 中，在对应的事件中给元素添加需要的类即可。
+
+```javascript
+element.className += ' angry';
+```
+
+增加样式后得到的结果
+
+```html
+
+```
+
+#### 统一更新多个元素样式
+
+以上方法均不适合同时更新多个样式，通过更换样式表的方式则可同时更改多个页面中的样式。将需要的大量样式也在一个**皮肤样式**表中，通过 JavaScript 来直接更换样式表来进行样式改变。（此方法也可用于批量删除样式）
+
+```html
+
+
+```
+
+```javascript
+element.setAttribute('href', 'style2.css');
+```
+
+### 获取样式
+
+#### element.style
+
+其对应的为元素的**行内样式表**而不是实际样式表。
+
+```html
+
+```
+
+```javascript
+element.style.color; // ""
+```
+line-height: 200px
+
+#### window.getComputedStyle()
+
+将需要取出样式的目标元素传入 `window.getComputedStyle()` 函数中，即可得到对应元素的实际样式。注意的是这里获取到的样式值为**只读**属性不可修改！
+
+NOTE：获取的实际为 `CSSStyleDeclaration` 的实例对象。
+NOTE+：此方法不支持 IE9 以下版本，IE9 中需使用 `element.currentStyle` 来做兼容。
+
+```javascript
+var style = window.getComputedStyle(element[, pseudoEle]);
+```
+
+```html
+
+```
+
+```javascript
+window.getComputedStyle(element).color; // 'rgb(0,0,0)'
+```
diff --git a/chapter3/05_events.md b/chapter3/05_events.md
new file mode 100644
index 0000000..8c11a07
--- /dev/null
+++ b/chapter3/05_events.md
@@ -0,0 +1,507 @@
+
+
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [DOM 事件](#dom-%E4%BA%8B%E4%BB%B6)
+  - [事件流](#%E4%BA%8B%E4%BB%B6%E6%B5%81)
+  - [事件注册](#%E4%BA%8B%E4%BB%B6%E6%B3%A8%E5%86%8C)
+    - [注册事件](#%E6%B3%A8%E5%86%8C%E4%BA%8B%E4%BB%B6)
+    - [取消事件](#%E5%8F%96%E6%B6%88%E4%BA%8B%E4%BB%B6)
+    - [触发事件](#%E8%A7%A6%E5%8F%91%E4%BA%8B%E4%BB%B6)
+    - [浏览器兼容型](#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E5%9E%8B)
+      - [兼容低版本代码实现](#%E5%85%BC%E5%AE%B9%E4%BD%8E%E7%89%88%E6%9C%AC%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0)
+  - [事件对象](#%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1)
+    - [属性和方法](#%E5%B1%9E%E6%80%A7%E5%92%8C%E6%96%B9%E6%B3%95)
+      - [通用属性和方法](#%E9%80%9A%E7%94%A8%E5%B1%9E%E6%80%A7%E5%92%8C%E6%96%B9%E6%B3%95)
+        - [阻止事件传播](#%E9%98%BB%E6%AD%A2%E4%BA%8B%E4%BB%B6%E4%BC%A0%E6%92%AD)
+        - [阻止默认行为](#%E9%98%BB%E6%AD%A2%E9%BB%98%E8%AE%A4%E8%A1%8C%E4%B8%BA)
+  - [事件分类](#%E4%BA%8B%E4%BB%B6%E5%88%86%E7%B1%BB)
+    - [Event](#event)
+      - [window](#window)
+      - [image](#image)
+    - [UIEvent](#uievent)
+    - [MouseEvent](#mouseevent)
+      - [属性](#%E5%B1%9E%E6%80%A7)
+      - [MouseEvent 顺序](#mouseevent-%E9%A1%BA%E5%BA%8F)
+        - [实例：拖动元素](#%E5%AE%9E%E4%BE%8B%EF%BC%9A%E6%8B%96%E5%8A%A8%E5%85%83%E7%B4%A0)
+    - [滚轮事件（Wheel）](#%E6%BB%9A%E8%BD%AE%E4%BA%8B%E4%BB%B6%EF%BC%88wheel%EF%BC%89)
+    - [FocusEvent](#focusevent)
+    - [InputEvent](#inputevent)
+    - [KeyboardEvent](#keyboardevent)
+  - [事件代理](#%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86)
+
+
+
+## DOM 事件
+
+何为 DOM 事件，HTML DOM 使JavaScript 有能力对 HTML 事件做出反应。（例如，点击 DOM 元素，键盘被按，输入框输入内容以及页面加载完毕等）
+
+### 事件流
+
+一个 DOM 事件可以分为`捕获过程`、`触发过程`、`冒泡过程`。
+DOM 事件流为 DOM 事件的处理及执行的过程。下面以一个``元素被点击为例。
+
+![](../img/E/event_flow.jpg)
+
+1. [红虚线]Capture Phase（事件捕获过程）当 DOM 事件发生时，它会从window节点一路跑下去直到触发事件元素的父节点为止，去捕获触发事件的元素。
+2. [红绿实线]Target Phase（事件触发过程）当事件被捕获之后就开始执行事件绑定的代码
+3. [绿虚线]Bubble Phase（冒泡过程）当事件代码执行完毕后，浏览器会从触发事件元素的父节点开始一直冒泡到window元素（**即元素的祖先元素也会触发这个元素所触发的事件**）
+
+**关于捕获过程的补充**
+
+如果有一个支持三个阶段的事件，它一定在触发时遵循下面的顺序：
+
+```
+Capture -> Target -> Bubbling
+```
+
+![](../img/E/event-phases.png)
+
+使用下面的代码来举例：
+
+```JavaScript
+// 添加Capture阶段事件
+docuemnt.addEventListener('click',function(){
+    alert('capture：'+1);
+},true);
+tableNode.addEventListener('click',function(){
+    alert('capture：'+2);
+},true);
+tdNode.addEventListener('click',function(){
+    alert('capture：'+3);
+},true);
+
+// 添加Bubbling阶段事件
+docuemnt.addEventListener('click',function(){
+    alert('bubble：'+1);
+});
+tableNode.addEventListener('click',function(){
+    alert('bubble：'+2);
+});
+tdNode.addEventListener('click',function(){
+    alert('bubble：'+3);
+});
+```
+
+输出结果为：
+
+```
+capture：1
+capture：2
+capture：3
+bubble：3
+bubble：2
+bubble：1
+```
+
+![](../img/E/event-apply.png)
+
+```javascript
+// 对document添加了三个bubbling阶段的事件
+document.addEventListener('click',function(){
+    alert(1);
+});
+document.addEventListener('click',function(){
+    alert(2);
+});
+document.addEventListener('click',function(){
+    alert(3);
+});
+```
+
+如上面的代码所示，其为同一节点添加了同一阶段的多个事件，那执行顺序如何呢？
+早期并没有规范定义，DOM 3 中规范已经明确规定
+同一节点同一阶段的事件应按照注册函数的顺序执行。
+
+> 在实际项目过程中，某些情况下比如若干的组件或者模块都需要监听某个节点的某个事件，但是组件或者模块的生成（即添加事件的时机）是不一定保证顺序的，所以这个情况下如果某个组件对这个节点的这个事件的优先级特别高（需要保证必须先触发这个组件里的这个事件）而这个平台又支持这个阶段事件的话可以添加 capture 阶段事件，用三阶段的顺序来保证，比如移动平台模拟手势的实现会添加 document 上 touchXXX 的 capture 阶段事件，以优先识别手势操作
+> 当然实践过程中考虑到不同浏览器对三阶段支持的情况的差异，大部分情况下都采用的是 bubbling 阶段的事件
+>
+> —— 蔡剑飞 网易前端工程师
+
+NOTE：低版本 IE 中并未实现捕获过程。也不是所有事件均存在这三个完整的过程（例如 `load` 没有冒泡事件）
+
+NOTE+：在这三个阶段中无论将**事件捕获**和**事件处理**注册到任意一个父或祖父节点上都会被触发事件。
+
+### 事件注册
+
+事件注册，取消以及触发其作用对象均为一个 DOM 元素。
+
+#### 注册事件
+
+```javascript
+eventTarget.addEventListener(type, listener[,useCapture])
+```
+
+- evenTarget 表示要绑定事件的DOM元素
+- type    表示要绑定的事件，如："click"
+- listener  表示要绑定的函数
+- useCapture  可选参数，表示是否捕获过程
+
+NOTE：`useCapture` 为设定是否为捕获过程，默认事件均为冒泡过程，只有 `useCapture` 为 `true` 时才会启用捕获过程。
+
+```javascript
+// 获取元素
+var elem = document.getElemenyById('id');
+
+// 事件处理函数
+var clickHandler = function(event) {
+  // statements
+};
+
+// 注册事件
+elem.addEventListener('click', clickHandler, false);
+
+// 第二种方式，不建议使用
+elem.onclick = clickHandler;
+// 或者来弥补只可触发一个处理函数的缺陷
+elem.onclick = function(){
+  clickHandler();
+  func();
+  // 其他处理函数
+};
+```
+
+#### 取消事件
+
+```javascript
+eventTarget.removeEventListener(type, listener[,useCapture]);
+```
+
+- evenTarget 表示要绑定事件的DOM元素
+- type    表示要绑定的事件，如："click"
+- listener  表示要绑定的函数
+- useCapture  可选参数，表示是否捕获过程
+
+```javascript
+// 获取元素
+var elem = document.getElemenyById('id');
+
+// 取消事件
+elem.removeEventListener('click', clickHandler, false);
+
+// 第二种方式。不建议使用
+elem.onclick = null;
+```
+
+#### 触发事件
+
+点击元素，按下按键均会触发 DOM 事件，当然也可以以通过代码来触发事件。
+
+```javascript
+eventTarget.dispatchEvent(type);
+
+// 获取元素
+var elem = document.getElemenyById('id');
+
+// 触发事件
+elem.dispatchEvent('click');
+```
+
+#### 浏览器兼容型
+
+以上均为 **W3C**定义的标准定义，但早期浏览器 IE8 及其以下版本，均没有采用标准的实现方式。不过这些低版本浏览器也提供了对于 DOM 事件的注册、取消以及触发的实现。
+
+**事件注册与取消**，`attchEvent/detachEvent`。**事件触发**，`fireEvent(e)`，其也**不存在**捕获阶段（Capture Phase）。
+
+
+##### 兼容低版本代码实现
+
+**注册事件**
+
+```javascript
+var addEvent = document.addEventListener ?
+  function(elem, type, listener, useCapture) {
+    elem.addEventListener(type, listener, useCapture);
+  } :
+  function(elem, type, listener, useCapture) {
+    elem.attachEvent('on' + type, listener);
+  }
+```
+
+**取消事件**
+
+```javascript
+var addEvent = document.removeElementListener ?
+  function(elem, type, listener, useCapture) {
+    elem.removeElementListener(type, listener, useCapture);
+  } :
+  function(elem, type, listener, useCapture) {
+    elem.detachEvent('on' + type, listener);
+  }
+```
+
+### 事件对象
+
+调用事件处理函数时传入的信息对象，这个对象中含有关于这个事件的详细状态和信息，它就是事件对象 `event`。其中可能包含鼠标的位置，键盘信息等。
+
+```javascript
+// 获取元素
+var elem = document.getElemenyById('id');
+
+// 事件处理函数
+var clickHandler = function(event) {
+  // statements
+};
+
+// 注册事件
+elem.addEventListener('click', clickHandler, false);
+```
+
+NOTE：在低版本 IE 中事件对象是被注册在 `window` 之上而非目标对象上。使用下面的兼容代码既可解决。
+
+```javascript
+var elem = document.getElemenyById('id');
+
+// 事件处理函数
+var clickHandler = function(event) {
+  event = event || window.event;
+  // statements
+};
+```
+
+#### 属性和方法
+
+##### 通用属性和方法
+
+**属性**
+
+- type 事件类型
+- target(srcElement IE 低版本) 事件触发节点
+- currentTarget 处理事件的节点
+
+**方法**
+
+- stopPropagation 阻止事件冒泡传播
+- preventDefault 阻止默认行为
+- stopImmediatePropagation 阻止冒泡传播
+
+###### 阻止事件传播
+
+`event.stopPropagation()`（W3C规范方法），如果在当前节点已经处理了事件，则可以阻止事件被冒泡传播至 DOM 树最顶端即 `window` 对象。
+
+`event.stopImmediatePropagation()` 此方法同上面的方法类似，除了阻止将事件冒泡传播值最高的 DOM 元素外，还会阻止在此事件后的事件的触发。
+
+`event.cancelBubble=true` 为 IE 低版本中中对于阻止冒泡传播的实现。
+
+###### 阻止默认行为
+
+默认行为是指浏览器定义的默认行为（点击一个链接的时候，链接默认就会打开。当我们双击文字的时候，文字就会被选中），比如单击链接可以打开新窗口。
+
+`Event.preventDefault()` 为 W3C 规范方法，在 IE 中的实现方法为 `Event.returnValue=false`。
+
+### 事件分类
+
+#### Event
+
+![](../img/E/event_types.jpg)
+
+|事件类型|是否冒泡|元素|默认事件|元素例子|
+|--------|--------|----|--------|--------|
+|load|NO|Window, Document, Element|None|window, image, iframe|
+|unload|NO|Window, Document, Element|None|window|
+|error|NO|Window, Element|None|window, image|
+|select|NO|Element|None|input, textarea|
+|abort|NO|Window, Element|None|window, image|
+
+##### window
+
+- load 页面全部加载完毕
+- unload 离开本页之前的卸载
+- error 页面异常
+- abort 取消加载
+
+##### image
+
+- load 图片加载完毕
+- error 图标加载错误
+- abort 取消图标加载
+
+在目标图标不能正常载入时，载入备份替代图来提供用户体验。
+
+```javascript
+
+```
+
+#### UIEvent
+
+|事件类型|是否冒泡|元素|默认事件|元素例子|
+|--------|--------|----|--------|--------|
+|resize|NO|Window, Element|None|window, iframe|
+|scroll|NO/YES|Document, Element|None|document, div|
+
+NOTE：`resize` 为改变浏览器或`iframe`的窗体大小时会触发事件，`scroll` 则会在滑动内容时触发，作用于 `Document` 则不会冒泡，作用于内部元素则会冒泡。
+
+#### MouseEvent
+
+DOM 事件中最常见的事件之一。
+
+|事件类型|是否冒泡|元素|默认事件|元素例子|
+|--------|--------|----|--------|--------|
+|click|YES|Element|focus/activation|div|
+|dbclick|YES|Element|focus/activation/select|div|
+|mousedown|YES|Element|drag/scroll/text selection|div|
+|mosuemove|YES|Element|None|div|
+|mouseout|YES|Element|None|div|
+|mouseover|YES|Element|None|div|
+|mouseup|YES|Element|context menu|div|
+|mouseenter|NO|Element|None|div|
+|mouseleave|NO|Element|None|div|
+
+NOTE：`mouseenter` 与 `mouseover` 的区别为前者在鼠标在子元素直接移动不会触发事件，而后者会触发。
+`mouseleave` 与 `mouseout` 同上相似。
+
+##### 属性
+
+- clientX, clientX
+- screenX, screenY
+- ctrlKey, shiftKey, altKey, metaKey 如果被按下则为真（true）
+- button(0, 1, 2) 鼠标的间位
+
+![](../img/M/mouse_move_event.jpg)
+
+##### MouseEvent 顺序
+
+鼠标的移动过程中会产生很多事件。事件的监察频率又浏览器决定。
+
+**例子：从元素 A 上方移动过**
+
+mousemove -> mouseover(A) -> mouseenter(A) -> mousemove(A) -> mouseout(A) -> mouseleave(A)
+
+**例子：点击元素**
+
+mousedown -> [mousemove] -> mouseup -> click
+
+###### 实例：拖动元素
+
+```html
+
+
+```
+
+```javascript
+var elem = document.getElemenyById('div0');
+var clientX, clientY, isMoving;
+var mouseDownHandler = function(event) {
+  event = event || window.event;
+  clientX = event.clientX;
+  clientY = event.clientY;
+  isMoving = true;
+}
+
+var mouseMoveHandler = function(event) {
+  if (!isMoving) return;
+  event = event || window.event;
+  var newClientX = event.clientX,
+      newClientY = event.clientY;
+  var left = parseInt(elem.style.left) || 0,
+      top = parseInt(elem.style.top) || 0;
+  elem.style.left = left + (newClientX - clientX) + 'px';
+  elem.style.top = top + (newClientY - clientY) + 'px';
+  clientX = newClientX;
+  clientY = newClientY;
+}
+
+var mouseUpHandler = function() {
+  isMoving = false;
+}
+
+addEvent(elem, 'mousedown', mouseDownHandler);
+addEvent(elem, 'mouseup', mouseUpHandler);
+addEvent(elem, 'mousemove', mouseMoveHandler);
+```
+
+#### 滚轮事件（Wheel）
+
+|事件类型|是否冒泡|元素|默认事件|元素例子|
+|--------|--------|----|--------|--------|
+|wheel|YES|Element|scroll or zoom document|div|
+
+**属性**
+
+- deltaMode 鼠标滚轮偏移量的单位
+- deltaX
+- deltaY
+- deltaZ
+
+#### FocusEvent
+
+其用于处理元素获得或失去焦点的事件。（例如输入框的可输入状态则为获得焦点，点击外部则失去焦点）
+
+|事件类型|是否冒泡|元素|默认事件|元素例子|
+|--------|--------|----|--------|--------|
+|blur|NO|Window, Element|None|window, input|
+|focus|NO|Window, Element|None|window, input|
+|focusin|NO|window, Element|None|window, input|
+|focusout|NO|window, Element|None|window, input|
+
+NOTE：`blur` 失去焦点时，`focus` 获得焦点时，`focusin` 即将获得焦点，`focusout`即将失去焦点。
+
+**属性**
+
+一个元素失去，既另一个元素获得焦点。这里的 `relatedTarget` 则为相对的那个元素。
+
+- relatedTarget
+
+#### InputEvent
+
+输入框输入内容则会触发输入事件。
+
+|事件类型|是否冒泡|元素|默认事件|元素例子|
+|--------|--------|----|--------|--------|
+|beforeInput|YES|Element|update DOM Element|input|
+|input|YES|Element|None|input|
+
+NOTE：`beforeInput` 为在按键按下后即将将输入字符显示之前生成的事件。
+
+NOTE+：IE 并没有 `InputEvent` 则需使用 `onpropertychange(IE)` 来代替。
+
+#### KeyboardEvent
+
+其用于处理键盘事件。
+
+|事件类型|是否冒泡|元素|默认事件|元素例子|
+|--------|--------|----|--------|--------|
+|keydown|YES|Element|beforeInput/input/focus/blur/activation|div, input|
+|keyup|YES|Element|None|div, input|
+
+**属性**
+
+- key 按下的键字符串
+- code
+- ctrlKey, shiftKey, altKey, metaKey
+- repeat 代表按键不松开为 true
+- keyCode
+- charCode
+- which
+
+### 事件代理
+
+事件代理是指在父节点上（可为元素最近的父节点也可为上层的其他节点）处理子元素上触发的事件，其原理是通过事件流机制而完成的。可以通过**事件对象**中获取到触发事件的对象（如下所示）。
+
+```javascript
+var elem = document.getElemenyById('id');
+elem.addEventListener('click', function(event) {
+  var e = event || window.event;
+  var target = e.target || e.srcElement;
+  // statements
+});
+```
+
+**优点**
+
+- 需要管理的事件处理函数更少
+- 内存分配更少，更高效
+- 增加与删除子节点可以不额外处理事件
+
+**缺点**
+
+- 事件管理的逻辑变的复杂（因为冒泡机制）
diff --git a/chapter3/06_animation.md b/chapter3/06_animation.md
new file mode 100644
index 0000000..bc93263
--- /dev/null
+++ b/chapter3/06_animation.md
@@ -0,0 +1,110 @@
+
+
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [JavaScript 动画](#javascript-%E5%8A%A8%E7%94%BB)
+  - [实现方式](#%E5%AE%9E%E7%8E%B0%E6%96%B9%E5%BC%8F)
+  - [JavaScript 动画三要素](#javascript-%E5%8A%A8%E7%94%BB%E4%B8%89%E8%A6%81%E7%B4%A0)
+  - [定时器](#%E5%AE%9A%E6%97%B6%E5%99%A8)
+  - [常见动画](#%E5%B8%B8%E8%A7%81%E5%8A%A8%E7%94%BB)
+  - [动画函数](#%E5%8A%A8%E7%94%BB%E5%87%BD%E6%95%B0)
+
+
+
+## JavaScript 动画
+
+**帧**，为动画的最小单位，一个静态的图像。**帧频**，每秒播放的帧的数量。一个动画是由很多帧组成的，因为人眼的暂留特性，当图片交替的速度大于每秒 30 帧以上既有动画的感觉。
+
+### 实现方式
+
+- gif 图像形式存储，容量大，需第三方制图工具制作。
+- flash 需要第三方制作工具，不推荐。
+- CSS3 实现动画具有局限性
+- JavaScript 可实现大部分上面几类可实现的动画效果
+
+### JavaScript 动画三要素
+
+![](../img/J/javascript-animation.jpg)
+
+### 定时器
+
+**setInterval**
+
+- `func` 为执行改变属性的操作
+- `delay` 为出发时间间隔（毫秒为单位）
+- `para1` 为执行时可传入改变属性函数的参数
+
+```javascript
+var intervalId = setInterval(func, delay[, param1, param2, ...]);
+clearInterval(intervalId);
+```
+
+NOTE：使用 `setInterval` 可以调用一次定时器既可实现连贯的动画。使用 `clearInterval` 即可清除动画效果。
+
+**setTimeout**
+
+- `func` 为执行改变属性的操作
+- `delay` 为出发时间间隔（毫秒为单位）默认为 0
+- `para1` 为执行时可传入改变属性函数的参数
+
+```javascript
+var timeoutId = setTimeout(func[, delay, param1, param2, ...]);
+clearTimeout(timeoutId);
+```
+
+NOTE：使用 `setTimeout` 实现动画，则需要在动画每一帧结束时再次调用定时器。但它无需清除定时器。
+
+**区别**
+
+- `setTimeout` 在延时后只执行一次，`setInterval` 则会每隔一个延时期间后会再执行。
+
+**requestAnimationFrame**
+
+类似于 `setTimeout` 但是无需设定时间间隔。此定时器为 HTML5 中的新标准，其间隔时间不由用户控制，而是由显示器的刷新频率决定。（市面上的显示器刷新频率为每秒刷新60次）
+
+**优势**
+
+- 无需设置间隔时间
+- 动画流畅度高
+
+```javascript
+var requestId = requestAnimationFrame(func);
+cancelAnimationFrame(requestId);
+```
+
+NOTE：使用它来实现动画与 `setTimeout` 类似，需要每次每帧结束时再次调用。不可设置时间间隔（系统决定），时间间隔为16.67毫秒一帧。
+
+### 常见动画
+
+大多的复杂动画都是有下列的简单动画所组成的。
+
+- 形变，改变元素的宽高
+- 位移，改变元素相对位置
+- 旋转
+- 透明度
+- 其他...
+
+### 动画函数
+
+下面的例子为以 px 为单位的动画代码
+
+```javascript
+var animation = function(ele, attr, from, to) {
+  var distance = Math.abs(to - from);
+  var stepLength = distance/100;
+  var sign = (to - from)/distance;
+  var offset = 0;
+  var step = function(){
+    var tmpOffset = offset + stepLength;
+    if (tmpOffset < distance) {
+      ele.style[attr] = from + tmpOffset * sign + 'px';
+      offset = tmpOffset;
+    } else {
+      ele.style[attr] = to + 'px';
+      clearInterval(intervalID);
+    }
+  }
+  ele.style[attr] = from + 'px';
+  var intervalID = setInterval(step, 10);
+}
+```
diff --git a/chapter3/07_canvas.md b/chapter3/07_canvas.md
new file mode 100644
index 0000000..0aab627
--- /dev/null
+++ b/chapter3/07_canvas.md
@@ -0,0 +1,100 @@
+
+
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [Canvas](#canvas)
+  - [渲染上下文对象](#%E6%B8%B2%E6%9F%93%E4%B8%8A%E4%B8%8B%E6%96%87%E5%AF%B9%E8%B1%A1)
+  - [绘图步骤](#%E7%BB%98%E5%9B%BE%E6%AD%A5%E9%AA%A4)
+
+
+
+## Canvas
+
+**Mozilla** 官方 `

	New lines	Spaces and tabs	Text wrapping
`normal`	Collapse	Collapse	Wrap
`nowrap`	Collapse	Collapse	No wrap
`pre`	Preserve	Preserve	No wrap
`pre-wrap`	Preserve	Preserve	Wrap
`pre-line`	Preserve	Collapse	Wrap

	typeof	toString	constructor	instanceof
undefined
Null
Boolean
Number
String
Object
-----------------------
Boolean Object
Number Object
String Object
Object Object
Array Object
Date Object
Error Object
Function Object
RegExp Object
-----------------------
Point Objct

图书畅销榜

动画 animation

3D 正方体组合旋转

Transform 2D

可忽略所有:after的样式

transform (translate & rotate)

translate-origin

scale

skew

Transform 3D

可以忽略所有:after的样式

rotate

perspective-origin

translate3d(x, y, z)

scale3d

改变轴的比例

rotate3d

transform-style

backface-visibility

动画 - Transition

transition

transition-property

多个动画，多个时间

inline-block + text-align

table + margin

absolute + transform

flex + justify-content

My header

My header

h1

可忽略所有`:after`的样式

可以忽略所有`:after`的样式