HTML可能会用到的一些知识

HTML知识总结？

1. DOCTYPE声明一般位于文档的第一行，它的作用主要是告诉浏览器以什么样的模式来解析文档。一般指定了之后会以标准模式来解析文档，否则不指定就以兼容模式来解析。
   • 标准模式：标准模式的渲染方式和 JS 引擎的解析方式都是以该浏览器支持的最高标准运行。
   • 兼容模式：浏览器会以向后兼容的方式来模拟老版本浏览器的行为，保证老网站的正确访问。
2. HTML5为什么系需要引入 ，而不需要引入DTD？
   • 什么是DTD？DTD 简介。 全称为：文档类型定义，可定义合法的XML文档构建模块。使用一系列合法的元素来定义文档的结构。可作外部引用。
   • 因为HTML5不基于SGML，所以不需要引入DTD，但是之前的html版本需要引入DTD。
3. 常见的空元素有哪些？
   • br, hr, img, input, link, meta。也叫单闭和元素。
4. meta viewport 是做什么的？怎么写？

   • 是为了在移动端浏览器做适配时使用，一般移动端浏览器渲染时都会比实际的手机屏幕宽度宽，而渲染的这个虚拟窗口就是viewport，可以通过viewport来设置宽度。

     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

     该标签的作用就是让页面的宽度等于设备的宽度，保证不出现横向滚动条。同时不允许用户手动缩放。

   • meta viewport 拥有 6 个属性：

     1. width：设置页面的宽度，"width-device"即为自适应设备宽度。
     2. initial-scale：页面的初始缩放值，可以带小数。
     3. minimum-scale：允许用户手指的最小缩放值，数字类型。
     4. maxmum-scale：允许用户的最大缩放值。
     5. height：页面的高度，该属性不常用。
     6. user-scalable：是否允许用户进行缩放，值为’yes’或’no’。
5. 页面导入样式时，使用 link 和 @import 有什么区别？
   • 加载顺序区别。加载页面时，link标签引入的css文件被同时加载；而@important引入的css文件将在页面加载完毕后再加载。
   • 兼容性区别。@important是css2.1才有的语法，故不适配IE5以下的浏览器；link作为heml的标签，不存在兼容性问题。
   • DOM可控性区别。link标签可以通过js操作DOM插入link标签来改变样式；但DOM是基于文档的，所以无法使用@important的方式插入样式。
   • 从属关系区别。@import是css提供的语法规则，只能起到导入样式表的作用；link是html提供的标签，不仅仅可以导入css文件。还可以定义rss、rel等连接属性、引入网站图表等。
6. cookies、sessionStorage、localStorage的解释及区别
   • HTML4以前只有cookie和session。cookie和session都是用来跟踪浏览器用户身份的会话方式。
   • HTML5新增了Web Storage本地数据库，Web Storage是对HTML4中cookie存储机制的一个改善。减轻了服务器端的负担，也加快了访问数据的速度。
   • HTML4中cookie存储数据的缺点：
     1. 大小：cookie的大小限制在4KB.无法存储足够多的数据。
     2. 带宽：cookie是随HTTP事务一起被发送的，因此会浪费一部分带宽。
     3. 复杂性：要正确的使用cookie是很难的。
   • 所以提出了Web Storage：
     1. sessionStorage：将数据保存在session对象中，关闭浏览器数据也会被一同删除。
     2. localStorage：将数据保存在客户端本地的硬件设备中，即使关闭，下次打开仍可以访问。
   • 二者区别在于，sessionStorage为临时保存，localStorage为永久保存。
   • 三者的区别在于
     1. 生命周期：cookie生成时会指定一个maxAge的值，在该时间内有效，默认关闭浏览器失效；sessionStorage 页面打开期间一直可用，关闭不可用；localStorage 除非手动清除，否则一直有效。
     2. 存放数据大小：cookie只能存放4kb左右的文件；sessiongStorage和localStorage可存放5M或更大的数据。
     3. 与服务器通信：cookie每次都会在http头中，会拉带宽，占网速，影响性能；sessionStorage与localStorage不会每次都携带，不参与和服务器的通信。
     4. 易用性：cookie需要自己封装对应的setCookie，getCookie等方法；sessionStorage和localStorage有自己原生的方法，可直接调用。
     5. 共同点：都是保存在浏览器端，与session机制不同。
