前端梳理
基础知识篇
HTML
html是超文本标记语言，它是运行在浏览器上，由浏览器解析。
DOCTYPE 声明
！DOCTYPE，一个文档类型标记是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。说的直白一些就是：HTML文档的版本有很多，只有明白你的网页使用的是HTML的哪个版本，浏览器才能正确的显示出HTML页面。
HTML base 元素
<base>标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接,如果你的链接（a标签没有写明链接地址，那么链接地址指向base中写的默认地址）
<head>
<base href="http://www.123.com/images/" target="_blank">//所有没有指向链接地址的链接都将指向123.com
</head>
HTML link 元素
<link>标签定义了文档与外部资源之间的关系。<link>标签通常用于链接到样式表。其中rel属性规定当前文档与被链接文档之间的关系。stylesheet的意思为文档的外部样式表。type规定被链接文档的 MIME 类型。href规定被链接文档的位置,这里面你可以理解为CSS样式表的位置也就是路径。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
HTML meta 元素
meta是对网页的进一步解释，它不显示在页面上，但是会被解析。它通常用于指定网页的描述，关键词，文件的最后修改时间，作者等等。
为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, JavaScript">
为网页定义描述内容:
<meta name="description" content="前端 2年 梳理 基础知识">
定义网页作者:
<meta name="author" content="离秋">
HTML script> 元素
<script>标签用于加载脚本文件，如： JavaScript。
HTML5
新元素 canvas
<canvas>标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。说白了就是可以通过JavaScript代码完成图形的制作。
最简单的使用：
//html代码
<canvas id="myCanvas" width="200" height="100">
//JavaScript代码
var c=document.getElementById("myCanvas");//找到canvas元素
var ctx=c.getContext("2d");//创建context对象
ctx.fillStyle="#FF0000";//填充颜色设置
ctx.fillRect(0,0,150,75);//绘制矩形，从位置0,0开始，绘制一个150X75的矩形
</canvas>
canvas-路径
在canvas中画线的基本使用
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);//将绘制原点移动到0,0位置上
ctx.lineTo(200,100);//从0,0点到200,100的点之间画一条直线
ctx.stroke();//结束绘制
canvas-圆
在canvas中画圆的基本使用
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
特别说明一下：arc方法的参数分别代表：原点的X坐标位置，原点的y坐标位置,圆的半径，圆的周长（整圆是2π）
canvas-文本
和我们直接在HTML标签的文本一样，可以设置文本的颜色，字体等，不同的是可以设置是实心字体还是空心字体
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);//绘制实心文本，在10,50位置开始
ctx.font="30px Arial";
ctx.strokeText("Hello World",170,50);//绘制空心文本，在170,50位置开始
Canvas - 渐变（不常用）
绘制一个矩形或者其他图形，颜色从一个颜色过度到另一个颜色
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);//创建线性渐变
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");// 填充渐变
ctx.fillStyle=grd; ctx.fillRect(10,10,150,80);
特别说明：addColorStop方法指定颜色停止中第一个参数的含义，渐变的起始位置为0,结束位置为1，第二个参数表示渐变的颜色
Canvas - 图像(一般不用)
把一幅图像放置到画布上, 使用的方法，因为有背景图属性background，利用canvas画图像一般不会单独使用，而是结合其他的使用场景
ctx.drawImage(img,10,10);
html5-video
html5的新增标签video，需要掌握下面的几种方法
//下面使用的myVideo，可通过获取元素方法得到
myVideo.play();//视频播放
myVideo.pause();//视频暂停
html5-audio(同视频)
html5-本地存储
使用HTML5可以在本地存储用户的浏览数据，一般分为cookie(HTTP Cookie)，localStorage，sessionStorage
HTTP Cookie
是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。Cookie使基于无状态的HTTP协议记录稳定的状态信息成为了可能。
Cookie主要用于以下三个方面：
- 会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）
- 个性化设置（如用户自定义设置、主题等）
- 浏览器行为跟踪（如跟踪分析用户行为等）
//使用服务端程序设置`Set-Cookie`相应头信息
HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco//cookie信息-
Set-Cookie: tasty_cookie=strawberry//cookie信息-
cookie分为会话cookie和永久cookie。会话cookie是在在本次会话结束之前一直保存cookie信息，通常会话结束是指关闭浏览器，当然这也可以通过会话劫持模拟浏览器不关闭而保存你的cookie。永久cookie是不管会话是否结束都会保存cookie的一种模式，两种模式都可以设置有效期和过期时间（服务器时间）
localStorage
localStorage 里面存储的数据没有过期时间设置,保存的数据都仅限于该页面的协议,也就是说在单页面应用中使用效果更好
// 保存数据到localStorage
localStorage.setItem('key', 'value');
// 获取localStorage
var data = localStorage.getItem('key');
// 删除localStorage
localStorage.removeItem('key');
// 清空localStorage
localStorage.clear();
sessionStorage
与localStorage遵循同源策略，不同的是sessionStorage数据在页面会话结束时会被清除，其他的方法是一致的
HTML5 WebSocket
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。
当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。
以下 API 用于创建 WebSocket 对象
var Socket = new WebSocket(url, [protocol] );
//第一个参数表示要连接的URL。这个URL应该为响应WebSocket的地址。
//第二个参数可以是一个单个的协议名字字符串或者包含多个协议名字字符串的数组。
这些常量是
readyState属性的取值，可以用来描述 WebSocket 连接的状态。
小例子
// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');
// Connection opened
socket.addEventListener('open', function (event) {
socket.send('Hello Server!');
});
// Listen for messages
socket.addEventListener('message', function (event) {
console.log('Message from server', event.data);
});