目所见即所得，充分发挥了一个好的题目的重要性，废话不多说，进入今天的正题。先看一下图，⼤概的就能理解整个过程了，但是有很多点可以细挖：DNS 解析、TCP 三次握⼿、HTTP 报⽂格式、TCP 四次挥⼿等等。

浏览器地址栏是Web浏览器中用于输入网址的区域。当用户在地址栏中输入网址URL(Uniform Resource Locator的缩写)并按下回车键时，浏览器会解析该网址并加载相应的网页内容。这个过程涉及到以下几个关键步骤：

第一步、DNS解析：

A) 浏览器内核首先搜索自身的DNS缓存，如果命中，则返回域名的IP地址。如果未命中尝试访问操作系统的DNS缓存,我们可以打开chrome流啊兰奇，，在chrome地址栏输入:chrome://net-internals/#dns 查看浏览器内的dns缓存，如果是edge浏览器输入：edge://net-internals/?#dns 点击lookup查询结果,可以点击“Clear host cache”清理浏览器DNS记录。

在windows命令行输入以下命令：nslookup -d www.baidu.com 查询DNS记录信息吗，查询结果如下,截图只是一部分值，可以下去自己了解

A) 操作系统的DNS缓存，以windows系统为例，查找ipconfig/displaydns 里面的内容，如果命中，返回域名的IP地址，如果未命中，尝试读取hosts文件（C:\Windows\System32\drivers\etc）

C、读取hosts文件，如果命中，返回域名的IP地址，如果未命中，尝试调用DNS系统调用发送DNS请求（端口53）到首选的ISP DNS服务器（一般是电信运营商提供）

D、 ISP 的 DNS 服务器：ISP 是互联网服务提供商(Internet Service Provider)的简称，ISP 有专门的 DNS 服务器应对 DNS 查询请求如果在hosts文件中也没有找到对应的条目，浏览器就会发起一个DNS的系统调用，就会向 本地配置的首选DNS服务器（一般是电信运营商提供的）发起域名解析请求（通过的是UDP协议向DNS的53端口发起请求，这个请求是递归的请求，也就是运营商的DNS服务器必须得提供给我们该域名的IP地址）如果命中，返回域名的IP地址，如果未命中尝试根域名服务器（全球13个），进行递归查询。 查询顺序：根服务器--->顶级域名服务器（.com;.cn等）--->然后域名服务器。

总结这样就完成了域名映射的成IP地址

第二步、TCP建立链接：

一旦解析出URL对应的IP地址，浏览器会尝试与服务器建立TCP连接。这个过程涉及三次握手（客户端向服务器发送SYN数据包，服务器发送SYN+ACK数据包，客户端发送ACK数据包）以建立可靠的传输通道。

三次握手的过程：

1、客户端发送建立TCP连接的请求报文，其中报文中包含seq序列号，是由发送端随机生成的，并且将报文中的SYN字段置为1，表示需要建立TCP连接。（SYN=1，seq=x，x为随机生成数值）；

2、服务端回复客户端发送的TCP连接请求报文，其中包含seq序列号，是由回复端随机生成的，并且将SYN置为1，而且会产生ACK字段，ACK字段数值是在客户端发送过来的序列号seq的基础上加1进行回复，以便客户端收到信息时，知晓自己的TCP建立请求已得到验证。（SYN=1，ACK=x+1，seq=y，y为随机生成数值）这里的ack加1可以理解为是确认和谁建立连接；

3、客户端收到服务端发送的TCP建立验证请求后，会使自己的序列号加1表示，并且再次回复ACK验证请求，在服务端发过来的seq上加1进行回复。（SYN=1，ACK=y+1，seq=x+1）。

为啥要三次握手呢？“为了防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误”。

第三步、向服务发送 HTTP 请求：

一旦TCP连接建立成功，浏览器会向服务器发送一个HTTP请求。这个请求通常包含请求行、请求头和请求体。请求行描述了请求的类型（如GET、POST等）和资源路径。请求头提供了有关请求的详细信息，如请求的HTTP版本、用户代理的信息等，以chrom为例，按下F12即可进入开发模式，NEtwork一栏查看Http请求具体报文

