前端知识点系列一：HTML

持续更新......

1. Doctype作用

声明位于位于HTML文档中的第一行，处于标签之前。告知浏览器的解析器用什么文档标准解析这个文档。
DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

Doctype有三种类型：

| 类型 | 说明 | 代码 |
| :--- | :--- |
| Strict | 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）;不允许框架集（Framesets） |
| Transitional | 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）;不允许框架集（Framesets） | |
| Frameset | 等同于 HTML 4.01 Transitional，但允许框架集内容 | |

注意：

HTML5不需要制定Doctype类型，因为：

HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

2. cookies，sessionStorage 和 localStorage 的区别

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小

cookie数据大小不能超过4k。
sessionStorage和localStorage 可以达到5M或更大。

有期时间

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

注意：不同浏览器tab之间（同一个url），不共享sessionStorage，但是，会共享localStorage和cookie。

3. iframe有那些缺点?

iframe会阻塞主页面的Onload事件；
搜索引擎的检索程序无法解读这种页面，不利于SEO;
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

通过javascript 动态给iframe添加src属性值，可以避免这两个问题。

3. 如何实现浏览器内多个标签页之间的通信

WebSocket
调用localstorge、cookies等本地存储方式

localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，通过监听事件，控制它的值来进行页面信息通信

4. ASCII，Unicode和UTF-8区别

ASCII：将英文字符映射为二进制的字符编码
Unicode：包含全世界所有字符的集合。它只规定了字符的二进制代码，却没有规定如何存储这个二进制代码（一个字符可能需要多个字节，一个字节是8位二进制）
UTF-8：实现Unicode的一种编码方式。它是一种变长的编码方式，用1~4个字节表示一个符号，根据不同符号而变化字节长度。

更多高阶内容，可移步《小专栏-娜姐聊前端》。