前端知识点整理收集（不定时更新~）二

目录

require() 加载文件机制

线程和进程

线程

单线程

Nodejs的线程与进程

网络模型

初识 TCP 协议

三次握手

I/O

I/O 先修知识

阻塞与非阻塞 I/O

同步与异步 I/O

Git

基础命令

分支操作

修改远程仓库地址

远程分支获取最新的版本到本地

拉取远程仓库指定分支到本地

SEO优化

优化策略

SEO实战

TDK优化

页面内容优化

使用html5结构

唯一的H1标题

img设置alt属性

nofollow

正文

URL优化

URL静态化

URL规范化

robots

robots.txt

meta robots

sitemap

SEO工具

let、const、class和var的区别

js三大事件（鼠标事件、键盘事件、html事件）

鼠标事件

键盘事件

HTML事件

JS引擎的执行机制

首先,请牢记2点:

3.JS中的event loop(2)

4. 谈谈setTimeout

webpack

DOCTYPE

严格模式与混杂模式如何区分？它们有何意义？

get和post的区别

h5新特性

语义化标签

标签新属性

细说data-* dataset(IE11，火狐谷歌)

classList(火狐谷歌最新，IE10以上)

HTML5新表单

新的input类型

新的form属性

新的input属性

音频(audio)和视频(video)

支持的格式和写法

标签属性

方法

事件

事件属性

css3新特性

过渡

动画

形状转换

选择器

阴影

边框

边框图片

边框圆角

background-size

文字

换行

超出省略号

多行超出省略号

颜色

rgba

hsla

渐变

弹性布局——flex

盒模型定义

媒体查询

 伪类与伪元素

mongodb

为什么要用MongoDB

几个shell实操

Mongobd的重要模块–GridFS

GridFS存储原理

深入浅出mongoose

小程序

响应的数据绑定

页面管理

基础组件

丰富的 API

云开发

js 深拷贝 vs 浅拷贝

堆和栈的区别

对象

数组

浏览器的兼容性

Web标准以及W3C

主流浏览器的内核

 标准模式（Standards Mode）和怪异模式 （Quirks Mode）

CSS盒模型

重置浏览器样式

表现与数据分离

HTML语义化

CSS选择器优先级

清除浮动

响应式布局和自适应布局详解

响应式布局概念

响应式设计的步骤

一些注意的

rem是如何实现自适应布局的？

rem是什么？

为什么web app要使用rem？

1、实现强大的屏幕适配布局：

2.固定宽度做法

3.响应式做法

4.设置viewport进行缩放

rem能等比例适配所有屏幕

REM自适应JS

响应式与自适应的区别

 JavaScript 数据类型知识整理

javascript中有哪些数据类型

基本类型

对象类型

说说你对javascript是弱类型语言的理解?

javascript中强制类型转换是一个非常易出现bug的点，知道强制转换时候的规则吗？

ToPrimitive(转换为原始值)

toString

valueOf

强制转换

Number()

String()

Boolean()

js转换规则不同场景应用

什么时候自动转换为string类型

什么时候自动转换为Number类型

什么时候进行布尔转换

抽象相等

js中的数据类型判断

typeof

instanceof

NaN相关总结

NaN的概念

什么时候返回NaN （开篇第二道题也得到解决）

对 null 和 undefined 进行比较

奇怪的结果：null vs 0

特立独行的 undefined

规避错误

误区

toString和String的区别

---

 

require() 加载文件机制

当 Node 遇到 require(X) 时，按下面的顺序处理。

（1）如果 X 是内置模块（比如 require('http'）)
　　a. 返回该模块。
　　b. 不再继续执行。

（2）如果 X 以 "./" 或者 "/" 或者 "../" 开头
　　a. 根据 X 所在的父模块，确定 X 的绝对路径。
　　b. 将 X 当成文件，依次查找下面文件，只要其中有一个存在，就返回该文件，不再继续执行。

• X
• X.js
• X.json
• X.node

　　c. 将 X 当成目录，依次查找下面文件，只要其中有一个存在，就返回该文件，不再继续执行。

• X/package.json（main字段）
• X/index.js
• X/index.json
• X/index.node

（3）如果 X 不带路径
　　a. 根据 X 所在的父模块，确定 X 可能的安装目录。
　　b. 依次在每个目录中，将 X 当成文件名或目录名加载。

（4） 抛出 "not found"

请看一个例子。

当前脚本文件 /home/ry/projects/foo.js 执行了 require('bar') ，这属于上面的第三种情况。Node 内部运行过程如下。

首先，确定 x 的绝对路径可能是下面这些位置，依次搜索每一个目录。

/home/ry/projects/node_modules/bar
/home/ry/node_modules/bar
/home/node_modules/bar
/node_modules/bar

搜索时，Node 先将 bar 当成文件名，依次尝试加载下面这些文件，只要有一个成功就返回。

bar
bar.js
bar.json
bar.node

如果都不成功，说明 bar 可能是目录名，于是依次尝试加载下面这些文件。

bar/package.json（main字段）
bar/index.js
bar/index.json
bar/index.node

如果在所有目录中，都无法找到 bar 对应的文件或目录，就抛出一个错误。

参考：require() 源码解读

---

线程和进程

进程（Process）是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源分配和调度的基本单位，是操作系统结构的基础，进程是线程的容器（来自百科）。我们启动一个服务、运行一个实例，就是开一个服务进程，例如Node.js 里通过 node app.js 开启一个服务进程，多进程就是进程的复制（fork），fork 出来的每个进程都拥有自己的独立空间地址、数据栈，一个进程无法访问另外一个进程里定义的变量、数据结构，只有建立了 IPC 通信，进程之间才可数据共享。

关于进程通过一个简单的 Node.js Demo 来验证下，执行以下代码 node process.js，开启一个服务进程

// process.js
const http = require('http');

http.createServer().listen(3000, () => {
    process.title = '测试进程 Node.js' // 进程进行命名
    console.log(`process.pid: `, process.pid); // process.pid: 20279
});

线程

线程是操作系统能够进行运算调度的最小单位，首先我们要清楚线程是隶属于进程的，被包含于进程之中。一个线程只能隶属于一个进程，但是一个进程是可以拥有多个线程的。

同一块代码，可以根据系统CPU核心数启动多个进程，每个进程都有属于自己的独立运行空间，进程之间是不相互影响的。同一进程中的多条线程将共享该进程中的全部系统资源，如虚拟地址空间，文件描述符和信号处理等。但同一进程中的多个线程有各自的调用栈（call stack），自己的寄存器环境（register context），自己的线程本地存储（thread-local storage)，线程又有单线程和多线程之分，具有代表性的 JavaScript、Java 语言。

单线程

单线程就是一个进程只开一个线程

Javascript 就是属于单线程，程序顺序执行，可以想象一下队列，前面一个执行完之后，后面才可以执行，当你在使用单线程语言编码时切勿有过多耗时的同步操作，否则线程会造成阻塞，导致后续响应无法处理。你如果采用 Javascript 进行编码时候，请尽可能的使用异步操作。

单线程使用总结

• Node.js 虽然是单线程模型，但是其基于事件驱动、异步非阻塞模式，可以应用于高并发场景，避免了线程创建、线程之间上下文切换所产生的资源开销。
• 如果你有需要大量计算，CPU 耗时的操作，开发时候要注意。

Nodejs的线程与进程

Node.js 是 Javascript 在服务端的运行环境，构建在 chrome 的 V8 引擎之上，基于事件驱动、非阻塞I/O模型，充分利用操作系统提供的异步 I/O 进行多任务的执行，适合于 I/O 密集型的应用场景，因为异步，程序无需阻塞等待结果返回，而是基于回调通知的机制，原本同步模式等待的时间，则可以用来处理其它任务，在 Web 服务器方面，著名的 Nginx 也是采用此模式（事件驱动），Nginx 采用 C 语言进行编写，主要用来做高性能的 Web 服务器，不适合做业务。Web业务开发中，如果你有高并发应用场景那么 Node.js 会是你不错的选择。

