骨架标签及常用标签
<!DOCTYPE html> 声明文档类型，html代表html5
<html lang="en"> 定义文档显示的语言
<head>
<meta charset="UTF-8"> 规定html文档应该使用的字符编码
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
网站TDK三大标签实现SEO优化
<title>Document</title>
<meta name=”description” content=”XXXXX”> 描述description
<meta name=”keywords” content=”XX,YY,ZZ,AA,BB,CC,DD”> 关键词
网站favicon图标
<link rel="shortcut icon" href="favicon.ico"> 标签页图标
</head>
<body>
</body>
</html>
常用标签
h1-h6, p, div, span
<img src="" alt="">
<a href="" target="">
ol, ul, li
table thead tbody tr th td
<form action="" method="" name="">
<label for="xx">
<input type="" name="" id="xx">
</form>
<select>
<option></option>
</select>
<textarea></textarea>
H5新增语义化标签及新增input类型和属性
header, nav, article, section, aside, footer
<video src="" controls></video>
<audio src="" controls></audio>
<input type="email/url/date/time/month/week/number/tel/search/color">
<input type="file" multiple>
LocalStorage和SessionStorage
用处
登录完成后存储token 用户部分信息的存储如昵称、头像、简介 一些项目通用参数的存储 项目状态管理的持久化：vuex的持久化、redux的持久化 项目整体的切换状态存储：主题颜色、icon风格、语言标识
使用
基本变量
localStorage.setItem(‘’, ‘’)
localStorage.getItem(‘’)
localStorage.removeItem(‘’)
引用变量
localStorage.setItem(‘’, JSON.stringify(data))
const data = JSON.parse(localStorage.getItem(‘’))
localStorage.removeItem(‘’)
清空
localStorage.clear()
问题
命名过于简单：同源的两个项目的localStorage是互通的，彼此之间相同key内存储的值可能互相顶替，出现“互相污染现象” 时效性：localStorage除非手动清除否则一直存在，sessionStorage标签页或浏览器关闭即结束 隐秘性：存在localStorage和sessionStorage里面的数据有些是开发不希望用户看到的，需要对缓存进行加密
解决方案
命名规范：项目名+当前环境+项目版本号+缓存key expire定时：设置缓存key时，将value包装成一个对象，对象中包括相应的时效时段。在下次想获取缓存值时，判断是否超时，实现获取或删除缓存 crypto加密：使用crypto.js加密，其中encrypt、decrypt实现加密、解密
WebSocket
定义
HTML5开始提供的一种浏览器与服务器进行全双工通讯的网络技术，属于应用层协议。它基于TCP传输协议，并复用HTTP的握手通道。
在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接， 并进行双向数据传输。
优点
相比HTTP协议，WebSocket支持双向通信，服务器可以主动向客户端推送信息【当服务器有连续的状态变化时，客户端通过http的单向请求获知会非常麻烦，需要轮询，十分浪费资源】；数据包头部更小；支持扩展。
简图
HTTP=TCP+HTTP
HTTPS=TCP+TLS+HTTP
WS=TCP+WS
WSS=TCP+TLS+WS
场景
即时聊天、多玩家游戏、在线协同、体育实况、实时地图位置
Canvas和SVG
Canvas
Canvas 通过 JavaScript 来绘制 2D 图形。 Canvas 是逐像素进行渲染的。 在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
SVG
SVG 是一种使用 XML 描述 2D 图形的语言。 SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
区别
Canvas
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘 SVG
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序（比如谷歌地图）
- 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
- 不适合游戏应用
