web前端 常用的三大主流框架：
Angular、React、Vue，
一、前端：
1、什么是前端？
任何與用戶直接打交道的操作界面都可以稱之為是一個前端
2、為什么要學前端？
全棧開發工程師，需要前后端都會
3、如何學前端？
軟件開發架構：
c/s 客戶端/服務器
b/s 瀏覽器/服務端。本質就是c/s
web服務的本質：
瀏覽器窗口輸入一個網址敲回車發生了哪些事？
01、朝着指定的服務端發送請求
02、服務端接收相應的請求
03、服務端返回相應的響應
04、瀏覽器接收響應，按照特定的規則渲染頁面展示給用戶看
4、前端的三大組成：
HTML、CSS、JS
二、HTTP協議（web前端）：超文本傳輸協議，規定了瀏覽器與服務端之間數據傳輸的格式
1、四大特性：
01、基於請求響應：一次請求對應一次響應
02、基於TCP/IP作用於應用層之上的協議
03、無狀態：不保留客戶的狀態，無論你來多少次，我都待你入如初見
彌補：cookie session token
04、無連接：向服務端發送請求后，服務端回應后，立馬斷開。
補充：長鏈接：websocket(類似於http協議的大補丁) 聊天室相關
2、數據格式
01、請求格式：
請求首行（請求方式（get/post）、協議版本）
請求頭（一大堆K、V鍵值對）
空格
請求體（攜帶的數據 並不是一直都有 有時候可能是空的 取決於你的請求方式）
02、請求方式：
1.get請求：朝服務端要資源（獲取數據）。類似於瀏覽器窗口輸入www.baidu.com獲取百度首頁。請求格式中沒有請求體
2.post請求：朝服務端提交數據（提交數據）。類似於登錄注冊功能
03、響應格式：
響應首行（響應狀態碼）
響應頭（一大堆K、V鍵值對）
空格
響應體（瀏覽器展示給用戶看的數據）
04、響應狀態碼：用數字來表示一堆提示信息
1xx：服務端已經成功接收到客戶端的數據，正在處理，你也可以繼續提交。
2xx：200表示請求成功，服務端已經返回了你想要的數據
3xx：重定向（原本想訪問A但是內部自動給你轉到了B上面）
4xx：404表示請求的資源不存在。403表示你當前不具備請求該資源的資格
5xx：500表示服務端內部錯誤。比如：機房着火了、宕機、爆炸了
注意：公司內部可以自己定制自己的響應狀態碼。
例子：
三、HTML：超文本標記語言
注意：XML也可以書寫前端頁面 主要用於odoo框架中 書寫企業內部管理軟件（ERP）
1、HTML注釋： 注釋是代碼之母
單行注釋：<!--單行-->
多行注釋：<!--
多行注釋1
多行注釋2
-->
注意：由於html頁面結構比較復雜，內容比較多，不便於后期的維護和修改。通常在寫頁面的時候 習慣用下面的方式來人為的划分代碼區域
<!--頂部導航條樣式開始-->
內容
<!--頂部導航條樣式結束-->
<!--左側菜單欄樣式開始-->
內容
<!--左側菜單欄樣式結束-->
2、HTML文檔結構
<html>
<head></head>:head內放的內容不是給用戶看的，是給瀏覽器去識別做相應操作的
<body></body>:body內放的內容就是瀏覽器展示給用戶看到的花里胡哨的頁面
</html>
3、HTML文檔打開方式：
01、pycharm自動調用瀏覽器打開（推薦）
02、手動查到路徑后選擇瀏覽器打開
四、標簽的分類：
注意：書寫標簽的時候 你只需要寫標簽的名字 之后tab鍵就可以自動補全。這是emmet插件幫你做的
1、 標簽的分類1：
01、雙標簽
02、自閉和標簽
2、標簽的分類2：
01、塊兒級標簽：獨占一行。 h1~h6 p br hr div
特點：塊兒級標簽內部可以嵌套任意的塊兒級標簽和行內標簽
特例：p 雖然是塊兒級標簽。但是它的內部只能嵌套行內標簽，不能嵌套塊兒級標簽。如果嵌套了 沒有問題 只是不符合html語法規范
02、行內標簽：自身文本多大就占多大。u s i b span a img
特點：行內標簽內部不能嵌套塊兒級標簽和行內標簽
3、head內常用的標簽
title：定義網頁標題
style：內部支持直接寫css代碼
link：引入外部的css文件
script：內部可以直接編寫js代碼。也可以通過src屬性引用外部js代碼
meta：里面有name屬性：keywords、description
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>哈哈，最大的網站</title> <meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> </head> <body> </body> </html>
4、body內常用的標簽
注意：你所看到的花里胡哨的頁面 其實內部都是html代碼 很丑很亂
01、基本標簽：
h1~h6：標題標簽
s：刪除線
b：加粗
u：下划線
i：斜體
p：獨占一行。段落標簽
br：換行
hr：分割線
02、特殊符號：
 ； 空格