Process

Node.js 中的进程 Process 是一个全局对象，无需 require 直接使用，给我们提供了当前进程中的相关信息。官方文档提供了详细的说明，感兴趣的可以亲自实践下 Process 文档。

• process.env：环境变量，例如通过 process.env.NODE_ENV 获取不同环境项目配置信息
• process.nextTick：这个在谈及 Event Loop 时经常为会提到
• process.pid：获取当前进程id
• process.ppid：当前进程对应的父进程
• process.cwd()：获取当前进程工作目录
• process.platform：获取当前进程运行的操作系统平台
• process.uptime()：当前进程已运行时间，例如：pm2 守护进程的 uptime 值
• 进程事件：process.on('uncaughtException', cb) 捕获异常信息、process.on('exit', cb）进程推出监听
• 三个标准流：process.stdout 标准输出、process.stdin 标准输入、process.stderr 标准错误输出

关于 Node.js 进程的几点总结

• Javascript 是单线程，但是做为宿主环境的 Node.js 并非是单线程的。
• 由于单线程原故，一些复杂的、消耗 CPU 资源的任务建议不要交给 Node.js 来处理，当你的业务需要一些大量计算、视频编码解码等 CPU 密集型的任务，可以采用 C 语言。
• Node.js 和 Nginx 均采用事件驱动方式，避免了多线程的线程创建、线程上下文切换的开销。如果你的业务大多是基于 I/O 操作，那么你可以选择 Node.js 来开发。

---

网络模型

大多数同学对于 HTTP、HTTPS 会很熟悉，通常用于浏览器与服务端交互，或者服务端与服务端的交互，另外两个 Net 与 Dgram 也许会相对陌生，这两个是基于网络模型的传输层来实现的，分别对应于 TCP、UDP 协议，下面一图看明白 OSI 七层模型 与 TCP/IP 五层模型之间的关系，中间使用虚线标注了传输层，对于上层应用层（HTTP/HTTPS等）也都是基于这一层的 TCP 协议来实现的，所以想使用 Node.js 做服务端开发，Net 模块也是你必须要掌握的，这也是我们本篇要讲解的重点。

初识 TCP 协议

TCP 是传输控制协议，大多数情况下我们都会使用这个协议，因为它是一个更可靠的数据传输协议，具有如下三个特点：

• 面向链接: 需要对方主机在线，并建立链接。
• 面向字节流: 你给我一堆字节流的数据，我给你发送出去，但是每次发送多少是我说了算，每次选出一段字节发送的时候，都会带上一个序号，这个序号就是发送的这段字节中编号最小的字节的编号。
• 可靠: 保证数据有序的到达对方主机，每发送一个数据就会期待收到对方的回复，如果在指定时间内收到了对方的回复，就确认为数据到达，如果超过一定时间没收到对方回复，就认为对方没收到，在重新发送一遍。

三次握手

上面三个特点说到 TCP 是面向链接和可靠的，其一个显著特征是在传输之前会有一个 3 次握手，实现过程如下所示：

 

在一次 TCP 三次握手的过程中，客户端与服务端会分别提供一个套接字来形成一个链接。之后客户端与服务端通过这个链接来互相发送数据。

先清楚一个概念http请求与tcp链接之间的关系，在客户端向服务端请求和返回的过程中，是需要去创建一个TCP connection，因为http是不存在链接这样一个概念的，它只有请求和响应这样一个概念，请求和响应都是一个数据包，中间要通过一个传输通道，这个传输通道就是在TCP里面创建了一个从客户端发起和服务端接收的一个链接，TCP链接在创建的时候是有一个三次握手(三次网络传输)这样一个消耗在的。

 

第一次握手: 建立连接，客户端A发送SYN=1、随机产生Seq=client_isn的数据包到服务器B，等待服务器确认。

第二次握手: 服务器B收到请求后确认联机(可以接受数据)，发起第二次握手请求，ACK=(A的Seq+1)、SYN=1，随机产生Seq=client_isn的数据包到A。

第三次握手: A收到后检查ACK是否正确，若正确，A会在发送确认包ACK=服务器B的Seq+1、ACK=1，服务器B收到后确认Seq值与ACK值，若正确，则建立连接。

TCP标示:

1. SYN(synchronous建立联机)
2. ACK(acknowledgement 确认)
3. Sequence number(顺序号码)

总结： 

至于为什么要经过三次握手呢，是为了防止服务端开启一些无用的链接，保证双方的有效率传输。网络传输是有延时的，中间可能隔着非常远的距离，通过光纤或者中间代理服务器等，客户端发送一个请求，服务端收到之后如果直接创建一个链接，返回内容给到客户端，因为网络传输原因，这个数据包丢失了，客户端就一直接收不到服务器返回的这个数据，超过了客户端设置的时间就关闭了，那么这时候服务端是不知道的，它的端口就会开着等待客户端发送实际的请求数据，服务这个开销也就浪费掉了。只有经过三次握手，才能确定双方的收、发功能都是正常的，那么彼此之间的通讯也就得到保障了，也就不存在上面的开销浪费了。

---

I/O

I/O 是 Input/Ouput 的缩写，即输入输出端口，是信息处理系统（例如计算机）与外部世界（可能是人类或另一信息处理系统）之间的通信。输入是系统接收的信号或数据，输出则是从其发送的信号或数据。

I/O 先修知识

I/O 也是一个很宽泛的词，每个设备都会有一个专用的 I/O 地址，用来处理自己的输入输出信息。对于服务端研发的童鞋相信 网络 I/O、磁盘 I/O 这些词，也需并不陌生，一次 API 接口调用、向磁盘写入日志信息，其实就是在跟 I/O 打交道。一次 I/O 操作分为等待资源、使用资源两个阶段，以下分别进行介绍。

阻塞与非阻塞 I/O

阻塞与非阻塞 I/O 是对于操作系统内核而言的，发生在等待资源阶段，根据发起 I/O 请求是否阻塞来判断。

阻塞 I/O：这种模式下一个用户进程在发起一个 I/O 操作之后，只有收到响应或者超时才可进行处理其它事情，否则 I/O 将会一直阻塞。以读取磁盘上的一段文件为例，系统内核在完成磁盘寻道、读取数据、复制数据到内存中之后，这个调用才算完成。阻塞的这段时间对 CPU 资源是浪费的。 非阻塞 I/O：这种模式下一个用户进程发起一个 I/O 操作之后，如果数据没有就绪，会立刻返回（标志数据资源不可用），此时 CPU 时间片可以用来做一些其它事情。

同步与异步 I/O

同步与异步 I/O 发生在使用资源阶段，根据实际 I/O 操作来判断。

同步 I/O：应用发送或接收数据后，如果不返回，继续等待（此处发生阻塞），直到数据成功或失败返回。 异步 I/O：应用发送或接收数据后立刻返回，数据写入 OS 缓存，由 OS 完成数据发送或接收，并返回成功或失败的信息给应用。Node.js 就是典型的异步编程例子。

OSI 七层模型与网际网协议族图

可以看到这里以传输层做了边界划分，传输层之上为用户空间（Web 客户端、浏览器、FTP 这些都属于上三层），下四层为内核空间，例如传输层的 TCP、UDP 协议就对应到了内核空间。

---

Git

Git 当下最流行的版本管理工具

基础命令

• git init 初始化本地仓库
• git add -A . 来一次添加所有改变的文件
• git add -A 表示添加所有内容
• git add . 表示添加新文件和编辑过的文件不包括删除的文件
• git add -u 表示添加编辑或者删除的文件，不包括新添加的文件
• git commit -m '版本信息' 提交的版本信息描述
• git status 查看状态
• git push -u origin master 推送到远程仓库看
• git pull 拉取远程仓库代码到本地
• git branch -av 查看每个分支的最新提交记录
• git branch -vv 查看每个分支属于哪个远程仓库
• git reset --hard a3f40baadd5fea57b1b40f23f9a54a644eebd52e 代码回归到某个提交记录

分支操作

• 查看本地都有哪些分支 git branch -a
• 新建分支 git branch dev
• 查看当前分支 git branch
• 切换分支 git checkout dev
• 删除本地分支 git branch -d dev
• 同步删除远程分支 git push origin :dev

修改远程仓库地址

• 方法1，先删后加:
  • git remote rm origin 先删除
  • git remote add origin 仓库地址 链接到到远程git仓库
• 方法2，修改命令:
  • git remote set-url origin 仓库地址

远程分支获取最新的版本到本地

• 执行git pull命令

• 如果以上命令还是失败尝试以下步骤：

  1. 首先从远程的origin的master主分支下载最新的版本到origin/master分支上

     git fetch origin master

  2. 比较本地的master分支和origin/master分支的差别

     git log -p master..origin/master

  3. 进行合并

     git merge origin/master

拉取远程仓库指定分支到本地

• 首先要与origin master建立连接：git remote add origin [email protected]:XXXX/nothing2.git

• 切换到其中某个子分支：git checkout -b dev origin/dev

• 可能会报这种错误:

fatal: Cannot update paths and switch to branch 'dev' at the same time.
Did you intend to checkout 'origin/dev' which can not be resolved as commit?

• 原因是你本地并没有dev这个分支，这时你可以用 git branch -a 命令来查看本地是否具有dev分支

• 我们需要：git fetch origin dev 命令来把远程分支拉到本地

• 然后使用：git checkout -b dev origin/dev 在本地创建分支dev并切换到该分支

• 最后使用：git pull origin dev 就可以把某个分支上的内容都拉取到本地了

---

SEO优化

SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。

优化策略

1.主题要明确，内容要丰富

在设计制作网站之前，要清晰设定网络的主题、用途和内容，网站主题须明确突出，内容丰富饱满，以符合用户体验为原则。对于一个网站来说，优化网站的主题与实际内容才是最为重要的。一个网站需要有鲜明的主题，丰富的与主题相关的内容，专注于某些领域的变化的，及时更新。

2.引出链接要人气化

搜索引擎判断网站的好坏的一个标准是外部链接的多少以及所链接的网站质量。创建有人气化的、有意义的引出链接，提高链接广泛度，既能提高在搜索引擎的排名，同时也可以起到互相宣传的作用。

3.关键词设定要突出

网站的关键词非常重要，它决定网站是否能被用户搜索到，因此在关键词的选择上要特意注意。关键词的选择必须突出，遵循一定的原则，如：关键词要与网站主题相关，不要一味的追求热门词汇；避免使用含义很广的一般性词汇；根据产品的种类及特性，尽可能选取具体的词；选取人们在使用搜索引擎时常用到与网站所需推广的产品及服务相关的词。5至10个关键词数量是比较适中的，密度可为2%—8%。要重视在标题(Page Title)、段落标题(Heading)这两个网页中最重要最显眼的位置体现关键词，还须在网页内容、图片的alt属性、META标签等网页描述上均可不同的程度设置突出关键词。

4.网站架构层次要清晰

网站结构上尽量避免采用框架结构，导航条尽量不使用FLASH按钮。首先要重视网站首页的设计，因为网站的首页被搜索引擎检测到的概率要比其他网页大得多。通常要将网站的首页文件放在网站的根目录下，因为根目录下的检索速度最快。其次要注意网站的层次(即子目录)不宜太多，一级目录不超过两个层次，详细目录也不要超过四个层次。最后，网站的导航尽量使用纯文字进行导航，因为文本要比图片表达的信息更多。

5.页面容量要合理化

网页分为静态网页与动态网页两种，动态网页即具有交互功能的网页，也就是通过数据库搜索返回数据，这样搜索引擎在搜索时所费的时间较长，而且一旦数据库中的内容更新，搜索引擎抓取的数据也不再准确，所以搜索引擎很少收录动态网页，排名结果也不好。而静态网页不具备交互功能，即单纯的信息介绍，搜索引擎搜索时所费时间短，而且准确，所以愿意收录，排名结果比较好。所以网站要尽量使用静态网页，减少使用动态网页。网页容量越小显示速度越快，对搜索引擎蜘蛛程序的友好度越高，因而在制作网页的时候要尽量精简HTML代码，通常网页容量不超过15kB。网页中的Java.script和CSS尽可能和网页分离。应该鼓励遵循W3C的规范使用，更规范的XHTML和XML作为显示格式。

6.网站导航要清晰化

搜素引擎是通过专有的蜘蛛程序来查找出每一个网页上的HTML代码，当网页上有链接时就逐个搜索，直到没有指向任何页面的链接。蜘蛛程序需要访问完所有的页面需要花费很长的时间，所以网站的导航需要便于蜘蛛程序进行索引收录。可根据自己的网站结构，制作网站地图simemap.html，在网页地图中列出网站所有子栏目的链接，并将网站中所有的文件放在网站的根目录下。网站地图可增加搜索引擎友好度，可让蜘蛛程序快速访问整个站点上的所有网页和栏目。

7.网站发布要更新

为了更好的实现与搜索引擎对话，将经过优化的企业网站主动提交到各搜索引擎，让其免费收录，争取较好的自然排名。一个网站如果能够进行有规律的更新，那么搜索引擎更容易收录。因而合理的更新网站也是搜索引擎优化的一个重要方法。 [1] 

SEO实战

TDK优化

TDK为title,description,keywords三个的统称。当然title是最有用的，是非常值得优化的；而keywords因为以前被seo人员过度使用，所以现在对这个进行优化对搜索引擎是没用的，这里就不说了；description的描述会直接显示在搜索的介绍中，所以对用户的判断是否点击还是非常有效的

页面内容优化

使用html5结构

如果条件允许（如移动端，兼容ie9+，如果ie8+就针对ie8引入html5.js吧），是时候开始考虑使用html5语义化标签。如header,footer,section,aside,nav,article等，这里我们截图看一个整体布局

更多html5语义化标签请参考：All HTML5 Tags

唯一的H1标题

每个页面都应该有个唯一的h1标题，但不是每个页面的h1标题都是站点名称。（但html5中h1标题是可以多次出现的，每个具有结构大纲的标签都可以拥有自己独立的h1标题，如header,footer,section,aside,article）

首页的h1标题为站点名称，内页的h1标题为各个内页的标题，如分类页用分类的名字，详细页用详细页标题作为h1标题

腾讯课堂

前端开发在线培训视频教程

html5+CSS3

img设置alt属性

img必须设置alt属性，如果宽度和高度固定请同时设置固定的值

nofollow

对不需要跟踪爬行的链接，设置nofollow。可用在博客评论、论坛帖子、社会化网站、留言板等地方，也可用于广告链接，还可用于隐私政策，用户条款，登录等。如下代码表示该链接不需要跟踪爬行，可以阻止蜘蛛爬行及传递权重。

no follow 链接

正文

内容方面考虑：

• 自然写作
• 高质量原创内容
• 吸引阅读的写作手法
• 突出卖点
• 增强信任感
• 引导进一步行为

用户体验方面考虑：

• 排版合理、清晰、美观、字体、背景易于阅读
• 实质内容处在页面最重要位置，用户一眼就能看到
• 实质内容与广告能够清晰区分
• 第一屏就有实质内容，而不是需要下拉页面才能看到
• 广告数量不宜过多，位置不应该妨碍用户阅读
• 如果图片、视频有利于用户理解页面内容，尽量制作图片、视频等
• 避免过多弹窗

URL优化

URL设计原则：

• 越短越好
• 避免太多参数
• 目录层次尽量少
• 文件及目录名具描述性
• URL中包括关键词(中文除外)
• 字母全部小写
• 连词符使用-而不是_
• 目录形式而非文件形式

URL静态化

以现在搜索引擎的爬行能力是可以不用做静态化的，但是从收录难易度，用户体验及社会化分享，静态简短的URL都是更有利的。

具体讨论可参考：URL静态化还是不静态化？

URL规范化

1、统一连接

http://www.domainname.com
http://domainname.com
http://www.domainname.com/index.html
http://domainname.com/index.html

以上四个其实都是首页，虽然不会给访客造成什么麻烦，但对于搜索引擎来说就是四条网址，并且内容相同，很可能会被误认为是作弊手段，而且当搜索引擎要规范化网址时，需要从这些选择当中挑一个最好的代表，但是挑的这个不一定是你想要的。所以最好自己就规范好。

2、301跳转

第一种是URL发生改变，一定要把旧的地址301指向新的，不然之前做的一些收录权重什么的全白搭了。

第二种是一些cms系统，极有可能会造成多个路径对应同一篇文章。如drupal默认的路径是以node/nid，但是如果启用了path token，就可以自己自定义路径。这样一来就有两条路径对应同一篇文章。所以可以启用301，最终转向一个路径。

3、canonical

这个标签表示页面的唯一性（这个标签以前百度不支持，现在支持），用在平时参数传递的时候，如：

//:ke.qq.com/download/app.html
//:ke.qq.com/download/app.html?from=123
//:ke.qq.com/download/app.html?from=456

以上三个表示三个页面，但其实后两个只是想表明从哪来的而已，所以为了确保这三个为同一个页面，我们在head上加上canonical标签。

robots

robots.txt

搜索引擎蜘蛛访问网站时会第一个访问robots.txt文件，robots.txt用于指导搜索引擎蜘蛛禁止抓取网站某些内容或只允许抓取那些内容，放在站点根目录。

以腾讯课堂的robots.txt为例：

• User-agent 表示以下规则适用哪个蜘蛛，*表示所有
• #表示注释
• Disallow 表示禁止抓取的文件或目录，必须每个一行，分开写
• Allow 表示允许抓取的文件或目录，必须每个一行，分开写
• Sitemap 表示站点XML地图，注意S大写

下面表示禁止所有搜索引擎蜘蛛抓取任何内容

User-agent: *
Disallow: /

下面表示允许所有搜索引擎蜘蛛抓取任何内容

User-agent: *
Disallow:

注意：被robots禁止抓取的URL还是可能被索引并出现在搜索结果中的。只要有导入链接指向这个URL，搜索引擎就知道这个URL的存在，虽然不会抓取页面内容，但是索引库还是有这个URL的信息。以淘宝为例：

禁止百度搜索引擎抓取

百度搜索有显示

更多关于robots.txt请参考：如何使用robots.txt及其详解

meta robots

如果要想URL完全不出现在搜索结果中，则需设置meta robots

上面代码表示：禁止所有搜索引擎索引本页，禁止跟踪本页上的链接。

当然还有其他类型的content，不过各个浏览器支持情况不同，所以这里忽略。

sitemap

站点地图格式分为HTML和XML两种。

HTML版本的是普通的HTML页面sitemap.html，用户可以直接访问，可以列出站点的所有主要链接，建议不超过100条。

XML版本的站点地图是google在2005年提出的，由XML标签组成，编码为utf-8，罗列页面所有的URL。其格式如下：

  
  //ke.qq.com
  2015-12-28
  always
  1.0
  
  ...

其中urlset,url,loc三个为必须标签，lastmod,changefreq,priority为可选标签。

lastmod表示页面最后一次更新时间。

changefreq表示文件更新频率，有以下几种取值：always, hourly, daily, weekly, monthly, yearly, never。其中always表示一直变动，每次访问页面内容都不同；而never表示从来不变。

priority表示URL相对重要程度，取值范围为0.0-1.0，1.0表示最重要，一般用在网站首页，对应的0.0就是最不重要的，默认重要程度为0.5。（注意这里的重要度是我们标记的，并不代表搜索引擎真的就完全按照我们设置的重要度来排列）

sitemap.xml不能超过10M，而且每个sitemap文件中url的条数不要超过5万条，当你的sitemap文件很大的时候，可以分解为多个文件。如下分为两条，一条为基础，一条为产品详细页。

  //ke.qq.com/sitemap-basic.xml2015-12-28T02:10Z
  //ke.qq.com/sitemap-product.xml2015-12-28T02:10Z

SEO工具

• 百度搜索风云榜
• 百度指数
• 百度站长平台
• meta seo inspector，检查标签的，谷歌插件
• seo in china，百度收录的各种数据，谷歌插件
• check my links，检查链接，谷歌插件
• seo quake，统计各种数据，谷歌插件

最后，本文参考百度搜索引擎优化指南2.0 和zac著作《SEO实战密码》（对SEO感兴趣的同学，可以买本看看）。

参考：SEO优化实战

---

let、const、class和var的区别

顶层对象（浏览器环境指 window、Node.js 环境指 Global）的属性和全局变量属性的赋值是相等价的，

• 使用 var 和 function 声明的是顶层对象的属性，而 let 就属于 ES6 规范了，但是 ES6 规范中 let、const、class 这些声明的全局变量，不再属于顶层对象的属性。
• let声明的变量是块级作用域（所在花括号里），var是函数作用域和全局作用域
• 从代码的写法上，let不能声明同名的变量，var可以。

• var声明变量存在变量提升，let和const不存在变量提升

    let a = '22' ;
    (function (){
        const a = '11'
    })()// 这里成了一个私有作用域，所以可以
    //如果这里出现const a = '11';// 则会报错！const不允许重名变量
    console.log(a,'a') //22

---

js三大事件（鼠标事件、键盘事件、html事件）

鼠标事件

• click：单击
• dblclick：双击
• mousedown：鼠标按下
• mouseup：鼠标抬起
• mouseover：鼠标悬浮
• mouseout：鼠标离开
• mousemove：鼠标移动
• mouseenter：鼠标进入
• mouseleave：鼠标离开

键盘事件

• keydown：按键按下
• keyup：按键抬起
• keypress：按键按下抬起

HTML事件

• load：文档加载完成
• select：被选中的时候
• change：内容被改变
• focus：得到光标
• resize：窗口尺寸变化
• scroll：滚动条移动

---

JS引擎的执行机制

首先,请牢记2点:

(1) JS是单线程语言

(2) JS的Event Loop是JS的执行机制。深入了解JS的执行,就等于深入了解JS里的event loop

例1,观察它的执行顺序

    console.log(1)
    
    setTimeout(function(){
        console.log(2)
    },0)

    console.log(3)
    

运行结果是: 1 3 2

也就是说,setTimeout里的函数并没有立即执行,而是延迟了一段时间,满足一定条件后,才去执行的,这类代码,我们叫异步代码。

所以,这里我们首先知道了JS里的一种分类方式,就是将任务分为: 同步任务和异步任务

按照这种分类方式:JS的执行机制是

• 首先判断JS是同步还是异步,同步就进入主线程,异步就进入event table
• 异步任务在event table中注册函数,当满足触发条件后,被推入event queue
• 同步任务进入主线程后一直执行,直到主线程空闲时,才会去event queue中查看是否有可执行的异步任务,如果有就推入主线程中

以上三步循环执行,这就是event loop

所以上面的例子,你是否可以描述它的执行顺序了呢?

console.log(1) 是同步任务,放入主线程里
setTimeout() 是异步任务,被放入event table, 0秒之后被推入event queue里
console.log(3 是同步任务,放到主线程里

当 1、 3在控制条被打印后,主线程去event queue(事件队列)里查看是否有可执行的函数,执行setTimeout里的函数

3.JS中的event loop(2)

所以,上面关于event loop就是我对JS执行机制的理解,直到我遇到了下面这段代码

例2:

 setTimeout(function(){
     console.log('定时器开始啦')
 });
 
 new Promise(function(resolve){
     console.log('马上执行for循环啦');
     for(var i = 0; i < 10000; i++){
         i == 99 && resolve();
     }
 }).then(function(){
     console.log('执行then函数啦')
 });
 
 console.log('代码执行结束');
    

尝试按照,上文我们刚学到的JS执行机制去分析

setTimeout 是异步任务,被放到event table

new Promise 是同步任务,被放到主线程里,直接执行打印 console.log('马上执行for循环啦')

.then里的函数是 异步任务,被放到event table

 console.log('代码执行结束')是同步代码,被放到主线程里,直接执行
 

所以,结果是 【马上执行for循环啦 --- 代码执行结束 --- 定时器开始啦 --- 执行then函数啦】吗?

亲自执行后,结果居然不是这样,而是【马上执行for循环啦 --- 代码执行结束 --- 执行then函数啦 --- 定时器开始啦】

那么,难道是异步任务的执行顺序,不是前后顺序,而是另有规定? 事实上,按照异步和同步的划分方式,并不准确。

而准确的划分方式是:

• macro-task(宏任务)：包括整体代码script，setTimeout，setInterval
• micro-task(微任务)：Promise，process.nextTick

按照这种分类方式:JS的执行机制是

• 执行一个宏任务,过程中如果遇到微任务,就将其放到微任务的【事件队列】里
• 当前宏任务执行完成后,会查看微任务的【事件队列】,并将里面全部的微任务依次执行完

重复以上2步骤,结合event loop(1) event loop(2) ,就是更为准确的JS执行机制了。

尝试按照刚学的执行机制,去分析例2:

首先执行script下的宏任务,遇到setTimeout,将其放到宏任务的【队列】里

遇到 new Promise直接执行,打印"马上执行for循环啦"

遇到then方法,是微任务,将其放到微任务的【队列里】

打印 "代码执行结束"

本轮宏任务执行完毕,查看本轮的微任务,发现有一个then方法里的函数, 打印"执行then函数啦"

到此,本轮的event loop 全部完成。


下一轮的循环里,先执行一个宏任务,发现宏任务的【队列】里有一个 setTimeout里的函数,执行打印"定时器开始啦"

所以最后的执行顺序是【马上执行for循环啦 --- 代码执行结束 --- 执行then函数啦 --- 定时器开始啦】

4. 谈谈setTimeout

这段setTimeout代码什么意思? 我们一般说: 3秒后,会执行setTimeout里的那个函数

 setTimeout(function(){
    console.log('执行了')
 },3000)    

但是这种说并不严谨,准确的解释是: 3秒后,setTimeout里的函数被会推入event queue,而event queue(事件队列)里的任务,只有在主线程空闲时才会执行。

所以只有满足 (1)3秒后 (2)主线程空闲,同时满足时,才会3秒后执行该函数

如果主线程执行内容很多,执行时间超过3秒,比如执行了10秒,那么这个函数只能10秒后执行了

---

webpack

什么是Webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言或者高级语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

为什要使用WebPack

今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法

a:模块化，让我们可以把复杂的程序细化为小的文件;

b:类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；

c:scss，less等CSS预处理器

.........

这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求

Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

参考：入门Webpack，看这篇就够了

---

DOCTYPE

DOCTYPE全称Document Type Declaration（文档类型声明，缩写DTD）

DTD的声明影响浏览器对于CSS代码及Javascript脚本的解析。

声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。

严格模式与混杂模式如何区分？它们有何意义？

严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。
混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。

如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。
1、如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。（严格 DTD ——严格模式） 
2、包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式） 
3、DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。（DTD不存在或者格式不正确——混杂模式）
4、HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）

意义：严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

用JS判断浏览器当前的模式：

• document.compatMode=='CSS1Compat'?'标准模式':'混杂模式';
• IE、Firefox、Opera、Sarari和Chrome都实现了这个属性；

IE8的特殊情况：

IE8又为document对象引入了一个名为documentMode新属性，这是因为IE8有3种不同的呈现模式，这个属性的值如果是5，则表示混杂模式（即IE5模式）；如果是7，则表示IE7仿真模式；如果是8，则表示IE8标准模式。

参考：Doctype作用？严格模式与混杂模式如何区分？它们有何差异？

---

get和post的区别

• 最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。
• get只能传输少量数据（url长度限制），而post可传输的数据容量会更大
• GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。

但是，最底层的区别是：GET产生一个TCP数据包；POST产生两个TCP数据包。

GET和POST是什么？HTTP协议中的两种发送请求的方法。

HTTP是什么？HTTP是基于TCP/IP的关于数据如何在万维网中如何通信的协议。

HTTP的底层是TCP/IP。所以GET和POST的底层也是TCP/IP，也就是说，GET/POST都是TCP链接。GET和POST能做的事情是一样一样的。你要给GET加上request body，给POST带上url参数，技术上是完全行的通的。 

对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）

而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

也就是说，GET只需要汽车跑一趟就把货送到了，而POST得跑两趟，第一趟，先去和服务器打个招呼“嗨，我等下要送一批货来，你们打开门迎接我”，然后再回头把货送过去。

因为POST需要两步，时间上消耗的要多一点，看起来GET比POST更有效。因此Yahoo团队有推荐用GET替换POST来优化网站性能。但这是一个坑！跳入需谨慎。为什么？

1. GET与POST都有自己的语义，不能随便混用。

2. 据研究，在网络环境好的情况下，发一次包的时间和发两次包的时间差别基本可以无视。而在网络环境差的情况下，两次包的TCP在验证数据包完整性上，有非常大的优点。

3. 并不是所有浏览器都会在POST中发送两次包，Firefox就只发送一次。

参考：GET和POST两种基本请求方法的区别

---

h5新特性

语义化标签

用最恰当的HTML元素标记的内容。

优点：

1. 提升可访问性
2. SEO
3. 结构清晰，利于维护

通用容器:

1. div 块级通用容器
2. span 短语内容无语义容器

：简短、描述性、唯一（提升搜索引擎排名）。

搜索引擎会将title作为判断页面主要内容的指标，有效的title应该包含几个与页面内容密切相关的关键字，建议将title核心内容放在前60个字符中。

：h1~h6分级标题，用于创建页面信息的层级关系。

对于搜索引擎而言，如果标题与搜索词匹配，这些标题就会被赋予很高的权重，尤其是h1

：页眉通常包括网站标志、主导航、全站链接以及搜索框。

也适合对页面内部一组介绍性或导航性内容进行标记。

：标记导航，仅对文档中重要的链接群使用。

Html5规范不推荐对辅助性页脚链接使用nav，除非页脚再次显示顶级全局导航、或者包含招聘信息等重要链接。

：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。

：表示文档、页面、应用或一个独立的容器。

article可以嵌套article，只要里面的article与外面的是部分与整体的关系。

：具有相似主图的一组内容，比如网站的主页可以分成介绍、新闻条目、联系信息等条块。

如果只是为了添加样式，请用div

：指定附注栏，包括引述、侧栏、指向文章的一组链接、广告、友情链接、相关产品列表等。

如果放在main内，应该与所在内容密切相关。

：页脚，只有当父级是body时，才是整个页面的页脚。

：指定细则，输入免责声明、注解、署名、版权。

只适用于短语，不要用来不标记“使用条款”，“隐私政策”等长的法律声明。
不单纯的样式标签（有意义的，对搜索引擎抓取有强调意义 strong > em > cite）

：表示内容重要性。

：标记内容着重点（大量用于提升段落文本语义）（斜体）

：指明引用或者参考，如图书的标题，歌曲、电影、等的名称，演唱会、音乐会、规范、报纸、或法律文件等。（斜体）

：突出显示文本（黄色背景颜色），提醒读者

：创建图（默认有40px左右margin）

：figure的标题，必须是figure内嵌的第一个或者最后一个元素。

：引述文本，默认新的一行显示。

：标记事件。datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。（不再相关的时间用s标签）

：解释缩写词。使用title属性可提供全称，只在第一次出现时使用就可以了

：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。

：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）表示一个具体的地址，字体为斜体，会自动换行

：移除的内容。 ：添加的内容。

少有的既可以包围块级，又可以包围短语内容的元素。

：标记代码。包含示例代码或者文件名 （< < > >）

：预格式化文本。保留文本固有的换行和空格。

：表示分数的值或者已知范围的测量结果。如投票结果。

例如：20%completed

：完成进度。可通过js动态更新value。

标签新属性

细说data-* dataset(IE11，火狐谷歌)

在HTML5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放。通过dataset来获取这些数据。这里的data-前缀就被称为data属性，其可以通过脚本进行定义，也可以应用CSS属性选择器进行样式设置。数量不受限制，在控制和渲染数据的时候提供了非常强大的控制。

一个实例教你如何使用data dataset

例如我们要在一个文字按钮上存放相对应的id

下面是元素应用data属性的一个例子：

¥20.12
// 要想获取某个属性的值，可以像下面这样使用dataset对象：
var food = document.getElementById('food'); 
var typeOfDrink = food.dataset.drink;

classList(火狐谷歌最新，IE10以上)

• obj.classList.add() 添加class类
• obj.classList.remove() 移出class类
• obj.classList.contains() 判断是否包含指定class类
• obj.classList.toggle() 切换class类
• obj.classList.length 获取class类的个数

HTML5新表单

新的input类型

email

email 类型用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。

E-mail: 

url

url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。

Homepage: 

number

number 类型用于应该包含数值的输入域。您还能够设定对所接受的数字的限定：

Points: 

range

range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。您还能够设定对所接受的数字的限定：

search

search 类型用于搜索域，比如站点搜索或 Google 搜索。search 域显示为常规的文本域。

新的form属性

autocomplete

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
注释：autocomplete 适用于 
 标签，以及以下类型的  标签：text, search, url, telephone, email, password, datepickers, range 以及 color。


    E-mail: 

novalidate

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
注释：novalidate 属性适用于 
 以及以下类型的  标签：text, search, url, telephone, email, password, date pickers, range 以及 color.


    E-mail: 
    

新的input属性

autocomplete

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
注释：autocomplete 适用于 
 标签，以及以下类型的  标签：text, search, url, telephone, email, password, datepickers, range 以及 color。


    E-mail: 

autofocus

autofocus 属性规定在页面加载时，域自动地获得焦点。
注释：autofocus 属性适用于所有  标签的类型。

User name: 

form

form 属性规定输入域所属的一个或多个表单。
注释：form 属性适用于所有  标签的类型。
form 属性必须引用所属表单的 id：


    First name:
    

Last name: 

form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)

表单重写属性（form override attributes）允许您重写 form 元素的某些属性设定。
- 表单重写属性有：
    1. formaction - 重写表单的 action 属性
    2. formenctype - 重写表单的 enctype 属性
    3. formmethod - 重写表单的 method 属性
    4. formnovalidate - 重写表单的 novalidate 属性
    5. formtarget - 重写表单的 target 属性
注释：表单重写属性适用于以下类型的  标签：submit 和 image。


E-mail: 

height 和 width 属性

height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。
注释：height 和 width 属性只适用于 image 类型的  标签。

list 属性

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
注释：list 属性适用于以下类型的  标签：text, search, url, telephone, email, date pickers, number, range 以及 color。

Webpage: 
    

min、max 和 step 属性

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。
max 属性规定输入域所允许的最大值。
min 属性规定输入域所允许的最小值。
step 属性为输入域规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）。
注释：min、max 和 step 属性适用于以下类型的  标签：date pickers、number 以及 range。
下面的例子显示一个数字域，该域接受介于 0 到 10 之间的值，且步进为 3（即合法的值为 0、3、6 和 9）：

Points: 

multiple 属性

multiple 属性规定输入域中可选择多个值。
注释：multiple 属性适用于以下类型的  标签：email 和 file。

Select images: 

novalidate 属性

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
注释：novalidate 属性适用于 
 以及以下类型的  标签：text, search, url, telephone, email, password, date pickers, range 以及 color.


    E-mail: 
    

pattern 属性

pattern 属性规定用于验证 input 域的模式（pattern）。
注释：pattern 属性适用于以下类型的  标签：text, search, url, telephone, email 以及 password。
下面的例子显示了一个只能包含三个字母的文本域（不含数字及特殊字符）：

Country code: 

placeholder 属性

placeholder 属性提供一种提示（hint），描述输入域所期待的值。
注释：placeholder 属性适用于以下类型的  标签：text, search, url, telephone, email 以及 password。
提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失：

required 属性

required 属性规定必须在提交之前填写输入域（不能为空）。
注释：required 属性适用于以下类型的  标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

Name: 

音频(audio)和视频(video)

支持的格式和写法

音频元素支持的3种格式：Ogg MP3 Wav

视频元素支持三种视频格式：MP4、WebM、Ogg。

标签属性

• 音视频：autoplay、controls、loop、muted、preload、src

• 视频：autoplay、controls、loop、muted、width、height、poster、preload、src

方法

• load():重新加载音频／视频元素
• play()：开始播放音频／视频
• pause()：暂停当前播放的音频／视频

事件

• durationchange:当音频/视频的时长已更改时

• ended:当目前的播放列表已结束时

• pause:当音频/视频已暂停时

• play:当音频/视频已开始或不再暂停时

• ratechange:当音频/视频的播放速度已更改时

• timeupdate:当目前的播放位置已更改时

• volumechange:当音量已更改时

事件属性

• 只读属性

  • duration：返回当前的总时长
  • currentSrc：返回当前URL
  • ended：返回是否已结束
  • paused：返回是否已暂停

• 获取并可修改的属性：

  • autoplay：设置或返回是否自动播放
  • controls：设置或返回是否显示控件（比如播放/暂停等）
  • loop：设置或返回是否是循环播放
  • muted：设置或返回是否静音
  • currentTime：设置或返回当前播放位置（以秒计）
  • volume：设置或返回音量（规定音频/视频的当前音量。必须是介于 0.0 与 1.0 之间的数字。）
    1.0 是最高音量（默认）；0.5 是一半音量 （50%）； 0.0 是静音；
  • playbackRate：设置或返回播放速度

参考：HTML5新特性总结0804 

---

css3新特性

过渡

transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)

