知识点整理（一）

1，描述cookie，sessionStorage 和 localStorage 的区别？

cookie是网站为了表示用户身份而存储在用户本地终端上的数据， 通常加密
cookie数据始终在同源的http请求中携带， 会在浏览器和服务器间来回传递
sessionStorage 和 localStorage 不会自动把数据发给数据发给服务器， 存在本地
存储大小: cookie数据大小不能超过4k
sessionStorage 和 localStorage虽然也有存储代销的限制，但比cookie打的多， 可以达到5m
有效时间： localStorage数据存储时间久，浏览器关闭后数据不会消失
sessionStorage ：存储时间短 浏览器关闭后数据自动删除
cookie：设置的cookie过期时间之前一直有效，即使窗口关闭

2，iframe的缺点

阻塞主页面onload事件
搜索引擎检索程序无法解读这种页面， 不利于SEO
和主页面共享连接池，浏览器对相同城的连接有限制，所以会影响页面的并行加载
使用iframe之前需要考虑这两个缺点， 如果要用最好通过javascript
动态给iframe添加src属性， 这样可以绕开这两个问题

3，label作用 怎么用的

label标签定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的控制件上

4，如何实现浏览器内多个标签之间的通信

webSocket，SharedWorker
也可以调用localStorage ， cookie等本地存储方式
localStorage 另一个浏览器上下文里被添加修改成删除时，他会触发一个事件
我们通过监听事件，控制无痕模式下设置localStorage 值时会抛出 QuotaExceedError的异常

5，如何在页面上实现一个圆形的可点击区域

map+area或者svg
border-radius
纯js实现需要求一个点在不在圆上简单算法 获取鼠标坐标等

6，title与h1区别 b与strong区别 i与em区别

title属性没有明确意义只表示是个标题，h1则表示层次明确的标题，对页面信息的抓取也有很大影响
strong表明重点内容，有语气加强的含义，使用阅读设备阅读网络时strong会加强读，而b是展示强调内容
i内容为斜体 em表示强调文本
Physical Style Elements 自然样式标签 b， l， u， s， pre
Semantic Style Elements 语义样式标签 strong， em，del，code

7，data属性的作用

h5新增的属性可以通过ele.dataset获取到标签上的data-*的属性 返回一个对象

8，浏览器标准模式和怪异模式之间的区别

标准模式下浏览器按照html与css标准对文档进行解析和渲染
在怪异模式下 浏览器按照旧有的非标准模式对文档进行解析和渲染

9，常见兼容性问题 写不动了写不动了

png24位的图片在ie6浏览器上出现背景 解决方式是做成png8
浏览器默认的margin和padding不同， 解决方式是加一个全局的*{margin：0， padding：0}来统一
ie6双边距bug块属性标签float后，又有横行的margin情况下， 在ie6显示margin比设置值要大
浮动ie产生的双倍边距距离#box{float：left；width：10px；margin：0 0 0 100px}这种情况下ie产生20px的距离解决方案是在float的标签样式控制中加入display：inline转为行内元素
渐进识别的方式，从总体中逐渐排出局部
首先，巧妙的使用“\9”这一标记将浏览器从情况中分离出来
接着，再次使用“+”将ie8和ie7，ie6分离出来这样ie8已经独立识别出来color： #fff 所有识别
.color： #fff\9 ie6,7,8识别
+color： #fff ie6,7,识别
_color： #fff ie6识别
ie下，可以使用获取常规属性的方法来获取自定义属性
firefox下， 只能使用getAttribute（）来获取自定义属性
解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}