前端知识点系列一:HTML

2022-05-13 14:33:47 浏览数 (1)

持续更新......

1. Doctype作用

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

Doctype有三种类型:

类型

说明

代码

Strict

包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font);不允许框架集(Framesets)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Transitional

包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font);不允许框架集(Framesets)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Frameset

等同于 HTML 4.01 Transitional,但允许框架集内容

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

注意:

HTML5不需要制定Doctype类型,因为:

代码语言:javascript复制
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,但是,会共享localStoragecookie

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个字节表示一个符号,根据不同符号而变化字节长度。

0 人点赞