>； 大於
<； 小於
&； 與（&）
©； 版權標識
¥； 人民幣
®； 注冊商標
03、常用標簽：
001、div 塊兒級標簽
002、span 行內標簽
注意：本身沒有任何特殊意義，但是這兩個確實使用最多的 這兩個標簽是用來做前期的頁面布局的
003、img 圖片標簽
0001、src 屬性里：
可以寫一個網站圖片地址（遠程地址）
可以寫本地的圖片地址（本地地址）
可以寫一個url (自動朝該url發送get請求要數據)
0002、alt 屬性里： 表示當圖片加載不出來的時候 默認展示的提示信息
0003、title 屬性里：當鼠標懸浮在圖片上的時候 展示的提示信息
0004、width/height 屬性里：填大小。注意：修改一個 另外一個會自動等比例縮放，如果兩個都修改圖片就會失真
004、a 鏈接標簽
0001、href 屬性里：放一個url。表示：點擊就會跳轉到該url所對應的資源
href不單單可以寫url 也可以寫另外一個標簽id值。表示：點擊就會跳轉到該id值所對應的標簽所在的位置
0002、target 屬性里：填__self。表示：默認是在當前頁面跳轉。
填__blank。表示：新建頁面跳轉。
0003、錨點功能：href不單單可以寫url 也可以寫另外一個標簽id值。點擊就會跳轉到該id值所對應的標簽所在的位置
04、標簽應該具備的屬性：
001、id屬性：類似於身份證號，用來唯一標識當前html頁面中的某一個標簽。在同一個html頁面中，id值不能重復
002、class屬性：類似於面向對象的繼承。直接引用別的類的樣式
05、列表標簽：
001、無序列表（用的比較多）
ul
li
只要頁面上出現了比較有規則排列的文本 基本上都可以用無序列表來實現
<p>無序列表</p> <ul> <li>111</li> <li>222</li> <li>333</li> </ul>
002、有序列表
ol
li
<p>有序列表</p> <!--type="" 引號里的可寫i(小寫羅馬)、I（大寫羅馬）、A、a 不寫時 默認是 點--> <ol type="i"> <li>哈哈哈</li> <li>呵呵呵</li> <li>嘿嘿嘿</li> </ol>
003、標題列表
dl
dt 標題
dd 內容
<p>標題列表</p> <dl> <dt>標題1</dt> <dd>內容1</dd> <dd>內容2</dd> <dt>標題2</dt> <dd>內容1</dd> <dd>內容2</dd> <dt>標題3</dt> <dd>內容1</dd> <dd>內容2</dd> </dl>
06、表格標簽：展示網站數據的時候，一般情況下可以使用表格標簽
<table>
<thead>
<tr> # tr表示的是一行
<th></th> # th表示加粗
</tr>
</thead>
<tbody>
<tr>
<td></td> # td表示不加粗
</tr>
</tbody>
</table>
注意：通常情況下表頭用th,表單內容用td
07、表單標簽：
001、form標簽：獲取用戶輸入（輸入、選擇、上傳文件.......），並且將數據打包發送給后端
action 參數：用來控制數據提交的路徑（到底朝哪個后端服務器提交數據）
三種寫法：
1、不寫。默認就是朝當前該頁面所在的地址提交數據
2、寫 全路徑（https://www.baidu.com）
3、只寫 路徑后綴（/index/）
method 參數：用來控制提交方式。form表單默認是get請求（method='get'）。你可以指定成post請求（method='post'）
get請求和post請求都能夠攜帶數據。區別：
【因為get請求能夠攜帶參數 但是參數的攜帶方式是直接跟在url后面的。如：url?xxx=ooo&yyy=bbb&lll=ccc
特點: 1.數據全是明文 2.數據大小有限制 大概應該可能在4KB左右吧... 3.get請求不應該攜帶隱私信息】
【post請求攜帶的數據存在html文件中的body中，數據大小沒有限制】
ps:向服務端提交 form表單時，method必須是post請求。enctype必須是form-data
enctype 參數：用來控制數據提交的編碼格式。默認情況下form表單是不能夠直接發送文件的。
如果你要發送文件，必須將該參數有默認的form-urlencode改為form-data。如果不改，則服務端只能收到文件的名字。不能收到真 實的文件
002、label標簽：不會向用戶展示任何特殊內容,它的作用是把自己與其他標簽"綁定"起來. 通常是寫在表單(form)內，與input標簽一起使用
參數：for 表示要綁定的標簽是誰
<label> 用戶名</label> 里面寫的是 要聚集的東西，就是你點它 就會觸發綁定的標簽。
#label與input 結合：方法一 <form action=""> <p> <label for="d1">用戶名:<input type="text" id="d1" name="username"></label> </p> </form> #label與input 結合：方法二 <form action=""> <p> <label for="d2">用戶名:</label> <input type="text" id="d2"> </p>
</form>
002、input標簽：獲取用戶輸入。該標簽是一個行內標簽
type 屬性里：
text 表示普通文本
password 表示密文
date 表示日期
radio 表示多選一
checkbox 表示多選多
checked 表示默認選中某某
reset 表示重置
submit 表示觸發form表單提交動作
file 表示獲取文件
button 表示普通按鈕
name 屬性里：
類似字典里的key
value 屬性里：
類似字典的value值
注意事項：1.獲取用戶輸入的標簽，都是用value屬性來存放用戶的輸入，類似於字典的value。獲取用戶輸入的標簽都應該有name屬性，類似於字典的key
2.如何給input框設置默認值：可以直接給input標簽加value屬性
3.input框如何設置提示信息：可以直接給input標簽加 placeholder屬性
例子：username:<input type="text" value="jason" placeholder="用戶名">
<p>愛好: 運動<input type="checkbox" name="hobby"> 看小說<input type="checkbox" checked > 英雄聯盟<input type="checkbox"> 打人<input type="checkbox" checked> </p>
003、select 標簽：表示下拉框。一個個選項就是一個個option標簽。默認是單選的
加一個multiple 該成多選
<select name="" id="" multiple>
<option value="">新垣結衣</option>
<option value="">明老師</option>
<option value="">嫖老師</option>
<option value="">波老師</option>
</select>
加selected="selected" 讓option標簽默認選中
<select name="" id="" multiple>
<option value="" selected="selected">新垣結衣</option>
<option value="">明老師</option>
<option value="" selected>嫖老師</option>
<option value="">波老師</option>
</select>
004、textarea標簽 ： 獲取大段文本
<p>個人簡介: <textarea name="" id="" cols="10" rows="5"></textarea> </p>
例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 標題顯示在打開的頁面的最上面--> <title>最大的網站</title> </head> <body> <h1>hello big big baby~</h1> <a href="https://www.mzitu.com">click me</a> <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=276938278,2845396192&fm=26&gp=0.jpg"/> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>body內常用</title> </head> <body> <h1>001</h1> <h2>002</h2> <h3>003</h3> <h4>004</h4> <h5>005</h5> <h6>006</h6> 我是普通文本 <s>我是s</s> <u>我是u</u> <b>我是b</b> <i>我是i</i> <p>何處望神州 滿眼風光 北固樓</p> <br> <p>何處望神州 滿眼風光北固樓</p> <hr> <p>何處望神州 滿眼風光北固樓</p> <p>何處望神州 滿眼風光北固樓</p> <p>a大於b a > b</p> <p>a小於b a < b</p> <p>a&b a & b</p> <p>人民幣 ¥10000000000</p> <p>版權標識 © </p> <p>注冊商標 ® </p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>常用標簽</title> </head> <body> <div> <div> <div> <p> <a href=""></a> <s>999</s> </p> </div> </div> </div> <p> <a href="">下大雨了</a> </p> <!--111 222在一行,點擊111就會鏈接到 href中的鏈接--> <a href="http://www.baidu.com">111 <a href="">222</a> </a> <span></span> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>常用標簽2</title> </head> <body> <a href="" id="d1">頁首</a> <div style="height: 100px;background-color: red"></div> <a href="" id="d2">中間</a> <div style="height: 100px;background-color: green"></div> <a href="#d1">回到頂部</a> <a href="#d2">回到中間</a> </body> </html> <img src="https://i.meizitu.net/thumbs/2019/12/202139_10a19_236.jpg" alt="這是一張美女圖片" title="這個妹紙姿勢還行" width="100px"> <!--src="download.jpg 不存在時，圖片是裂的--> <img src="download.jpg" alt="這個葫蘆娃" title="這是七娃" width="200px"> <a href="https://www.mzitu.com" target="_self" id="" class="">點我有你好看喲~</a> <a href="https://www.mzitu.com" target="_blank">點我有你好看喲~</a>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>無序列表</p> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> <p>有序列表</p> <!--type="" 引號里的可寫i(小寫羅馬)、I（大寫羅馬）、A、a 不寫時 默認是 點--> <ol type="i"> <li>哈哈哈</li> <li>呵呵呵</li> <li>嘿嘿嘿</li> </ol> <p>標題列表</p> <dl> <dt>標題1</dt> <dd>內容1</dd> <dd>內容2</dd> <dt>標題2</dt> <dd>內容1</dd> <dd>內容2</dd> <dt>標題3</dt> <dd>內容1</dd> <dd>內容2</dd> </dl> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="10"> <thead> <tr> <th>用戶名</th> <th>年齡</th> <th>愛好</th> </tr> </thead> <tbody> <tr> <td>jason</td> <td>18</td> <td>study</td> </tr> <tr> <td>tank</td> <td>73</td> <td colspan="2">帥</td> <!-- <td colspan="2">DBJ</td> 中的colspan="2" 表示橫着合並2個格子。 rowspan="2"表示豎着合並2個格子--> </tr> <tr> <td>sean</td> <td>80</td> <td>CNM</td> </tr> </tbody> </table> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>用戶注冊功能</p> <form action=""> <p> <label for="d1">用戶名:<input type="text" id="d1" name="username"></label> </p> <!-- <p>--> <!-- <label for="d2">用戶名:</label>--> <!-- <input type="text" id="d2"></p>--> <p>密碼:<input type="password" name="password"></p> <p>生日: <input type="date"></p> <p>性別: 男<input type="radio" name="gender"> 女<input type="radio" name="gender" checked> <!-- checked 是默認選擇性別女--> </p> <p>愛好: 運動<input type="checkbox" name="hobby"> 看小說<input type="checkbox" checked > 英雄聯盟<input type="checkbox"> 打人<input type="checkbox" checked> </p> <p>省份: <select name="province" id=""> <option value="">河南</option> <option value="">上海</option> <option value="">南京</option> <option value="">深圳</option> </select> </p> <p>前男友: <select name="" id="" multiple> <option value="" selected="selected">李現</option> <option value="">鹿晗</option> <option value="" selected>胡一天</option> <option value="">帥哥</option> </select> </p> <p>個人簡介: <textarea name="" id="" cols="10" rows="5"></textarea> </p> <p>個人簡歷: <input type="file"> </p> <p> <input type="submit" value="注冊"> <input type="reset" value="重置"> <input type="button" value="按鈕"> <button>按我</button> </p>
五、什么是URL？
URL:統一資源定位符