ndroid高階開發(fā)專欄

Java高級開發(fā)進(jìn)階專欄

TCP連接的三次握手和四次揮手

一文搞懂DNS域名解析的詳細(xì)流程

高并發(fā)與負(fù)載均衡：Nginx的反向代理和負(fù)載均衡

一文搞懂TCP/IP協(xié)議及Web基礎(chǔ)知識

一文搞懂HTTP協(xié)議的核心知識點(diǎn)

一文掌握 HTTP協(xié)議報(bào)文 包含的信息類型

一文搞懂HTTP協(xié)議 返回結(jié)果的HTTP狀態(tài)碼

一文搞懂 HTTP協(xié)議的報(bào)文首部

作為網(wǎng)絡(luò)專欄的開篇導(dǎo)文，本文概況介紹下經(jīng)典案例：從輸入一個(gè)網(wǎng)址到瀏覽器顯示頁面的全過程。

步驟概要介紹如下：

• 1、輸入網(wǎng)址
• 2、DNS解析獲取域名對應(yīng)的IP地址
• 3、建立TCP連接
• 4、web瀏覽器向web服務(wù)器發(fā)送HTTP請求
• 5、服務(wù)器的永久重定向響應(yīng)
• 6、瀏覽器跟蹤重定向地址
• 7、web服務(wù)器做出應(yīng)答
• 8、瀏覽器顯示 HTML
• 9、瀏覽器發(fā)送請求獲取其他嵌入在 HTML 中的資源
• 10、web服務(wù)器關(guān)閉TCP連接

1、輸入網(wǎng)址

當(dāng)在瀏覽器中輸入網(wǎng)址時(shí)，瀏覽器其實(shí)就已在智能匹配 url 了，他會從歷史記錄，書簽等地方，找到已經(jīng)輸入的字符串可能對應(yīng)的 url，然后給出智能提示，讓你可以補(bǔ)全url地址。

對于 google的chrome 的瀏覽器，他甚至?xí)苯訌木彺嬷邪丫W(wǎng)頁展示出來，就是說，你還沒有按下 enter，頁面就出來了。

2、DNS解析獲取域名對應(yīng)的IP地址

請求一旦發(fā)起，瀏覽器首先要做的事情就是解析這個(gè)域名。

• 1、一般來說，瀏覽器會首先查看本地硬盤的 hosts 文件，看看其中有沒有和這個(gè)域名對應(yīng)的規(guī)則，如果有的話就直接使用 hosts 文件里面的 ip 地址。
• 2、如果在本地的 hosts 文件沒有能夠找到對應(yīng)的 ip 地址，瀏覽器會發(fā)出一個(gè) DNS請求到本地DNS服務(wù)器 。本地DNS服務(wù)器一般都是你的網(wǎng)絡(luò)接入服務(wù)器商提供，比如中國電信，中國移動(dòng)。
• 3、查詢你輸入的網(wǎng)址的DNS請求到達(dá)本地DNS服務(wù)器之后，本地DNS服務(wù)器會首先查詢它的緩存記錄，如果緩存中有此條記錄，就可以直接返回結(jié)果，此過程是遞歸的方式進(jìn)行查詢。如果沒有，本地DNS服務(wù)器還要向DNS根服務(wù)器進(jìn)行查詢。
• 4、根DNS服務(wù)器沒有記錄具體的域名和IP地址的對應(yīng)關(guān)系，而是告訴本地DNS服務(wù)器，你可以到域服務(wù)器上去繼續(xù)查詢，并給出域服務(wù)器的地址。這種過程是迭代的過程。
• 5、本地DNS服務(wù)器繼續(xù)向域服務(wù)器發(fā)出請求，在這個(gè)例子中，請求的對象是.com域服務(wù)器。.com域服務(wù)器收到請求之后，也不會直接返回域名和IP地址的對應(yīng)關(guān)系，而是告訴本地DNS服務(wù)器，你的域名的解析服務(wù)器的地址。
• 6、最后，本地DNS服務(wù)器向域名的解析服務(wù)器發(fā)出請求，這時(shí)就能收到一個(gè)域名和IP地址對應(yīng)關(guān)系，本地DNS服務(wù)器不僅要把IP地址返回給用戶電腦，還要把這個(gè)對應(yīng)關(guān)系保存在緩存中，以備下次別的用戶查詢時(shí)，可以直接返回結(jié)果，加快網(wǎng)絡(luò)訪問。

3、建立TCP連接

在HTTP工作開始之前，web瀏覽器首先要通過網(wǎng)絡(luò)與web服務(wù)器建立連接，該連接是通過TCP來完成的。

