整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
*******HTML********
**Web服務(wù)本質(zhì)**
import socket
sk = socket.socket()
sk.bind(("127.0.0.1", 8080))
sk.listen(5)
while True:
conn, addr = sk.accept()
data = conn.recv(8096)
conn.send(b"HTTP/1.1 200 OK\r\n\r\n")#http協(xié)議 簡化
conn.send(b"<h1>Hello world!</h1>")#發(fā)送內(nèi)容
conn.close()
sk.close()
瀏覽器發(fā)送請求-->HTTP協(xié)議-->服務(wù)器接受請求-->服務(wù)端返回響應(yīng)-->服務(wù)端把HTML文件內(nèi)容發(fā)送給瀏覽器-->瀏覽器渲染頁面
What HTML?
*超文本標(biāo)記語言（Hypertext Markup Language，HTML）是一種用于創(chuàng)建網(wǎng)頁標(biāo)記語言
*本質(zhì)上是瀏覽器可識別的規(guī)則，我們按照規(guī)則寫網(wǎng)頁，瀏覽器根據(jù)規(guī)則渲染我們的頁面。
對于不同的瀏覽器，對于同一個(gè)標(biāo)簽可能會有不同的解釋。（兼容性問題）
*網(wǎng)頁文件的擴(kuò)展名：.html或.htm
*HTML是一種標(biāo)記語言，他不是一種編程語言，HTML使用標(biāo)簽來描述網(wǎng)頁。
****HTML文檔結(jié)構(gòu)****
*最基本的HTML文檔**
<!DOCTYPE html>
<html lang = 'zh-CN'>
<head>
<meta chrset = 'UTF-8'>
<title> 標(biāo)題 </title>
</head>
<body>
</body>
</html>
#解釋
1.<!DOCTYPE html>聲明為HTML5文檔
2.<html></html>是文檔的開始標(biāo)記語言和結(jié)束標(biāo)記，是HTML頁面的根本元素，在他們之間是文檔的頭部(head)和主題(body)
3.<head></head>定義了HTML文檔的開頭部分。他們之間的內(nèi)容不會在瀏覽器的文檔窗口顯示。包含了文檔的元（meta）數(shù)據(jù)
4.<title></title>定義了網(wǎng)頁標(biāo)題，在瀏覽器標(biāo)題欄顯示
5.<body></body>之間的文本是可見的網(wǎng)頁主體內(nèi)容
注意：
對于中文網(wǎng)頁需要使用<meta charset='utf-8'>聲明編碼。否則會出現(xiàn)亂碼。這些瀏覽器會設(shè)置GBK為默認(rèn)編碼，則需要我們設(shè)為
<meta charset='gbk'>
****HTML標(biāo)簽格式****
*HTML標(biāo)簽是由尖括號包圍的關(guān)鍵字
*HTML標(biāo)簽通常是成對出現(xiàn)的，比如：<div>和</div>，第一個(gè)標(biāo)簽是開始，第二個(gè)標(biāo)簽是結(jié)束。結(jié)束標(biāo)簽會有斜線。
*也有一部分標(biāo)簽是單獨(dú)呈現(xiàn)的，比如：<br/>、<hr/>、<img src="1.jpg" />等。
*標(biāo)簽里面可以有若干屬性，也可以不帶屬性。
****標(biāo)簽的語法
<標(biāo)簽名 屬性1=“屬性值1” 屬性2=“屬性值2”……>內(nèi)容部分</標(biāo)簽名>
<標(biāo)簽名 屬性1=“屬性值1” 屬性2=“屬性值2”…… />
幾個(gè)很重要的屬性：
id：定義標(biāo)簽的唯一ID，HTML文檔樹中唯一
class：為html元素定義一個(gè)或多個(gè)類名（classname）(CSS樣式類名)
style：規(guī)定元素的行內(nèi)樣式（CSS樣式
****HTML注釋
<!--注釋內(nèi)容-->
****<!DOCTYPE>標(biāo)簽****
<!DOCTYPE> 聲明必須是HTML文檔的第一行，位于<html>標(biāo)簽之前
<!DOCTYPE> 聲明不是HTML標(biāo)簽，他是指示web瀏覽器關(guān)于頁面使用哪個(gè)HTML版本進(jìn)行編寫的指令
****HTML常用標(biāo)簽****
**head內(nèi)常用的標(biāo)簽**
1.<title></title> 定義網(wǎng)頁的標(biāo)題
2.<style></style> 定義內(nèi)部樣式表
3.<script><script>定義JS代碼或引入外部JS文件
4.<link/> 引入外部樣式文件
5.<meta/>定義網(wǎng)頁原信息
****Meta標(biāo)簽
Meta標(biāo)簽介紹：
<meta>元素可提供有關(guān)頁面的原信息（mata-information）,針對搜索引擎和更新頻度的描述和關(guān)鍵詞。
<meta>標(biāo)簽位于文檔的頭部，不包含任何內(nèi)容。
<meta>提供的信息是用戶不可見的。
meta標(biāo)簽的組成：meta標(biāo)簽共有兩個(gè)屬性，它們分別是http-equiv屬性和name 屬性，不同的屬性又有不
同的參數(shù)值，這些不同的參數(shù)值就實(shí)現(xiàn)了不同的網(wǎng)頁功能。
1.http-equiv屬性：相當(dāng)于http的文件頭作用，它可以向?yàn)g覽器傳回一些有用的信息，以幫助正確地顯示
網(wǎng)頁內(nèi)容，與之對應(yīng)的屬性值為content，content中的內(nèi)容其實(shí)就是各個(gè)參數(shù)的變量值。
<!--2秒后跳轉(zhuǎn)到對應(yīng)的網(wǎng)址，注意引號-->
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">
<!--指定文檔的編碼類型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告訴IE以最高級模式渲染文檔-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
2.names屬性：主要用于描述網(wǎng)頁，與之對應(yīng)的屬性值為content，content中的內(nèi)容主要是便于搜索引擎
機(jī)器人查找信息和分類信息用的
<meta name="keywords" content="meta總結(jié),html meta,meta屬性,meta跳轉(zhuǎn)">
<meta name="description" content="Python">
******body內(nèi)常用表標(biāo)簽******
****基本標(biāo)簽（塊級標(biāo)簽和內(nèi)聯(lián)標(biāo)簽）****
<b>加粗</b>
<i>斜體</i>
<u>下劃線</u>
<a>刪除</a>
<p>段落標(biāo)簽</p>
<h1>標(biāo)題1</h1>
<h2>標(biāo)題2</h2>
<h3>標(biāo)題3</h3>
<h4>標(biāo)題4</h4>
<h5>標(biāo)題5</h5>
<h6>標(biāo)題6</h6>
<!--換行-->
<br>
<!--水平線-->
<hr>
****特殊字符****
空格------
>-------->
<--------<
&--------&
￥--------￥
版權(quán)(??)---?
注冊(??)---?
****div標(biāo)簽和span標(biāo)簽****
div標(biāo)簽用來定義一個(gè)塊級元素，并無實(shí)際的意義。主要通過CSS樣式為其賦予不同的表現(xiàn)。
span標(biāo)簽用來定義內(nèi)聯(lián)(行內(nèi))元素，并無實(shí)際的意義。主要通過CSS樣式為其賦予不同的表現(xiàn)。
塊級元素與行內(nèi)元素的區(qū)別：
所謂塊元素，是以另起一行開始渲染的元素，行內(nèi)元素則不需另起一行。如果單獨(dú)在網(wǎng)頁中插入這兩個(gè)元素，不會對頁面產(chǎn)生任何的影響。
這兩個(gè)元素是專門為定義CSS樣式而生的。
注意：
關(guān)于標(biāo)簽嵌套：通常塊級元素可以包含內(nèi)聯(lián)元素或某些塊級元素，但內(nèi)聯(lián)元素不能包含塊級元素，它只能包含其它內(nèi)聯(lián)元素。
p標(biāo)簽不能包含塊級標(biāo)簽，p標(biāo)簽也不能包含p標(biāo)簽。
****img標(biāo)簽****
<img src='圖片路徑' alt='圖片未加載成功時(shí)的提示' title='鼠標(biāo)懸浮時(shí)提示信息' width='寬' height='高（寬高只有一個(gè)會等比縮放）'>
****a標(biāo)簽****
超鏈接標(biāo)簽
所謂的超鏈接是指從一個(gè)網(wǎng)頁指向一個(gè)目標(biāo)的連接關(guān)系，這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁，
也可以是相同網(wǎng)頁上的不同位置，還可以是一個(gè)圖片，一個(gè)電子郵件地址，一個(gè)文件，
甚至是一個(gè)應(yīng)用程序。
什么是URL？
URL是統(tǒng)一資源定位器(Uniform Resource Locator)的縮寫，也被稱為網(wǎng)頁地址，是因特網(wǎng)上標(biāo)準(zhǔn)的資源的地址。
URL舉例
http://www.baidu.com/stu/index.html
http://111.13.100.91/stu/index.html
URL地址由4部分組成
第1部分：為協(xié)議：http://、ftp://等
第2部分：為站點(diǎn)地址：可以是域名或IP地址
第3部分：為頁面在站點(diǎn)中的目錄：stu
第4部分：為頁面名稱，例如 index.html
各部分之間用“/”符號隔開。
<a target='_blank'>點(diǎn)擊我</a>
href屬性指定目標(biāo)網(wǎng)頁地址。該地址可以有幾種類型：
1.絕對URL-指向另一個(gè)站點(diǎn)（不如 ）
2.相對URL-指向當(dāng)前站點(diǎn)中確切的路徑（href = 'index.html'）
3.錨URL-指向頁面中的錨（href = '#top'）
target:
1._blank表示在新標(biāo)簽頁中打開目標(biāo)頁面
2._self表示在當(dāng)前標(biāo)簽頁中打開目標(biāo)頁面
****列表*****
1.無序列表
<ul type="disc">
<li>第一項(xiàng)</li>
<li>第二項(xiàng)</li>
</ul>
type屬性：
1.disc（實(shí)心圓點(diǎn)，默認(rèn)值）
2.circle（空心圓圈）
3.square（實(shí)行方塊）
4.none（無樣式）
2.有序列表
<ol type="1" start="2">
<li>第一項(xiàng)</li>
<li>第二項(xiàng)</li>
</ol>
type屬性：
1.1數(shù)字列表，默認(rèn)值
2.A大寫字母
3.a小寫字母
4.I大寫羅馬
5.i小寫羅馬
3.標(biāo)題列表
<dl>
<dt>標(biāo)題1</dt>
<dt>內(nèi)容1</dt>
<dt>標(biāo)題2</dt>
<dt>內(nèi)容1</dt>
<dt>內(nèi)容2</dt>
</dl>
****表格****
表格是一個(gè)二維數(shù)據(jù)空間，一個(gè)表格由若干行組成，一行又有若干單元格組成，單元格里面可以
包括文字。列表。圖案。表單。數(shù)字符號。預(yù)置文本和其它的表格等內(nèi)容。
表格最重要的目的是顯示表格類數(shù)據(jù)。
表格類數(shù)據(jù)是值最適合組織為表格格式（即按行和列組織）的數(shù)據(jù)
表格基本結(jié)構(gòu)：
<table>
<thead>
<tr>
<td>序號</td>
<td>姓名</td>
<td>愛好</td>
</tr>
</theaf>
<tbody>
<tr>
<td>1</td>
<td>tom</td>
<td>吃老鼠</td>
</tr>
<tr>
<td>2</td>
<td>Jacl</td>
<td>吃奶酪</td>
</tr>
</tbody>
</table>
屬性：
1.border：表格邊框
2.cellpadding：內(nèi)邊距
3.cellspacing：外邊距
4.width：像素百分比（最好通過css來設(shè)置長度）
5.rowspan：單元格豎跨多少行
6.colspan：單元格橫跨多少列（即合并單元格）
****form（表單）****
功能；
表單用于向服務(wù)器傳輸數(shù)據(jù)，從而實(shí)現(xiàn)用戶與web服務(wù)器的交互
表單能夠包含input系列標(biāo)簽，比如文本字段、復(fù)選框、單選框、提交按鈕等等
表單還可以包含textarea、select、fieldest和lable標(biāo)簽
***表單屬性
1.accept-charset 規(guī)定在被提交表單中使用的字符集（默認(rèn)：頁面字符集）
2.action 規(guī)定在何處提交表單的地址（URL）（提交頁面）
3.autocomplete 規(guī)定瀏覽器應(yīng)該自動完成表單（默認(rèn)：開啟）
4.enctype 規(guī)定被提交數(shù)據(jù)的編碼（默認(rèn)：url-encoded）
5.method 規(guī)定在提交表單時(shí)所用的HTTP方法（默認(rèn)GET）
6.name 規(guī)定識別表單的名稱（對于DOM使用：document.forms.name）
7.novalidate規(guī)定瀏覽器不驗(yàn)證表單
8.target規(guī)定action屬性中地址的目標(biāo)（默認(rèn)_self）
***表單元素
基本概念：
HTML表單是HTML元素中較為復(fù)雜的部分，表單往往和腳本、動態(tài)頁面、數(shù)據(jù)處理等功能相結(jié)合，因此它是制作動態(tài)網(wǎng)站很重要的內(nèi)容。
表單一般用來收集用戶的輸入信息
表單工作原理：
訪問者在瀏覽有表單的網(wǎng)頁時(shí)，可填寫必需的信息，然后按某個(gè)按鈕提交。這些信息通過Internet傳送到服務(wù)器上。
服務(wù)器上專門的程序?qū)@些數(shù)據(jù)進(jìn)行處理，如果有錯(cuò)誤會返回錯(cuò)誤信息，并要求糾正錯(cuò)誤。
當(dāng)數(shù)據(jù)完整無誤后，服務(wù)器反饋一個(gè)輸入完成的信息。
******input******
<input>元素會根據(jù)不同的type屬性，變化為多種形態(tài)
type屬性值表現(xiàn)形式對應(yīng)代碼
text單行輸入文本<input type="text" />
password密碼輸入框<input type="password" />
date日期輸入框<input type="date" />
checkbox復(fù)選框<input type="checkbox" checked="checked" />
radio單選框<input type="radio" />
submit提交按鈕<input type="submit" value="提交" />
reset重置按鈕<input type="reset" value="重置" />
button普通按鈕<input type="button" value="普通按鈕" />
hidden隱藏輸入框<input type="hidden" />
file文本選擇框<input type="file" />
屬性說明：
1.name：表單提交時(shí)的“鍵”，注意和id的區(qū)別
2.value：表單提交時(shí)對應(yīng)項(xiàng)的值
type = “button”，“reset”，“submit”時(shí)，為按鈕上顯示的文本信息
type = “text”，“password”，“hidden“時(shí)，為輸入框的初始值
type = ”checkbox“，”radio“，”file“時(shí)，為輸相關(guān)聯(lián)的值
3.checked：radio和checkbox默認(rèn)被選中的項(xiàng)
4.readonly：text和password設(shè)置只讀
5.disabled：所有input均適用
******select標(biāo)簽******
<from action="" method="post">
<select name="city" id="city">
<option value="1">北京</option>
<option selected="selected" value="2">成都</option>
<option value="3">西安</option>
</select>
</form>
屬性說明：
1.multiple：布爾屬性，設(shè)置后為多選，否則默認(rèn)單選
2.disabled：禁用
3.selected：默認(rèn)選中該項(xiàng)
4.value：定義提交時(shí)的選項(xiàng)值
******lable標(biāo)簽******
定義：<lable>標(biāo)簽為input元素定義標(biāo)注（標(biāo)記）
說明：
1.label元素不會向用戶呈現(xiàn)任何特殊效果
2.<lable>標(biāo)簽的for屬性值應(yīng)當(dāng)與相關(guān)元素的id屬性值相同
<form>
<lable for="username">用戶名</lable>
<input type="text" id="username" name="username">
</form>
******textarea多行文本******
<textarea name="memo" id="memo" cols="30" rows="10">
默認(rèn)內(nèi)容
</textarea>
屬性說明：
1.name:名稱
2.rows:行數(shù)
3.cols:列數(shù)
4.disable:禁用
象語法樹(Abstract Syntax Trees)，簡稱AST，如果您正在編寫代碼，那么 AST 很可能已經(jīng)參與了您的開發(fā)流程。它們?yōu)槟拈_發(fā)流程的許多部分提供動力。 有些人可能在編譯器的上下文中聽說過它們，但它們被用于各種工具中。 即使您不編寫通用開發(fā)工具，AST 也可能是您工具帶中的有用工具。 在這篇文章中，我們將討論什么是 AST，它們在哪里使用以及如何利用它們。
什么是AST
抽象語法樹或 AST 是代碼的樹型數(shù)據(jù)結(jié)構(gòu)表示。 它們是編譯器工作方式的基本部分。 當(dāng)編譯器轉(zhuǎn)換某些代碼時(shí)，基本上有以下步驟：
詞法分析又名標(biāo)記化
在此步驟中，您編寫的代碼將被轉(zhuǎn)換為一組描述代碼不同部分的標(biāo)記。 這與基本語法突出顯示使用的方法基本相同。 這些標(biāo)記令牌不了解事物如何組合在一起，并且僅關(guān)注文件的組件。
你可以想象這就像你將一個(gè)文本分解成單詞。 您可能能夠區(qū)分標(biāo)點(diǎn)符號、動詞、名詞、數(shù)字等，但在這個(gè)階段，您對句子的組成部分或句子如何組合沒有任何更深入的了解。
語法分析又名解析
這是我們將標(biāo)記列表轉(zhuǎn)換為抽象語法樹的步驟。 它將我們的標(biāo)記轉(zhuǎn)換為表示代碼實(shí)際結(jié)構(gòu)的樹。 以前在標(biāo)記中我們只有一對 ()，現(xiàn)在我們知道它是函數(shù)調(diào)用、函數(shù)定義、分組還是其他東西。
這里的等價(jià)物是將我們的單詞列表轉(zhuǎn)換為表示諸如句子之類的數(shù)據(jù)結(jié)構(gòu)，某個(gè)名詞在句子中扮演什么角色，或者我們是否在列表中。
另一個(gè)可以與之比較的例子是 DOM。 上一步只是將 HTML 分解為“標(biāo)簽”和“文本”，而這一步將生成表示為 DOM 樹的層次結(jié)構(gòu)。
需要注意的一件事是沒有“單一”的 AST 格式。 它們可能會有所不同，這取決于您要轉(zhuǎn)換為 AST 的語言以及您用于解析的工具。 在 JavaScript 中，一個(gè)通用標(biāo)準(zhǔn)是 ESTree，但您會看到不同的工具可能會添加不同的屬性。
一般來說，AST 是一種樹結(jié)構(gòu)，其中每個(gè)節(jié)點(diǎn)至少有一個(gè)類型來指定它所代表的內(nèi)容。
代碼生成
此步驟本身可以是多個(gè)步驟。 一旦我們有了抽象語法樹，我們就可以操作它，也可以將它“打印”到不同類型的代碼中。 使用 AST 操作代碼比直接在代碼上作為文本或標(biāo)記列表執(zhí)行這些操作更安全。
操縱文本總是很危險(xiǎn)的； 它顯示最少的上下文。 如果您曾經(jīng)嘗試使用字符串替換或正則表達(dá)式來操作文本，您可能會注意到很容易出錯(cuò)。而且不容易調(diào)試。
甚至操縱令牌也不容易。 雖然我們可能知道變量是什么，但如果我們想重命名它，我們將無法深入了解變量的范圍或可能與之沖突的任何變量。
AST 提供了有關(guān)代碼結(jié)構(gòu)的足夠信息，我們可以更有信心地對其進(jìn)行修改。 例如，我們可以確定變量的聲明位置，并確切地知道由于樹結(jié)構(gòu)而影響程序的哪個(gè)部分。
一旦我們操縱了樹，我們就可以打印樹以輸出任何預(yù)期的代碼輸出。 例如，如果我們要構(gòu)建一個(gè)像 TypeScript 編譯器這樣的編譯器，我們會輸出 JavaScript，而另一個(gè)編譯器可能會輸出機(jī)器代碼。
同樣，使用 AST 更容易實(shí)現(xiàn)這一點(diǎn)，因?yàn)橄嗤Y(jié)構(gòu)的不同輸出可能具有不同的格式。 使用更線性的輸入（如文本或標(biāo)記列表）生成輸出會相當(dāng)困難。
如何處理 AST？
理論涵蓋了哪些實(shí)際生活中的 AST 用例？ 我們討論了編譯器，但我們并不是整天都在構(gòu)建編譯器。
AST 的用例很廣泛，通常可以分為三個(gè)總體操作：讀取、修改和打印。 它們是一種添加劑，這意味著如果您正在打印 AST，那么您以前也閱讀過 AST 并對其進(jìn)行修改的可能性很高。 但我們將介紹每個(gè)主要關(guān)注一個(gè)用例的示例。
讀取/遍歷 AST
從技術(shù)上講，使用 AST 的第一步是解析文本以創(chuàng)建 AST，但在大多數(shù)情況下，提供解析步驟的庫也提供了一種遍歷 AST 的方法。遍歷 AST 意味著訪問樹的不同節(jié)點(diǎn)以獲取細(xì)節(jié)或執(zhí)行操作。
最常見的用例之一是 linting。 例如，ESLint 使用 espree 生成 AST，如果您想編寫任何自定義規(guī)則，您將根據(jù)不同的 AST 節(jié)點(diǎn)編寫這些規(guī)則。 ESLint 文檔有大量關(guān)于如何構(gòu)建自定義規(guī)則、插件和格式化程序的文檔。
修改/轉(zhuǎn)換 AST
如前所述，與將代碼修改為標(biāo)記或原始字符串相比，擁有 AST 使修改所述樹更容易、更安全。您可能想要使用 AST 修改某些代碼的原因有很多種。
例如，Babel 修改 AST 以向下編譯新功能或?qū)?JSX 轉(zhuǎn)換為函數(shù)調(diào)用。例如，當(dāng)您編譯 React 或 Preact 代碼時(shí)會發(fā)生這種情況。
另一個(gè)用例是捆綁代碼。在模塊的世界中，捆綁代碼通常比將文件附加在一起要復(fù)雜得多。更好地了解各個(gè)文件的結(jié)構(gòu)可以更輕松地合并這些文件并在必要時(shí)調(diào)整導(dǎo)入和函數(shù)調(diào)用。如果您查看 webpack、parcel 或 rollup 等工具的代碼庫，您會發(fā)現(xiàn)它們都使用 AST 作為其捆綁工作流程的一部分。
打印 AST
在大多數(shù)情況下，打印和修改 AST 是齊頭并進(jìn)的，因?yàn)槟仨気敵鰟倓傂薷牡?AST。 但是，雖然像 recast 這樣的一些庫明確專注于以與原始代碼樣式相同的代碼樣式打印 AST，但也有各種用例，您希望以不同的方式顯式打印您的 AST。
例如，Prettier 使用 AST 根據(jù)您的配置重新格式化您的代碼，而無需更改代碼的內(nèi)容/含義。 他們這樣做的方式是將您的代碼轉(zhuǎn)換為完全與格式無關(guān)的 AST，然后根據(jù)您的規(guī)則重寫它。
其他常見的用例是用不同的目標(biāo)語言打印代碼或構(gòu)建自己的縮小工具。
您可以使用幾種不同的工具來打印 AST，例如 escodegen 或 astring。 您還可以根據(jù)您的用例構(gòu)建自己的格式化程序，或者為 Prettier 構(gòu)建一個(gè)插件。
最后：
雖然 AST 可能是大多數(shù)開發(fā)人員每天都不會使用的東西，但我相信了解它對今后的工作會有幫助。感謝閱讀。
對于互聯(lián)網(wǎng)我們都不陌生，它完完全全改變了我們的生活，生活在這樣的時(shí)代還是很幸福的。我們平時(shí)查百度、逛淘寶、京東、用騰訊、愛奇藝看視頻等，我們在瀏覽器輸入一個(gè)域名，就可以進(jìn)入到我們想要的系統(tǒng)或頁面，這其中發(fā)生了什么？是怎樣的流程，我想大多數(shù)人是不太清楚的，猿人就來給大家聊聊。
總體來說分為以下幾個(gè)過程:
URL是英語Uniform Resource Locator的縮寫，中文名叫：統(tǒng)一資源定位符（或稱統(tǒng)一資源定位器/定位地址、URL地址），有時(shí)也被俗稱為網(wǎng)頁地址（網(wǎng)址）。
URL就如同在網(wǎng)絡(luò)上的門牌，是因特網(wǎng)上標(biāo)準(zhǔn)的資源的地址（Address）。它最初是由蒂姆·伯納斯-李發(fā)明用來作為萬維網(wǎng)的地址。現(xiàn)在它已經(jīng)被萬維網(wǎng)聯(lián)盟編制為因特網(wǎng)標(biāo)準(zhǔn)。
標(biāo)準(zhǔn)的格式如下：
scheme://host.domain:port/path/filename
各部分解釋如下：
域名解析是把域名指向網(wǎng)站空間IP，讓人們通過注冊的域名可以方便地訪問到網(wǎng)站的一種服務(wù)。IP地址是網(wǎng)絡(luò)上標(biāo)識站點(diǎn)的數(shù)字地址，為了方便記憶，采用域名來代替IP地址標(biāo)識站點(diǎn)地址。域名解析就是域名到IP地址的轉(zhuǎn)換過程。域名的解析工作由DNS服務(wù)器完成。
IP 地址是指互聯(lián)網(wǎng)協(xié)議地址，是 IP Address 的縮寫。IP 地址是 IP 協(xié)議提供的一種統(tǒng)一的地址格式，它為互聯(lián)網(wǎng)上的每一個(gè)網(wǎng)絡(luò)和每一臺主機(jī)分配一個(gè)邏輯地址，以此來屏蔽物理地址的差異。IP 地址是一個(gè) 32 位的二進(jìn)制數(shù)，比如 127.0.0.1 為本機(jī) IP。
域名解析也叫域名指向、服務(wù)器設(shè)置、域名配置以及反向IP登記等等。說得簡單點(diǎn)就是將好記的域名解析成IP，服務(wù)由DNS服務(wù)器完成，是把域名解析到一個(gè)IP地址，然后在此IP地址的主機(jī)上將一個(gè)子目錄與域名綁定。
互聯(lián)網(wǎng)中的地址是數(shù)字的IP地址，域名解析的作用主要就是為了便于記憶。
DNS 協(xié)議提供通過域名查找 IP 地址，或逆向從 IP 地址反查域名的服務(wù)。DNS 是一個(gè)網(wǎng)絡(luò)服務(wù)器，我們的域名解析簡單來說就是在 DNS 上記錄一條信息記錄。
例如 baidu.com 220.114.23.56（服務(wù)器外網(wǎng)IP地址）80（服務(wù)器端口號）
當(dāng)應(yīng)用過程需要將一個(gè)主機(jī)域名映射為IP地址時(shí)，就調(diào)用域名解析函數(shù)，解析函數(shù)將待轉(zhuǎn)換的域名放在DNS請求中，以UDP報(bào)文方式發(fā)給本地域名服務(wù)器。本地的域名服務(wù)器查到域名后，將對應(yīng)的IP地址放在應(yīng)答報(bào)文中返回。同時(shí)域名服務(wù)器還必須具有連向其他服務(wù)器的信息以支持不能解析時(shí)的轉(zhuǎn)發(fā)。若域名服務(wù)器不能回答該請求，則此域名服務(wù)器就暫成為DNS中的另一個(gè)客戶，向根域名服務(wù)器發(fā)出請求解析，根域名服務(wù)器一定能找到下面的所有二級域名的域名服務(wù)器，這樣以此類推，一直向下解析，直到查詢到所請求的域名。
TCP位于傳輸層，作用是提供可靠的字節(jié)流服務(wù)，為了準(zhǔn)確無誤地將數(shù)據(jù)送達(dá)目的地，TCP協(xié)議采納三次握手策略。
所謂三次握手(Three-way Handshake)，是指建立一個(gè)TCP連接時(shí)，需要客戶端和服務(wù)器總共發(fā)送3個(gè)包。
三次握手的目的是連接服務(wù)器指定端口，建立TCP連接,并同步連接雙方的序列號和確認(rèn)號并交換 TCP 窗口大小信息.在socket編程中，客戶端執(zhí)行connect()時(shí)。將觸發(fā)三次握手。
原理
1）發(fā)送端首先發(fā)送一個(gè)帶有SYN（synchronize）標(biāo)志地?cái)?shù)據(jù)包給接收方。
2）接收方接收后，回傳一個(gè)帶有SYN/ACK標(biāo)志的數(shù)據(jù)包傳遞確認(rèn)信息，表示我收到了。
3）最后，發(fā)送方再回傳一個(gè)帶有ACK標(biāo)志的數(shù)據(jù)包，代表我知道了，表示’握手‘結(jié)束。
通俗的說法
1）Client：嘿，李四，是我，聽到了嗎？
2）Server：我聽到了，你能聽到我的嗎?
3）Client：好的，我們互相都能聽到對方的話，我們的通信可以開始了。
TCP 三次握手結(jié)束后，開始發(fā)送 HTTP 請求報(bào)文。
請求報(bào)文由請求行（request line）、請求頭（header）、請求體三個(gè)部分組成,如下圖所示：
服務(wù)器是網(wǎng)絡(luò)環(huán)境中的高性能計(jì)算機(jī)，它偵聽網(wǎng)絡(luò)上的其他計(jì)算機(jī)（客戶機(jī)）提交的服務(wù)請求，并提供相應(yīng)的服務(wù)，比如網(wǎng)頁服務(wù)、文件下載服務(wù)、郵件服務(wù)、視頻服務(wù)。而客戶端主要的功能是瀏覽網(wǎng)頁、看視頻、聽音樂等等，兩者截然不同。 每臺服務(wù)器上都會安裝處理請求的應(yīng)用——web server。常見的 web server 產(chǎn)品有 apache、nginx、IIS 或 Lighttpd 等。 web server 擔(dān)任管控的角色，對于不同用戶發(fā)送的請求，會結(jié)合配置文件，把不同請求委托給服務(wù)器上處理相應(yīng)請求的程序進(jìn)行處理（例如 CGI 腳本，JSP 腳本，servlets，ASP 腳本，服務(wù)器端 JavaScript，Java或者一些其它的服務(wù)器端技術(shù)等），然后返回后臺程序處理產(chǎn)生的結(jié)果作為響應(yīng)。
MVC 后臺處理
SpirngMVC的執(zhí)行流程，猿人也給大家畫出來了，很詳細(xì)哦！
http響應(yīng)報(bào)文格式
Http狀態(tài)碼
對于每一個(gè)請求，http服務(wù)器都會返回一個(gè)結(jié)果，不管是成功還是失敗，不同的狀態(tài)碼代表某一類結(jié)果。比如1開頭的代表服務(wù)器收到請求，需要請求者繼續(xù)執(zhí)行操作，2開頭的代表返回成功，3開頭的代表重定向，4開頭的代表客戶端錯(cuò)誤，5開頭的代表服務(wù)端錯(cuò)誤。這樣我們就可以根據(jù)這些數(shù)字來判斷是否執(zhí)行完成，也可以用來定位排查問題。
1** 信息，服務(wù)器收到請求，需要請求者繼續(xù)執(zhí)行操作
2** 成功，操作被成功接收并處理
3** 重定向，需要進(jìn)一步的操作以完成請求
4** 客戶端錯(cuò)誤，請求包含語法錯(cuò)誤或無法完成請求
5** 服務(wù)器錯(cuò)誤，服務(wù)器在處理請求的過程中發(fā)生了錯(cuò)誤
瀏覽器按順序解析HTML文件，構(gòu)建DOM樹。準(zhǔn)確地說，瀏覽器需要加載解析的不僅僅是HTML，還包括CSS、JS以及圖片、視頻等其他媒體資源。
瀏覽器通過解析HTML，生成DOM樹，解析CSS，生成CSS規(guī)則樹，然后通過DOM樹和CSS規(guī)則樹生成渲染樹。渲染樹與DOM樹不同，渲染樹中并沒有head、display為none等不必顯示的節(jié)點(diǎn)。
要注意的是，瀏覽器的解析過程并非是串連進(jìn)行的，比如在解析CSS的同時(shí)，可以繼續(xù)加載解析HTML，但在解析執(zhí)行JS腳本時(shí)，會停止解析后續(xù)HTML。
為了更好的用戶體驗(yàn)，渲染引擎將會盡可能早的將內(nèi)容呈現(xiàn)到屏幕上，并不會等到所有的html都解析完成之后再去構(gòu)建和布局render樹。它是解析完一部分內(nèi)容就顯示一部分內(nèi)容，同時(shí)，可能還在通過網(wǎng)絡(luò)下載其余內(nèi)容。
上述所有步驟完成后，就需要斷開連接了。就比如我們兩個(gè)人打電話，打完后就需要揮一揮手，告別了，不然要扣話費(fèi)了。同樣的道理，如果上述步驟執(zhí)行完成后，不斷開連接，則會消耗網(wǎng)絡(luò)資源。
TCP的連接的拆除需要發(fā)送四個(gè)包，因此稱為四次揮手(four-way handshake)。客戶端或服務(wù)器均可主動發(fā)起揮手動作，在socket編程中，任何一方執(zhí)行close()操作即可產(chǎn)生揮手操作。
意義：當(dāng)被動方收到主動方的FIN報(bào)文通知時(shí)，它僅僅表示主動方?jīng)]有數(shù)據(jù)再發(fā)送給被動方了。但未必被動方所有的數(shù)據(jù)都完整的發(fā)送給了主動方，所以被動方不會馬上關(guān)閉SOCKET,它可能還需要發(fā)送一些數(shù)據(jù)給主動方后，再發(fā)送FIN報(bào)文給主動方，告訴主動方同意關(guān)閉連接，所以這里的ACK報(bào)文和FIN報(bào)文多數(shù)情況下都是分開發(fā)送的。
原理
1）第一次揮手：Client發(fā)送一個(gè)FIN，用來關(guān)閉Client到Server的數(shù)據(jù)傳送，Client進(jìn)入FIN_WAIT_1狀態(tài)。
2）第二次揮手：Server收到FIN后，發(fā)送一個(gè)ACK給Client，確認(rèn)序號為收到序號+1（與SYN相同，一個(gè)FIN占用一個(gè)序號），Server進(jìn)入CLOSE_WAIT狀態(tài)。
3）第三次揮手：Server發(fā)送一個(gè)FIN，用來關(guān)閉Server到Client的數(shù)據(jù)傳送，Server進(jìn)入LAST_ACK狀態(tài)。
4）第四次揮手：Client收到FIN后，Client進(jìn)入TIME_WAIT狀態(tài)，接著發(fā)送一個(gè)ACK給Server，確認(rèn)序號為收到序號+1，Server進(jìn)入CLOSED狀態(tài)，完成四次揮手。
通俗的說法
1）Client：我所有東西都說完了
2）Server：我已經(jīng)全部聽到了，但是等等我，我還沒說完
3）Server：好了，我已經(jīng)說完了
4）Client：好的，那我們的通信結(jié)束
寫到這里，我們基本上從技術(shù)的角度講解了從URL輸入到獲取資源，整個(gè)流程發(fā)生了什么。我們再來捋一捋，首先是DNS 解析：將域名解析成 IP 地址，解析完成后就需要建立TCP 連接：TCP 三次握手，然后發(fā)送 HTTP 請求，再到服務(wù)器處理請求并返回 HTTP 報(bào)文，服務(wù)器處理完成后瀏覽器解析渲染頁面，最后斷開連接：TCP 四次揮手，這樣整個(gè)流程就算是完成了,這個(gè)時(shí)候我們就可以在渲染的頁面愉快的看視頻、聽音樂、打游戲了，哈哈！
你多學(xué)一樣本事，就少說一句求人的話，現(xiàn)在的努力，是為了以后的不求別人，實(shí)力是最強(qiáng)的底氣。記住，活著不是靠淚水博得同情，而是靠汗水贏得掌聲。 ——《寫給程序員朋友》
私信“666”可獲取以下資料哦！
01【開源網(wǎng)站】獲取免費(fèi)開源項(xiàng)目，找工作必備！
02【電子書】獲取1000+本Java開發(fā)精華電子書！
03【簡歷】獲取月薪三萬簡歷模板！
04【BAT面試】獲取全網(wǎng)最全一線大廠Java筆試面試題！
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
