前端及html介紹
前端及html介紹
相對後端主要實現業務邏輯來說，前端就是與使用者互動的介面。
而前端最基礎的就是：HTML\CSS\Javascript
這三個語言分別負責網頁的骨架、樣式和動態效果（邏輯）。
而這三個語言的學習就可以幫助我們完成B/S架構中的瀏覽器B端的介面。
html介紹
B/S架構是基於網路的軟體架構，我們的服務端可以和瀏覽器建立tcp連線（7層協議的傳輸層以下都用socket模組完成了），而建立連線後所互動的內容想要在瀏覽器上呈現出來，就需要遵循http協議，幫助我們完成渲染應用層。
B/S是服務端提供的web服務，我們用python程式碼簡單模擬以下服務端：
import socket sk = socket.socket() sk.bind(("127.0.0.1", 8080)) sk.listen(5) while True: conn, addr = sk.accept() data = conn.recv(8096) # 接收資料 conn.send(b"HTTP/1.1 200 OK\r\n\r\n") # 傳送http報頭 conn.send(b"<h1>Hello world!</h1>") # 傳送http檔案內容 conn.close()
我們啟動這個py程式，然後在瀏覽器中輸入IP:PORT(就是url的本質)，會發現頁面上出現了一句：
hello world！
當我們輸入網址的電光火石間其實經歷瞭如下幾件事：
瀏覽器發請求 --> HTTP協議 --> 服務端接收請求 --> 服務端返回響應 --> 服務端把HTML檔案內容發給瀏覽器 --> 瀏覽器渲染頁面
當然有時候我們輸入網址也可能無法獲取正常的內容，如下：
這是因為我們的服務端返回給瀏覽器的內容並沒有遵循http協議，瀏覽器無法識別並做後續的操作。
HTML是什麼？
- 超文字標記語言（Hypertext Markup Language, HTML）是一種用於建立網頁的標記語言。
- 本質上是瀏覽器可識別的規則，我們按照規則寫網頁，瀏覽器根據規則渲染我們的網頁。對於不同的瀏覽器，對同一個標籤可能會有不同的解釋。（相容性問題）
- 網頁檔案的副檔名：.html或.htm
html四大特性
-
基於請求響應
B瀏覽器傳送請求，S服務端迴應響應，請求和響應都基於一定的格式
-
基於tcp、ip作用於應用層之上的協議
-
無狀態
服務端不會保護客戶端的狀態，每次輸入網址都相當於瀏覽器第一次訪問服務端
-
無/短連結
瀏覽器客戶端傳送請求後，服務端短暫的將html檔案傳送回去，後續兩端不保持連線
請求和響應格式
-
請求格式
請求首行（請求方式有很多的協議版本） 請求頭（一大堆kv鍵值對） 換行\r\n 請求體（存放敏感資訊，並不是所有的請求都有請求體） -
響應格式
響應首行（狀態碼 協議版本） 響應頭（一大堆kv鍵值對） 換行\r\n 響應體（給瀏覽器展示的資料）
響應狀態碼
| 狀態碼 | 意義 |
|---|---|
| 1xx | 服務端已經接收到了你的請求正在處理，客戶端可以繼續傳送或者等待 |
| 2xx | 200 OK 請求成功，服務端傳送了對應的響應 |
| 3xx | 重定向(想訪問網頁A但是自動調到了網頁B) 302臨時跳轉一定操作後返回原網頁，304永久跳轉到一個介面 |
| 4xx | 客戶端問題導致無法訪問 403訪問許可權不夠，404請求資源不存在 |
| 5xx | 服務端問題導致無法訪問 |
在一些專案中，我們可能還會自己定義一些狀態碼，通常以10000打頭。
html檔案結構
在前面我們最簡單的服務端中，我們傳送了一句hello world並按一點格式顯示在瀏覽器中，實際上傳送的語言是html超文字標記語言，而在python程式碼中寫大量的html格式的語言顯示是不方便的，所以通常我們會引入其他文字檔案，通過讀取檔案的方式按socket傳送給瀏覽器，而按照html格式來寫的文字檔案以html字尾，被稱為html檔案。
其基本結構如下：
<!DOCTYPE html>
<html lang="en"> <!---lang屬性是對html中語言進行說明，這裡就可以使用中文等語言--->
<head>
<meta charset="UTF-8">
<title>本地頁面</title>
</head>
<body>
</body>
</html>
-
<!DOCTYPE html>宣告為HTML5文件。 -
<html>、</html>是文件的開始標記和結束的標記。是HTML頁面的根元素，在它們之間是文件的頭部（head）和主體（body）。 -
<head>、</head>定義了HTML文件的開頭部分。它們之間的內容不會在瀏覽器的文件視窗顯示。包含了文件的元（meta）資料。 -
<title>、</title>定義了網頁標題，在瀏覽器標題欄顯示。 -
<body>、</body>之間的文字是可見的網頁主體內容。
html檔案可以在一些IDE中方便的編輯，如我們常用的pycharm就可以進行編輯。