PS1：為什么要先建立TCP呢？

因?yàn)镠TTP是比TCP更高層次的應(yīng)用層協(xié)議，根據(jù)規(guī)則，只有低層協(xié)議建立之后才能進(jìn)行更高層次協(xié)議的連接，因此要先建立TCP連接，一般TCP連接的端口號是80

PS2：擴(kuò)展知識點(diǎn)：

TCP連接的三次握手和斷開的四次揮手 參照站內(nèi)文章：TCP 三次握手和四次揮手

4、web瀏覽器向web服務(wù)器發(fā)送HTTP請求

建立了TCP連接之后，web瀏覽器就會向web服務(wù)器發(fā)起一個(gè)http請求。

一個(gè)典型的 http request header 一般需要包括請求的方法，例如 GET 或者 POST 等，不常用的還有 PUT 和 DELETE 、HEAD、OPTION以及 TRACE 方法，一般的瀏覽器只能發(fā)起 GET 或者 POST 請求。

客戶端向服務(wù)器發(fā)起http請求的時(shí)候，會有一些請求信息，請求信息包含三個(gè)部分：

• 請求方法URI協(xié)議/版本
• 請求頭(Request Header)
• 請求正文：

下面是一個(gè)完整的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=1234

4.1、請求行

請求的第一行是“方法URL議/版本”：GET/sample.jsp HTTP/1.1

4.2、請求頭(Request Header)

請求頭包含許多有關(guān)的客戶端環(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、請求正文

請求頭和請求正文之間是一個(gè)空行，這個(gè)行非常重要，它表示請求頭已經(jīng)結(jié)束，接下來的是請求正文。請求正文中可以包含客戶提交的查詢字符串信息：

username=jinqiao&password=1234

5、服務(wù)器的永久重定向響應(yīng)

服務(wù)器給瀏覽器響應(yīng)一個(gè)301永久重定向響應(yīng)，這樣瀏覽器就會訪問“http://www.google.com/” 而非“http://google.com/”。

為什么服務(wù)器一定要重定向而不是直接發(fā)送用戶想看的網(wǎng)頁內(nèi)容呢？其中一個(gè)原因跟搜索引擎排名有關(guān)。如果一個(gè)頁面有兩個(gè)地址，就像http://www.yy.com/和http://yy.com/，搜索引擎會認(rèn)為它們是兩個(gè)網(wǎng)站，結(jié)果造成每個(gè)搜索鏈接都減少從而降低排名。而搜索引擎知道301永久重定向是什么意思，這樣就會把訪問帶www的和不帶www的地址歸到同一個(gè)網(wǎng)站排名下。還有就是用不同的地址會造成緩存友好性變差，當(dāng)一個(gè)頁面有好幾個(gè)名字時(shí)，它可能會在緩存里出現(xiàn)好幾次。

重定向原因：

• 1、網(wǎng)站調(diào)整（如改變網(wǎng)頁目錄結(jié)構(gòu)）；
• 2、網(wǎng)頁被移到一個(gè)新地址；
• 3、網(wǎng)頁擴(kuò)展名改變(如應(yīng)用需要把.php改成.Html或.shtml)。

這種情況下，如果不做重定向，則用戶收藏夾或搜索引擎數(shù)據(jù)庫中舊地址只能讓訪問客戶得到一個(gè)404頁面錯(cuò)誤信息，訪問流量白白喪失；再者某些注冊了多個(gè)域名的網(wǎng)站，也需要通過重定向讓訪問這些域名的用戶自動(dòng)跳轉(zhuǎn)到主站點(diǎn)等。

6、瀏覽器跟蹤重定向地址

現(xiàn)在瀏覽器知道了 "http://www.google.com/"才是要訪問的正確地址，所以它會發(fā)送另一個(gè)http請求。這里沒有啥好說的

7、web服務(wù)器做出應(yīng)答

經(jīng)過前面的步驟，服務(wù)器收到了我們的請求，也處理我們的請求，到這一步，它會把它的處理結(jié)果返回，也就是返回一個(gè)HTPP響應(yīng)。

HTTP響應(yīng)與HTTP請求相似，HTTP響應(yīng)也由3個(gè)部分構(gòu)成，分別是：

• 狀態(tài)行
• 響應(yīng)頭(Response Header)
• 響應(yīng)正文

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)代碼、及相應(yīng)的狀態(tài)描述，各元素之間以空格分隔。

格式: HTTP-Version Status-Code Reason-Phrase CRLF

例如: HTTP/1.1 200 OK \r\n

-- 協(xié)議版本：是用http1.0還是其他版本

