整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
ndroid高階開發(fā)專欄
Java高級開發(fā)進階專欄
TCP連接的三次握手和四次揮手
一文搞懂DNS域名解析的詳細流程
高并發(fā)與負載均衡：Nginx的反向代理和負載均衡
一文搞懂TCP/IP協(xié)議及Web基礎知識
一文搞懂HTTP協(xié)議的核心知識點
一文掌握 HTTP協(xié)議報文 包含的信息類型
一文搞懂HTTP協(xié)議 返回結果的HTTP狀態(tài)碼
一文搞懂 HTTP協(xié)議的報文首部
作為網(wǎng)絡專欄的開篇導文，本文概況介紹下經(jīng)典案例：從輸入一個網(wǎng)址到瀏覽器顯示頁面的全過程。
步驟概要介紹如下：
當在瀏覽器中輸入網(wǎng)址時，瀏覽器其實就已在智能匹配 url 了，他會從歷史記錄，書簽等地方，找到已經(jīng)輸入的字符串可能對應的 url，然后給出智能提示，讓你可以補全url地址。
對于 google的chrome 的瀏覽器，他甚至會直接從緩存中把網(wǎng)頁展示出來，就是說，你還沒有按下 enter，頁面就出來了。
請求一旦發(fā)起，瀏覽器首先要做的事情就是解析這個域名。
在HTTP工作開始之前，web瀏覽器首先要通過網(wǎng)絡與web服務器建立連接，該連接是通過TCP來完成的。
PS1：為什么要先建立TCP呢？
因為HTTP是比TCP更高層次的應用層協(xié)議，根據(jù)規(guī)則，只有低層協(xié)議建立之后才能進行更高層次協(xié)議的連接，因此要先建立TCP連接，一般TCP連接的端口號是80
PS2：擴展知識點：
TCP連接的三次握手和斷開的四次揮手 參照站內(nèi)文章：TCP 三次握手和四次揮手
建立了TCP連接之后，web瀏覽器就會向web服務器發(fā)起一個http請求。
一個典型的 http request header 一般需要包括請求的方法，例如 GET 或者 POST 等，不常用的還有 PUT 和 DELETE 、HEAD、OPTION以及 TRACE 方法，一般的瀏覽器只能發(fā)起 GET 或者 POST 請求。
客戶端向服務器發(fā)起http請求的時候，會有一些請求信息，請求信息包含三個部分：
下面是一個完整的HTTP請求例子：
GET/sample.jspHTTP/1.1
Accept:image/gif.image/jpeg,*/*
Accept-Language:zh-cn
Connection:Keep-Alive
Host:localhost
User-Agent:Mozila/4.0(compatible;MSIE5.01;Window NT5.0)
Accept-Encoding:gzip,deflate
username=jinqiao&password=12344.1、請求行
請求的第一行是“方法URL議/版本”：GET/sample.jsp HTTP/1.1
4.2、請求頭(Request Header)
請求頭包含許多有關的客戶端環(huán)境和請求正文的有用信息。例如，請求頭可以聲明瀏覽器所用的語言，請求正文的長度等。
Accept:image/gif.image/jpeg.*/*
Accept-Language:zh-cn
Connection:Keep-Alive
Host:localhost
User-Agent:Mozila/4.0(compatible:MSIE5.01:Windows NT5.0)
Accept-Encoding:gzip,deflate.
4.3、請求正文
請求頭和請求正文之間是一個空行，這個行非常重要，它表示請求頭已經(jīng)結束，接下來的是請求正文。請求正文中可以包含客戶提交的查詢字符串信息：
username=jinqiao&password=1234服務器給瀏覽器響應一個301永久重定向響應，這樣瀏覽器就會訪問“http://www.google.com/” 而非“http://google.com/”。
為什么服務器一定要重定向而不是直接發(fā)送用戶想看的網(wǎng)頁內(nèi)容呢？其中一個原因跟搜索引擎排名有關。如果一個頁面有兩個地址，就像http://www.yy.com/和http://yy.com/，搜索引擎會認為它們是兩個網(wǎng)站，結果造成每個搜索鏈接都減少從而降低排名。而搜索引擎知道301永久重定向是什么意思，這樣就會把訪問帶www的和不帶www的地址歸到同一個網(wǎng)站排名下。還有就是用不同的地址會造成緩存友好性變差，當一個頁面有好幾個名字時，它可能會在緩存里出現(xiàn)好幾次。
重定向原因：
這種情況下，如果不做重定向，則用戶收藏夾或搜索引擎數(shù)據(jù)庫中舊地址只能讓訪問客戶得到一個404頁面錯誤信息，訪問流量白白喪失；再者某些注冊了多個域名的網(wǎng)站，也需要通過重定向讓訪問這些域名的用戶自動跳轉(zhuǎn)到主站點等。
現(xiàn)在瀏覽器知道了 "http://www.google.com/"才是要訪問的正確地址，所以它會發(fā)送另一個http請求。這里沒有啥好說的
經(jīng)過前面的步驟，服務器收到了我們的請求，也處理我們的請求，到這一步，它會把它的處理結果返回，也就是返回一個HTPP響應。
HTTP響應與HTTP請求相似，HTTP響應也由3個部分構成，分別是：
HTTP/1.1 200 OK
Date: Sat, 31 Dec 2005 23:59:59 GMT
Content-Type: text/html;charset=ISO-8859-1
Content-Length: 122
＜html＞
＜head＞
＜title＞http＜/title＞
＜/head＞
＜body＞
＜!-- body goes here --＞
＜/body＞
＜/html＞7.1、狀態(tài)行：
狀態(tài)行由協(xié)議版本、數(shù)字形式的狀態(tài)代碼、及相應的狀態(tài)描述，各元素之間以空格分隔。
格式: HTTP-Version Status-Code Reason-Phrase CRLF
例如: HTTP/1.1 200 OK \r\n
-- 協(xié)議版本：是用http1.0還是其他版本
-- 狀態(tài)描述：狀態(tài)描述給出了關于狀態(tài)代碼的簡短的文字描述。比如狀態(tài)代碼為200時的描述為 ok
-- 狀態(tài)代碼：狀態(tài)代碼由三位數(shù)字組成，第一個數(shù)字定義了響應的類別，且有五種可能取值。
狀態(tài)代碼具體協(xié)議定義如下：
1xx：信息性狀態(tài)碼，表示服務器已接收了客戶端請求，客戶端可繼續(xù)發(fā)送請求。
100 Continue
101 Switching Protocols
2xx：成功狀態(tài)碼，表示服務器已成功接收到請求并進行處理。
200 OK 表示客戶端請求成功
204 No Content 成功，但不返回任何實體的主體部分
206 Partial Content 成功執(zhí)行了一個范圍（Range）請求
3xx：重定向狀態(tài)碼，表示服務器要求客戶端重定向。
301 Moved Permanently 永久性重定向，響應報文的Location首部應該有該資源的新URL
302 Found 臨時性重定向，響應報文的Location首部給出的URL用來臨時定位資源
303 See Other 請求的資源存在著另一個URI，客戶端應使用GET方法定向獲取請求的資源
304 Not Modified 服務器內(nèi)容沒有更新，可以直接讀取瀏覽器緩存
307 Temporary Redirect 臨時重定向。與302 Found含義一樣。302禁止POST變換為GET，但實際使用時并不一定，307則更多瀏覽器可能會遵循這一標準，但也依賴于瀏覽器具體實現(xiàn)
4xx：客戶端錯誤狀態(tài)碼，表示客戶端的請求有非法內(nèi)容。
400 Bad Request 表示客戶端請求有語法錯誤，不能被服務器所理解
401 Unauthonzed 表示請求未經(jīng)授權，該狀態(tài)代碼必須與 WWW-Authenticate 報頭域一起使用
403 Forbidden 表示服務器收到請求，但是拒絕提供服務，通常會在響應正文中給出不提供服務的原因
404 Not Found 請求的資源不存在，例如，輸入了錯誤的URL
5xx：服務器錯誤狀態(tài)碼，表示服務器未能正常處理客戶端的請求而出現(xiàn)意外錯誤。
500 Internel Server Error 表示服務器發(fā)生不可預期的錯誤，導致無法完成客戶端的請求
503 Service Unavailable 表示服務器當前不能夠處理客戶端的請求，在一段時間之后，服務器可能會恢復正常7.2、響應頭：
響應頭部：由關鍵字/值對組成，每行一對，關鍵字和值用英文冒號":"分隔。
Date: Sat, 31 Dec 2005 23:59:59 GMT
Content-Type: text/html;charset=ISO-8859-1
Content-Length: 122典型的響應頭字段：
7.3、響應正文
包含著我們需要的一些具體信息，比如cookie，html,image，后端返回的請求數(shù)據(jù)等等。這里需要注意，響應正文和響應頭之間有一行空格，表示響應頭的信息到空格為止。
在瀏覽器沒有完整接受全部HTML文檔時，它就已經(jīng)開始顯示這個頁面了，瀏覽器是如何把頁面呈現(xiàn)在屏幕上的呢？
不同瀏覽器可能解析的過程不太一樣，這里我們只介紹webkit的渲染過程。下圖對應的就是WebKit渲染的過程，這個過程包括：
解析html以構建dom樹 -> 構建render樹 -> 布局render樹 -> 繪制render樹：
其實這個步驟可以并列在步驟8中，在瀏覽器顯示HTML時，它會注意到需要獲取其他地址內(nèi)容的標簽。這時，瀏覽器會發(fā)送一個獲取請求來重新獲得這些文件。比如我要獲取外圖片，CSS，JS文件等，類似于下面的鏈接：
圖片：http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif
CSS式樣表：http://static.ak.fbcdn.net/rsrc.php/z448Z/hash/2plh8s4n.css
JavaScript 文件：http://static.ak.fbcdn.net/rsrc.php/zEMOA/hash/c8yzb6ub.js
這些地址都要經(jīng)歷一個和HTML讀取類似的過程。所以瀏覽器會在DNS中查找這些域名，發(fā)送請求，重定向等等...
不像動態(tài)頁面，靜態(tài)文件會允許瀏覽器對其進行緩存。有的文件可能會不需要與服務器通訊，而從緩存中直接讀取，或者可以放到CDN中
一般情況下，一旦web服務器向瀏覽器發(fā)送了請求數(shù)據(jù)后，它就要關閉TCP連接，然后如果瀏覽器或者服務器在其頭信息加入這行代碼：
connection:keep-alive這樣TCP連接將依然保持打開狀態(tài)，瀏覽器可以繼續(xù)通過相同的連接發(fā)送請求，保持連接，節(jié)省了為每個請求建立新連接所需要的的事件，同時節(jié)省了寬帶
實際上，在HTTP 1.1 版本的新特性中有一點是：默認持久連接節(jié)省通信量，只要客戶端、服務端任意一端沒有明確斷開TCP連接，可以發(fā)送多次HTTP請求。
版權說明：摘錄到部分網(wǎng)絡資源，如存在版權問題，請私信聯(lián)系處理，謝謝！
關注頭條號“編程家園”，后續(xù)陸續(xù)會有更多技術領域（包括并不限于Android進階、Java進階、Kotlin、網(wǎng)絡、Flutter、Python等），以及架構、職業(yè)規(guī)劃、職業(yè)思考等方面資料的免費分享，期待您的關注！
在自己的頁面中嵌入其他頁面是一個非常重要的操作，既能豐富自己的頁面樣式又能增強頁面的信息量。
舉個例子，如果打算在自己的頁面中插入一個視頻網(wǎng)站的視頻該怎么做呢？
假如我現(xiàn)在自己的頁面中嵌入這個視頻，
我只需要在視頻下側(cè)找到"分享"。
點擊之后出現(xiàn)這樣的對話框，如圖：
通過在我們的頁面中粘貼這段通用代碼就可以顯示這個視頻了。
代碼如下：
<iframe height=498 width=510 src='http://player.youku.com/embed/XNDQ5Mjg1MTU1Mg==' frameborder=0 'allowfullscreen'></iframe>下面就寫到我們的頁面中試試吧。
首先復制"第一個網(wǎng)頁.html"文件，改名為"在頁面中嵌入頁面.html"保存，然后用記事本打開，修改<head></head>標簽中的<title>第一個頁面</title>編輯為"在頁面中嵌入頁面"即可，完整代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<title>在頁面中嵌入頁面</title>
</head>
<body>
<iframe height=498 width=510 src='http://player.youku.com/embed/XNDQ5Mjg1MTU1Mg==' frameborder=0 'allowfullscreen'></iframe>
</body>
</html>頁面效果如下：
怎么樣，是不是很神奇！
下面我們來分析一下這段代碼的含義。
首先要引入一個新標簽<iframe>，HTML的使用手冊中翻譯為"框架"，說實話，這么翻譯初學者是不知所云的。這個框架元素的主要作用就是在自己的頁面中嵌入其他頁面。
在<iframe>標簽中先指定路徑屬性即src。這里使用的是單引號，實際上只要是半角符號，單引號和雙引號都可以的。
然后設置長寬屬性，即width和height，大家可以嘗試改變數(shù)據(jù)看看。
frameborder可以為iframe的窗口指定一個邊框，大家可以嘗試把0改成1看看。大家注意哈，這里輸入30和輸入1是一樣的，因為這個屬性不是定義邊框的寬度，而是定義是否顯示邊框！在編程中叫做布爾值，0代表沒有邊框，1代表有邊框！和我們點燈的開關一樣！
如圖：多了個邊框出來。
最后'allowfullscreen'這個描述非常的奇葩，把它刪掉沒有任何影響。不曉得是干什么的，主要是也不符合html的語法（也可能是我沒見識）。如果有詳細了解的小伙伴歡迎留言指教，感激不盡。
下面我們嘗試修改一下src屬性，給它一個別的路徑看看。例如:
<!DOCTYPE HTML>
<html>
<head>
<title>在頁面中嵌入頁面</title>
</head>
<body>
<iframe height=498 width=510 src='https://www.toutiao.com/i6790673377188119052/'>
</iframe>
</body>
</html>需要注意的是，修改了src并保存文件之后要把原頁面關閉然后重新打開才可以正常顯示！
效果如下：
在瀏覽網(wǎng)頁時我們還經(jīng)常遇到這樣的情況，就是有一個獨立窗口顯示嵌套的頁面，上面有個標題，一點擊就會跳到那個嵌入的頁面上，這個其實很簡答，使用一個<a></a>元素即可辦到，示例代碼如下:
<a href="https://www.toutiao.com/i6790673377188119052/">HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎自學網(wǎng)頁制作</a>
<iframe height=498 width=510 src='https://www.toutiao.com/i6790673377188119052/'></iframe>頁面示例如下：
框架元素并沒有換行，所有我們可以推測出<iframe>標簽實際上是個內(nèi)聯(lián)元素，如何讓它換行呢？
為<iframe>的style屬性中寫入display:block即可。這句代碼的意思是按照塊元素來顯示<iframe>內(nèi)容。
示例代碼如下：
<iframe height=498 width=510 style="display:block;"src='https://www.toutiao.com/i6790673377188119052/'></iframe>頁面效果如下：
是不是很有意思。
下面我們來介紹一個更有趣的玩法。如圖所示：
這個怎么做呢？
這就要介紹<iframe>標簽中的另一個屬性：name（名字）
示例代碼如下：name="iframe"
<iframe name="iframe" height=498 width=510style="display:block;"src='https://www.toutiao.com/i6790673377188119052/'allowfullscreen'></iframe>這里講個題外話，如果大家了解中國古代的"請神術"的話就會知道這樣一個有趣的傳說，就是如果我們能叫出鬼神的名字就可以驅(qū)使它。
編程也是這樣，我們給函數(shù)或變量一個名字后，就可以隨時隨地的驅(qū)使它。
現(xiàn)在我們給<iframe>起了個名字叫做"iframe"，當然您可以使用其他名字也沒問題，但要使用英文或漢語拼音命名，名字是英語字母組合最好。
有了名字之后，<a>標簽就要驅(qū)使<iframe>標簽來顯示自己路徑下的內(nèi)容，如何驅(qū)使呢？
大家還記得<a>標簽中有一個target屬性嗎？只要讓target="iframename"即可！
也就是target="iframe"。示例代碼如下：大家要注意的是<a>標簽也是內(nèi)聯(lián)元素，也需要添加display:block，不然也是排在一列顯示。
<a style="display:block;" target="iframe" href="https://www.toutiao.com/i6790673377188119052/">HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎自學網(wǎng)頁制作</a><!--第一個a鏈接的是頭條文章-->
<a style="display:block;" target="iframe" href="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid=1838467&fr=aladdin"> 殲20戰(zhàn)斗機百科</a><!--第二個a鏈接的是百度百科-->
<a style="display:block;"target="iframe" href="image1.jpg">IT美女</a><!--第三個a鏈接的是本地圖片-->
<iframe name="iframe" height=498 width=510style="display:block;"></iframe>只要我們?yōu)椴煌?lt;a>標簽賦予target="iframe"的屬性，點擊這些<a>標簽就可以在叫做"iframe"的框架元素中顯示自己的頁面。這時我們可以把<iframe>標簽中的src屬性刪除掉，保存文件后，關閉測試網(wǎng)頁，再重新打開，效果如下:
初始狀態(tài)下，因為框架元素中的src是空的，所以打開后是空白的。如果您覺得單調(diào)可以任意復制3個<a>中的一個href中的鏈接路徑給<iframe>的src屬性，打開就是相應的標簽。這個就不演示了，大家自己試試即可。
點擊第一個鏈接效果如下：
點擊第二個鏈接如下：
點擊第三個鏈接如下：
最后再強調(diào)一下，改完框架的src屬性后需要關閉頁面后重新打開才可以，刷新的話并不能正確顯示！切記！
今天的示例代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<title>在頁面中嵌入頁面</title>
</head>
<body>
<a style="display:block;" target="iframe" href="https://www.toutiao.com/i6790673377188119052/">HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎自學網(wǎng)頁制作</a>
<a style="display:block;" target="iframe" href="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid=1838467&fr=aladdin">殲20戰(zhàn)斗機百科</a>
<a style="display:block;" target="iframe" href="image1.jpg">IT美女</a>
<iframe name="iframe" height=498 width=510 style="display:block;"></iframe>
</body>
</html>今天的內(nèi)容結束了，明天我將會為大家介紹<object>和<embed>這兩個標簽，它們可以在頁面中嵌入更多有趣的東西。
喜歡的小伙伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！
HTML序章（學習目的、對象、基本概念）——零基礎自學網(wǎng)頁制作
HTML是什么？——零基礎自學網(wǎng)頁制作
第一個HTML頁面如何寫？——零基礎自學網(wǎng)頁制作
HTML頁面中head標簽有啥用？——零基礎自學網(wǎng)頁制作
初識meta標簽與SEO——零基礎自學網(wǎng)頁制作
HTML中的元素使用方法1——零基礎自學網(wǎng)頁制作
HTML中的元素使用方法2——零基礎自學網(wǎng)頁制作
HTML元素中的屬性1——零基礎自學網(wǎng)頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網(wǎng)頁制作
使用HTML添加表格1（基本元素）——零基礎自學網(wǎng)頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網(wǎng)頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網(wǎng)頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網(wǎng)頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網(wǎng)頁制作
HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎自學網(wǎng)頁制作
初識HTML中的<div>塊元素——零基礎自學網(wǎng)頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網(wǎng)頁制作
封閉在家學網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎自學網(wǎng)頁制作
HTML表單元素初識1——零基礎自學網(wǎng)頁制作
HTML表單元素初識2——零基礎自學網(wǎng)頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網(wǎng)頁制作
HTML表單4（form的action、method屬性）——零基礎自學網(wǎng)頁制作
HTML列表制作講解——零基礎自學網(wǎng)頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網(wǎng)頁制作
音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎自學網(wǎng)頁制作
HTML中使用<a>標簽實現(xiàn)文本內(nèi)鏈接——零基礎自學網(wǎng)頁制作
直以來，讓前端工程師頭疼的問題肯定包括垂直居中這個問題吧，什么文字垂直居中，圖片垂直居中之類的，很頭疼對不對，如果現(xiàn)在讓你寫一個在網(wǎng)頁正中間顯示的彈出層，你會用什么方法寫呢？
今天來分享一下小編所知道的幾種方法，希望能對大家有用，如果你有更好的解決方法，也歡迎你來告訴我，讓小編也漲漲姿勢哈。
第一種：固定寬高的彈出層
運行效果
css樣式
html代碼
這里大家看下我用紅色框框框起來的那幾行代碼哈，其它的只是附加的一些效果。
優(yōu)點：適用于各種瀏覽器，包括令前端工程師頭疼的ie6。
缺點：必須要設置彈出層的寬高。
第二種：自適應內(nèi)容寬高的彈出層
運行效果
css樣式
html代碼
還是只看我用紅色框框框起來的那幾行代碼。
優(yōu)點：不用設置彈出層寬高，彈出層的寬高隨內(nèi)容自適應居中。
缺點：只適用于ie10或以上版本及webkit內(nèi)核的瀏覽器（像現(xiàn)在主流的雙核瀏覽器在高速模式下都可以的）。。
如果要兼容其它內(nèi)核瀏覽器（比如火狐），就改成這樣：
以上就是小編常用的兩種彈出層在正中間顯示的方法，那么，你是用什么方法實現(xiàn)的呢？歡迎一起交流哦。
謝謝你的閱讀，如果你有更好的方法或在應用過程中遇到問題可以在評論區(qū)提問或者直接私信我，我會定期回復，碼農(nóng)劉小橋與你一起學習，共同進步。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
