整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
这里是云端源想IT，帮你轻松学IT”
嗨~ 今天的你过得还好吗？
谁见过风呢
勿论你和我
但当树木俯首
风正经过
- 2024.03.05 -
在这个数字化的时代，我们每天都在与网页打交道。你是否曾经好奇过，这些充满魔力的网页是如何诞生的呢？今天，我们就来揭开构成这些网页的神秘面纱——HTML（超文本标记语言）。
网页的基本组成
网页是构成网站的基本元素，通常由图片、链接、文字、声音、视频等元素组成，通常我们看见的网页都是.htm和.html后缀结尾的文件，因为都称为HTML文件。
什么是HTML
HTML 英文全称是 Hyper Text Markup Language，中文译为“超文本标记语言”，专门用来设计和编辑网页。
使用 HTML 编写的文件称为“HTML 文档”，一般后缀为.html（也可以使用.htm，不过比较少见）。HTML 文档是一种纯文本文件，您可以使用 Windows 记事本、Linux Vim、Notepad++、Sublime Text、VS Code 等文本编辑来打开或者创建。
每个网页都是一个 HTML 文档，使用浏览器访问一个链接（URL），实际上就是下载、解析和显示 HTML 文档的过程。将众多 HTML 文档放在一个文件夹中，然后提供对外访问权限，就构成了一个网站。
HTML的故事始于1989年，当时蒂姆·伯纳斯-李在欧洲核子研究中心（CERN）提出了一个名为“万维网”的概念。
为了实现这一概念，他发明了HTML，并随后与罗伯特·卡里奥一起发明了HTTP协议。从那时起，HTML就成为了互联网不可或缺的一部分。
上图简单罗列了HTML的发展历史，大家可以简单了解一下。
什么是标签
HTML 标记通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词，比如<html/>。
<标签>内容<标签/>什么是元素
"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思。但是严格来讲，一个HTML 元素包含了开始标签与结束标签，如下实例。
HTML 元素：
<p>这是一个段落</p>web浏览器
Web 浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取 HTML 文件，并将其作为网页显示。 浏览器并不是直接显示的 HTML 标签，但可以使用标签来决定如何展现 HTML页面的内容给用户：
HTML 属性
属性是用来修饰元素的，属性必须位于开始标签里，一个元素的属性可能不止一个，多个属性之间用空格隔开，多个属性之间不区分先后顺序。
每个属性都有值，属性和属性的值之间用等号链接，属性的值包含在引号当中，属性总是以名称/值对的形式出现。
一个典型的HTML文档由以下几个基本元素构成：
这是文档类型声明，告诉浏览器这个文档使用的是HTML5标准。
这是整个HTML文档的根元素，其他所有元素都包含在这个标签内。
这个部分包含了所有关于网页的元信息，如标题、字符集声明、引入的CSS样式表和JavaScript文件等。
这个标签定义了网页的标题，它显示在浏览器的标题栏或标签页上。
这个部分包含了网页的所有内容，如文本、图片、链接、表格、列表等。
HTML的结构示例
让我们通过一个简单的例子来具体了解HTML的结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个HTML页面</title>
</head>
<body>
<h1>欢迎来到我的网页！</h1>
<p>这是一个简单的段落。</p>
<a href="https://www.example.com">点击这里访问示例网站</a>
</body>
</html>在这个例子中，我们可以看到一个完整的HTML文档结构，从<!DOCTYPE html>开始，到最后一个</html>结束。
想象一下，如果HTML是一棵树，那么<html>就是树干，<head>和<body>就像是树的两个主要分支。<head>中的标签好比是树叶，它们虽然不起眼，但却至关重要，为树木提供营养。而<body>中的标签则像是树枝和果实，它们构成了树的主体，吸引人们的目光。
想要快速入门HTML吗？推荐一个前端开发基础课程，这个老师讲的特别好，零基础学习无压力，知识点结合代码，边学边练，可以免费试看试学，还有各种辅助工具和资料，非常适合新手！搜索【云端源想】前往学习哦！
HTML的特点主要包括简易性、可扩展性、平台无关性和通用性等。具体如下：
1、简易性：
HTML是一种相对容易学习和使用的语言，它的版本升级通常采用超集方式，使得新版本能够兼容旧版本的标签和功能，这样既保持了向后兼容性，又能够灵活方便地引入新的功能。
2、可扩展性：
随着互联网的发展，HTML也在不断增加新的元素和属性来满足新的需求，如支持多媒体内容的嵌入、更丰富的表单控件等。这种设计使得HTML能够适应不断变化的网络环境。
3、平台无关性：
HTML编写的网页可以在不同的操作系统和浏览器上显示，这是因为HTML是一种与平台无关的语言。这意味着无论用户使用什么设备或浏览器，都能够访问和浏览HTML页面。
4、通用性：
HTML是网络的通用语言，它是一种简单的标记语言，用于创建和结构化网页内容。由于其广泛的支持和普及，几乎所有的设备和浏览器都能够解析和显示HTML内容。
5、支持多种媒体格式：
HTML不仅支持文本内容，还能够嵌入图片、音频、视频等多种媒体格式，这使得网页可以提供丰富的用户体验。
6、标准化：
HTML遵循万维网联盟（W3C）制定的国际标准，这意味着网页开发者可以根据这些标准来创建网页，确保网页的互操作性和可访问性。
7、标签丰富：
HTML提供了一系列的标签，如标题、列表、链接、表格等，这些标签使得开发者能够创建出结构清晰、功能丰富的网页。
综上所述，HTML作为一种基础的网页开发语言，因其易学易用、跨平台、多功能和高度标准化的特点，成为了构建现代网络内容的核心工具。
HTML作为连接世界的纽带，其重要性不言而喻。它是数字世界的基石，也是每个想要进入互联网领域的人必须掌握的技能。无论你是梦想成为前端开发者，还是仅仅想要更好地理解这个由代码构成的世界，学习HTML都是一个不错的开始。
今天就先讲到这里了，
更多前端开发基础知识点击文末阅读原文查看哦！
记得关注【云端源想IT】一起学编程！
我们下期再见！
END
文案编辑|云端学长
文案配图|云端学长
内容由：云端源想分享
TML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。
1 HTML骨架格式
日常生活的书信，我们要遵循共同的约定。
同理：HTML 有自己的语言语法骨架格式：
<HTML>
<head>
<title></title>
</head>
<body>
</body>
</HTML>2 html基本标签
作用：所有HTML中标签的一个根节点。
作用：用于存放：title,meta,base,style,script,link
注意：在head标签中我们必须要设置的标签是title
作用：让页面拥有一个属于自己的标题。
作用：页面在的主体部分，用于存放所有的HTML标签：p,h,a,b,u,i,s,em,del,ins,strong,img
3 颜色的表示方式
第一种方式：使用颜色名称: 仅仅有16种颜色名可用英文字母，其余的要用16进制值。
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow第二种方式：RGB模式
第三种：十六进制
#000000 #ffffff #325687 #3774054 文档类型<!DOCTYPE>（重点）
<!DOCTYPE html>这句话就是告诉我们使用哪个html版本， 我们使用的是 html 5 的版本。 html有很多版本，那我们应该告诉用户和浏览器我们使用的版本号。
标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。
5 HTML标签的语义化（重点）
所谓标签语义化，就是指标签的含义。
为什么要有语义化标签：方便代码的阅读和维护，同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容，使用语义化标签会具有更好地搜索引擎优化
核心：合适的地方给一个最为合理的标签。
语义是否良好： 当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性，不管是谁都能看懂这块内容是什么。
遵循的原则：先确定语义的HTML ，再选合适的CSS。
6 总结：（重要知识点）
<html></html>
<head></head>
<title></title>
<body></body>
<table></table>
<tr></tr>
<td></td>
<span></span>
<p></p>
<form></form>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<object></object>
<style></style>
<b></b>
<u></u>
<strong></strong>
<i></i>
<div></div>
<a></a>
<script></script>
<center><center><br>
<hr>
<img>
<input>
<param>
<meta>
<link>1.注释标签：<!–注释–>
-------------------------------------
2.换行标签：<br/>
-------------------------------------
3.段落标签：<p>文本文字
特点：段与段之间有行高
属性：align对齐方式
(left：左对齐 center：居中 right：右对齐)
-------------------------------------
4.水平线标签:<hr/>
属性:
width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示)
size: 水平线的粗细 (像素表示，例如：10px)
color: 水平线的颜色
align:水平线的对齐方式(left：左对齐 center：居中 right：右对齐)
-------------------------------------
5.容器标签（重点）
<div>:块级标签，独占一行，换行
<span>:行级标签，所有内容都在同一行作用
<div>:主要是结合css页面分块布局
<span>:进行友好提示信息为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行；
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>容器里面装载着文字或图表的一种形式，叫列表。列表最大的特点就是 整齐 、整洁、 有序
无序列表 ul （重点）
无序列表标签： <ul></ul>
属性：type :三个值，分别为：
circle(空心圆) ,disc(默认,实心圆),square(黑色方块)
列表项：<li></li>
注意：
<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
<li>与</li>之间相当于一个容器，可以容纳所有元素。
无序列表会带有自己样式属性，放下那个样式，一会让CSS来！有序列表 ol
有序列表标签：<ol>
属性：type：1、A、a、I、i（数字、字母、罗马数字）
列表项： <li></li>定义列表dl
\dl>
<dt>名词1
<dd>名词1解释1
<dd>名词1解释2
…
<dt>名词2
<dd>名词2解释1
<dd>名词2解释2
…
</dl>
dl>
名词1
名词1解释1
名词1解释2
... 名词2
名词2解释1
名词2解释2
...独立标签
属性:
src：图片地址： 相对路径 （同一个网站） 绝对路径 （不同网站）
width:宽度height:高度border:边框align:对齐方式，代表图片与相邻的文本的相当位置（有三个属性值：top middle bottom）
alt:图片的文字说明hspace 和 vspace 设定图片边沿上下左右空白，以免文字或其它图片过于贴近链接标签
超链接可以是文本，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。（不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接）
属性：
href:跳转页面的地址(跳转到外网需要添加协议)；
name:名称，锚点(回到锚点: 顶部，底部，中间)，在访问锚点的书写格式:#name的值
target:_self(自己) _blank(新页面，之前页面存在) _
__parent top 默认
self_search相等于给页面起一个名字，如果再次打开时，如果页面存在，则不再打开新的页面。可以是任意名字。如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
算机网络知识，是面试常考的内容，在实际工作中也常常会涉及到。
最近总结了66条计算机网络相关的知识点，大家一起看一下吧：
http0.9流程：
客户端，构建请求，通过DNS查询IP地址，三次握手建立TCP连接，客户端发起请求，服务器响应，四次挥手，断开TCP连接。（与服务器只有一个来回）
http1.0流程：
客户端，构建请求，通过DNS查询IP地址，三次握手建立TCP连接，客户端发起请求，服务器响应，四次挥手，断开TCP连接。（与服务器有两个来回）
因为不足缺陷，就有了http1.1。
http1.1中浏览器再也不用为每个请求重新发起TCP连接了，增加内容有：缓存相关首部的扩展，OPTIONS方法，Upgrade首部，Range请求，压缩和传输编码，管道化等。但还是满足不了现在的web发展需求，so，就有了http.2版本。
http2解决了（管道化特性可以让客户端一次发送所有的请求，但是有些问题阻碍了管道化的发展，即是某个请求花了很长时间，那么队头阻塞会影响其他请求。）http中的队头阻塞问题。
使用http2会比http1.1在使用TCP时，用户体验的感知多数延迟的效果有了量化的改善，以及提升了TCP连接的利用率（并行的实现机制不依赖与服务器建立多个连接）
所以需要学习http2，了解更过的内容来掌握计算机网咯。
对于http2，你可以来运行一个http2的服务器，获取并安装一个http2的web服务器，下载并安装一张TLS证书，让浏览器和服务器通过http2来连接。（从数字证书认证机构申请一张证书）。
了解http2的协议，先让我们了解一下web页面的请求，就是用户在浏览器中呈现的效果，发生了些什么呢？
资源获取的步骤：
把待请求URL放入队列，判断URL是否已在请求队列，否的话就结束，是的话就判断请求域名是否DNS缓存中，没有的话就解析域名，有的话就到指定域名的TCP连接是否开启，没有的话就开启TCP连接，进行HTTPS请求，初始化并完成TLS协议握手，向页面对应的URL发送请求。
接收响应以及页面渲染步骤：
接收请求，判断是否HTML页面，是就解析HTML，对页面引用资源排优先级，添加引用资源到请求队列。（如果页面上的关键资源已经接收到，就开始渲染页面），判断是否有还要继续接收资源，继续解析渲染，直到结束。
第一种GET方法：发送一个请求来获取服务器上的某一些资源。
第二种POST方法：向URL指定的资源提交数据或附加新的数据。
第三种PUT方法：跟POST方法一样，可以向服务器提交数据，但是它们之间也所有不同，PUT指定了资源在服务器的位置，而POST没有哦。
第四种HEAD方法：指请求页面的首部。
第五种DELETE方法：删除服务器上的某资源。
第六种OPTIONS方法：它用于获取当前URL所支持的方法，如果请求成功，在Allow的头包含类似GET,POST等的信息。
第七种TARCE方法：用于激发一个远程的，应用层的请求消息回路。
第八种CONNECT方法：把请求连接转换到TCP/TP通道。
简单说说，浏览器根据请求的url交给dns域名解析，查找真正的ip地址，向服务器发起请求；服务器交给后台处理后，返回数据，浏览器会接收到文件数据，比如，html,js，css，图像等；然后浏览器会对加载到的资源进行语法解析，建立相应的内部数据结构；载入解析到的资源文件，渲染页面，完成显示页面效果。
不够清楚明白码？
那就再次详细一下，咳咳，从浏览器接收url，开始进行网络请求线程，发出一个完整的HTTP请求，从服务器端接收请求到对应的后台接收到请求，然后是后台和前台的http交互；其中的缓存问题（http的缓存），浏览器接收到http数据包后的解析流程，css的可视化格式模型，js引擎解析过程等；其他呈现页面效果。
：这里就需要你对浏览器内核的理解：其中主要的渲染引擎和JS引擎，这里了解一下你对浏览器内核的理解。
浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。其实最开始渲染引擎和JS引擎是没有区分明确的，不过后来JS引擎越来越独立，so，内核就倾向于渲染引擎。
对于资源请求/获取,资源响应/页面渲染，会给网络带宽和设备资源带来压力，这个时候就会考虑到web的性能优化。
其中里面的性能关键：
什么是数据包 数据包（IP数据包），指封装在固定结构的一系列字节，它定义了数据包的长度，传输的细节，以及其他与TCP相关的信息。
延迟：指IP数据包从一个网络端点到另一个网络端点所花费的时间。（所花费时间在于往返时延，是延迟的时间的两倍）
带宽：只要带宽没有饱和，两个网络端点的连接会一次处理尽可能多的数据量（所以带宽可能会成为性能的瓶颈）
建立连接时间：在客户端和服务器之间建立连接往返数据（三次握手）
TCP三次握手过程：客户端向服务器发起一个SYN包，服务器端返回对应的SYN的ACK响应以及新的SYN包，然后客户端返回对应的ACK。（在客户端和服务器之间建立正常的TCP网络连接时，客户端首先发出一个SYN消息，服务器使用SYN+ACK应答表示接收了这个消息，最后客户端再以ACK消息响应。）
SYN是同步序列编号，是TCP/IP建立连接时使用的握手信息。ACK是确认字符，在数据通信中，接收站发给发送站的一种传输类控制字符。表示发来的数据已确认接收无误。在TCP/IP协议中，如果接收方成功的接收到数据，那么会回复一个ACK数据。通过ACK信号有自己固定的格式，长度大小，由接收方回复给发送方。
详解三次握手：
第一次握手，建立连接时，客户端发送SYN包到服务器，并进入SYN_SENT状态，等待服务器确认，其中SYN就是同步序列编号。
第二次握手，服务器收到SYN包，必须确认客户的SYN，同时自己也发送一个SYN包，即是SYN+ACK包，此时服务器进入SYN_RECV状态。
第三次握手，客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK，此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。
完成三次握手，客户端与服务器开始传送数据。
TLS协商时间（TLS会造成额外的往返传输）
除了网络，还有页面内容本身或服务器性能，如首字节时间TTFB，内容下载时间，开始渲染时间，文档加载完成的时间等。
那么什么是TTFB，它是指客户端从开始定位到web页面，至接收到主体页面响应的第一字节所耗费的时间。它是测量：从浏览器发起请求至收到其第一字节之间的耗时。
内容下载时间是等同于被请求资源的最后字节到达时间。
开始渲染时间，从客户看到空白页面的时长。
优化技术：
对于http1的问题，迎来了http2。其中http1的问题：
队头阻塞，大多数情况下，浏览器会希望同时获取许多资源，但http1未提供机制来同时请求这些资源，如果仅是使用一个连接，需要发起请求，等待响应，然后才能发起下一个请求。
在http1中要给特性为管道化，可以允许一次发送一组请求，但是需要按照发送顺序依次接收响应。所以在请求应答过程中，如发生什么情况，剩下的工作都会被阻塞，这就是“队头阻塞”（阻塞在那次请求应答发生错误），阻碍网络传输和web页面的渲染，指导失去响应。
低效的TCP利用，TCP协议作为最可靠的协议之一，其核心是拥塞窗口。
拥塞窗口，是卫星通信在因特网中防止通信拥塞的一种措施，它是在发端采用了一种“拥塞避免”算法和“慢速启动”算法相结合的机制。“拥塞窗口”就是“拥塞避免”的窗口，它是一个装在发送端的可滑动窗口，窗口的大小是不超过接收端确认通知的窗口。
拥塞窗口指在接收方确认数据包之前，发送方可以发送的TCP包的数据。（如拥塞窗口指定为1的情况，那么发送方就发出1哥数据包之后，只有接收方确认了那个发出的数据包，才能发送下一个）
拥塞控制能防止过多的数据注入到网络中，用于避免网络过载，TCP中可以通过慢启动探索当前连接对应拥塞窗口的合适大小。即发送者发送数据的时候并非一开始注入大量数据到网络中，而是发送一个数据包进行测试，当得到确认回复后，额外发送一个未确认包。
这意味着得到一个确认回复，可以发送两个数据包，得到两个确认回复，可以发送四个数据包，以几何形式增长很快到达协议规定的拥塞窗口大小（发包数上限），这时候连接进入拥塞避免阶段，这种机制需要往返几次才能得知最佳拥塞窗口大小，但往返几次所需的时间成本不可忽略。
tcp中的慢启动概念，是用来探索当前连接对应拥塞窗口的合适大小。用来弄清楚新连接当前的网络情况。“慢速启动”是在连接建立后，每收到一个来自收端的确认，就控制窗口增加一个段值大小，当窗口值达到“慢速启动”的限值后，慢速启动便停止工作，避免了网络发生拥塞。
TCP传输控制协议的设计思路是，对假设情况很保守情况下，能够公平对待同一网络的不同流量的应用，它的避免拥塞机制被设计城即使在最差的网络情况下也可以起作用。
臃肿的消息首部，HTTP/1.1能压缩请求内容，但是消息首部却不能压缩。它可能占据请求的绝大部分（也可能是全部）也是比较常见了。（在这里如果能压缩请求首部，把请求变得更小，就能够缓解带宽压力了，降低系统的总负载）
受限的优先级设置，即如果浏览器针对指定域名开启多个socket请求，若web页面某些资源会比另外一些资源重要，会加重资源的排队效应，会延迟请求其他的资源，优先级高的资源先获取，优先级低的资源会在资源高的资源处理完成，（在处理过程中，浏览器不会发起新的资源请求）等待高的完成后再发起请求，(这就会让总的页面下载时间延长)。
在请求优先级高的资源的时间区间内浏览器并不会发起优先级较低的新请求
小结：HTTP1.1慢启动影响资源首次加载速度，TCP建立连接后，会开始请求传输，开始比较慢，然后不断加快，为了防止出现网络拥堵，会让页面的首次渲染时间变长。开始多个tcp，如出现网络下降，无法识别资源的优先级，会出现竞态问题。
数据压缩，在浏览器中发送请求时会带着Content-Encoding: gzip，里面时浏览器支持的压缩格式列表，有多种如，gzip，deflate，br等。这样服务器就可以从中选择一个压缩算法，放进Content-Encoding响应头里，再把原数据压缩后发给浏览器。
分块传输，就是将传输的文件分解成多个小块，然后分发给浏览器，浏览器收到后再重新组装复原。
每个分开包含两个部分，分块长度和分块数据（长度头和数据块），长度头以CRLF结尾的一行明文，数据块紧跟在长度头后面，也是用CRLF结尾，最后用一个长度为0的块表示结束。
在响应报文里用头字段Transfer-Encoding:chunked表示报文里的body部分不是一次性发送过来的，而是分成了许多块逐个发送的。
在Transfer-Encoding：chunked和Content-Length中，这两个字段是互斥的。
一个响应报文的传输长度要么已知，要么长度未知（chunked）。
Content-Length: 299
断点续传
要实现该功能需要制定下载的实体范围，这种制定范围发送请求叫做范围请求。
Accept-Ranges：服务器使用http响应头Accept-Ranges标识自身支持范围请求，字段的具体值用于定义范围请求的单位。
语法
Accept-Ranges: bytes,范围请求的单位是 bytes （字节）Accept-Ranges: none,不支持任何范围请求单位范围请求时用于不需要全部数据，只需要其中的部分请求时，可以使用范围请求，允许客户端在请求头里使用专用字段来表示只获取文件的一部分。
Range的格式，请求头Range是HTTP范围请求的专用字段，格式是“bytes=x-y”,以字节为单位的数据范围。
示例：
执行范围时会使用头部字段 Range 来指定资源 byte 的范围。Range格式：5001-10000字节Range : byte = 5001-100005000之后的Range : byte = 5001-0-3000字节，5001-10000字节Range : byte=-3000,5001-10000上图表示服务器收到Range字段后，检测范围合法性，范围越界，就会返回状态码416，如你的文件只有1000个字节，但请求范围在20000-3000，就会导致这个状态码的出现。
如果成功读取文件，范围正确，返回状态码“206”。服务器要添加一个响应头字段Content-Range,告诉片段的实际偏移量和资源的总大小。
最后是发送数据，直接把片段用TCP发给客户端，一个范围请求就算是处理完了。
格式是“bytes x-y/length”,与Range头区别在没有“=”
Content-Range: bytes 0-4395719/4395720
多端数据，就是在Range头里使用多个“x-y"，一次性获取多个片段数据。使用一种特殊的MIME类型：“multipart/byteranges”，用来表示响应报文包含了多个范围时使用。多种范围请求 响应会在头部 Content-Type 表明 multipart-byteranges。
多段数据图：分隔标记boundary来区分不同的分段
存储的大小
cookie的数据大小不能超过4k；sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或者更大。
有限期时间
因为CDN缓存更方便；突破浏览器并发限制；节约cookie带宽；节约主域名得连接数，优化页面响应速度；防止不必要的安全性问题。
http2是超文本传输协议的第二版，相比http1协议的文本传输格式，http2是以二进制的格式进行数据传输的，具有更小的传输体积以及负载。
http2.0分层，分帧层（http2多路复用能力的核心部分),数据或http层（包含传统上被认为是 HTTP 及其关联数据的部分）。
HTTP2.0：
HTTP/2较HTTP/1.1优化亮点
多路复用的实现：
在单个域名下仍可以建立一个TCP管道，使用一个TCP长连接，下载整个资源页面，只需要一次慢启动，并且避免了竞态，浏览器发起请求，分帧层会对每个请求进行分割，将同一个请求的分割块打上相同的id编号，然后通过协议栈将所有的分割体发送给服务器，然后通过服务器的分帧层根据id编号进行请求组装，服务器的分帧层将回应数据分割按同一个回应体进行ID分割回应给客户端，客户端拼装回应。
对于http2中的帧（frame），http1不是基于帧（frame）的，是文本分隔的。
GET/HTTP/1.1 <crlf>
这样，对于http1的请求或者是响应可能有的问题：
HTTP/1 的请求和响应报文，是由起始行、首部和正文组成，换行符分隔；HTTP/2是将请求和响应数据分割成更小的帧，采用二进制编码，易于解析的。
参考图片：
帧结构总结 所有的帧都包含一个9 byte的帧头 + 可边长的正文不同。根据帧的类型不同，正文部分的结构也不一样。
帧头：
http2作为一个二进制协议，拥有包含轻量型，安全和快速在内的所有优势，保留了原始的http协议语义，对于http2更改了在系统之间传输数据的方式。
二进制分帧层（binary framing layer），所有通信都在单个TCP连接上执行，该连接在整个对话期间一直处于打开状态，主要是二进制协议将通信分解为帧的方式，这些帧交织在客户端与服务器之间的双向逻辑流中。
HTTP/2 连接的拓扑结构(展示了一个用于建立多个流的连接)
在流 1 中，发送了一条请求消息，并返回了相应的响应消息。
HTTP/2 帧结构
前9个字节对于每个帧是一致的。解析时只需要读取这些字节，就可以准确地知道在整个帧中期望的字节数。
帧首部字段表格：
名称长度描述length3字节表示帧负载的长度type1字节当前帧类型Flags1字节具体帧类型的标识R1位保留位，不要设置，否则会带来严重后果Stream Identifier31位每个流的唯一IDFrame Payload长度可变真实的帧内容,长度是在length字段中设置的
备注：流Id是用来标识帧所属的流。流看作在连接上的一系列帧，它们构成了单独的 HTTP 请求和响应。
对于http1 的请求和响应都分成消息首部和消息体两部分；http2 从上面一张图可以知道，http2的请求和响应分成HEADERS 帧和 DATA 帧。
比较一下：
http2的一个重要特性是基于流的流量控制。提供了客户端调整传输速度的能力。其中WINDOW_UPDATE 帧用来指示流量控制信息。
有了多路复用，客户端可以一次发出多有资源的请求，不用像http1那样，发出对新对象请求之前，需要等待前一个响应完成。所以浏览器失去了在Http1中的默认资源请求优先级策略。
http的头字段
头字段类型含义Date表示请求和响应生成的日期Pragma表示数据是否允许缓存的通信选项Cache-Control控制缓存的相关信息Connection设置发送响应之后TCP连接是否继续保持的通信选项Transfer-Encoding表示消息主体的编码格式Via记录途中经过的代理和网关Authorization身份认证数据From请求发送者的邮件地址Referer当通过点击超级链接进入下一个页面时，在这里会记录下上一个页面的URIUser-Agent客户端软件的名称和版本号等相关信息Accept客户端可支持的数据类型，以MIME类型来表示Accept-Charset客户端可支持的字符集Accept-Language客户端可支持的语言Host接收请求的服务器ip地址和端口号Range当需要只获取部分数据而不是全部数据时，可通过这个字段指定要获取的数据范围Location表示信息的准确位置Server服务器程序的名称和版本号等相关信息Allow表示指定的URI支持Content-Encoding当消息体经过压缩等编码处理时，表示其编码格式Content-Length表示消息体的长度Content-Type表示消息体的数据类型，以MIME规格定义的数据类型来表示Expires表示消息体的有效期Last-Modified数据的最后更新日期Content-Language表示消息体的语言Content-Location表示消息体在服务器上的位置Content-Range当仅请求部分数据时，表示消息体包含的数据范围
HTTP消息示例：
IP 的基本思路
Ip地址的表示方法
IP地址的结构-子网掩码表示网络号与主机号之间的边界。
解析器的调用方法
DNS服务器的基本工作
DNS 服务器之间的查询操作
数据通过类似管道的结构来流动
计算机网络，可以将规模分WAN,Wide Area Network广域网，和LAN局域网。通过电脑连接交换机再到路由器的连接。
你知道计算机与网络都经历了怎么样的一个发展过程吗？
TCP/IP的机制是什么，TCP/IP通信协议的统称，学习这个有人一定不了解什么是协议。
但我们在接触到程序时，常常听到协议如IP，TCP，HTTP等协议。记住TCP/IP就是IP,TCP,HTTP等协议的集合。协议就是计算机与计算机之间通过网络实现通信时需要达成的一种的“约定”。这些协议就是让不同厂商的设备，不同的CPU和不同的操作系统组成的计算机之间进行通信。
就是两台计算机之间都能支持相同的协议，并遵循才能实现相互通信。
分组交换协议
分组交换就是将大数据分割成一个一个叫做包的较小单位进行传输的方法。
分层模块
了解OSI参考模型
OSI将分为易于理解的7层：
1.物理层，2.数据链路层，3.网络层，4.传输层，5.会话层，6.表示层，7.应用层。
应用层：是对特定应用的协议。
表示层：设备固有数据格式和网络标准数据格式的转换。
会话层：通信管理。负责建立和断开通信连接。
传输层：管理两个节点之间的数据传输。
网络层：地址管理与路由选择。
数据链路层：互连设备之间传送和识别数据帧。
物理层：以“0”，“1”代表电压的高低，灯光的闪灭。
如何模块化通信传输
网络构成要素
网卡：
什么是网关，它是OSI参考模型中负责将从传输层到应用层的数据进行转换和转发的设备。
代理服务：
第一，我们可以禁止使用iframe，第二，可以禁止使用gif图片来实现loading效果，降低CPU的消耗，来提升渲染性能，第三，使用CSS3代码来代替JS动画。
对于一些小图标，可以使用base64位编码，以减少网络请求，但不建议大图使用，因为比较耗费CPU，小图标优势在于，可以减少HTTP请求，避免文件跨域，修改及时生效。
页面头部的style和script会阻塞页面，在Renderer进程中的JS线程和渲染线程是互斥的。
TCP/IP协议族市一组协议的集合，也称为互联网协议族。
20世纪60年代后半叶，应DoD要求，美国开始进行通信技术相关的演技，ARPANET的诞生，开发分组交互技术，在1975年，TCP/IP的诞生。1983年，ARPANET决定正式启用TCP/IP为通信协议。
TCP/IP与OSI参考模型
对于OSI七层模型太细了，而互联网协议族TCP/IP模型划分为四层。
TCP/IP模型（应用层，传输层，互联网层，网络接口层）-应用层，传输层，网络层，链路层。
传输层就是可以让应用程序之间实现通信。
在其中TCP是一种面向有连接的传输层协议，保证两端通信主机之间的通信可达。UDP是一种面向无连接的传输层协议，so，UDP用于分组数据较少或者多播，广播通信以及视频通信等领域。
应用层
好了各位，以上就是这篇文章的全部内容，能看到这里的人都是人才。我后面会不断更新网络技术相关的文章，如果觉得文章对你有用，欢迎给个赞，也欢迎分享，感谢大家 ！！
喜欢本文的朋友们，欢迎长按下图关注公众号程序员小灰，收看更多精彩内容
*请认真填写需求信息，我们会在24小时内与您取得联系。
