cookie弊端
1）Cookie`数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则
会被截掉。在当今新的浏览器和客户端设备版本中，
支持 8192 字节的 Cookie 大小已愈发常见。
2）用户配置为禁用。有些用户禁用了浏览器或客户端设备接收 Cookie 的能力，因此限制了这一功能；
3）由于在HTTP请求中的cookie是明文传递的，潜在的安全风险，Cookie 可能会被篡改；
4）有些状态不可能保存在客户端；
5）cookie会被附加在每个HTTP请求中，所以无形中增加了流量。
6）cookie一般不可跨域使用；
7）没有封装好的setCookie和getCookie方法，需要开发者自省封装。
优点
极高的扩展性和可用性
1）通过良好的编程，控制保存在cookie中的session对象的大小；
2）通过加密和安全传输技术（SSL），减少cookie被破解的可能性；
3）在cookie中不存放敏感数据，即使被盗也不会有重大损失；
4）控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。
web Storage
web Storage 是HTML 5引入的一个重要的功能，在前端开发的过程中会经常用到，
它可以在客户端本地存储数据，类似cookie，但其功能却比cookie强大
的多。cookie的大小只有4Kb左右（浏览器不同，大小也不同），
而web Storage的大小有5MB。其API提供的方法有以下几种：
setItem (key, value) —— 保存数据，以键值对的方式储存信息。
getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。
removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
clear () —— 删除所有的数据
key (index) —— 获取某个索引的key
storage和cookie的区别
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。
Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送
过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear
等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。
但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范
的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生
sessionStorage和localStorage
localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如下 所示。localStorage有length属性，可以查看其有多少条记录的数据。使用方法如下：
var storage = null;
if(window.localStorage){ //判断浏览器是否支持localStorage
storage = window.localStorage;
storage.setItem("name", "Rick"); //调用setItem方法，存储数据
alert(storage.getItem("name")); //调用getItem方法，弹框显示 name 为 Rick
storage.removeItem("name"); //调用removeItem方法，移除数据
alert(storage.getItem("name")); //调用getItem方法，弹框显示 name 为 null
}
sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致的。需要注意的有以下几点：
<1> 页面刷新不会消除数据
<2>只有在当前页面打开的链接，才可以访sessionStorage的数据
<3>使用window.open打开页面和改变localtion.href方式都可以获取到sessionStorage内部的数据
http和tcp的区别
TCP就是单纯建立连接，不涉及任何我们需要请求的实际数据，简单的传输。http是用来收发数据，即实际应用上来的。
attribute和property的区别
property是DOM中的属性，是JavaScript里的对象；
attribute是HTML标签上的特性，它的值只能够是字符串；
Attribute就是DOM节点自带属性，例如我们在HTML中常用的id,class,src,title,alt等。
而Property则是这个DOM元素作为对象，其附加的属性或者内容，例如childNodes，firstChild等。
property能够从attribute中得到同步；
attribute不会同步property上的值；
attribute和property之间的数据绑定是单向的，attribute->property；
更改property和attribute上的任意值，都会将更新反映到HTML页面中；
css选择器有哪些，优先级
1.标签选择器(如：body,div,p,ul,li)
2.类选择器(如：class="head",class="head_logo")
3.ID选择器(如：id="name",id="name_txt")
4.全局选择器(如：*号)
5.组合选择器(如：.head .head_logo,注意两选择器用空格键分开)
6.后代选择器 (如：#head .nav ul li 从父集到子孙集的选择器)
7.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示
8.继承选择器(如：div p,注意两选择器用空格键分开)
9.伪类选择器(如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。)
10.字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含)
11.子选择器 (如：div>p ,带大于号>)
12.CSS 相邻兄弟选择器器 (如：h1+p,带加号+)
不同级别
在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素内的样式
id选择器
类选择器
标签选择器
通配符选择器
浏览器自定义或继承
总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
同一级别
同一级别中后写的会覆盖先写的样式
html5标签
1.header 页眉（网页（部分区域）的头部 顶部 导航区域等等），闭合标签；块元素；
默认的宽是：100%；高： 内容的高度；实质上，跟DIV标签，可以说是完全一样的特性；
2.nav 导航链接部分；闭合标签；块元素；默认的宽是：100%；高： 内容的高度；
实质上，跟 DIV标签，可以说是完全一样的特性。
3.section 标签定义网页中的区域（部分）。比如章节、页眉、页脚或文档中的其他部分。
闭合 标签；块元素；默认的宽是：100%；高： 内容的高度；
实质上，跟DIV标签，可以说是完全一样的 特性；
4.footer 页脚（网页（部分区域）的底部|版权区域等等），闭合标签；块元素；
默认的宽是：100%；高： 内容的高度；实质上，跟DIV标签，可以说是完全一样的特性；
5.article 内容是引用其他地方的。一个区域中的，另外一部分内容；闭合标签；
块元素；默认的宽是：100%；高： 内容的高度；实质上，跟DIV标签，可以说是完全一样的特性
6.aside 跟 article 是一起使用；是辅助 article 区域的内容。
也可以理解为整个网页的 辅助区域；（最常见的京东的右侧的工具栏）
7.hgroup 给标题分组，为标题或者子标题进行分组，通常与h1-h6元素组合使用。
如果文章中只有一个标题，则不使用hgroup。
闭合标签；块元素；默认的宽是：100%；高：内容的高度；
实质上，跟DIV标签，可以说是完全一样的特性；
8.figure 对多个元素进行组合。通常与figcaption联合使用。闭合标签；
块元素；默认的宽是：100%；高：内容的高度；实质上跟DIV标签，
可以说是完全一样的特性；figcaption 定义figure元素组的标题，
必须写在figure元素中。一个figure元素内最多只允许放置一个figcaption元素。
闭合标签；块元素；默认的宽是：100%；高：内容的高度；
实质上，跟DIV标签，可以说是完全一样的特性；
9.audio 播放声音文件，比如音乐或其它音频流。可以在开始标签和
结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持
该标签的信息。闭合标签；行内元素；默认的宽:controls的宽度300px
；高:controls的高度32px；autoplay autoplay 如果出现该属性，
则音频在就绪后马上播放。controls controls 如果出现该属性，
则向用户显示控件，比如播放按钮。preload preload 如果出现该
属性，则音频在页面加载时进行加载，并预备播放。如果使用
“autoplay”，则忽略该属性。src url 要播放的音频的 URL。
10.video 播放视频文件，比如电影或其它视频流。可以在开始标签和
结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该
标签的信息。闭合标签；行内元素；默认的宽：300px 高：150px。
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
height 设置视频播放器的高度。loop loop 如果出现该属性，
则当媒介文件完成播放后再次开始播放。preload preload
如果出现该属性，则视频在页面加载时进行加载，并预备播放。
如果使用 “autoplay”，则忽略该属性。src 要播放的视频的 URL。
width 设置视频播放器的宽度。
11.source为媒介元素（比如 video 和 audio）指定多个播放格式与编码，
浏览器会自动选择第一个可以识别的格式。非闭合标签，只有开始标签，
没有结束标签。source 行内元素，默认无宽度和高度。
media 定义媒介资源的类型，供浏览器决定是否下载。
src 媒介的 URL。type 定义播放器在音频流中的什么位置开始播放。
默认，音频从开头播放。
12.canvas定义图形，比如图表和其他图像。
闭合标签；行内元素；默认情况下，canvas创建的画布宽：300px;高：150px;
13.datalist 定义可选数据的列表。与 input 元素配合使用，
就可以制作出输入值的下拉列表。
闭合标签；行内元素；默认无宽度和高度。
14.embed 定义嵌入的内容，比如插件。用来插入各种多媒体，
格式可以是MIDI、MP3等。
非闭合标签，只有开始标签，没有结束标签。
行内元素；默认的宽：300px；高：150px。
15.time 定义日期或时间，或者两者。闭合标签；
行内元素，默认情况下，宽：内容的宽度；高：内容的高度；
16.address 为文档或 section 定义联系信息，比如：电子邮箱、
地址、电话、QQ、微信号等。
闭合标签；块元素；默认的宽是：100%；高： 内容的高度；
实质上，跟DIV标签，可以说是完全一样的特性；
17.map定义客户端的图像映射。图像映射是带有可点击区域的图像。
闭合标签；行内元素；默认情况下，无宽度和高度；
18.area area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
闭合标签，行内元素；只有结束标签，没有开始标签。默认情况下，无宽度和高度；
19.mark定义页面中需要突出显示或高亮显示的内容，通常在引用原文时，
使用此元素，目的就是引起当前用户的注意。闭合标签；行内元素；
默认情况下，宽：内容的宽度；高：内容的高度；
20.details 标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。
(备注信息)， 块元素 ；默认的宽是：100%；高： 内容的高度；
实质上，跟DIV标签，可以说是完全一样的特性；
但是有一个动态的效果，点击可以显示(展开)内容，再点击可以隐藏(收起)内容；
1-12 的标签一定要好好掌握； 多媒体（音乐、视频、图形）是结合 js 来做项目的。
html5新特性
HTML5 中的一些有趣的新特性：
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
用于媒介回放的 video 和 audio 元素
用于绘画的` canvas `元素
对本地离线存储的更好的支持（`localStorage`）
移除了哪些元素
纯表现的元素
<basefont> 默认字体，不设置字体，以此渲染
<font> 字体标签
<center> 水平居中
<u> 下划线
<big> 大字体
<strike> 中横线
<tt> 文本等宽
框架集
<frameset>
<noframes>
<frame>
WebSocket
// 初始化一个 WebSocket 对象
var ws = new WebSocket("ws://localhost:9998/echo");
// 建立 web socket 连接成功触发事件
ws.onopen = function () {
// 使用 send() 方法发送数据
ws.send("发送数据");
alert("数据发送中...");
};
// 接收服务端数据时触发事件
ws.onmessage = function (evt) {
var received_msg = evt.data;
alert("数据已接收...");
};
// 断开 web socket 连接成功触发事件
ws.onclose = function () {
alert("连接已关闭...");
};
网友评论