块级元素和行级元素的区别

块级元素：垂直方向上排列，独占一行，可以包含行内元素和块级元素，设置width，height，line-height，margin，padding有效
行级元素：水平方向上排列，都是同一行，不能包含块级元素，设置width，height，margin，padding无效，但设置line-height有效
现在行级元素和块级元素能够通过display属性互相转换
（现在元素代表的含义与显示无关，元素的包含关系由元素的内容类别决定）

为什么引入css要用href，而引入js要用src

src和href的区别：
src：本质上是引用嵌入式内容，如img，video，iframe这些替换类型的元素，相当于引入的内容像嵌入页面一样，可以直接展示，直观看到
href：本质上是引入超链接，如a，link这些连接型元素。引入的内容是外部资源，与本页面的关系不大，不会直接展示

至于为什么要css要用href，js要用src，可能是历史遗留的问题吧

引入js的script标签，既可以作为替换型标签，又可以不作为替换型标签
引入CSS，可以用style和link标签，而style也不是替换型元素，而我们用link去引入css，就自然是用href啊

HTML5

HTML5和HTML4的区别：

1. 简化的语法
2. canvas替代了flash
3. 新增的语义化标签
4. 新增的表单控件，媒体元素
5. 不再使用frame，center，big，b，font等标签
6. 一些本地离线存储和一些新技术
7. 一些文件操作的API

判断浏览器能否使用HTML5

看window.applicationCache是否存在

新增的语义化标签

header，nav，footer，section，article，aside，figure，main

语义化的理解：
用正确的标签来做正确的事情，语义化标签会让页面的内容结构更加简单易懂，便于搜索引擎解析，便于阅读维护和理解

新增的表单控件和媒体元素

表单控件：calander，date，time，email，url，search，...
表单属性：required，placeholder，autocomplete，autofocus，一些重写属性（formaction，formenctype，...），list，min，max，multiple，pattern，...
媒体元素：video，audio，source，track，embed

新增的绘图标签

canvas（主要写JS功能）和SVG

文件操作的API

FileList：file文件对象的集合
Blob对象：原始数据对象，它提供了slice方法可以读取原始数据中的某块数据
File对象：继承自Blob对象，指向一个具体文件
FileReader对象：设计用来读取文件里面的数据，提供三个常用的读取文件数据的方法，另外读取文件数据使用了异步的方式，非常高效

本地存储（WebStorage）

本地离线存储，把需要离线存储在本地的文件列在一个 manifest 配置文件

分为两种：localStorage和sessionStorage

localStorage和sessionStorage的异同：
异：
1. localStorage能长期存储数据，关闭浏览器后数据不会丢失
   sessionStorage不能长期存储数据（是会话级别的），关闭浏览器后数据会自动删除（刷新页面或进入同源另一页面，数据仍然存在）
同：
1. 都在客户端中保存，不参与和服务器通信
2. 都只能存储字符串
3. 存储大小为5M（各浏览器不一样）
4. 一些存储，获取，删除数据等的方法相同

新技术：WebWorker

WebWorker作用：为JavaScript创建多线程环境，允许主线程创建Worker线程，将一些任务分配给worker线程运行
              在主线程运行的同时，Worker线程在后台运行，他们之间互不干扰
              等到Worker线程完成计算任务，再把结果通过postMessage返回给主线程
好处：对于一些计算密集型或高延迟的任务，被Worker线程负担下来了，主线程就会很流畅，不会被阻塞或被拖慢了


由于Worker线程一旦创建成功，就会始终运行，不会被主线程上的活动给打断。这样有利于随时响应主线程的通信
不过这也导致Worker线程比较浪费资源，不应该过度使用，使用完毕后应该关闭掉


WebWorker的注意点：
1. 同源限制：分配给Worker线程运行的脚本文件，必须与主线程运行的脚本文件同源

2. DOM限制：Worker线程所在的全局对象与主线程不一样，无法获取到主线程所在网页的DOM结构（Worker无法使用document，window，parent对象，但可以用navigator（包含了浏览器信息），location对象）

3. 通信限制：Worker线程和主线程不在同一个上下文环境，他们不能直接通信，必须通过信息完成（此数据通信是拷贝关系，只传值而不传址）
  （通信的内部机制：先将通信内容串行化，然后把串行化后的字符串发给Worker，然后Worker再将它还原）

4. 脚本限制：Worker线程不能执行alert()和confirm()方法，但可以使用XMLHttpRequest对象发出Ajax请求

5. 文件限制：Worker线程无法读取本地文件，他所加载的脚本必须来自网络


主线程对worker线程的一些方法：
1. 主线程创建Worker线程：
在主线程中用new调用Worker的构造函数：var worker=new Worker('work.js');  //此脚本文件必须来自网络

2. 主线程向Worker发送信息：（可以是各种数据类型）
worker.postMessage('xxxx') 

3. 主线程接收Worker发回来的信息：
worker.onmessage=()=>{...}

4. 主线程关闭Worker线程：
worker.terminate()

更多关于WebWorker的用法：http://www.ruanyifeng.com/blog/2018/07/web-worker.html

新技术：WebSocket

WebSocket：
是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。依靠这种技术可以实现客户端和服务器端的长连接，双向实时通信


我们有了HTTP协议了，为什么还要用到WebSocket呢？
因为HTTP协议中，通信只能由客户端发起（服务器不能够主动向客户端推送信息）
对于若服务器有连续的状态变化，客户端要获取信息就会很麻烦，只能使用轮询去了解有没有新的信息


WebSocket的特点：
1. 客户端和服务器只需要完成一次握手，它们之间就直接可以创建持久性的连接
2. 客户端和服务器双向数据传输（平等对话），能实现真正意义上的推送功能
3. 建立在TCP协议之上，服务器的实现比较容易
4. 与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器
5. 数据格式比较轻量，性能开销小，通信高效
6. 可以发送文本，也可以发送数据
7. 没有同源限制，客户端可以和任意的服务器通信
8. 协议标识符是ws（若加密则为wss）
9. 异步


客户端的实现：
1. 创建一个socket对象：new WebSocket(url)   //url格式：ws://ip地址:端口号/资源名称
2. 一些事件：
   1) .onopen：连接建立时触发
   2) .onmessage：客户端接收服务器数据时触发
   3) .error：通信时发生错误触发
   4) .close：连接关闭时触发
3. 一些方法：
   send()：使用连接发送数据

服务器的实现：
利用Node搭建服务器与socket配合使用

常用Node配合socket.io (服务器与客户端进行配合交互)
（socket.io官网：https://socket.io/）

更多关于WebSocket的用法：http://www.ruanyifeng.com/blog/2017/05/websocket.html