什么是前端
前端是所有跟用戶直接打交道的都可以稱之為是前端
比如：PC頁面、手機頁面、平板頁面、汽車顯示屏、大屏幕展示出來的都是前端內(nèi)容
?能夠用肉眼看到的都是前端
為什么要學(xué)前端
學(xué)了前端以后我們就可以做全棧工程師(會后端、會前端、會DB、會運維等)
咱們學(xué)前端不會學(xué)的太深入，能夠?qū)懸恍┖唵蔚捻撁?，以及會調(diào)試別人寫的頁面和能夠看懂一些別人的頁面代碼
前端學(xué)習(xí)的內(nèi)容
1. HTML?? ?# 網(wǎng)頁的骨架、只是負責(zé)顯示一些內(nèi)容，但是顯示出來的內(nèi)容不好看，沒樣式
2. CSS ?# 對網(wǎng)頁骨架的美化、讓網(wǎng)頁變得更加的好看而已
3. JavaScript # html、css都是不能動的，靜態(tài)的，js就是讓網(wǎng)頁能夠動起來，變得更加的美觀
4. bootstrap、jQuery
稱為是前端的三劍客!
學(xué)習(xí)一些前端配套的框架(庫): bootstrap、jQuery、vue、react、angular.js
網(wǎng)址欄中輸入地址回車，到看到頁面的返回，整個過程發(fā)生了什么事?
1. 客戶端輸入網(wǎng)址向服務(wù)端發(fā)起請求
2. 服務(wù)端收到客戶端的請求，處理請求
3. 服務(wù)端要給客戶端做出響應(yīng)
4. 把服務(wù)端返回的內(nèi)容渲染(顯示)到瀏覽器頁面中
我們學(xué)習(xí)前端誰來翻譯前端的代碼? 瀏覽器(就是前端代碼的執(zhí)行環(huán)境)
學(xué)習(xí)前端只需有一個瀏覽器即可，瀏覽器就是前端的解釋器
瀏覽器就是一個萬能的客戶端，超級客戶端，言外之意，他可以作為很多服務(wù)端的客戶端
比如：淘寶、騰訊視頻、京東、等
開發(fā)一個服務(wù)端即可，瀏覽器已經(jīng)存在了，讓瀏覽器作為我們的客戶端，你會寫服務(wù)端嗎?
利用socket寫一個服務(wù)端，讓瀏覽器作為我們的客戶端
你說瀏覽器它是很多服務(wù)端的客戶端，問題是：瀏覽器是怎么識別是哪個服務(wù)端的?
很多服務(wù)端必須都要遵循瀏覽器的規(guī)則，所以，瀏覽器才能夠正常的識別他們(數(shù)據(jù)傳出的規(guī)則)
這個規(guī)則是：協(xié)議(HTTP協(xié)議)
HTTP協(xié)議在那一層起的作用?
HTTP協(xié)議：最上層：應(yīng)用層
TCP/UDP: 傳輸層
ip協(xié)議: 網(wǎng)絡(luò)層
HTTP協(xié)議(重點)
HTTP協(xié)議是Hyper Text Transfer Protocol（超文本傳輸協(xié)議）
作用：
? ? ? ? 服務(wù)器與本地瀏覽器之間傳輸超文本的傳送協(xié)議
特點：
- 1.基于TCP協(xié)議之上的【應(yīng)用層】協(xié)議----》它是可靠傳輸
- 2. 基于請求－響應(yīng)模式： 必須客戶端主動發(fā)起--》服務(wù)端才有響應(yīng)
- 如果實時跟服務(wù)端通信---》每隔2s發(fā)送一次請求--》輪詢---》實現(xiàn)實時聊天
- web版微信
- 實時通信---》使用輪詢， webscoket 協(xié)議
- 3. 無狀態(tài)保存 ?
- 發(fā)送多次請求，對于服務(wù)端來講，都是新的
- cookie，session做會話保持
- 4 無連接 ?客戶端不會一直跟服務(wù)端鏈接
- 基于tcp---》有鏈接
http請求協(xié)議與響應(yīng)協(xié)議
- 請求協(xié)議
- 請求首行---》請求方式--》請求地址--》請求協(xié)議版本號 1.1 ?\r\n
- 請求頭：key-value形式 \r\n ? \r\n\r\n
- 請求體：get請求一般沒有請求體，post請求有請求體
- 響應(yīng)協(xié)議?
- 響應(yīng)首行：HTTP/1.1 200 OK\r\n ? --協(xié)議版本---響應(yīng)狀態(tài)碼--》響應(yīng)描述符
- 響應(yīng)頭：響應(yīng)頭有什么
- 響應(yīng)體：一般給個html標(biāo)簽
- 瀏覽器中看到的頁面，都是響應(yīng)體的內(nèi)容
HTTP協(xié)議的四大特性
? 1. 基于請求和響應(yīng)的(有請求，有響應(yīng))
??2. 它是基于TCP協(xié)議之上的應(yīng)用層協(xié)議
? 3. 無狀態(tài)：就是這個協(xié)議它不能夠在瀏覽器中保存數(shù)據(jù)，現(xiàn)在使用的：淘寶、支付寶、京東等這些網(wǎng)站都需要登錄?cookie、session、token、jwt等保存的，他們才是真正的保存用戶數(shù)據(jù)的
? 4. 短鏈接
請求數(shù)據(jù)
?? ?請求首行(請求方式、協(xié)議和版本號)
? ? 請求頭(一大堆的k:v的鍵值對)
? ??
? ? 換行符(\r\n)
響應(yīng)數(shù)據(jù)
?? ?響應(yīng)首行(響應(yīng)狀態(tài)碼)
? ? 響應(yīng)頭(一大堆的k:v的鍵值對)
? ??
? ? 換行符(\r\n)
請求方式:
?get
? ? ?? ?"""當(dāng)朝服務(wù)端索要數(shù)據(jù)的時候，一般使用get請求方式"""
? ? ? ? https://huodong.taobao.com/wow/a/act/tao/dailyact/4634/wupr?spm=a21bo.jianhua.201867-main.1.5af92a89NWpkvM&wh_pid=dailyAct-257518
? ? ? ??
? ? ? ? https://huodong.taobao.com/index/v1/?k=v&k1=v1&k2=v2
? ? ? ? https://huodong.taobao.com/func
? ? ? ? def index()
? ? ? ? ?? ?# 需要參數(shù)?
? ? ? ? def func()
post
"""當(dāng)朝服務(wù)端提交數(shù)據(jù)的時候，一般采用post請求"""
get和post的區(qū)別
?? ??? ?1. get:
? ? ? ? ?? ?索要數(shù)據(jù)的時候使用
? ? ? ? ? ? 傳參方式：在網(wǎng)址欄的問號后面：key=value的鍵值對方式
? ? ? ? ? ? 數(shù)據(jù)傳遞不安全
? ? ? ? ? ? 數(shù)據(jù)傳遞的時候，攜帶的數(shù)據(jù)量是有限制的，大概4KB左右的數(shù)據(jù)
? ? ? ? ?2.post：
? ? ? ? ?? ?提交數(shù)據(jù)的時候使用
? ? ? ? ? ? 在請求體里面
? ? ? ? ? ? 數(shù)據(jù)傳遞更加安全
? ? ? ? ? ? 數(shù)據(jù)傳遞沒有限制，想傳多少傳多少
?響應(yīng)狀態(tài)碼：
?? ?"""使用一個特殊的數(shù)字代表一串復(fù)雜的描述性信息"""
? ? 1xx: 代表的是請求數(shù)據(jù)成功，但是這個時候還可以繼續(xù)往服務(wù)端提交數(shù)據(jù)
? ? 2xx: 200 OK 代表的是請求成功
? ? 3xx：301 302 代表的是重定向
? ? 4xx: 404 Not Found 代表的是資源找不到
? ? 5xx：500 502 服務(wù)器內(nèi)部錯誤(出現(xiàn)網(wǎng)頁打不開的情況)
HTML介紹
你在網(wǎng)頁中所能夠看到的花里胡哨的東西都是HTML標(biāo)簽
<h1>hello python</h1>
<h5>hello python</h5>
<a >click me</a>
<img src=''>
寫代碼軟件
1. pycharm
2. 直接在瀏覽器中寫
3. 直接在txt文本也可以
4. vscode文章來源：http://www.zghlxwxcb.cn/news/detail-715945.html
html文檔介紹
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
<head> 標(biāo)簽里面寫的內(nèi)容一般不是讓用戶看的，給程序員看的
<body> 標(biāo)簽才是用戶看的，在body里面寫什么，瀏覽器就顯示什么，head里面寫的代碼是對body中的代碼做控制如何打開一個html文檔
1. 直接點擊pycahrm右上角的瀏覽器圖標(biāo)
2. 直接找到文檔所在的位置，右鍵選擇使用瀏覽器打開即可
"""瀏覽器就是前端的解釋器，所有的前端代碼都是有瀏覽器來翻譯的"""文章來源地址http://www.zghlxwxcb.cn/news/detail-715945.html
head標(biāo)簽中常用的標(biāo)簽
<title>Title</title> 就是瀏覽器標(biāo)簽頁上顯示的內(nèi)容
<title>Title</title>
<!-- <style>-->
<!-- /*寫css樣式的*/-->
<!-- a {-->
<!-- color: red;-->
<!-- }-->
<!-- </style>-->
<link rel="stylesheet" href="my.css">
<!-- <script>-->
<!-- alert(123)-->
<!-- </script>-->
<script src="my.js"></script>body中常用的標(biāo)簽
# 基本標(biāo)簽:
<b>加粗</b>
<i>斜體</i>
<u>下劃線</u>
<s>刪除</s>
<p>段落標(biāo)簽</p>
<h1>標(biāo)題1</h1>
<h2>標(biāo)題2</h2>
<h3>標(biāo)題3</h3>
<h4>標(biāo)題4</h4>
<h5>標(biāo)題5</h5>
<h6>標(biāo)題6</h6>
<!--換行-->
<br>
<!--水平線--><hr>
# 特殊字符
內(nèi)容 對應(yīng)代碼
空格
> >
< <
& &
￥ ¥
版權(quán) ©
注冊 ®到了這里，關(guān)于前端、HTTP協(xié)議(重點)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
