前端回顧
前端就是展示給使用者並且與使用者進行互動的操作介面。
前端包括包括三部分：
- html:網頁的骨架，沒有任何樣式，比較醜
- css:相當於一些裝飾品，給骨架新增樣式。
- js：控制網頁的動態效果。
前端也有很多框架，只需要按照固定的語法進行呼叫即可。
基礎知識
軟體的開發架構分為兩種：
- CS：擁有客戶端和服務端。
- BS：用瀏覽器代替客戶端，其本質也是BS架構，但是客戶端不需要我們自己寫。
忽略掉進行域名解析的過程，當我們在瀏覽器的視窗中輸入網址後的過程：
- 瀏覽器向伺服器發出請求
- 服務端接受請求
- 服務端返回響應。
- 瀏覽器接受響應，然後將資料按照特定的規則進行渲染，展示給使用者。
如果要想瀏覽器當做很多服務端的客戶端，那麼就需要瀏覽器熟練掌握各種各樣的服務端的規則，對於瀏覽器來說壓力很大，因此，瀏覽器決心變得傲嬌：你要是想讓我給你打工（當做客戶端），那麼你就遵守我的規則，不然的話，不好意思了，你自己去開發自己的客戶端吧。因此，產生了瀏覽器制定的協議。
HTTP協議
首先說一下HTTP協議。
它是超文字傳輸協議，用來規定服務端和瀏覽器之間的資料互動的格式，有四大特性：
- 基於請求響應。
- 基於TCP\IP作用於應用層之上的協議
- 無狀態：不儲存使用者狀態資訊。臉盲症重度患者，即使見你千百遍，依舊像是從未見。
- 無連結/短連結：請求來就響應，響應完就結束。
既然是基於請求響應的，那肯定也都有各自的請求響應的資料格式。
請求資料格式 = 請求首行 + 請求頭 + 空行 + [請求體]
1. 請求首行：當前請求方式 url和HTTP版本號，如 GET /index/ HTTP/1.1
當前請求方式在HTTP/1.1中有8種，只學了get和post最基本的請求方式。
url:統一資源定位符，可以理解為網址
get:請求指定的頁面，要求服務端將請求的url頁面在響應的時候返回。地址中?後可新增傳送資料，但是一般只能傳送1024個字元，不能太大。
post:瀏覽器可以通過post請求將大量資料傳送給服務端，無大小限制。
2. 請求頭：主要由大量鍵值對組成，包含客戶端的一些請求資訊
如：User-Agent:瀏覽器型別。
3. 空行
最後一個請求頭之後使一個空行，傳送回車符和換行符，主要是作為標識，告訴服務端請求頭結束了
4. 請求體：主要在post中使用，get請求沒有。一般post適用於請求展示資料時候使用
響應資料格式 = 響應首行 + 響應頭 + 空行 + 響應體。
1. 響應首行：伺服器HTTP協議版本 響應狀態碼 狀態碼的文字描述，例：HTTP/1.1 200 OK
狀態碼是由三位數字組成的，代表某些固定含義
1XX:表示請求已被服務端接受，繼續處理。
2XX：請求已被成功接受理解。
3XX：重定向，要完成請求需要完成某些前置條件
4XX:客戶端錯誤，請求有錯誤，如資源不存在（404）等等
5XX:服務端炸了，服務端著火了等等，就是服務端不能工作了
2. 響應頭：大量鍵值對
3. 空行
4. 響應體：返回的是服務端返回的資料。
認識HTML
HTML是一種用於建立網頁的標記語言，並不是程式語言。本質就是瀏覽器識別的格式，我們按照該格式書寫，然後瀏覽器能認識並加以渲染，達到我們想要的效果。
注意：不同的瀏覽器對相同的標籤有不一樣的認識，這裡是瀏覽器的相容問題。
HTML組成
HTML主要是由4部分組成：
1.<!DOCTYPE html>:宣告為html5的文件
2.<html></html>:是文件的開始和結束標誌。其餘三部分也是在這個標籤內。
3.<head></head>:內部資料不會再頁面上展示，只是定義一些配置讓瀏覽器識別。
4:<body></body>:被瀏覽器渲染給使用者看的資料內容。
其實1和2是第一層結構，而3和4是在2內部定義的。
結構如下：
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
HTML標籤
標籤代表的某些固定的含義，像樂高積木一樣，把這些各種各樣的積木堆起來，就能完成一個傑出的作品。
按照標籤是否是單身可分為以下兩種：
- 單標籤：語法為
<標籤名 屬性1=值1 屬性2=值2 ...../> - 雙標籤：語法為
<標籤名 屬性1=值1 屬性2=值2 .....>前面表開始，中間是內容，後邊表結束</標籤名>
一些常見的HTML標籤
首先是註釋：<!--註釋內容-->
<!--head標籤內部常用的標籤-->
<title>網頁標題</title>
<style>內部用來書寫css程式碼</style>
<link rel='stylesheet' href='外部css檔案'></link> 引入外部css檔案
<script src='外部檔案'></script>
<meta name='keywords' content='被瀏覽器搜尋的關鍵字'>
<meta name='description' content='網頁的描述性資訊'>
<!--body內部常用的標籤-->
<h1> 1級標題 改變數字可以進行1~6級標題的替換</h1>
<u>下劃線</u>
<i>斜體</i>
<s>刪除線</s>
<b>加粗</b>
<p>段落</p>
<br> 換行
<hr> 水平分割線
<!--特殊符號表示方法-->
空格
> 大於號
< 小於號
& &
¥ ¥
© ©
商標® ®
上述標籤在瀏覽器中的顯示所佔的位置是不一樣的，據此，對不同的標籤又進行了分類。
1. 塊級標籤：獨佔一行，不受本身文字的大小限制。
-塊級標籤可以修改長寬。
-其內部可以巢狀塊級標籤。
-只有一個比較頁數的標籤：p標籤只能內嵌行內標籤
2.行內標籤：其所佔位置大小被自身文字所決定，文字多大，佔多大。
-行內標籤不能巢狀塊級標籤
div和span標籤
塊級標籤的典型代表就是<div>標籤，行內標籤代表就是<span>標籤，為什麼要單獨拉出來說呢？因為這兩個標籤是我們專門用來在初期構造html骨架的。在設計頁面初期，我們可以首先使用div標籤來進行整體頁面的一個規劃，然後其中的文字內容可以使用span標籤佔位。後期我們新增內容都是在div和span組成的簡易結構中進行的。
特殊的屬性
- id:該頁面不能重複，用來標識標籤唯一身份。
- class:類似於Python的繼承，會按照class內的css樣式進行渲染標籤。
常用標籤
1. img標籤：可以插入圖片
<img src="圖片的路徑" alt="圖片未載入成功時的提示" title="滑鼠懸浮在圖片上的提示資訊" width="自定義寬" height='自定義高'>
如果寬和高只定義一個的話，那麼就會等比例改變
2. a標籤：傳送門標籤
<a href='傳送地址'></a>
target='_self/_blank' 開啟新頁面的方式，前者表示本頁面開啟，後者是新建頁面開啟，預設前者
tip:本頁面跳轉的功能
a標籤具有錨點功能，這時候就要說到一個特殊的屬性了：id=''，這個id必須是本頁面唯一，作為每個標籤的身份標識，我們可以通過查詢某標籤的id直接定位到該標籤，所以a標籤中的href屬性就可以寫為本頁面的id值，完成點選之後即跳轉到該標籤。
3. 列表標籤
列表標籤有三種，這裡只記錄一下無序列表。
<ul>
<li>預設是帶小黑點的子集排列</li>
<li>如下展示</li>
</ul>
- 無序列表就是這樣
- 可以有多行
4. 表格標籤
<table> # 宣告一個表格
<thead> # 表頭
<tr> # 每一個tr標籤代表一行資料
<th>加粗的欄位1</td>
<td>欄位2</td>
<td>欄位3</td>
</tr>
</thead>
<tbody> # 表身
<tr>
<td>一行資料的第一個欄位值</td>
<td>一行資料的第二個欄位值</td>
<td>一行資料的第三個欄位值</td>
</tr>
</tbody>
</table>
html本身子代的表格是比較醜的，但是仍然可以新增一些屬性的變化使其稍微好看點。
border='數字':表格的邊框樣式
rowspan='數字':向下的單元格合併幾行
colspan='數字':向右的單元格合併幾行
- 表單元素
這個表單屬性可以實現向服務端傳送資料，如果我們填寫一部分資料向後端提交，就要使用到這個表單元素。
<form action="資料提交地址" method='請求方式' enctype='multipart/form-data'>
<input type="text" name=''> 輸入文字
<input type="password" name=''> 密碼輸入
<input type="date" name=''> 日期輸入
<input type="radio" name=''> 單選框：從給出的選項進行選擇
<input type="checkbox" name=''> 多選框：從給出的選項中可以進行多選
<input type="submit" name=''> 提交按鈕，觸發提交動作
<input type="button" name=''> 可以進行自定義功能按鈕，空白的只能點著玩
<input type="reset" name=''> 重置按鈕：重新整理本頁面
<input type="file" name=''> 選擇檔案，可進行上傳，但有前提條件
<label for="">
<input type="text" name=''> input標籤在label內，能讓使用者再點到文字提示資訊的時候自動進入到資料輸入狀態，即獲得焦點。
</label>
</form>
action的3種狀態：
- 不填：預設是向本頁面所在的url提交資料。
- 寫全路徑：向該url提交資料。如’www.baidu.com‘。
- 只寫路徑字尾：自動識別當前的ip和port，然後拼接。如:'/index/'
主要記得就是當在內部輸完資料準備進行提交的時候，action決定了提交的方向。
幾個特殊狀態：
- checked：對於給出的選項（針對radio和check）問題，可使用這個值作為設定預設值。
- disabled:不能獲得焦點（不能輸入）。
- readonly:只能讀。
上傳檔案的前提條件：
- 請求方式為POST
- 必須定義
enctype='multipart/form-data'屬性。
注意事項：
- name屬性：資料是按k:v進行提交的，因此input內部務必填寫一個name屬性作為資料的key。
- value屬性：針對輸入文字型別，value為輸入文字，針對按鈕類為按鈕顯示文字，針對選項類為傳送資料的鍵值對的值。
select標籤：預設是單選的,下拉式選項。想要多選需新增mutiple selected為預設選中狀態
<form action="" >
<select name="" id="" multiple>
<option value="" selected>1</option>
<option value="">2</option>
<option value="">3</option>
</select>
<textarea name="" id="" cols="30" rows="10"></textarea>
</form>
textarea標籤是獲取使用者大段文字輸入，本身是一個大的可輸入多行的文字框。
認識css
css相當於一個化妝盒，用來給html打造的東東進行華麗大變身。
既然要進行裝飾，那麼就首先要找到被裝飾的物件。
css的引入方式有幾種：
- head內的link標籤引入外部css檔案
- head內的style標籤內寫入css
- 在標籤內部直接定義style='{屬性：屬性值.....}'
一般情況建議使用第一種方式，方便後期維護，第三種方式不建議大批量使用，耦合度較高。
選擇器
這個就很好理解，就是通過一些方法精確定位到某一個標籤。
選擇器分類：
/*我是註釋語法：選擇器是定位某標籤，大括號內的內容是定義的css的一些樣式*/
選擇器 {屬性1：屬性值1;屬性2：屬性值2.....}
/*基本選擇器*/
/*1. id選擇器： 關鍵符號為# */
#id值 {屬性1：屬性值1;屬性2：屬性值2.....}
/*2. 類選擇器： 關鍵符號為點 */
.類 {屬性1：屬性值1;屬性2：屬性值2.....}
/*3. 元素選擇器*/
標籤名 {屬性1：屬性值1;屬性2：屬性值2.....}
/*4. 通用選擇器*/
* {屬性1：屬性值1;屬性2：屬性值2.....}
/*組合選擇器：先找到某一個確定的標籤，根據這個標籤的親戚關係進行查詢*/
後代選擇器：凡是在標籤內部的標籤都是後代 #id a {}
兒子選擇器：在標籤內部第一層級的標籤 #id>a {}
毗鄰選擇器：同級別緊挨著標籤的下一個標籤 #id+a {}
弟弟選擇器：同級別下方所有的標籤 #id~a {}
/*屬性選擇器：以[]為標識，查詢含有某屬性的標籤*/
[name] {} 含有name屬性的標籤都被選擇
[name='tom'] 含有name屬性且值為tom的所有標籤
標籤名[name='tom'] 標籤名內含有屬性為name的且值為tom的所有標籤
分組：多個元素樣式相同可通過逗號隔開選擇器的方式設定。
巢狀：多種選擇器巢狀使用，可以想想後代選擇器
div,#d1,.c1 {} 選擇div標籤、id為d1、繼承c1類的標籤
#d1 a {} 選擇id為下的a標籤
偽類選擇器
一般在a標籤使用比較頻繁
a:link {color：blue} # 未訪問連結時的顏色
a:visited {color：blue} # 訪問連結之後的顏色
a:hover {color：blue} # 滑鼠懸浮在連結時顏色
a:active {color：blue} # 滑鼠點選連結不鬆時的顏色
input：focus {color:bule} # 輸入框獲得焦點時的樣式
偽元素選擇器
p:first-letter {} 設定文字首字母的字型樣式
p:after {content:'content必須定義'} 在p元素之後新增一個不可選中的內容，多用於清除浮動
p:before {content:'content必須定義'} 在p元素之前新增一個不可選中的內容，多用於清除浮動
優先順序
在標籤內部的所有標籤都會預設繼承該標籤的樣式，但是如果內部標籤也有自己的樣式，這個時候就要考慮優先順序的問題了。
選擇器的優先順序是按照權重來決定的，誰的權重高那麼就聽誰的。按照通俗的話說就是哪一個選擇器精確就聽誰的。
針對相同的選擇器：就近原則。後執行的會將前面執行的覆蓋。
針對不同的選擇器：行內選擇器》id選擇器>類選擇器>標籤選擇器。誰查詢的精度高，範圍小。就聽誰的。
屬性
寬和高
這兩個屬性是塊級標籤通用的，用來設定高和寬，行內標籤是無法生效寬屬性的，它的寬是由其本身文字內容決定
width:100px; 設定寬
height:100px; 設定高
字型屬性
font-family: "Microsoft Yahei", "微軟雅黑", "Arial";字型的版式，前面不能使用就用備胎
font-size:10px 字型的大小
font-weight:250px 字型的粗細
color:red 顏色的英文
#abc456 16進位制的6位數
rgb(111,222,255) 三基色。範圍0~255
rgba(111,222,255,0.5) 三基色加透明度，透明度範圍0~1
文字樣式屬性
text-align:left/right/center/justify 水平對齊方式
text-decoration:none 無樣式,常用語去掉a標籤預設的下劃線
underline 文字下的一條線
overline 文字上的一條線
line-through 穿過文字的一條線
text-indent:2em 空兩個字元大小
背景屬性
background-color：white 背景顏色
background-image：url('') 背景圖片
background-repead:repead 預設圖片會鋪滿整個網頁
no-repead 背景圖片不平鋪
repead-x 水平平鋪
repead-y 垂直平鋪
background-position:center center 確定背景位置
background-attachment:fixed 背景不會隨著文件的向下移動而滾動
對於上述都是以同樣開頭的屬性是支援簡寫的
background:White url() no-repead center center
邊框
可以設定整體的邊框樣式，也可單獨設定邊框的樣式,例如：border-left-width
border-width:10px; 邊框寬
border-style:solid/none/dotted/dashed; 邊框的樣式
border-color:red; 邊框的顏色
簡寫：border：10px solid red;
border-radius:50% 可以設定為圓，半徑為長與寬的一半
display屬性
display:none; 文件中元素存在，但是不顯示
block; 將標籤設定為塊級標籤
inline; 將標籤設定為行內標籤
inline-block; 標籤可以在一行，且可以設定寬和高
css盒子模型
margin：用於控制元素周圍空間的間隔，通俗點就是與鄰居標籤的距離
border：本身邊框
padding：標籤內部內容與邊框的鉅鹿
content：盒子的內容
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
簡寫：margin:10px 10px 10px 10px ;
margin:0 auto; 水平居中
padding方法和margin相似
float浮動
假設我們看到的頁面是一個平面的話，那麼浮動就會讓元素從平面升到空中，任何元素都可以浮動，浮動之後就會自動成為塊級元素，只可以向左或向右浮動，知道碰到邊框為止。
注意：浮動有可能導致父標籤塌陷的問題
float:right 向左浮動
float:left 向右浮動
clear清除浮動
在clear規定的屬性的某一側是不允許有浮動元素的。
clear:left; 該標籤的左側是不能有浮動元素的
clear:right; 該標籤的右側不能有浮動元素
clear:both; 兩個均不能出現浮動元素
清除浮動的影響，除了使用clear還有兩種方式：
1.自己新增一個有高度的div。
2.通用的解決方式是繼承一個自定義的類clearfix，
.clearfix:after {
content:'';
display:block;
clear:both;
}
溢位屬性overflow
overflow:visible; 多出內容預設可見，在框外可見
overfloe:hidden; 多出部分在框外不可見
overflow:scroll; 加一個滾動條
overflow:auto; 內容被修剪的話，就會顯示滾動條
最佳案例：原型頭像的設定。
<style>
p {background-color: gray; padding: 20px;}
#d1 {
width:200px;
height:200px;
border-radius: 50%;
overflow: hidden;
}
#d2 {
max-width: 100%;
}
</style>
<div id="d1">
<img src="https://i3.mmzztt.com/2020/05/29a105.jpg" alt="" id="d2">
</div>
position定位
定位分為四種：
position:static; 預設值，沒有定位過。無法作為絕對定位的參照物
position:relative; 相對定位。以自己原始位置為參照物定位
position:absolute; 絕對定位。相對定位過的父元素為原點定位
position：fixed; 固定定位。固定在某一個位置且不會改變，原點是基於瀏覽器視窗
驗證浮動和定位是否脫離文件流（原來的位置是否儲存）
不脫離文件流：相對定位
脫離文件流：浮動、相對定位、固定定位
z-index模態框
是設定物件的層疊順序，相當於在平面的文件上，又加了一個z軸，而z-index就是設定z的高度。值高的就會壓著值低的，導致值低的元素會被遮擋。
只能針對已經定位過的元素進行設定，同時，比較數值的時候是看父元素的z-index。
opacity透明度
定義透明效果，之前在顏色中rgba()也有一個透明度，但是隻能針對顏色，而這個透明度則是針對元素。取值範圍是0~1之間。