第四步、服务器处理请求，返回 HTTP 响应数据：

服务器接收到请求后，会根据请求的内容和权限来处理该请求。处理完成后，服务器会向浏览器发送一个HTTP响应。这个响应通常包含一个状态行、响应头和响应体。状态行描述了响应的状态（如200 OK）和消息（如“OK”）。响应头提供了有关响应的详细信息，如响应类型、缓存控制等。响应体包含了服务器返回给浏览器的原始数据。

第五步、浏览器解析 HTTP 响应数据，并渲染页面：

一旦收到HTTP响应数据，浏览器会解析该数据以构建页面。解析过程中，浏览器会提取响应头中的信息，并根据这些信息来处理页面内容。然后，浏览器会将解析后的页面内容呈现给用户，通常会使用HTML、CSS和JavaScript等技术来实现页面的样式和交互效果。

第六步、断开链接：

当浏览器完成对页面的渲染后，它会自动发送一个TCP断开链接的命令（TCP四次挥手），以终止与服务器的连接。这个过程涉及四次挥手（客户端向服务器发送FIN数据包，服务器发送ACK数据包，客户端发送FIN+ACK数据包，服务器发送FIN数据包）以释放资源并断开连接。

四次挥手的详细过程：

1、客户端发送断开TCP连接请求的报文，其中报文中包含seq序列号，是由发送端随机生成的，并且还将报文中的FIN字段置为1，表示需要断开TCP连接。（FIN=1，seq=x，x由客户端随机生成）；

2、服务端会回复客户端发送的TCP断开请求报文，其包含seq序列号，是由回复端随机生成的，而且会产生ACK字段，ACK字段数值是在客户端发过来的seq序列号基础上加1进行回复，以便客户端收到信息时，知晓自己的TCP断开请求已经得到验证。（FIN=1，ACK=x+1，seq=y，y由服务端随机生成）；

3、服务端在回复完客户端的TCP断开请求后，不会马上进行TCP连接的断开，服务端会先确保断开前，所有传输到A的数据是否已经传输完毕，一旦确认传输数据完毕，就会将回复报文的FIN字段置1，并且产生随机seq序列号。（FIN=1，ACK=x+1，seq=z，z由服务端随机生成）；

4、客户端收到服务端的TCP断开请求后，会回复服务端的断开请求，包含随机生成的seq字段和ACK字段，ACK字段会在服务端的TCP断开请求的seq基础上加1，从而完成服务端请求的验证回复。（FIN=1，ACK=z+1，seq=h，h为客户端随机生成）

至此TCP断开的4次挥手过程完毕。

总结从浏览器地址栏输⼊url到显示主⻚的过程涉及多个关键步骤，包括URL解析、建立连接、获取网页内容以及渲染页面等。这些步骤通过复杂的计算机网络和计算机系统实现，使得用户可以轻松地访问Web资源并获得丰富的互联网体验。

参考：https://zhuanlan.zhihu.com/p/609043689

https://zhuanlan.zhihu.com/p/629094462?utm_id=0

https://code84.com/664373.html#

TML 或超文本标记语言 允许 Web 用户使用元素、标签和属性创建和构造部分、段落和链接。然而，值得注意的是，HTML 不能被视为一种编程语言，因为它不能创建动态功能。

HTML有很多用例，即：

1. 网页开发。开发人员使用 HTML 代码来设计浏览器如何显示网页元素，例如文本、超链接和媒体文件。
2. 互联网导航。由于 HTML 被大量用于嵌入超链接，因此用户可以轻松地在相关页面和网站之间导航和插入链接。
3. 网络文档。HTML 使组织和格式化文档成为可能，类似于 Microsoft Word。
4. 还值得注意的是，HTML 现在被视为官方 Web 标准。万维网联盟 (W3C)维护和开发 HTML 规范，同时提供定期更新。

