一、浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢？
- 在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问 app，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。 - 离线的情况下，浏览器就直接使用离线存储的资源。
二、请描述一下 cookies，sessionStorage 和 localStorage 的区别？
- cookie 是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密） - cookie 数据始终在同源的 http 请求中携带（即使不需要），记会在浏览器和服务器间来回传递。 - sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。 - 存储大小： - cookie 数据大小不能超过 4k。 - sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。 - 有效期（生命周期）： - localStorage: 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据； - sessionStorage: 数据在当前浏览器窗口关闭后自动删除。 - cookie: 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭
三、iframe 有那些缺点？
- iframe 会阻塞主页面的 Onload 事件； - 搜索引擎的检索程序无法解读这种页面，不利于 SEO; - iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。 使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe，最好是通过 javascript 动态给 iframe 添加 src 属性值，这样可以绕开以上两个问题。
四、Label 的作用是什么？是怎么用的？
label 标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
```html
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>
``````html <label for="Name">Number:</label> <input type=“text“name="Name" id="Name"/> <label>Date:<input type="text" name="B"/></label> ```
五、HTML5 的 form 如何关闭自动完成功能？
给不想要提示的 form 或某个 input 设置为 autocomplete=off。
六、如何实现浏览器内多个标签页之间的通信? (阿里)
- WebSocket、SharedWorker； - 也可以调用 localstorge、cookies 等本地存储方式； localstorge 另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件， 我们通过监听事件，控制它的值来进行页面信息通信； 注意 quirks：Safari 在无痕模式下设置 localstorge 值时会抛出 QuotaExceededError 的异常；
七、webSocket 如何兼容低浏览器？(阿里)
- Adobe Flash Socket 、 - ActiveX HTMLFile (IE) 、 - 基于 multipart 编码发送 XHR 、 - 基于长轮询的 XHR
八、页面可见性（Page Visibility API） 可以有哪些用途？
- 通过 visibilityState 的值检测页面当前是否可见，以及打开网页的时间等; - 在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放；
九、如何在页面上实现一个圆形的可点击区域？
- map+area 或者 svg - border-radius - 纯 js 实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等
十、实现不使用 border 画出 1px 高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。
```html
<div style="height:1px;overflow:hidden;background:red"></div>
``````html <div style="height:1px;overflow:hidden;background:red"></div> ```
十一、网页验证码是干嘛的，是为了解决什么安全问题。
- 区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水； - 有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。
十二、title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？
title 属性没有明确意义只表示是个标题，H1 则表示层次明确的标题，对页面信息的抓取也有很大的影响；
strong 是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：strong 会重读，而 b 是展示强调内容。
i 内容展示为斜体，em 表示强调的文本；
十三、html 中 title 属性和 alt 属性的区别？
```html
<img src="#" alt="alt信息" />
``````html <img src="#" alt="alt信息" /> ```
当图片不输出信息的时候，会显示 alt 信息 鼠标放上去没有信息，当图片正常读取，不会出现 alt 信息。
```html
<img src="#" alt="alt信息" title="title信息" />
``````html <img src="#" alt="alt信息" title="title信息" /> ```
当图片不输出信息的时候，会显示 alt 信息 鼠标放上去会出现 title 信息； 当图片正常输出的时候，不会出现 alt 信息，鼠标放上去会出现 title 信息。
十四、另外还有一些关于 title 属性的知识
title 属性可以用在除了 base，basefont，head，html，meta，param，script 和 title 之外的所有标签。
title 属性的功能是提示。额外的说明信息和非本质的信息请使用 title 属性。title 属性值可以比 alt 属性值设置的更长。
title 属性有一个很好的用途，即为链接添加描述性文字，特别是当连接本身并不是十分清楚的表达了链接的目的。