动画

animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）

@keyframes logo1 {
    0%{
        transform:rotate(180deg);
        opacity: 0;
    }
    100%{
        transform:rotate(0deg);
        opacity: 1;
    }
}

.logo-box .logo1{
    animation: logo1 1s ease-in 2s;
    animation-fill-mode:backwards;
}

形状转换

transform:适用于2D或3D转换的元素
transform-origin：转换元素的位置（围绕那个点进行转换）。默认(x,y,z)：(50%,50%,0)


transform:rotate(30deg);
transform:translate(30px,30px);
transform:scale(.8);
transform: skew(10deg,10deg);

选择器

阴影

box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向（默认是从里往外，设置inset就是从外往里）;

边框

边框图片

border-image: 图片url 图像边界向内偏移 图像边界的宽度(默认为边框的宽度) 用于指定在边框外部绘制偏移的量（默认0） 铺满方式--重复（repeat）、拉伸（stretch）或铺满（round）（默认：拉伸（stretch））;

.demo {
    border: 15px solid transparent;
    padding: 15px;   
    border-image: url(border.png);
    border-image-slice: 30;
    border-image-repeat: round;
    border-image-outset: 0;
}

边框圆角

border-radius: n1,n2,n3,n4;
border-radius: n1,n2,n3,n4/n1,n2,n3,n4;
/*n1-n4四个值的顺序是：左上角，右上角，右下角，左下角。*/