本文将介绍 HTML 的基础知识，包括它的工作原理、优缺点以及它与 CSS 和 JavaScript 的关系。

什么是 HTML？

HTML（代表超文本标记语言）是构成大多数网页和在线应用程序的计算机语言。超文本是用于引用其他文本片段的文本，而标记语言是告诉 Web 服务器文档的样式和结构的一系列标记。

HTML 是如何工作的

html文件

平均每个网站包含几个不同的信息 HTML 页面。例如，主页、关于页面和联系页面都将具有单独的 HTML 文件。

HTML 文档是以 .html 或 .htm 扩展名结尾的文件。Web 浏览器读取 HTML 文件并呈现其内容，以便互联网用户可以查看它。

html元素的三个部分

所有 HTML 页面都有一系列 HTML 元素，由一组标签和属性组成。HTML 元素是网页的构建块。标签告诉 Web 浏览器元素在哪里开始和结束，而属性描述元素的特征。

元素的三个主要部分是：

• 开始标签 - 用于说明元素开始生效的位置。标签用左尖括号和右尖括号包裹。例如，使用开始标签 <p> 创建一个段落。
• 内容——这是其他用户看到的输出。
• 结束标签 - 与开始标签相同，但在元素名称前有一个正斜杠。例如，</p> 结束一个段落。

这三个部分的组合将创建一个 HTML 元素：

<p>这是在HTML中添加段落的方法。</p>

HTML 元素的另一个关键部分是它的属性，它有两个部分——名称和属性值。名称标识用户想要添加的附加信息，并且属性值给出进一步的说明。

例如，添加紫色和 font-family verdana 的样式元素将如下所示：

< p style= "color:purple;font-family:verdana" >这是在HTML中添加段落的方法。< /p >

另一个属性，HTML 类，对于开发和编程来说是最重要的。class 属性添加了可以作用于具有相同类值的不同元素的样式信息。 例如，我们将对标题 <h1> 和段落 <p> 使用相同的样式。样式包括背景颜色、文本颜色、边框、边距和填充，在 .important 类下。要在 <h1> 和 <p> 之间实现相同的样式，请在每个开始标记后添加 class=”important”：

<html>
<head>
<style>
.important {
  background-color: blue;
  color: white;
  border: 2px solid black;
  margin: 2px;
  padding: 2px;
}
</style>
</head>
<body>
<h1 class="important">This is a heading</h1>
<p class="important">This is a paragraph.</p>
</body>
</html>

大多数元素都有一个开始标签和一个结束标签，但有些元素不需要结束标签即可工作，例如空元素。这些元素不使用结束标签，因为它们没有内容：

< img src= "/" alt= "图像" >

这个图像标签有两个属性——一个src属性，图像路径，和一个alt属性，描述性文本。但是，它没有内容，也没有结束标签。

最后，每个 HTML 文档都必须以 <!DOCTYPE> 声明开头，以告知 Web 浏览器文档类型。使用 HTML5，doctype HTML public 声明将是：

< !DOCTYPE html >

最常用的 HTML 标签和 HTML 元素

目前，有 142 个 HTML 标签可以用于创建各种元素。尽管现代浏览器不再支持其中一些标签，但学习所有可用的不同元素仍然是有益的。

第二节将讨论最常用的 HTML 标签和两个主要元素——块级元素和内联元素。

块级元素

块级元素占据页面的整个宽度。它总是在文档中开始一个新行。例如，标题元素将位于与段落元素不同的行中。

每个 HTML 页面都使用这三个标签：

• <html>标签是定义整个 HTML 文档的根元素。
• <head> 标签保存页面标题和字符集等元信息。
• <body>标签包含了页面上出现的所有内容。

<html>
  <head>
    <!-- META INFORMATION -->  
  </head>
  <body>
    <!-- PAGE CONTENT -->
  </body>
</html>

其他流行的块级标签包括：

• 标题标签 - 这些范围从 <h1> 到 <h6>，其中标题 h1 的大小最大，当它们向上移动到 h6 时变得越来越小。
• 段落标签——全部使用 <p> 标签括起来。
• 列表标签——有不同的变体。<ol> 标签用于有序列表，<ul> 用于无序列表。然后，使用 <li> 标记将各个列表项括起来。