7. HTML5的新特性有哪些？
   • 新增了图像、位置、存储、多任务等功能。
   • 新增标签：新增语义化标签：figure（子集为img标签和对应的描述）、footer、header、canvas画布、video、audio等播放标签。
   • 新增本地离线存储，上文的sessionStorage与localStorage。
   • 新增技术：Web Worker（运行在后台的js，不影响页面性能）Web Socket。
8. 浏览器内核的理解？
   • 常见浏览器及其对应内核：
     IE：Trident、Firefox：Gecko、Safari：Webkit、Chrome：Blink。
   • 主要可分为两部分：渲染引擎和js引擎。但现在JS越来越独立，内核就倾向于渲染引擎。
   • 渲染引擎：负责取得网页的内容（HTML、图像）、整理CSS，计算网页显示的方式，然后输出至打印机
   • JS引擎：解析和执行js来实现网页的动态效果。
9. 输入URL回车后发生了什么？
   1. 发送至 DNS 服务器并获得域名对应的web服务器的 IP 地址。
   2. 与web服务器建立 TCP 连接。
   3. 浏览器向web服务器的 IP 地址发送相应的 HTTP 请求。
   4. web服务器响应请求并返回指定的 URL 的数据，或错误信息，如有重定向，则定向到新的 URL 地址。
   5. 浏览器下载数据后解析 HTML 源文件，解析过程中实现对页面的排扳，解析完成后在浏览器中显示基础页面。
   6. 分析页面中的超链接并显示在当前页面，重复以上过程直至无超链接需要发送，完成全部显示。
10. TCP/IP 协议详解
    • TCP/IP 协议不是一个协议，而是协议族的统称。里面包含了IP协议、IMCP协议、TCP协议。以及http、ftp、pop3协议等等。
    • TCP/IP模型分为四层：
      1. 应用层：向用户提供一组常用的应用程序，比如电子邮件、文件传输访问、远程登录等。
      2. 传输层：提供应用程序间的通信。包括格式化信息流、提供可靠传输。传输层协议规定接收端必须响应确认，假如分组丢失，必须重新发送。
      3. 网络层：负责相邻计算机之间的通信。
      4. 网络接口层：TCP/IP的最底层，负责接收IP数据并通过网络发送，或者接收物理帧，抽出IP数据包，交给IP层。
    • TCP/IP意味着 TCP 和 IP 在一起工作。 TCP 负责应用软件（浏览器）和网络软件之间的通信。IP 负责计算机之间的通信。TCP负责将数据分割并装入 IP 包，然后在他们到达的时候重新组合，IP 负责将包发送至接收者。
    • TCP 三次握手：建立 TCP 连接时，需要客户端和服务器端总共发送三个包以确认连接的建立。
      1. 客户端发送SYN包（SYN=i）到服务器，并进入 SYN-SEND 状态，等待服务器确认；
      2. 服务器收到 SYN 包，必须确认客户的SYN（ack=i+1）,同时自己也发送一个SYN包（SYN=k）,即SYN+ACK包，此时服务器进入SYN-RECV状态；
      3. 客户端收到服务器的SYN+ACK包，向服务器发送确认报ACK（ack=k+1）,此包发送完毕，客户端和服务器进入ESTABLISHED状态，完成三次握手，客户端与服务器开始传送数据。
    • TCP 四次挥手：在断开 TCP 连接的时候需要客户端和服务器端总共发送四个包以确认连接的断开。
      1. Client发送一个FIN，用来关闭Client到Server的数据传送，Client进入FIN_WAIT状态。
      2. Server收到FIN后，发送ACK给Client，确认序号为收到序号+1，Server进入CLOSE_WAIT状态。
      3. Server发送一个FIN，用来关闭Server到Client的数据传送，Server进入LAST_ACK状态。
      4. Client收到FIN后，Client进入TIME_WAIT状态，接着发送一个ACK给Server，确认序号为收到序号+1，Server进入
         CLOSED状态，完成四次挥手。