-- 狀態(tài)描述：狀態(tài)描述給出了關(guān)于狀態(tài)代碼的簡短的文字描述。比如狀態(tài)代碼為200時(shí)的描述為 ok

-- 狀態(tài)代碼：狀態(tài)代碼由三位數(shù)字組成，第一個(gè)數(shù)字定義了響應(yīng)的類別，且有五種可能取值。

狀態(tài)代碼具體協(xié)議定義如下：

1xx：信息性狀態(tài)碼，表示服務(wù)器已接收了客戶端請求，客戶端可繼續(xù)發(fā)送請求。
100 Continue
101 Switching Protocols

2xx：成功狀態(tài)碼，表示服務(wù)器已成功接收到請求并進(jìn)行處理。
200 OK 表示客戶端請求成功
204 No Content 成功，但不返回任何實(shí)體的主體部分
206 Partial Content 成功執(zhí)行了一個(gè)范圍（Range）請求

3xx：重定向狀態(tài)碼，表示服務(wù)器要求客戶端重定向。
301 Moved Permanently 永久性重定向，響應(yīng)報(bào)文的Location首部應(yīng)該有該資源的新URL
302 Found 臨時(shí)性重定向，響應(yīng)報(bào)文的Location首部給出的URL用來臨時(shí)定位資源
303 See Other 請求的資源存在著另一個(gè)URI，客戶端應(yīng)使用GET方法定向獲取請求的資源
304 Not Modified 服務(wù)器內(nèi)容沒有更新，可以直接讀取瀏覽器緩存
307 Temporary Redirect 臨時(shí)重定向。與302 Found含義一樣。302禁止POST變換為GET，但實(shí)際使用時(shí)并不一定，307則更多瀏覽器可能會遵循這一標(biāo)準(zhǔn)，但也依賴于瀏覽器具體實(shí)現(xiàn)

4xx：客戶端錯(cuò)誤狀態(tài)碼，表示客戶端的請求有非法內(nèi)容。
400 Bad Request 表示客戶端請求有語法錯(cuò)誤，不能被服務(wù)器所理解
401 Unauthonzed 表示請求未經(jīng)授權(quán)，該狀態(tài)代碼必須與 WWW-Authenticate 報(bào)頭域一起使用
403 Forbidden 表示服務(wù)器收到請求，但是拒絕提供服務(wù)，通常會在響應(yīng)正文中給出不提供服務(wù)的原因
404 Not Found 請求的資源不存在，例如，輸入了錯(cuò)誤的URL

5xx：服務(wù)器錯(cuò)誤狀態(tài)碼，表示服務(wù)器未能正常處理客戶端的請求而出現(xiàn)意外錯(cuò)誤。
500 Internel Server Error 表示服務(wù)器發(fā)生不可預(yù)期的錯(cuò)誤，導(dǎo)致無法完成客戶端的請求
503 Service Unavailable 表示服務(wù)器當(dāng)前不能夠處理客戶端的請求，在一段時(shí)間之后，服務(wù)器可能會恢復(fù)正常

7.2、響應(yīng)頭：

響應(yīng)頭部：由關(guān)鍵字/值對組成，每行一對，關(guān)鍵字和值用英文冒號":"分隔。

Date: Sat, 31 Dec 2005 23:59:59 GMT
Content-Type: text/html;charset=ISO-8859-1
Content-Length: 122

典型的響應(yīng)頭字段：

7.3、響應(yīng)正文

包含著我們需要的一些具體信息，比如cookie，html,image，后端返回的請求數(shù)據(jù)等等。這里需要注意，響應(yīng)正文和響應(yīng)頭之間有一行空格，表示響應(yīng)頭的信息到空格為止。

8、瀏覽器顯示 HTML

在瀏覽器沒有完整接受全部HTML文檔時(shí)，它就已經(jīng)開始顯示這個(gè)頁面了，瀏覽器是如何把頁面呈現(xiàn)在屏幕上的呢？

不同瀏覽器可能解析的過程不太一樣，這里我們只介紹webkit的渲染過程。下圖對應(yīng)的就是WebKit渲染的過程，這個(gè)過程包括：

解析html以構(gòu)建dom樹 -> 構(gòu)建render樹 -> 布局render樹 -> 繪制render樹：

9、瀏覽器發(fā)送請求獲取嵌入在 HTML 中的資源（如圖片、音頻、視頻、CSS、JS等等）