内联元素

内联元素格式化块级元素的内部内容，例如添加链接和强调的字符串。内联元素最常用于在不破坏内容流的情况下格式化文本。

例如，一个 <strong> 标签会以粗体呈现一个元素，而 <em> 标签会以斜体显示它。超链接也是使用 <a> 标记和 href 属性来指示链接目标的内联元素：

<a href="https://www.icodingdeu.com/" >点我！</a> 

HTML 演变——HTML 和 HTML5 有什么区别？

HTML 的第一个版本由 18 个标签组成。从那时起，每个新版本都带有添加到标记中的新标签和属性。迄今为止，该语言最重大的升级是 2014 年引入的 HTML5。

HTML 和 HTML5的主要区别在于HTML5 支持新类型的表单控件。HTML5 还引入了几个语义标签，可以清楚地描述内容，例如 <article>、<header> 和 <footer>。

HTML 的优点和缺点

就像任何其他计算机语言一样，HTML 有其优点和局限性。以下是 HTML 的优缺点：

优点：

• 初学者友好: HTML 具有干净且一致的标记，以及较浅的学习曲线。
• 支持领域广：该语言被广泛使用，拥有大量资源和庞大的社区。
• 无障碍：它是开源的并且完全免费。HTML 在所有 Web 浏览器中本机运行。
• 灵活的：HTML很容易与PHP和 Node.js等后端语言集成。

就像任何其他计算机语言一样，HTML 有其优点和局限性。以下是 HTML 的优缺点：

缺点：

• 静止的 该语言主要用于静态网页。对于动态功能，您可能需要使用 JavaScript 或 PHP 等后端语言。
• 单独的 HTML 页面 用户必须为 HTML 创建单独的网页，即使元素相同。
• 浏览器兼容性 一些浏览器采用新特性的速度很慢。有时较旧的浏览器并不总是呈现较新的标签。

HTML、CSS 和 Javascript 是如何相关的

HTML 用于添加文本元素并创建内容结构。然而，仅仅建立一个专业的和完全响应的网站是不够的。因此，HTML 需要借助层级样式表 (CSS)和JavaScript来创建绝大多数网站内容。

• CSS 负责样式，例如背景、颜色、布局、间距和动画。
• JavaScript 添加了动态功能，例如滑块、弹出窗口和照片库。这三种语言是前端开发的基础。

结论

HTML 是 Internet 上的主要标记语言。每个 HTML 页面都有一系列创建网页或应用程序内容结构的元素。

HTML 是一种对初学者友好的语言，有很多支持，主要用于静态网站页面。HTML 与用于样式的 CSS 和用于功能的 JavaScript 一起使用效果最好。

我们还向您展示了一些在线教学课程，它们将有助于提高您的 HTML 知识或提供对 HTML 的基本理解。

如果您有任何其他喜欢的资源来学习 HTML，请在评论部分告诉我们。

分享成果，随喜正能量】人生，既为过客，何须执着，有些事情，注定无法左右，总要学会放下，懂得随缘。你所追求的，也许最后是一场空，不是你不够努力，是一开始，结局已经注定。。

《VBA信息获取与处理》教程是我推出第六套教程，目前已经是第一版修订了。这套教程定位于最高级，是学完初级，中级后的教程。这部教程给大家讲解的内容有：跨应用程序信息获得、随机信息的利用、电子邮件的发送、VBA互联网数据抓取、VBA延时操作，剪贴板应用、Split函数扩展、工作表信息与其他应用交互，FSO对象的利用、工作表及文件夹信息的获取、图形信息的获取以及定制工作表信息函数等等内容。程序文件通过32位和64位两种OFFICE系统测试。是非常抽象的，更具研究的价值。

教程共两册，八十四讲。今日的内容是专题八“VBA与HTML文档”：查找百度首页的网页元素

第六节 HTML DOM对象常用的方法

