目所見即所得，充分發揮了一個好的題目的重要性，廢話不多說，進入今天的正題。先看一下圖，?概的就能理解整個過程了，但是有很多點可以細挖：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實踐經驗，全部濃縮在下面的各個教程中，教程學習順序：

【分享成果，隨喜正能量】做人是一件很麻煩的事，所有說法和實情之間都存在這巨大的空隙，好像一生都在和這個東西掙扎，分辨力越強這空隙越深不見底，最后似乎只好把空虛視為答案和真相。。