一、什么是前端
"""
任何與用戶直接打交道的操作界面都可以稱之為前端 比如電腦界面、手機界面、平板界面
什么是后端
后端類似於幕后操作者(功能實現的邏輯代碼),不直接與用戶打交道
"""
二、為什么學前端
"""
全棧開發,前后端都會
但是前端不會學的很詳細,只要求做到能夠看得懂基本的前端代碼以及能夠搭建一些簡單的頁面即可
先打下前端的基礎,為后續可能需要拓展做准備
"""
三、前端學習歷程
# 一、基本語法
HTML:網頁的骨架、內容,沒有任何的樣式
CSS:網頁的外觀、樣式(給骨架添加各種樣式,變得好看)
JS:控制網頁實現動態效果
# 二、前端框架
Bootstrap、jQuery、Vue 等
提前給你封裝好了很多操作,你只需要按照固定的語法句式即可
四、web服務本質及Http協議
軟件開發架構
cs 客戶端 服務端
bs 瀏覽器 服務端
ps:bs模式本質也是cs
1.網頁訪問過程
瀏覽器窗口輸入網址回車發生了幾件事:
"""
1. 瀏覽器朝服務端輸入網址請求(eg:請求百度首頁)
2. 服務端接受請求
3. 服務端返回相應的響應(eg:返回一個百度首頁)
4. 瀏覽器接受響應,根據特定的規則渲染頁面展示給用戶看
"""
瀏覽器可以充當很多服務端的客戶端
百度 騰訊視頻 優酷視頻
如何做到瀏覽器能夠跟多個不同的服務端之間進行數據交互?
1.瀏覽器很牛逼 能夠自動識別不同服務端做不同處理
2.制定一個統一的標准。(如果你想要讓你寫的服務端能夠跟瀏覽器之間做正常的數據交互,那么你就必須遵循這個標准)
2.HTTP協議(必須記住)
"""
HTTP 超文本傳輸協議 用來規定服務端和瀏覽者之間的數據交互格式
該協議你可以不遵循,但是你寫的服務端就不能被瀏覽器正常訪問,你就自己跟自己玩,你自己寫客戶端,用戶想要使用,就下載你專門的app即可
"""
四大特性
1. 基於TCP/IP的協議
作用於應用層之上的協議
2. 被動響應
基於請求,才響應;不請求,則不會響應
3. 短連接
請求響應后,就斷開鏈接
延伸出:長鏈接(雙方建立鏈接后,就不會斷開) eg:聊天室(websocket)
4. 無狀態
對於事務處理沒有記憶功能,不會保存用戶的信息
延伸出:可以記住用戶狀態的技術 eg:cookie、session、token
請求數據格式
請求首行 (包含標識HTTP協議版本、當前請求方式)
請求頭 (一大堆K,V鍵值對)
# 空行 (一定要有一個空行:/r/n)
請求體 (並不是所有請求方式都有請求體,eg:get 無;post 有 存放的是post請求提交的敏感數據)
響應數據格式
響應首行 (包含標識HTTP協議版本、響應狀態碼)
響應頭 (一大堆K,V鍵值對)
# 空行 (一定要有一個空行:/r/n)
響應體 (返回給瀏覽器展示給用戶看的數據)
請求方式
1. get請求
超服務端要數據
eg:輸入網址獲取對應的內容
2. post請求
超服務端提交數據
eg:用戶登錄,輸入用戶名和密碼之后,提交到服務端后端做身份校驗
響應狀態碼
用一串簡單的數字來表示一些復雜的狀態或描述性信息
eg:
1xx >>> 服務端已經成功接受到了你的數據正在處理,你可以繼續提交額外的數據
2xx >>> 服務端成功響應了你想要的數據 (200 OK 請求成功)
3xx >>> 重定向(自動跳轉到其他鏈接請求的頁面 eg:當你在訪問一個需要登錄之后才能看的頁面,你會發現會自動跳轉到登錄頁面)
4xx >>> 請求錯誤
404: 請求資源不存在
403: 當前請求不合法或者不符合訪問資源的條件
5xx >>> 服務器內部錯誤(500 服務器出錯)
URL
統一資源定位符 (俗稱:網址)