diff --git a/docs/css3guide/BFC.md b/docs/css3guide/BFC.md
new file mode 100644
index 0000000000000000000000000000000000000000..c6466882947818d39cc6d14918c423341a46bd6d
--- /dev/null
+++ b/docs/css3guide/BFC.md
@@ -0,0 +1,21 @@
+# BFC
+
+## 简介
+
+在解释 BFC 之前，先说一下文档流。我们常说的文档流其实分为普通流、定位流、浮动流、定位流三种。
+
+### 普通流
+
+- 元素按照其在 HTML 中的先后位置至上而下布局
+- 行内元素水平排列，直到当行被占满然后换行块级元素则会被渲染为完整的一行
+- 所有元素默认都为普通流
+
+### 浮动流
+
+-元素首先按照普通流的位置出现，然后根据浮动的方向，尽可能的向左或向右偏移。
+
+### 绝对定位
+
+- 元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响。
+
+
diff --git a/docs/css3guide/README.md b/docs/css3guide/README.md
index 21519b4bdcbd9bf3168dd8319a8b1a9ed6a32cd2..9c7c3b75a578dc3a655f1bd086a875679a6ff63a 100644
--- a/docs/css3guide/README.md
+++ b/docs/css3guide/README.md
@@ -23,7 +23,7 @@
- 阴影不触发滚动条，也不增加滚动区域的大小。
- 所以布局时可忽略阴影。
-
diff --git a/docs/guide/README.md b/docs/guide/README.md
index 605c6728caefb89eb88f5f11c626b5ef603f434d..b1197ca8895eed432f35a4260eb74cf6f89983f6 100644
--- a/docs/guide/README.md
+++ b/docs/guide/README.md
@@ -57,7 +57,7 @@ Promise1.prototype.then = function(onFulfilled, onRejected) {
TODO:
- 完成链式调用
-
diff --git a/docs/guide/prototype.md b/docs/guide/prototype.md
index 8bd6ee0947e49b98b12dae6acf91020255c62af9..0607d7cd6dc631824094ad2249cda32f183fa19f 100644
--- a/docs/guide/prototype.md
+++ b/docs/guide/prototype.md
@@ -26,3 +26,23 @@ console.log(person1.sayName === person2.sayName); //true
图 6-1 展示了 Person 构造函数，Person 的原型属性以及现有的两个实例之间的关系。
+
+```js
+function Person() {
+ this.color = "yellow";
+ this.showColor = function() {
+ return this.color;
+ };
+}
+
+var person1 = new Person();
+
+console.log(Person.prototype.constructor === Person); // 构造函数Person的默认对象的constructor // 属性
+console.log(person1.constructor === Person); //person1实例通过__proto__指向了Person的原型，所以具有了 // person1实例可以访问到constructor
+Person.prototype = {}; //把Person构造函数的原型进行了重新赋值
+
+// Person.prototype.constructor = Person;
+
+var person2 = new Person(); // person2实例通过__proto__指向了Person的原型，此时Person的原型是{}，这个空对象的 // constructor 的值不是Person了，而是Object
+console.log("person2.constructor: " + person2.constructor === Person); // false
+```
\ No newline at end of file
diff --git a/docs/guide/reduce.md b/docs/guide/reduce.md
index 659494063e0368f22b212f1aac9fd10046160feb..d28fccdd46e76a037f6bc7cecfdf3acd01fc4f09 100644
--- a/docs/guide/reduce.md
+++ b/docs/guide/reduce.md
@@ -133,10 +133,27 @@ var sum = result.reduce(function(prev, cur) {
}, 0);
console.log(sum) //60
```
+(6) 迭代获取对象中的变量值
-
+
diff --git a/docs/guide/transmitParams.md b/docs/guide/transmitParams.md
new file mode 100644
index 0000000000000000000000000000000000000000..7cf9ca390dc023e9e07983aec9f3c3871ddefb30
--- /dev/null
+++ b/docs/guide/transmitParams.md
@@ -0,0 +1,44 @@
+# 传递参数注意事项
+
+::: tip 结论
+EAMAScript 中所有函数的参数都是按值传递的，这与java中参数传递是一致性的。
+:::
+
+``` JS
+var count = 20
+var result =addTen(count);
+alert(count); // 20，没有变化
+alert(result) // 30
+
+function addTen(num) { // 存在函数声明提升，故调用可以写在声明前面
+ num+=10;
+ return num
+}
+```
+
这里的函数addTen()有一个参数num，而参数实际上是函数的局部变量。在调用这个函数时，变量count作为参数传递给函数，这个变量的值是20。于是，数值20被复制给参数num以便在addTen()中使用。在函数内部，参数num的值被加上了10，但这一变化不会影响函数外部count变量。参数num与变量count互不认识，他们仅仅是具有相同的值。假如num是按引用传递的话，那么变量count的值也将变成30，从而反应函数内部的修改。
+
+
+
下面再看两个例子：
+
+```js
+function setName(obj) {
+ obj.name='Niko'
+}
+var person = new Object();
+setName(person)
+alert(person.name) // Niko
+```
+
+```js {3,4}
+function setName(obj) {
+ obj.name='Niko'
+ obj=new object()
+ obj.name='Simple'
+}
+var person = new Object();
+setName(person)
+alert(person.name) // Niko
+```
+::: tip 结论
+总结就是基本数据类型传递的是形参，形参不影响实参；引用数据类型传递的是地址，形参在方法内被改变，实参也会改变，若在方法内实例化了同名对象，即产生了新的地址，对这个同名对象的改变，由于地址不一样，所以也不会影响原来的对象。
+:::
\ No newline at end of file
diff --git a/docs/htmlguide/README.md b/docs/htmlguide/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..60a0c3782b4d512d36746079a9b773cd7ec4ca8a
--- /dev/null
+++ b/docs/htmlguide/README.md
@@ -0,0 +1,71 @@
+# html5 新特性
+
+ (1) DOCTYPE声明
+ ==========
+
+``` html
+
+```
+
+(2)字符编码声明
+ ==========
+
+``` HTML
+
//不写的话HTML5默认也是UTF-8
+```
+
+(3)新增的语义/结构化标签 Semantic
+ ==========
+
+| 标签 | 标签 | 标签 |
+| ------------- |:-------------:| -----:|
+| heade(头部) | nav（导航） | main （主要内容）|
+| aside （侧边内容） | section （在文档中定义部分） | article （文章）|
+| figure（img和figcaption组合放在figure里） | footer （尾部，可多个） | |
+
+(4)`HTML5Shiv`垫片包
+ ==========
+是一个针对 IE 浏览器的 HTML5 JavaScript 补丁，目的是让 IE 识别并支持 HTML5 元素。
+`HTML5Shiv`包裹在``元素里，
+是一个js外部文件
+在使用HTML5新元素就可以引入它了
+
+```js
+
+// 下面是HTML的条件注释判断。只给懂的人...呸、浏览器看
+
+
+
+
+
+Famous Cities
+
+London
+London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
+
+
+
+```
+（5）新增8个的语义化标签都为块级元素
+ ==========
+
+- 语义元素转换为块元素
+- 如果像确保新老浏览器都支持，我们可以手动设置CSS样式
+``` css
+header, section, footer, aside, nav, main, article, figure {
+ display: block;
+}
+```
+
+（6）新的图形标签 SVG和canvas
+ ==========
+（7） 新的多媒体标签 audio和video
+ ==========
+（8）新的HTML5的API
+ ==========
+- HTML Geolocation 地理位置
+- HTML Drag & Drop拖放
+- HTML Local Storage 本地存储
+- HTML Web Workers web工作者
\ No newline at end of file
diff --git a/docs/httpguide/cors.md b/docs/httpguide/cors.md
new file mode 100644
index 0000000000000000000000000000000000000000..09fbef9a8ea7d0f447d043101ac8cdfb4776b66e
--- /dev/null
+++ b/docs/httpguide/cors.md
@@ -0,0 +1,145 @@
+# 跨域与同源策略
+
+跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。
+
+同源策略：同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
+
+同源策略限制以下几种行为：
+- Cookie、LocalStorage 和 IndexDB 无法读取
+- DOM 和 Js对象无法获得
+- AJAX 请求不能发送
+
+## 常见跨域场景
+
+
+
+## 跨域解决方案
+
+- 通过jsonp跨域
+- document.domain + iframe跨域
+- location.hash + iframe
+- window.name + iframe跨域
+- postMessage跨域
+- 跨域资源共享（CORS）
+- nginx代理跨域
+- nodejs中间件代理跨域
+- WebSocket协议跨域
+
+### JSONP
+通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。
+
+``` JS
+
+
+
+
+
+
+
Document
+
+
+
+
+
+
+
+```
+
🐬客户端🐬
+
+```js
+var express = require("express");
+var router = express.Router();
+
+router.get("/", async (req, res, next) => {
+ let func;
+ if (req.originalUrl.indexOf("?") !== -1) {
+ func = req.originalUrl.split("callback=")[1] + "('我真的')";
+ }
+ res.send(func);
+});
+module.exports = router;
+```
+
🐕🦺node服务端🐕🦺
+
+::: tip
+最后浏览器打印出 " 我真的 "
+:::
+
+### 跨域资源共享（CORS）
+
+普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。
+
+需注意的是：由于同源策略的限制，所读取的cookie为跨域请求接口所在域的cookie，而非当前页。如果想实现当前页cookie的写入，可参考下文：nginx反向代理中设置proxy_cookie_domain 和 NodeJs中间件代理中cookieDomainRewrite参数的设置。
+
+目前，所有浏览器都支持该功能(IE8+：IE8/9需要使用XDomainRequest对象来支持CORS）)，CORS也已经成为主流的跨域解决方案。
+
+### nginx反向代理跨域
+
+::: warning
+跨域原理： 同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不需要同源策略，也就不存在跨越问题。
+:::
+
+
+实现思路：通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录。
+
+nginx具体配置：
+
+```
+#proxy服务器
+server {
+ listen 81;
+ server_name www.domain1.com;
+
+ location / {
+ proxy_pass http://www.domain2.com:8080; #反向代理
+ proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
+ index index.html index.htm;
+
+ # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
+ add_header Access-Control-Allow-Origin http://www.domain1.com; #当前端只跨域不带cookie时，可为*
+ add_header Access-Control-Allow-Credentials true;
+ }
+}
+```
+### Nodejs中间件代理跨域
+
+node中间件实现跨域代理，原理大致与nginx相同，都是通过启一个代理服务器，实现数据的转发，也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名，实现当前域的cookie写入，方便接口登录认证。
+
+
对于vue框架：利用node + webpack + webpack-dev-server代理接口跨域。在开发环境下，由于vue渲染服务和接口代理服务都是webpack-dev-server同一个，所以页面与代理接口之间不再跨域，无须设置headers跨域信息了。
+webpack.config.js配置：
+
+```js
+module.exports = {
+ entry: {},
+ module: {},
+ ...
+ devServer: {
+ historyApiFallback: true,
+ proxy: [{
+ context: '/login',
+ target: 'http://www.domain2.com:8080', // 代理跨域目标接口
+ changeOrigin: true,
+ secure: false, // 当代理某些https服务报错时用
+ cookieDomainRewrite: 'www.domain1.com' // 可以为false，表示不修改
+ }],
+ noInfo: true
+ }
+}
+```
+
+
\ No newline at end of file
diff --git a/docs/test/test.html b/docs/test/test.html
new file mode 100644
index 0000000000000000000000000000000000000000..4308662c4af08bf61b16944faf9c785c2227d225
--- /dev/null
+++ b/docs/test/test.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
Document
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/test/test.js b/docs/test/test.js
new file mode 100644
index 0000000000000000000000000000000000000000..ce32a1bdfd702fc81ee268dcc5b5d8599ae699e3
--- /dev/null
+++ b/docs/test/test.js
@@ -0,0 +1,72 @@
+// function print() {
+// console.log(name);
+// var name = "xiaoming";
+// }
+// print();
+
+// var count = 20;
+// var result = addTen(count);
+// alert(count); // 20，没有变化
+// alert(result); // 30
+// function addTen(num) {
+// num += 10;
+// return num;
+// }
+
+// function print() {
+// var a = 1;
+// return function() {
+// return ++a;
+// };
+// }
+// let p = print();
+// console.log(p()); // 2
+// console.log(p()); // 3
+// console.log(p()); // 4
+
+// function Person() {}
+
+// Person.prototype = {
+// constructor: Person,
+// name: "sds",
+// };
+// var person1 = new Person();
+// console.log(Object.keys(Person.prototype));
+
+// console.log(person1.name);
+
+// var p = new Promise((resolve) => {
+// console.log(4);
+// resolve(5);
+// });
+// p.then((res) => {
+// console.log(res);
+// })
+// .then(() => {
+// console.log(6);
+// })
+// .then(() => {
+// console.log(7);
+// });
+
+new Promise((resolve, reject) => {
+ debugger;
+ console.log("promise1");
+ resolve();
+})
+ .then(() => {
+ console.log("then1-1");
+ new Promise((resolve, reject) => {
+ console.log("promise2");
+ resolve();
+ })
+ .then(() => {
+ console.log("then2-1");
+ })
+ .then(() => {
+ console.log("then2-2");
+ });
+ })
+ .then(() => {
+ console.log("then1-2");
+ });
diff --git a/docs/vueguide/ComputedDifWatch.md b/docs/vueguide/ComputedDifWatch.md
new file mode 100644
index 0000000000000000000000000000000000000000..b64d4a35ca773f884df25e3e793946e2a6042d0f
--- /dev/null
+++ b/docs/vueguide/ComputedDifWatch.md
@@ -0,0 +1,18 @@
+# computed 和 watch 比较
+
+
+
+- 计算属性定义必须和data中定义不一样。watch则必须一样。
+- 计算属性是基于响应式依赖进行缓存的。watch则只要值变化就触发，不管值一样不一样。
+- 不支持异步，当computed内有异步操作时无效，无法监听数据的变化。watch支持异步。
+- computed是一个属性由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed。而watch为当一个属性发生变化时，需要执行对应的操作；一对多；
+- watch支持深度监听(deep),和组件加载立即触发回调函数执行(immediate)
+
+
+
+
\ No newline at end of file
diff --git a/docs/vueguide/README.md b/docs/vueguide/README.md
index b2e0b09cf4b6e8b904fb13f360b3d6105d984018..42930a6e4281af5aafeae18b8c541388b3867366 100644
--- a/docs/vueguide/README.md
+++ b/docs/vueguide/README.md
@@ -32,7 +32,7 @@ export default {
},
};
-