整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
在HTML中，大多數元素都被定義為塊級元素或內聯元素。
塊級元素通常會獨立成行，而內聯元素會并排顯示。
在我們學過的元素中，
塊級元素如：<h> <p> <table>這些。
內聯元素如<td><a><img>
下面我們通過練習來直觀看看他們的區別。
塊級元素展示，代碼如下：
<body>
<h1>第一個網頁</h1><hr><h2>表格元素</h2><hr>
<p>塊級元素與內聯元素</p>
<p>零基礎自學網頁制作</p>
<table border="1" width="50%">
<thead>
<tr>
<td colspan="2">表格的頭部信息</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">表格的腳部信息</td>
<tr>
</tfoot>
<tbody>
<caption>表格標題</caption>
<colgroup>
<col span = "1" style="background-color:#ff0000;"></col>
</colgroup>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>
<table border = "1" width="100%">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列一行</td>
<td>二列二行</td>
</tr>
</tbody>
</table>
</body>如圖：
內聯元素展示如下
示例代碼：這段代碼被我放在了</table>后面。
<a href = "https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid =1838467&fr=aladdin">殲20戰斗機</a>
<img src="img/戰斗機/image3.jpg" width = "200px"/>效果如圖：
其中，<img>標簽中的width屬性規定了圖片的寬度為200px，也就是200像素。
HTML中，如果只對圖片的寬或高進行數值指定，那么未指定的數值會隨著指定數值進行等比例縮放！
熟知html元素是塊級還是內聯對以后進行頁面布局有一定的指導意義。
<div>與<span>標簽
為了方便開發者對頁面內容進行布局和調整，html開發者為html加入了專門的區塊元素<div></div>。
<div></div>是一個塊級元素，大家可以把它理解為一個容器，它本身是不會顯示在頁面上的。
比如這個！
筆者第一個漫畫作品
如果拋開畫面內容，我們看到的是一堆對畫面進行分割的方格子。像這樣
<div></div>元素的作用就是對頁面進行了這樣的分割。
實際上我們的頁面布局都是基于這樣思路進行分割的，只是頁面上不會像漫畫一樣顯示外邊框而已。例如：
強制為其添加邊框分割：
大家看明白了嗎？<div></div>就是用來對頁面進行分割劃區域的。
通過給<div>標簽設置不同的id屬性，可以在css文件中對不同<div>區塊中的所有信息進行統一調整樣式的操作。
這是對塊級元素整體改變樣式的方法。
但是，如果我們想對一個塊級元素中的不同文字或圖片這些內聯元素進行單獨操作怎么做呢？
html開發者為我們提供了<span></span>這樣的內聯標簽。比如我們對<p>我有一個夢想</p>這個段落元素中的"夢想"兩個字進行變化顏色的操作，我們可以這樣寫：
<p>我有一個<span>夢想</span></p>
通過對<span>指定不同的id或class屬性在CSS文件中對"夢想"二字進行改變顏色的操作而不會影響段落元素中的其他文字。
今天的內容結束了，下一次我們建立一個新的頁面來簡單看看<div>元素的基本用法。
喜歡的小伙伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！
HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作
HTML是什么？——零基礎自學網頁制作
第一個HTML頁面如何寫？——零基礎自學網頁制作
HTML頁面中head標簽有啥用？——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
CSS系列漫畫教程》共15講，是我2012年剛畢業步入互聯網時的早期作品。時隔多年，如今互聯網內容為王的分享經濟迅速發展，這些作品壓箱底太可惜，不如分享給大家。
漫畫還停留在當年前端兼容ie6的時代，如今ie6隨著那一代人的青春一起逝去，大家各奔前程，留下是感情和回憶。漫畫不乏紕漏和不嚴謹之處，可作為大家“飯后碼余”的休閑段子。
本期分享第1~5講，我會繼續更新后續章節。
言
HTTP協議是Hyper Text Transfer Protocol（超文本傳輸協議）的縮寫,是用于從萬維網服務器傳輸超文本到本地瀏覽器的傳送協議。HTTP 是基于 TCP/IP 協議通信協議來傳遞數據（HTML 文件、圖片文件、查詢結果等）。它不涉及數據包（packet）傳輸，主要規定了客戶端和服務器之間的通信格式，默認使用80端口。
一、Http的特點
1、簡單快速：客戶向服務器請求服務時，只需傳送請求方法和路徑。請求方法常用的有GET、HEAD、PUT、DELETE、POST。每種方法規定了客戶與服務器聯系的類型不同。由于HTTP協議簡單，使得HTTP服務器的程序規模小，因而通信速度很快。
2、靈活：HTTP允許傳輸任意類型的數據對象。
3、無連接：無連接的含義是限制每次連接只處理一個請求。服務器處理完客戶的請求，并收到客戶的應答后，即斷開連接。采用這種方式可以節省傳輸時間。
4、無狀態：HTTP協議是無狀態的，HTTP 協議自身不對請求和響應之間的通信狀態進行保存。任何兩次請求之間都沒有依賴關系。直觀地說，就是每個請求都是獨立的，與前面的請求和后面的請求都是沒有直接聯系的。協議本身并不保留之前一切的請求或 響應報文的信息。這是為了更快地處理大量事務，確保協議的可伸縮性，而特意把 HTTP 協議設計成如此簡單的。
二、Http報文
Http報文包括請求報文和響應報文兩大部分，其中請求報文由請求行（request line）、請求頭（header）、空行和請求體四個部分組成。而響應報文由狀態行、響應頭部、空行和響應體四個部分組成。接下來我們詳細介紹下請求報文的各個部分及其作用。
1、請求行
用來說明請求類型、要訪問的資源以及所使用的HTTP版本。
POST /chapter17/user.html HTTP/1.1
以上代碼中 POST 代表請求方法， /chapter17/user.html 表示URI， HTTP/1.1 代表協議和協議的版本?，F在比較流行的是Http1.1版本。大家也可以了解下 2.0 ：《讓面試官顫抖的 HTTP 2.0 協議面試題》。
2、請求頭
由關鍵字 / 值對組成，每行一對，關鍵字和值用英文冒號“:”分隔。
請求頭部通知服務器有關于客戶端請求的信息。它包含許多有關的客戶端環境和請求正文的有用信息。其中比如：
3、空行
最后一個請求頭之后是一個空行，這個行非常重要，它表示請求頭已經結束，接下來的是請求正文。
4、請求體
可以承載多個請求參數的數據。
name=tom&password=1234&realName=tomson
上面代碼，承載著name、password、realName三個請求參數。
三、HTTP請求方法
四、GET與POST區別
五、Http狀態碼
狀態代碼有三位數字組成，第一個數字定義了響應的類別，共分五種類別：
比如我們平時常見兩種出錯的狀態碼：
403 Forbidden //對被請求頁面的訪問被禁止 404 Not Found //請求資源不存在，比如：輸入了錯誤的URL
更多看下這篇文章《兩張趣圖助你理解 HTTP 狀態碼》
六、持久連接
1、為什么需要持久連接
HTTP協議的初始版本中，每進行一次HTTP通信就要斷開一次TCP連接。以當年的通信情況來說，因為都是些容量很小的文本傳輸，所以即使這樣也沒有多大問題。可隨著 HTTP 的 普及，文檔中包含大量圖片的情況多了起來。比如，使用瀏覽器瀏覽一個包含多張圖片的 HTML 頁面時，在發送請求訪問 HTML 頁面資源的同時，也會請 求該 HTML 頁面里包含的其他資源。因此，每次的請求都會造成無謂的 TCP 連接建立和斷開，增加通信量的 開銷。
2、持久連接的特點
為解決上述 TCP 連接的問題， HTTP/1.1 和一部分的 HTTP/1.0 想出了持久連接（HTTP Persistent Connections，也稱為 HTTP keep-alive 或 HTTP connection reuse）的方法。持久連接的特點是，只要任意一端沒有明確提出斷開連接，則保持TCP連接狀態。
持久連接的好處在于減少了 TCP 連接的重復建立和斷開所造成的額外開銷，減輕了服務器端的負載。另外， 減少開銷的那部分時間，使 HTTP 請求和響應能夠更早地結束，這樣 Web 頁面的顯示速度也就相應提高了。
在 HTTP/1.1 中，所有的連接默認都是持久連接，但在 HTTP/1.0 內并未標準化。雖然有一部分服務器通過非 標準的手段實現了持久連接，但服務器端不一定能夠支持持久連接。毫無疑問，除了服務器端，客戶端也需 要支持持久連接。
七、管線化
持久連接使得多數請求以管線化（pipelining）方式發送成為可能。從前發送請求后需等待并收到響應，才能 發送下一個請求。管線化技術出現后，不用等待響應亦可直接發送下一個請求。
這樣就能夠做到同時并行發送多個請求，而不需要一個接一個地等待響應了。通俗地講，請求打包一次傳輸過去，響應打包一次傳遞回來。管線化的前提是在持久連接下。
假如當請求一個包含 10 張圖片的 HTML Web 頁面，與挨個連接相比，用持久連接可以讓請求更快結束。 而管線化技術則比持久連接還要快。請求數越多，時間差就越明顯。客戶端需要請求這十個資源。以前的做法是，在同一個TCP連接里面，先發送A請求，然后等待服務器做出回應，收到后再發出B請求，以此類推，而管道機制則是允許瀏覽器同時發出這十個請求，但是服務器還是按照順序，先回應A請求，完成后再回應B請求。
于是在使用持久連接的情況下，某個連接上消息的傳遞類似于：
請求1 -> 響應1 -> 請求2 -> 響應2 -> 請求3 -> 響應3
管線化方式發送變成了類似這樣：
請求1 -> 請求2 -> 請求3 -> 響應1 -> 響應2 -> 響應3
喜歡這篇文章記得收藏，轉發哦！更多相關資訊可以關注xabdqn，免費獲得java零基礎教程！額外附送excel教程！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
