HTTP協議；HTML

阿新 • • 發佈：2022-04-22

內容

前端：任何與使用者直接打交道的介面都可以稱之為前端；淘寶頁面，遊戲頁面，操作頁面

後端：不直接與使用者打交道的內部程式碼

前端三劍客：HTML；CSS；JavaScript

HTML：網頁的骨架；CSS：網頁樣式；JavaScript：網頁動態效果

HTTP協議

可以充當客戶端的有：

自己寫的python程式碼（TCP客戶端）
別人寫的瀏覽器；CS架構與BS架構，BS本質也是CS

import socket

server = socket.socket()
server.bind(('127.0.0.1',8888))
server.listen( 
5)

while True: # 連結迴圈
    sock,add = server.accept()
    # while True: # 通訊迴圈
    data = sock.recv(1024)
    print(data.decode('utf8'))
    sock.send(b'hello')

View Code

問題：我們自己寫的TCP服務端與瀏覽器之間通訊了，但是瀏覽器不識別服務端資料

不同的服務端資料的組織策略千差萬別，但是瀏覽器卻需要做到能夠統一處理

最佳的解決措施是統一規定一個標準>>>:HTTP協議

HTTP協議：規定了服務端與瀏覽器之間的資料互動格式及其他事項

如果服務端遵循HTTP協議，就可以被瀏覽器正常訪問並展示內容；

如果服務端不遵循HTTP協議，瀏覽器就不會正常訪問和展示，但是不影響服務端；

如果這個應用特別火爆，那麼完全可以讓使用者下載專屬的客戶端：APP

四大特性

基於請求、響應

服務端永遠不會主動給客戶端發訊息，必須是客戶端先請求服務端被動響應

於TCP/IP作用於應用層之上的協議

應用層協議：HTTP，HTTPS，FTP...

無狀態

服務端不儲存客戶端狀態

短連結

不保持客戶端與服務端之間的連結通道（資料互動完畢就斷開）

長連結：websocket (微信QQ加好友）

資料格式

請求格式

客戶端給服務端傳送訊息應該遵循的資料格式

請求首行（請求方法，協議版本）

請求頭（一大堆k:v鍵值對）
（換行不能省略）
請求體（攜帶敏感資料：密碼；身份證號...）

響應格式

服務端給客戶端傳送訊息應該遵循的資料格式

響應首行（響應狀態碼，協議版本）
響應頭（一大堆k:v鍵值對）
（換行不能省略）
響應體（給瀏覽器展示給使用者看的頁面內容）

GET / HTTP/1.1 # 請求首行
Host: 127.0.0.1:8888
Connection: keep-alive
Cache-Control: max-age=0
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="8"
sec-ch-ua-mobile: ?0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36 SLBrowser/8.0.0.3161 SLBChan/105
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
Referer: https://www.baidu.com/s?ie=UTF-8&wd=127.0.0.1%EF%BC%9A8888&tn=15007414_dg
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9 # 以上都是請求頭
# 換行
# 請求體

View Code

響應狀態碼

用數字表示一串中文意思（簡化理解）

1XX：服務端成功接收到了你的資料正在處理，你可以等待或者繼續傳送

2XX：200 OK 表示請求成功，服務端給出響應

3XX：301\302 表示重定向（想訪問A頁面但是自動跳轉到了B頁面）

4XX：403 請求不合法（許可權不夠）；404 請求資源不存在

5XX：都是服務端錯誤，與客戶端無關（程式碼bug，機房炸了...）

在工作中還會自定義狀態碼（因為預設的不夠），自定義狀態碼一般都是從10000開始

寫後端需要給前端提供一個手冊（裡面列舉了狀態碼的情況）# 聚合資料網

超文字標記語言：HTML

<h1>hello big baby</h1>
<a href="https://www.sogo.com">click me</a>
<img src="111.jpg"/>

上述語法就是HTML，用於構建網頁的骨架（所有的網頁都是由HTML組成）

存放HTML程式碼的檔案字尾名一般都是.html

HTML沒有任何的邏輯，固定搭配：“所見即所得”

HTML文件結構

<html>
<head>給瀏覽器看的資料</head>
<body>給使用者看的資料</body>
</html>

HTML標籤的分類

雙標籤：有頭有尾；<html>內容</html>
單標籤：特殊功能；<img/>（圖片標籤）

開啟HTML標籤

查詢並右鍵選擇開啟方式
pycharm快捷方式：HTML檔案內容區右上方瀏覽器圖示

HTML標籤其實沒有縮排的概念，之所以縮排是為了更加美觀

HTML註釋語法

HTML由於標籤非常的多，所以可以通過註釋區分頁面區域

在pycharm中的HTML檔案內：註釋的快捷鍵也是ctrl+?

head內常見標籤

title標籤；控制網頁小標題；
style標籤；內部支援編寫css程式碼（檢查左側是HTML，右側是CSS）
link標籤；引入外部css檔案
script標籤；內部支援編寫js程式碼，也可以通過src屬性引入外部js檔案
meta標籤；功能非常多
keywords：搜尋引擎查詢關鍵字
description：用於展示頁面搜尋結果的文字描述

編寫標籤：標籤名稱+tab鍵

正常的業務邏輯，HTML，CSS，JS都會分不同的檔案儲存，用於解耦合

body內基本標籤

標題系列：h1~h6（1到6級標題）
字體系列：
<i>斜體</i>
<b>加粗</b>
<u>下劃線</u>
<s>刪除線</s>
文字段落：<p></p>（一段內容）
其他：hr：水平分割線；br：換行符（都是單標籤）

body內特殊符號

&nbsp；空格
&gt；&lt：大於號；小於號
&amp；&符號
&yen；羊角符
&copy；版權
&reg；商標

body內常見標籤

佈局標籤

div標籤（塊級標籤）：預設獨佔一行（可以後期調整）

span標籤（行內標籤）：自身內部文字多大就佔多大

標籤之間支援巢狀（最好是佈局類相關標籤參與）

塊兒級標籤可以巢狀任意標籤，不屬於佈局標籤的塊兒級標籤不建議巢狀塊兒級標籤，行內標籤只能巢狀行內標籤

頁面的編寫首先就是先用佈局標籤佔位，之後填充內容即可

圖片標籤：img

src：圖片路徑
title：滑鼠懸浮自動展示提示資訊
alt：當圖片無法正常展示自動提示的資訊
height：自定義圖片高度
width：自定義圖片寬度

height和width調整一個另外一個自適應，調節單位是px（畫素）

連結標籤：a

href：點選跳轉位置
可以寫網址，圖片（放到a標籤裡面）
<a href='網址'></a>

也可以寫標籤id值
<a href='頁面上某個標籤id值'></a>
target：控制是否當前頁面跳轉
預設_self當前頁
設定_blank新建頁

標籤的兩大重要引數（標籤的辨別）

id （找一個）
類似於身份證號，同一個html頁面上標籤的id值不允許重複
用於精確查詢某個標籤（因為一個html頁面上相同標籤名的標籤太多）
class （找一批）

類似於面向物件知識，可以將多個標籤歸為一類分類查詢（範圍查詢一次性多個）

列表標籤

無序列表

無序列表是使用頻率最高的列表標籤，頁面上只有是有規則排列的橫向或者豎向內容，幾乎使用的都是無序列表

表格標籤

<table border = "1"> <!--表格框架-->
    <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>

View Code