大家好，我们开始HTML DOM常见对象的方法的讲解，所谓的方法就是对象自身的动作。HTML DOM 方法就是我们可以在节点（HTML 元素）上执行的动作，比如添加或修改元素。

1 常用的 HTML DOM 方法

一些常用的 HTML DOM 方法：

getElementById(id) 获取带有指定 id 的节点（元素）

getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。

getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。

appendChild(node) 插入新的子节点（元素）

removeChild(node) 删除子节点（元素）

insertBefore() 在指定的子节点前面插入新的子节点。

getAttribute() 返回指定的属性值。

HTML DOM 方法还有很多，我们经常利用的就是上述前三个我用红色标记的方法。

2 访问 HTML 元素（节点）

所谓访问HTML 元素（节点）就是上述方法的利用，我们举例说明：

1） getElementById() 方法返回带有指定 ID 的元素：

语法：document.getElementById("id");

如获取 id="intro" 的元素：document.getElementById("intro");

2） getElementsByTagName() 返回带有指定标签名的所有元素。

语法：document.getElementsByTagName("tagname");

如获得所有 <p> 元素的列表：document.getElementsByTagName("p");

3）getElementsByClassName() 查找带有相同类名的所有 HTML 元素。

如获得所有包含 class="intro" 的所有元素的一个列表：document.getElementsByClassName("intro");

注意：getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。

3 查找所需的网页元素的综合利用

有了上面的理论讲解，我们看看在实际的应用中如何查找所需要的网页元素：

1）当我们可以很清晰的观测到，节点的某些属性时，就可以直接定位它。元素节点的主要的定位属性有：id、name和索引号。元素起始标签的语法：<标签 id="xx" name="xx" value=”xx”...>，而索引号，是按源代码书写的顺序，给每类的元素的成员进行编号（类似每类元素，形成一个数组，从0开始编号）。通过元素类别和编号，我们可以很容易的找到它。我们利用的主要工具：

getElementById(“元素的id属性”)或all(“元素的id属性”)：返回拥有指定id的元素集合

getElementsByName(“元素的name属性”)或all(“元素的name属性”)：返回拥有指定名称的元素的集合

getElementsByTagName(“标签名称”)或all.tags(“标签名称”)：返回该类标签的元素集合。

all(索引号)：返回指定索引号的元素节点。

2）我们还可以从body元素/节点开始，一级级去寻找，也可以先定位到它的毗邻节点/元素，再通过判断，去查找它的精确位置。从节点方面而言，树形的模型的节点有个特征，除了根节点，每个节点均只有一个父节点（parentNode）,有一个或者多个子节点（childNodes，类似一个对象集合或对象数组，从0开始编号）。因此，通过节点的亲属关系，进行判断查找，我们就可以一步步的在父子节点中切换，获取所需的元素。节点有一些属性，可以利于我们的查找判断，如下：

nodeName（节点名称）：元素节点的名称为其标签名，属性节点的名称为其属性名称；

nodeValue（节点值）：文本节点的值为其包含的文本，属性节点的值为其包含的属性值；

nodeType（节点类型）：元素节点为1、属性节点为2、文本节点为3、注释节点为8、文档节点为9。另外，从元素方面而言，要定位元素的父元素可以通过parentElement属性，定位元素的子元素集合可以通过children属性，判断其标签的名称(tagname)，他的值(value)，内含文本(innertext)等方式来进行查找。最后，定位节点/元素的下一个同级兄弟可以通过nextSibling属性，定位上一个同级兄弟可以用previousSibling属性。

4 VBA中查找百度首页元素的一个实例

我们去捕捉百度首页，那个提交搜索的表单。这个表单的名称是”f”，然后查询它的innerHtml和OuterHtml。

Sub MYNZA() '捕捉百度首页，提交搜索的表单

【代码见教程】

End Sub

代码截图：

输出结果：

innerHtml:

<input name="ie" type="hidden" value="utf-8"><input name="f" type="hidden" value="8"><input name="rsv_bp" type="hidden" value="1"><input name="rsv_idx" type="hidden" value="1"><input name="ch" type="hidden" value=""><input name="tn" type="hidden" value="baidu"><input name="bar" type="hidden" value=""><span class="bg s_ipt_wr iptfocus quickdelete-wrap"><span class="soutu-btn"></span><input name="wd" class="s_ipt" id="kw" maxlength="255" value="" autocomplete="off"><a title="清空" class="quickdelete" id="quickdelete" style="top: 0px; right: 0px; display: none;" href="javascript：;"></a><span class="soutu-hover-tip" style="display: none;">按图片搜索</span></span><span class="bg s_btn_wr"><input class="bg s_btn" id="su" type="submit" value="百度一下"></span><span class="tools"><span id="mHolder"><div id="mCon"><span>输入法</span></div><ul id="mMenu"><li><a name="ime_hw" href="javascript：;">手写</a></li><li><a name="ime_py" href="javascript：;">拼音</a></li><li class="ln"></li><li><a name="ime_cl" href="javascript：

;">关闭</a></li></ul></span></span><input name="rn" type="hidden" value=""><input name="fenlei" type="hidden" value="256"><input name="oq" type="hidden" value=""><input name="rsv_pq" type="hidden" value="8da8d8ec001a725c"><input name="rsv_t" type="hidden" value="b2b39kZjoN4DHoLoPMw+sMpFZqL/TpIfDe8w9ONePLlGObWa6DFTgMgCmyY"><input name="rqlang" type="hidden" value="cn"><input name="rsv_dl" type="hidden" value="ib"><input name="rsv_enter" type="hidden" value="1">

OuterHtml:

<form name="f" class="fm" id="form" action="/s"><input name="ie" type="hidden" value="utf-8"><input name="f" type="hidden" value="8"><input name="rsv_bp" type="hidden" value="1"><input name="rsv_idx" type="hidden" value="1"><input name="ch" type="hidden" value=""><input name="tn" type="hidden" value="baidu"><input name="bar" type="hidden" value=""><span class="bg s_ipt_wr iptfocus quickdelete-wrap"><span class="soutu-btn"></span><input name="wd" class="s_ipt" id="kw" maxlength="255" value="" autocomplete="off"><a title="清空" class="quickdelete" id="quickdelete" style="top: 0px; right: 0px; display: none;" href="javascript：;"></a><span class="soutu-hover-tip" style="display: none;">按图片搜索</span></span><span class="bg s_btn_wr"><input class="bg s_btn" id="su" type="submit" value="百度一下"></span><span class="tools"><span id="mHolder"><div id="mCon"><span>输入法</span></div><ul id="mMenu"><li><a name="ime_hw" href="javascript：;">手写</a></li><li><a name="ime_py" href="javascript：;">拼音</a></li><li class=

"ln"></li><li><a name="ime_cl" href="javascript：;">关闭</a></li></ul></span></span><input name="rn" type="hidden" value=""><input name="fenlei" type="hidden" value="256"><input name="oq" type="hidden" value=""><input name="rsv_pq" type="hidden" value="8da8d8ec001a725c"><input name="rsv_t" type="hidden" value="b2b39kZjoN4DHoLoPMw+sMpFZqL/TpIfDe8w9ONePLlGObWa6DFTgMgCmyY"><input name="rqlang" type="hidden" value="cn"><input name="rsv_dl" type="hidden" value="ib"><input name="rsv_enter" type="hidden" value="1"></form>

从以上的返回结果，大家也可以看出document 对象的innerHtml和OuterHtml属性的不同。

本节知识点回向：

HTML DOM对象常用的方法有哪些？如何利用

本节参考文件：008工作表.xlsm

我20多年的VBA实践经验，全部浓缩在下面的各个教程中，教程学习顺序：

【分享成果，随喜正能量】做人是一件很麻烦的事，所有说法和实情之间都存在这巨大的空隙，好像一生都在和这个东西挣扎，分辨力越强这空隙越深不见底，最后似乎只好把空虚视为答案和真相。。