http協議與html
前端
前端即網站前臺部分，執行在PC端，移動端等瀏覽器上展現給使用者瀏覽的網頁，簡單的來說就是與使用者進行互動的介面就是前端。
前端的技術有很多，比如HTML、CSS、JavaScript、JQuery等等，但是如果作為一個後端開發工程師，那麼前端只需要學習HTML、CSS、JavaScript這三個技術即可，這三個是前端開發中最基本也是最必須的三個技能。
前端的開發中，在頁面的佈局時， HTML將元素進行定義，CSS對展示的元素進行定位和裝飾，再通過JavaScript實現相應的效果和互動。總的來說HTML是網頁的骨架，CSS是網頁的樣式，JavaScript是網頁的動態效果。
HTTP協議
簡介
如果我們寫了一個TCP服務端的程式碼，直接讓服務端去給瀏覽器傳送資料，瀏覽器是無法識別服務端傳送過來的資料的，並且不同服務端資料的組織策略都是不一樣的，比如python和java的資料型別書寫是不一樣的，所以這個時候就需要瀏覽器去做一個統一的處理，這個處理方案就是統一規定一個標準，即HTTP協議，它規定了服務端與瀏覽器之間的資料互動格式及其他事項。
HTTP協議全稱超文字傳輸協議（Hyper Text Transfer Protocol，HTTP）是一個簡單的請求-響應協議，它通常執行在TCP之上。
四大特性
-
基於請求響應
服務端永遠不會主動給客戶端發訊息，必須是客戶端先請求服務端被動響應。
-
基於TCP/IP作用於應用層之上的協議
-
無狀態
服務端不儲存客戶端狀態，每次請求都像是第一次請求。
-
短連線
不保持客戶端與服務端之間的連結導通，請求一次響應一次，之後斷開連線。
資料格式
請求格式：客戶端給服務端傳送訊息應該遵循的資料格式
- 請求首行：主要是請求的方法和協議版本
- 請求頭：一大堆k:v鍵值對
- 換行(不能省略)
- 請求體：攜帶敏感資料，如密碼、身份證號等
響應格式：服務端給客戶端傳送訊息應該遵循的資料格式
- 響應首行：響應狀態碼與協議版本
- 請求頭：一大堆k:v鍵值對
- 換行(不能省略)
- 響應體：給瀏覽器展示給使用者看的頁面資料
響應狀態碼
響應狀態碼由3位數字組成，不同數字代表不同的意思。
1開頭的數字(1XX)：服務端成功接收到了你的資料正在處理，你可以等待或者繼續傳送
100 Continue 描述：伺服器僅接收到部分請求，但是一旦伺服器並沒有拒絕該請求，客戶端應該繼續傳送其餘的請求。
2開頭的數字(2XX)：表示請求成功，服務端給出了響應
200 OK 描述：請求成功
3開頭的數字(3XX)：表示重定向(想訪問A頁面但是自動跳轉到了B頁面)
301 Moved Permanently 描述：所請求的頁面已經轉移至新的url。
4開頭的數字(4XX)：客戶端錯誤
404 Not Found 描述：伺服器無法找到被請求的頁面。
5開頭的數字(5XX)：服務端錯誤
502 Bad Gateway 描述：請求未完成。伺服器從上游伺服器收到一個無效的響應。
狀態碼也可以自己定義，可以給前端人員做提示用。
HTML簡介
HTML的全稱為超文字標記語言，它包括一系列標籤，通過新增或更改標籤可以對網頁內容進行修改，所有的網頁都是由HTML組成，是網頁的骨架。
存放HTML程式碼的檔案字尾名一般都是.html，像我們對網頁右鍵—》另存為，儲存的格式都是.html的字尾。
HTML檔案結構
<html>
<head>
<!--給瀏覽器看的資料-->
</head>
<body>
<!--給使用者看的資料-->
</body>
</html>
HTML標籤的分類
1.雙標籤：有頭有尾，內容寫在中間
<html>內容</html>
<head>內容</head>
<h1>內容</h1>
2.單標籤：自閉合標籤
<img />
<br />
HTML註釋語法
單行註釋
<!--單行註釋-->
多行註釋
<!--
多行註釋
多行註釋
-->
head內常見標籤
一般的網頁中head都會有如下標籤
<head>
<meta />
<title>Title</title>
<link />
<style></style>
<script></script>
</head>
| 標籤 | 意義 |
|---|---|
| <title></title> | 定義網頁標題 |
| <style></style> | 定義內部樣式表 |
| <script></script> | 定義JS程式碼或引入外部JS檔案 |
| <link/> | 引入外部樣式表文件 |
| <meta/> | 定義網頁原資訊 |
其中meta標籤的功能非常多，比如在使用可以專門編寫html檔案的工具中，你建立的html中的meta標籤大部分都是這樣：<meta charset="UTF-8">，這個規定了網頁的編碼，防止出現亂碼的情況。
body內基本標籤
body是html的身體，是主體部分，網頁內容的展示都寫在這個body標籤中。
body內基本標籤
| 標籤 | 意義 |
|---|---|
| <h1></h1> | 一級標題 |
| <h2></h2> | 二級標題 |
| <h3></h3> | 三級標題 |
| h4~h6 | 四級~六級標題 |
| <i></i> | 斜體 |
| <b></b> | 加粗 |
| <s></s> | 刪除線 |
| <u></u> | 下劃線 |
| <p></p> | 文字段落 |
| <hr /> | 水平分割線 |
| <br /> | 換行符 |
特殊字元
| 特殊字元 | 編寫方式 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版權符號© | © |
| 註冊符號® | ® |
佈局標籤(div、span)
標籤的類別
標籤有塊級標籤和行內標籤，塊級標籤的內容會獨自佔據網頁的一行，而行內標籤自身文字有大多就佔多大。像h1~h6、p、div這些標籤都是塊級標籤，span、u、i這些標籤都是行內標籤。
div標籤和span標籤
div標籤是塊級標籤，它都是用來劃分網頁區域的，比如一個網頁的導航欄它就可以用div包裹起來。
span標籤是行內標籤，一般都是用於塊級標籤內，比如我要修改p標籤的部分內容：
<p>我要<span style="color:red">紅色</span></p>
圖片標籤(img)
如果想要在網頁中插入圖片，可以使用img標籤
使用方法：
<img src="" title="" alt="" width="" height=""/>
- src：圖片路徑
- title：滑鼠懸浮自動展示提示資訊
- alt：當圖片無法正常展示自動提示的資訊
- width：自定義圖片高度
- height：自定義圖片寬度
height和width調整一個另外一個自適應調節，比如一個100*100大小的圖片，height=10px ，那麼width會自適應調節為10px。
超連結標籤(a)
如果想要跳轉到其他地方，可以使用a標籤。
使用方法：
<a href=''></a>
如果我想要跳轉到百度：
<a href='https://www.baidu.com'>百度</a>
如果我想要跳轉到頁面上的某個標籤位置，我可以通過標籤的id值跳轉：
<a href='#標籤id'></a>
a標籤還有一個target屬性值，控制是否當前頁面跳轉
<!--當前頁面跳轉-->
<a href='' target="_self"></a>
<!--新建頁面跳轉-->
<a href='' target="_self"></a>
標籤的兩大重要引數(id與class)
1.id
類似於身份證號，同一個html頁面上標籤的id值不允許重複，用於精確查詢某個標籤(因為一個html頁面上相同標籤名的標籤太多)
2.class
可以將多個標籤歸為一類，分類查詢(範圍查詢一次性多個)
列表標籤(ul、li)
無序列表可以使用ul標籤，ul和li是一起使用的，ul建立列表，li代表列表中的每一項。
使用方法：
<ul>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ul>
效果：
表格標籤
使用方法：
<table border="">
<thead>
<tr> <!--tr表示一行-->
<th>編號</th> <!--th加粗文字-->
<th>姓名</th>
<th>年齡</th>
</tr>
</thead> <!--表頭欄位-->
<tbody>
<tr>
<td>1</td> <!--td普通文字-->
<td>jason</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>tony</td>
<td>28</td>
</tr>
<tr>
<td>3</td>
<td>kevin</td>
<td>38</td>
</tr>
</tbody> <!--表單資料-->
</table>
效果：
解釋：
- table標籤用於建立表格，並定義格式
- thead標籤建立表頭，也就是填寫資料標題的地方
- tbody建立表身，也就是填寫資料部分的地方
- tr標籤表示一行
- th標籤為加粗文字
- td標籤為普通文字