其實(shí)這個(gè)步驟可以并列在步驟8中，在瀏覽器顯示HTML時(shí)，它會注意到需要獲取其他地址內(nèi)容的標(biāo)簽。這時(shí)，瀏覽器會發(fā)送一個(gè)獲取請求來重新獲得這些文件。比如我要獲取外圖片，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)歷一個(gè)和HTML讀取類似的過程。所以瀏覽器會在DNS中查找這些域名，發(fā)送請求，重定向等等...

不像動(dòng)態(tài)頁面，靜態(tài)文件會允許瀏覽器對其進(jìn)行緩存。有的文件可能會不需要與服務(wù)器通訊，而從緩存中直接讀取，或者可以放到CDN中

10、web服務(wù)器關(guān)閉TCP連接

一般情況下，一旦web服務(wù)器向?yàn)g覽器發(fā)送了請求數(shù)據(jù)后，它就要關(guān)閉TCP連接，然后如果瀏覽器或者服務(wù)器在其頭信息加入這行代碼：

connection:keep-alive

這樣TCP連接將依然保持打開狀態(tài)，瀏覽器可以繼續(xù)通過相同的連接發(fā)送請求，保持連接，節(jié)省了為每個(gè)請求建立新連接所需要的的事件，同時(shí)節(jié)省了寬帶

實(shí)際上，在HTTP 1.1 版本的新特性中有一點(diǎn)是：默認(rèn)持久連接節(jié)省通信量，只要客戶端、服務(wù)端任意一端沒有明確斷開TCP連接，可以發(fā)送多次HTTP請求。

版權(quán)說明：摘錄到部分網(wǎng)絡(luò)資源，如存在版權(quán)問題，請私信聯(lián)系處理，謝謝！

關(guān)注頭條號“編程家園”，后續(xù)陸續(xù)會有更多技術(shù)領(lǐng)域（包括并不限于Android進(jìn)階、Java進(jìn)階、Kotlin、網(wǎng)絡(luò)、Flutter、Python等），以及架構(gòu)、職業(yè)規(guī)劃、職業(yè)思考等方面資料的免費(fèi)分享，期待您的關(guān)注！

HTML頁面中嵌入其他頁面的方法

在自己的頁面中嵌入其他頁面是一個(gè)非常重要的操作，既能豐富自己的頁面樣式又能增強(qiáng)頁面的信息量。

舉個(gè)例子，如果打算在自己的頁面中插入一個(gè)視頻網(wǎng)站的視頻該怎么做呢？

假如我現(xiàn)在自己的頁面中嵌入這個(gè)視頻，

我只需要在視頻下側(cè)找到"分享"。

點(diǎn)擊之后出現(xiàn)這樣的對話框，如圖：

通過在我們的頁面中粘貼這段通用代碼就可以顯示這個(gè)視頻了。

代碼如下：

<iframe height=498 width=510 src='http://player.youku.com/embed/XNDQ5Mjg1MTU1Mg==' frameborder=0 'allowfullscreen'></iframe>

下面就寫到我們的頁面中試試吧。

首先復(fù)制"第一個(gè)網(wǎng)頁.html"文件，改名為"在頁面中嵌入頁面.html"保存，然后用記事本打開，修改<head></head>標(biāo)簽中的<title>第一個(gè)頁面</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>

頁面效果如下：

怎么樣，是不是很神奇！

下面我們來分析一下這段代碼的含義。

首先要引入一個(gè)新標(biāo)簽<iframe>，HTML的使用手冊中翻譯為"框架"，說實(shí)話，這么翻譯初學(xué)者是不知所云的。這個(gè)框架元素的主要作用就是在自己的頁面中嵌入其他頁面。

在<iframe>標(biāo)簽中先指定路徑屬性即src。這里使用的是單引號，實(shí)際上只要是半角符號，單引號和雙引號都可以的。

然后設(shè)置長寬屬性，即width和height，大家可以嘗試改變數(shù)據(jù)看看。

frameborder可以為iframe的窗口指定一個(gè)邊框，大家可以嘗試把0改成1看看。大家注意哈，這里輸入30和輸入1是一樣的，因?yàn)檫@個(gè)屬性不是定義邊框的寬度，而是定義是否顯示邊框！在編程中叫做布爾值，0代表沒有邊框，1代表有邊框！和我們點(diǎn)燈的開關(guān)一樣！

如圖：多了個(gè)邊框出來。

最后'allowfullscreen'這個(gè)描述非常的奇葩，把它刪掉沒有任何影響。不曉得是干什么的，主要是也不符合html的語法（也可能是我沒見識）。如果有詳細(xì)了解的小伙伴歡迎留言指教，感激不盡。

