html5有十大新特性：
HTML5十大新特性？HTML5其实并不一定是标签技术，还带有一些JS操作，其实属于一个概念
1、语义化标签
2、视频音频
3、增强型表单控件
4、webStorage（客户端存储技术）
5、canvas绘图 - 三阶段你会学习一个框架：echarts.js - 画图：柱状图、饼状图、雷达图（数据可视化）
6、svg绘图 - 画矢量图，放大缩小，图片都不会失真，字体小图标（阿里图标一大堆）
7、webSocket - 广播收听模式
8、webWorker - 秘书
9、拖拽API
10、地理定位
1、webSocket - H5提供了，代码不复杂重点在原理的理解上
http协议 - 属于 “请求 - 响应”模型，只有客户端发起请求消息，服务器端才能响应消息，没有请求就没有响应。
一个请求，只能得到一个响应，但是有些场景中，此模型就力不从心，实时走势图、在线聊天室等等。
解决：定时器 + ajax（心跳请求） - 请求过于复杂，服务器压力太大了，不够频繁
webSocket协议：属于“广播 - 收听”模型，客户端连接到服务器端就不会再断开了，永久的连接的，
双方就可以随意的像对方发送消息，而且是不对等发送，ws协议实时走势图、在线聊天室有优势。
如何使用：
WS服务器端 - 用Node.js编写
使用步骤：
1、下载引入
2、创建一个ws服务器端：
var server=new ws.Server({port:8008});
3、为服务器端设置连接监听
server.on("connection",(socket)=>{
socket.send("说话");
socket.on("message",(data)=>{
data;
})
})
WS客户端：用JS编写
使用步骤：
1、连接：socket=new WebSocket("ws:127.0.0.1:8008");
2、听：socket.onmessage=e=>{e.data}
3、说：socket.send("说话")
直播聊天室案例
客户端
<body>
<textarea id="txt"></textarea><br>
<input id="name1" />
<input id="msg" />
<button id="btn">发送</button>
<script type="text/javascript">
var socket=new WebSocket("ws:192.168.10.224:8008")
btn.onclick=()=>{
var arr=[]
arr.push(name1.value)
arr.push(msg.value)
msg.value=""
socket.send(arr)
}
socket.onmessage=e=>{
var arr=e.data.split(",")
txt.innerHTML+=arr[0]+":"+arr[1]+"\n"
}
</script>
</body>
服务器端 xxx.js
var ws = require("ws")
var server = new ws.Server({
port: 8008
})
server.on("connection", (socket) => {
console.log("有人连接上来了")
socket.on("message", (data) => {
var arr = [...server.clients]
arr.forEach(sk => {//得到每一个客户端，对每一个客户端发送响应消息
sk.send(data.toString())
})
})
})
注意 vscode无法打开两个node.js需要用cmd拖拽打开
1、gulp（使用率：2-） - 三阶段：webpack（使用率：8+）对应的
自动化构建工具（打包工具）：项目经理/小组长使用的 - 学习目的：体验流程
作用：
*1、复制
*2、压缩（css/js/图片...）
*3、降级ES6为ES5，降级语法 - 因为ES5之前语法其实都没有变化，ES5只是提供了一些新的API，目的：支持兼容老IE
4、将scss/less编译为css - 不需要学习，现在的编辑器都自带此功能
5、重命名 - 不推荐，html引入href、src的地方名字都要进行修改
*为什么打包：
上线过后，不可能使用源代码（1、太大了 2、别的成员/外界也能看的懂）
肯定使用的是处理过后的代码，目的：1、为了提升网站效率(文件更小) 2、安全性（加密）
gulp是基于node.js编写的一个第三方模块（包、软件），需要在npm下载：安装的操作一步都不能少
*固定操作安装：1、cmd必须先全局安装gulp（不安的话，cmd提示：gulp不是内部命令） - 必做（运行gulp必要方式），一次性安装永久可用
npm i --global gulp
2、cmd再你的项目中局部安装 - 可以不做，直接复制代老湿的node_modules到你的项目之中
npm i gulp
3、cmd在你的项目初始化gulp - 必做
npm init
注意：名字可以自己写，但是不能有大写&中文，然后一路回车到底
4、配置完成，开始编写属于你自己的gulpfile.js文件！！！必须是这个名字
如何使用gulp：
1、先引入var gulp=require("gulp");
API：
1、布置任务：
gulp.task("任务名",()=>{
})
执行任务：
cmd里面输入gulp 任务名; - gulp基于node，但是属于是一个独立的软件
如果想不写任务名，默认执行default任务名的操作
2、*复制
gulp.src("入口文件路径"); -- 选中某个、某些源文件
gulp.pipe(); -- 管道 -- 输送/插件操作
gulp.dest("出口路径"); -- 输送到哪里去？
案例：
gulp.task("copyAll",()=>{
gulp.src("源文件路径")
.pipe(gulp.dest("出口文件路径"))
})
文件的路径写法：
比如：
想找到src下面的html下面的1.html：src/html/1.html
想找到src下面的html下面的所有的html：src/html*
恭喜你，已经学会了gulp，剩下的就是学习gulp的插件
2、gulp的插件
1、压缩css步骤：
gulp-cssmin插件
npm下载插件：npm i gulp-cssmin
查看readme中的example小案例
使用前记得引入：
gulp.task("copycssmin",()=>{
gulp.src("src/css/*.css")
.pipe(cssmin())
.pipe(gulp.dest("dist"))
})
2、压缩js步骤：1、删除换行和空白字符以及注释（变小文件） 2、会把回调函数中的形参全部简化为一个字母，对应的位置都会简化（变小文件的同时加密保护）
gulp-uglify插件
npm下载插件：npm i gulp-uglify
使用前记得引入
gulp.task("copyjsmin",()=>{
gulp.src("src/js/*.js")
.pipe(uglify())
.pipe(gulp.dest("dist"))
})
3、ES降级：gulp-babel; 目的：1、语法变回ES5 老IE也能支持我们写的语法
切记用的是babel6
*安装：
1、npm install --save-dev gulp-babel@7 babel-core babel-preset-env
2、npm install --save-dev babel-preset-es2015
3、配置一个文件必须名为.babelrc：写入：{
"presets": ["es2015"]
}
用法：
使用前记得引入，先降级，在压缩
gulp.task("copyjsmin",()=>{
gulp.src("src/js/*.js")
.pipe(babel())
.pipe(uglify())
.pipe(gulp.dest("dist"))
})
注意：
*1、记得要要把严格模式给删掉
2、先降级后压缩 - 才能压缩完整
4、图片压缩插件：
参考网页：https:
下载：npm i gulp-tinypng-nokey