background-size

文字

换行

语法：word-break: normal|break-all|keep-all;

语法：word-wrap: normal|break-word;

超出省略号这个，主要讲text-overflow这个属性，我直接讲实例的原因是text-overflow的三个写法，clip|ellipsis|string。clip这个方式处理不美观，不优雅。string只在火狐兼容。

超出省略号

div
{
    width:200px; 
    border:1px solid #000000;
    overflow:hidden;
    white-space:nowrap; 
    text-overflow:ellipsis;
}

多行超出省略号

超出省略号。这个对于大家来说，不难！但是以前如果是多行超出省略号，就只能用js模拟！现在css3提供了多行省略号的方法！遗憾就是这个暂时只支持webkit浏览器！

div
{
    width:400px;
    margin:0 auto;
    overflow : hidden;
    border:1px solid #ccc;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

颜色

rgba

一个是rgba（rgb为颜色值，a为透明度）

hsla

h:色相”，“s：饱和度”，“l：亮度”，“a：透明度”

渐变

弹性布局——flex

盒模型定义

box-sizing这个属性，网上说法是：属性允许您以特定的方式定义匹配某个区域的特定元素。

• box-sizing:border-box的时候，边框和padding包含在元素的宽高之内！
• box-sizing:content-box的时候，边框和padding不包含在元素的宽高之内！

媒体查询

rem布局——rem是根em（root em）的缩写。rem是和根元素关联的，不依赖当前元素。不管你在文档中的什么地方使用这个单位，1.2rem的计算值是相等的，等于1.2倍的根元素的字号大小。

@media screen and (max-width: 960px) {
    body {
        background-color: darkgoldenrod;
    }
}

参考：个人总结（css3新特性）

---

 伪类与伪元素

css 引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分

对伪类和伪元素进行解释：

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover 来描述这个元素的状态。虽然它和普通的 css 类相似，可以为已有的元素添加样式，但是它只有处于 dom 树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

伪类与伪元素的区别

伪类：

伪类：li:first-child {
    color: orange
}

伪元素：p:first-letter {
    font-size: 5em;
}

伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

 伪元素是使用单冒号还是双冒号？

CSS3 规范中的要求使用双冒号 (::) 表示伪元素，以此来区分伪元素和伪类，比如::before 和::after 等伪元素使用双冒号 (::)，:hover 和:active 等伪类使用单冒号 (:)。除了一些低于 IE8 版本的浏览器外，大部分浏览器都支持伪元素的双冒号 (::) 表示方法。

参考：伪类和伪元素

---

mongodb

参考：Mongodb的文件存储GridFs

MongoDB是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。它支持的数据结构非常松散，是类似json的bson格式，因此可以存储比较复杂的数据类型。Mongo最大的特点是它支持的查询语言非常强大，其语法有点类似于面向对象的查询语言，几乎可以实现类似关系数据库单表查询的绝大部分功能，而且还支持对数据建立索引。

为什么要用MongoDB

（1）MongoDB提出的是文档、集合（多条记录）的概念，使用BSON（类JSON）作为其数据模型结构，其结构是面向对象的而不是二维表，存储一个用户在MongoDB中是这样子的。

{
    username:'123',
    password:'123'
｝

使用这样的数据模型，使得MongoDB能在生产环境中提供高读写的能力，吞吐量较于mysql等SQL数据库大大增强。

（2）易伸缩，自动故障转移。易伸缩指的是提供了分片能力，能对数据集进行分片，数据的存储压力分摊给多台服务器。自动故障转移是副本集的概念，MongoDB能检测主节点是否存活，当失活时能自动提升从节点为主节点，达到故障转移。

（3）数据模型因为是面向对象的，所以可以表示丰富的、有层级的数据结构，比如博客系统中能把“评论”直接怼到“文章“的文档中，而不必像myqsl一样创建三张表来描述这样的关系。

支持嵌套域的查询
查询可以深入到嵌套的对象和数组中，如果下面的对象被插入到users集合:
       {
               "username" : "bob",
               "address" : {
                      "street" : "123 Main Street",
                      "city" : "Springfield",
                      "state" : "NY"
                 }
        }
       我们可以这样查询嵌套在里层的域
       db.users.find({“address.state”:"NY”})
       数组元素则可以被这样查询：
       > db.food.insert({"fruit" : ["peach", "plum", "pear"]})
       > db.food.find({"fruit" : "pear"})

几个shell实操

因为本篇文章不是API手册，所有这里对shell的使用也是基础的介绍什么功能可以用什么语句，主要是为了展示使用MongoDB shell的方便性，如果需要知道具体的MongoDB shell语法可以查阅官方文档。

1、切换数据库

use dba

创建数据库并不是必须的操作，数据库与集合只有在第一次插入文档时才会被创建，与对数据的动态处理方式是一致的。简化并加速开发过程，而且有利于动态分配命名空间。如果担心数据库或集合被意外创建，可以开启严格模式

2、插入语法

1db.users.insert({username:"smith"})
2db.users.save({username:"smith"})

3、查找语法

1 db.users.find()
2 db.users.count()

4、更新语法

 1 db.users.update({username:"smith"},{$set:{country:"Canada"}})
 2 //把用户名为smith的用户的国家改成Canada
 3
 4 db.users.update({username:"smith"},{$unset:{country:1}})
 5 //把用户名为smith的用户的国家字段给移除
 6
 7 db.users.update({username:"jones"},{$set:{favorites:{movies:["casablance","rocky"]}}})
 8 //这里主要体现多值修改，在favorties字段中添加多个值
 9
10 db.users.update({"favorites.movies":"casablance"},{$addToSet:{favorites.movies:"the maltese"}},false,true)
11 //多项更新

5、删除语法

1db.foo.remove() //删除所有数据
2db.foo.remove({favorties.cities:"cheyene"}) //根据条件进行删除
3db.drop() //删除整个集合

6、索引相关语法

1db.numbers.ensureIndex({num:1})
2//创建一个升序索引
3db.numbers.getIndexes()
4//获取全部索引

7、基本管理语法

 1 show dbs
 2 //查询所有数据库
 3 show collections
 4 //显示所有表
 5 db.stats()
 6 //显示数据库状态信息
 7 db.numbers.stats()
 8 //显示集合表状态信息
 9 db,shutdownServer()
10 //停止数据库
11 db.help()
12 //获取数据库操作命令
13 db.foo.help()
14 //获取表操作命令
15 tab 键 //能自动帮我们补全命令

Mongobd的重要模块–GridFS

GridFS是Mongo的一个子模块,使用GridFS可以基于MongoDB来持久存储文件。并且支持分布式应用(文件分布存储和读取)。作为MongoDB中二进制数据存储在数据库中的解决方案，通常用来处理大文件，对于MongoDB的BSON格式的数据(文档)存储有尺寸限制，最大为16M。但是在实际系统开发中，上传的图片或者文件可能尺寸会很大，此时我们可以借用GridFS来辅助管理这些文件。

GridFS存储原理

GridFS使用两个集合（collection）存储文件。一个集合是chunks, 用于存储文件内容的二进制数据；一个集合是files，用于存储文件的元数据。

GridFS会将两个集合放在一个普通的buket中，并且这两个集合使用buket的名字作为前缀。MongoDB的GridFs默认使用fs命名的buket存放两个文件集合。因此存储文件的两个集合分别会命名为集合fs.files ,集合fs.chunks。

当把一个文件存储到GridFS时，如果文件大于chunksize （每个chunk块大小为256KB），会先将文件按照chunk的大小分割成多个chunk块，最终将chunk块的信息存储在fs.chunks集合的多个文档中。然后将文件信息存储在fs.files集合的唯一一份文档中。其中fs.chunks集合中多个文档中的file_id字段对应fs.files集中文档”_id”字段。

读文件时，先根据查询条件在files集合中找到对应的文档，同时得到“_id”字段，再根据“_id”在chunks集合中查询所有“files_id”等于“_id”的文档。最后根据“n”字段顺序读取chunk的“data”字段数据，还原文件。

深入浅出mongoose

mongoose是nodeJS提供连接 mongodb的一个库，类似于jquery和js的关系，对mongodb一些原生方法进行了封装以及优化。简单的说，Mongoose就是对node环境中MongoDB数据库操作的封装，一个对象模型工具，将数据库中的数据转换为JavaScript对象以供我们在应用中使用。

---

小程序

小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务。

整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

响应的数据绑定

框架的核心是一个响应的数据绑定系统，可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。（声明式渲染{{}}）

页面管理

框架 管理了整个小程序的页面路由，可以做到页面间的无缝切换，并给以页面完整的生命周期。开发者需要做的只是将页面的数据、方法、生命周期函数注册到 框架 中，其他的一切复杂的操作都交由 框架 处理。

基础组件

框架 提供了一套基础的组件，这些组件自带微信风格的样式以及特殊的逻辑，开发者可以通过组合基础组件，创建出强大的微信小程序 。

丰富的 API

框架 提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。

云开发

开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力。

云开发为开发者提供完整的原生云端支持和微信服务支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。

云开发提供了几大基础能力支持：

能力	作用	说明
云函数	无需自建服务器	在云端运行的代码，微信私有协议天然鉴权，开发者只需编写自身业务逻辑代码
数据库	无需自建数据库	一个既可在小程序前端操作，也能在云函数中读写的 JSON 数据库
存储	无需自建存储和 CDN	在小程序前端直接上传/下载云端文件，在云开发控制台可视化管理
云调用	原生微信服务集成	基于云函数免鉴权使用小程序开放接口的能力，包括服务端调用、获取开放数据等能力

---

js 深拷贝 vs 浅拷贝

堆和栈的区别

其实深拷贝和浅拷贝的主要区别就是其在内存中的存储类型不同。

堆和栈都是内存中划分出来用来存储的区域。

栈（stack）为自动分配的内存空间，它由系统自动释放；而堆（heap）则是动态分配的内存，大小不定也不会自动释放。

对象

var obj = {a: 1, b: 2, c: { a: 3 },d: [4, 5]}
var obj1 = obj
var obj3 = {...obj}
var obj4 = Object.assign({},obj)
var obj2 = JSON.parse(JSON.stringify(obj))//深拷贝常用方法

obj.a = 999
obj.c.a = -999
obj.d[0] = 123
console.log(obj1) //{a: 999, b: 2, c: { a: -999 },d: [123, 5]}
console.log(obj3) //{a: 1, b: 2, c: { a: -999 },d: [123, 5]}
console.log(obj4) //{a: 1, b: 2, c: { a: -999 },d: [123, 5]}
console.log(obj2) //{a: 1, b: 2, c: { a: 3 },d: [4, 5]}

数组

var arr = [1, 2, 3, [4, 5], {a: 6, b: 7}]
var arr2 = arr
var arr3 = [...arr]
var arr4 = Object.assign([],arr)
var arr1 = JSON.parse(JSON.stringify(arr))//深拷贝常用方法

console.log(arr === arr1) //false
console.log(arr === arr2) //true
console.log(arr === arr3) //false
console.log(arr === arr4) //false
arr[0]= 999
arr[3][0]= -999
arr[4].a = 123
console.log(arr1) //[1, 2, 3, [4, 5], {a: 6, b: 7}]
console.log(arr2) //[999, 2, 3, [-999, 5], {a: 123, b: 7}]
console.log(arr3) //[1, 2, 3, [-999, 5], {a: 123, b: 7}]
console.log(arr4) //[1, 2, 3, [-999, 5], {a: 123, b: 7}]

深拷贝：

思路就是递归调用刚刚的浅拷贝，把所有属于对象的属性类型都遍历赋给另一个对象即可。我们直接来看一下 Zepto 中深拷贝的代码：

    // 内部方法：用户合并一个或多个对象到第一个对象
    // 参数：
    // target 目标对象  对象都合并到target里
    // source 合并对象
    // deep 是否执行深度合并
    function extend(target, source, deep) {
        for (key in source)
            if (deep && (isPlainObject(source[key]) || isArray(source[key]))) {
                // source[key] 是对象，而 target[key] 不是对象， 则 target[key] = {} 初始化一下，否则递归会出错的
                if (isPlainObject(source[key]) && !isPlainObject(target[key]))
                    target[key] = {}

                // source[key] 是数组，而 target[key] 不是数组，则 target[key] = [] 初始化一下，否则递归会出错的
                if (isArray(source[key]) && !isArray(target[key]))
                    target[key] = []
                // 执行递归
                extend(target[key], source[key], deep)
            }
            // 不满足以上条件，说明 source[key] 是一般的值类型，直接赋值给 target 就是了
            else if (source[key] !== undefined) target[key] = source[key]
    }

    // Copy all but undefined properties from one or more
    // objects to the `target` object.
    $.extend = function(target){
        var deep, args = slice.call(arguments, 1);

        //第一个参数为boolean值时，表示是否深度合并
        if (typeof target == 'boolean') {
            deep = target;
            //target取第二个参数
            target = args.shift()
        }
        // 遍历后面的参数，都合并到target上
        args.forEach(function(arg){ extend(target, arg, deep) })
        return target
    }

在 Zepto 中的 $.extend 方法判断的第一个参数传入的是一个布尔值，判断是否进行深拷贝。

在 $.extend 方法内部，只有一个形参 target，这个设计你真的很巧妙。
因为形参只有一个，所以 target 就是传入的第一个参数的值，并在函数内部设置一个变量 args 来接收去除第一个参数的其余参数，如果该值是一个布尔类型的值的话，说明要启用深拷贝，就将 deep 设置为 true，并将 target 赋值为 args 的第一个值（也就是真正的 target）。如果该值不是一个布尔类型的话，那么传入的第一个值仍为 target 不需要进行处理，只需要遍历使用 extend 方法就可以。

参考：js 深拷贝 vs 浅拷贝

---

浏览器的兼容性

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。

• 渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
• 优雅降级`(graceful degradation): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

Web标准以及W3C

 Web标准是由万维网联盟（W3C）制订的，WEB标准的产生，网页内容能被更多的用户所访问到，文件下载和页面显示速度更快，所有页面都能提供适合打印的版本，网页开发人员开发更快捷，代码更易于维护，提高了搜索引擎的精确性，提高了网站的易用性。

  我们需要注意的代码标准有：

抛弃声明：以后我们将抛弃font标签，新的页面中不应该再出现如，已经存在的老的页面也应该在修改时尽量替代，替代方法：。

一个标准XHTML头信息格式如下：


 

 
 
     
    
    
    
    
    
    

 

1、什么是DOCTYPE
DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。其中的DTD(例如xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。
XHTML 1.0 提供了三种DTD声明可供选择：
i) 过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。 
完整代码如下：


ii) 严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性，例如
。
完整代码如下：


iii) 框架的(Frameset)：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。
完整代码如下：


注：DOCTYPE声明必须放在每一个XHTML文档最顶部，在所有代码和标识之上。

html5 : 没有DTD


2、名字空间 namespace

通常我们HTML4.0的代码只是，这里的"xmlns"是什么呢？
这个“xmlns”是XHTML namespace的缩写，叫做“名字空间”声明。XHTML是HTML向XML过渡的标识语言，它需要符合XML文档规则，因此也需要定义名字空间。又因为XHTML1.0不能自定义标识，所以它的名字空间都相同，就是"http://www.w3.org/1999/xhtml"。目前阶段我们只要照抄代码就可以了。

3、定义语言编码

为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言，我们一般使用gb2312(简体中文)，制作多国语言页面也有可能用Unicode、ISO-8859-1等，根据你的需要定义。
注：如果忘记了定义语言编码,可能就会出现,你在DW(dreamweaver)做完一个页面，第二次打开时所有的中文变成了乱码。



4、Javascript定义
Js必须要用 

注：具体参考js规范。

5、CSS定义
CSS必须要用
为保证各浏览器的兼容性，在写CSS时请都写上数量单位，例如：错误：.space_10{padding-left:10} 正确：.space_10 {padding-left:10px}

6、不要在注释内容中使用“--”
“--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。
例如下面的代码是无效的：
正确的应用等号或者空格替换内部的虚线。

7、所有标签的元素和属性的名字都必须使用小写
与HTML不一样，XHTML对大小写是敏感的，