下面我們嘗試修改一下src屬性，給它一個(gè)別的路徑看看。例如:

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>在頁面中嵌入頁面</title>
  </head> 
  <body>
  <iframe height=498 width=510 src='https://www.toutiao.com/i6790673377188119052/'>
  </iframe>
  </body>
  </html>

需要注意的是，修改了src并保存文件之后要把原頁面關(guān)閉然后重新打開才可以正常顯示！

效果如下：

在瀏覽網(wǎng)頁時(shí)我們還經(jīng)常遇到這樣的情況，就是有一個(gè)獨(dú)立窗口顯示嵌套的頁面，上面有個(gè)標(biāo)題，一點(diǎn)擊就會跳到那個(gè)嵌入的頁面上，這個(gè)其實(shí)很簡答，使用一個(gè)<a></a>元素即可辦到，示例代碼如下:

<a href="https://www.toutiao.com/i6790673377188119052/">HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作</a>
<iframe height=498 width=510 src='https://www.toutiao.com/i6790673377188119052/'></iframe>

頁面示例如下：

框架元素并沒有換行，所有我們可以推測出<iframe>標(biāo)簽實(shí)際上是個(gè)內(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>

頁面效果如下：

是不是很有意思。

下面我們來介紹一個(gè)更有趣的玩法。如圖所示：

這個(gè)怎么做呢？

這就要介紹<iframe>標(biāo)簽中的另一個(gè)屬性：name（名字）

示例代碼如下：name="iframe"

<iframe name="iframe" height=498 width=510style="display:block;"src='https://www.toutiao.com/i6790673377188119052/'allowfullscreen'></iframe>

這里講個(gè)題外話，如果大家了解中國古代的"請神術(shù)"的話就會知道這樣一個(gè)有趣的傳說，就是如果我們能叫出鬼神的名字就可以驅(qū)使它。

編程也是這樣，我們給函數(shù)或變量一個(gè)名字后，就可以隨時(shí)隨地的驅(qū)使它。

現(xiàn)在我們給<iframe>起了個(gè)名字叫做"iframe"，當(dāng)然您可以使用其他名字也沒問題，但要使用英文或漢語拼音命名，名字是英語字母組合最好。

有了名字之后，<a>標(biāo)簽就要驅(qū)使<iframe>標(biāo)簽來顯示自己路徑下的內(nèi)容，如何驅(qū)使呢？

大家還記得<a>標(biāo)簽中有一個(gè)target屬性嗎？只要讓target="iframename"即可！

也就是target="iframe"。示例代碼如下：大家要注意的是<a>標(biāo)簽也是內(nèi)聯(lián)元素，也需要添加display:block，不然也是排在一列顯示。

<a style="display:block;" target="iframe" href="https://www.toutiao.com/i6790673377188119052/">HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作</a><!--第一個(gè)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)斗機(jī)百科</a><!--第二個(gè)a鏈接的是百度百科-->
<a style="display:block;"target="iframe" href="image1.jpg">IT美女</a><!--第三個(gè)a鏈接的是本地圖片-->
<iframe name="iframe" height=498 width=510style="display:block;"></iframe>

只要我們?yōu)椴煌?lt;a>標(biāo)簽賦予target="iframe"的屬性，點(diǎn)擊這些<a>標(biāo)簽就可以在叫做"iframe"的框架元素中顯示自己的頁面。這時(shí)我們可以把<iframe>標(biāo)簽中的src屬性刪除掉，保存文件后，關(guān)閉測試網(wǎng)頁，再重新打開，效果如下:

初始狀態(tài)下，因?yàn)榭蚣茉刂械膕rc是空的，所以打開后是空白的。如果您覺得單調(diào)可以任意復(fù)制3個(gè)<a>中的一個(gè)href中的鏈接路徑給<iframe>的src屬性，打開就是相應(yīng)的標(biāo)簽。這個(gè)就不演示了，大家自己試試即可。

點(diǎn)擊第一個(gè)鏈接效果如下：

點(diǎn)擊第二個(gè)鏈接如下：

點(diǎn)擊第三個(gè)鏈接如下：

最后再強(qiáng)調(diào)一下，改完框架的src屬性后需要關(guān)閉頁面后重新打開才可以，刷新的話并不能正確顯示！切記！

今天的示例代碼如下：

<!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)元素——零基礎(chǔ)自學(xué)網(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)斗機(jī)百科</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)容結(jié)束了，明天我將會為大家介紹<object>和<embed>這兩個(gè)標(biāo)簽，它們可以在頁面中嵌入更多有趣的東西。

喜歡的小伙伴請關(guān)注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯(cuò)誤歡迎大家斧正，不勝感激！

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

第一個(gè)HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作