# 前端回顧 [TOC] 前端就是展示給使用者並且與使用者進行互動的操作介面。 前端包括包括三部分： 1. html:網頁的骨架，沒有任何樣式，比較醜 2. css:相當於一些裝飾品，給骨架新增樣式。 3. js：控制網頁的動態效果。 前端也有很多框架，只需要按照固定的語法進行呼叫即可。 ## 基礎知識 軟體的開發架構分為兩種： 1. CS：擁有客戶端和服務端。 2. BS：用瀏覽器代替客戶端，其本質也是BS架構，但是客戶端不需要我們自己寫。 忽略掉進行域名解析的過程，當我們在瀏覽器的視窗中輸入網址後的過程： 1. 瀏覽器向伺服器發出請求 2. 服務端接受請求 3. 服務端返回響應。 4. 瀏覽器接受響應，然後將資料按照特定的規則進行渲染，展示給使用者。 如果要想瀏覽器當做很多服務端的客戶端，那麼就需要瀏覽器熟練掌握各種各樣的服務端的規則，對於瀏覽器來說壓力很大，因此，瀏覽器決心變得傲嬌：你要是想讓我給你打工（當做客戶端），那麼你就遵守我的規則，不然的話，不好意思了，你自己去開發自己的客戶端吧。因此，產生了瀏覽器制定的協議。 ### HTTP協議 首先說一下HTTP協議。 它是超文字傳輸協議，用來規定服務端和瀏覽器之間的資料互動的格式，有四大特性： 1. 基於請求響應。 2. 基於TCP\IP作用於應用層之上的協議 3. 無狀態：不儲存使用者狀態資訊。臉盲症重度患者，即使見你千百遍，依舊像是從未見。 4. 無連結/短連結：請求來就響應，響應完就結束。 既然是基於請求響應的，那肯定也都有各自的請求響應的資料格式。

請求資料格式 = 請求首行 + 請求頭 + 空行 + [請求體]

```python 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適用於請求展示資料時候使用 ``` 響應資料格式 = 響應首行 + 響應頭 + 空行 + 響應體。 ```python 1. 響應首行：伺服器HTTP協議版本 響應狀態碼 狀態碼的文字描述，例：HTTP/1.1 200 OK 狀態碼是由三位數字組成的，代表某些固定含義 1XX:表示請求已被服務端接受，繼續處理。 2XX：請求已被成功接受理解。 3XX：重定向，要完成請求需要完成某些前置條件 4XX:客戶端錯誤，請求有錯誤，如資源不存在（404）等等 5XX:服務端炸了，服務端著火了等等，就是服務端不能工作了 2. 響應頭：大量鍵值對 3. 空行 4. 響應體：返回的是服務端返回的資料。 ``` ## 認識HTML HTML是一種用於建立網頁的標記語言，並不是程式語言。本質就是瀏覽器識別的格式，我們按照該格式書寫，然後瀏覽器能認識並加以渲染，達到我們想要的效果。 注意：不同的瀏覽器對相同的標籤有不一樣的認識，這裡是瀏覽器的相容問題。 #### HTML組成 ```python HTML主要是由4部分組成： 1.:宣告為html5的文件 2.:是文件的開始和結束標誌。其餘三部分也是在這個標籤內。 3.:內部資料不會再頁面上展示，只是定義一些配置讓瀏覽器識別。 4::被瀏覽器渲染給使用者看的資料內容。 其實1和2是第一層結構，而3和4是在2內部定義的。 結構如下： ``` #### HTML標籤 標籤代表的某些固定的含義，像樂高積木一樣，把這些各種各樣的積木堆起來，就能完成一個傑出的作品。 按照標籤是否是單身可分為以下兩種： 1. 單標籤：語法為`<標籤名 屬性1=值1 屬性2=值2 ...../>` 2. 雙標籤：語法為`<標籤名 屬性1=值1 屬性2=值2 .....>前面表開始，中間是內容，後邊表結束` 一些常見的HTML標籤 ```html 首先是註釋： 引入外部css檔案 ``` ```html

1級標題 改變數字可以進行1~6級標題的替換

下劃線 斜體 刪除線 加粗

段落

換行

---

水平分割線   空格 > 大於號 < 小於號 & & ¥ ¥ © © 商標® ® ``` ```python 上述標籤在瀏覽器中的顯示所佔的位置是不一樣的，據此，對不同的標籤又進行了分類。 1. 塊級標籤：獨佔一行，不受本身文字的大小限制。 -塊級標籤可以修改長寬。 -其內部可以巢狀塊級標籤。 -只有一個比較頁數的標籤：p標籤只能內嵌行內標籤 2.行內標籤：其所佔位置大小被自身文字所決定，文字多大，佔多大。 -行內標籤不能巢狀塊級標籤 ``` #### div和span標籤 塊級標籤的典型代表就是``標籤，行內標籤代表就是``標籤，為什麼要單獨拉出來說呢？因為這兩個標籤是我們專門用來在初期構造html骨架的。在設計頁面初期，我們可以首先使用div標籤來進行整體頁面的一個規劃，然後其中的文字內容可以使用span標籤佔位。後期我們新增內容都是在div和span組成的簡易結構中進行的。 #### 特殊的屬性 1. id:該頁面不能重複，用來標識標籤唯一身份。 2. class:類似於Python的繼承，會按照class內的css樣式進行渲染標籤。 #### 常用標籤 ```html 1. img標籤：可以插入圖片 如果寬和高只定義一個的話，那麼就會等比例改變 2. a標籤：傳送門標籤 target='_self/_blank' 開啟新頁面的方式，前者表示本頁面開啟，後者是新建頁面開啟，預設前者 tip:本頁面跳轉的功能 a標籤具有錨點功能，這時候就要說到一個特殊的屬性了：id=''，這個id必須是本頁面唯一，作為每個標籤的身份標識，我們可以通過查詢某標籤的id直接定位到該標籤，所以a標籤中的href屬性就可以寫為本頁面的id值，完成點選之後即跳轉到該標籤。 3. 列表標籤 列表標籤有三種，這裡只記錄一下無序列表。

• 預設是帶小黑點的子集排列
• 如下展示

```

• 無序列表就是這樣
• 可以有多行

```python 4. 表格標籤 # 宣告一個表格 # 表頭 # 每一個tr標籤代表一行資料 # 表身

加粗的欄位1	欄位2	欄位3
一行資料的第一個欄位值	一行資料的第二個欄位值	一行資料的第三個欄位值

html本身子代的表格是比較醜的，但是仍然可以新增一些屬性的變化使其稍微好看點。 border='數字':表格的邊框樣式 rowspan='數字':向下的單元格合併幾行 colspan='數字':向右的單元格合併幾行 ``` 4. 表單元素 這個表單屬性可以實現向服務端傳送資料，如果我們填寫一部分資料向後端提交，就要使用到這個表單元素。 ```python 輸入文字 密碼輸入 日期輸入 單選框：從給出的選項進行選擇 多選框：從給出的選項中可以進行多選 提交按鈕，觸發提交動作 可以進行自定義功能按鈕，空白的只能點著玩 重置按鈕：重新整理本頁面 選擇檔案，可進行上傳，但有前提條件 input標籤在label內，能讓使用者再點到文字提示資訊的時候自動進入到資料輸入狀態，即獲得焦點。 ``` **action的3種狀態：** 1. 不填：預設是向本頁面所在的url提交資料。 2. 寫全路徑：向該url提交資料。如’www.baidu.com‘。 3. 只寫路徑字尾：自動識別當前的ip和port，然後拼接。如:'/index/' 主要記得就是當在內部輸完資料準備進行提交的時候，action決定了提交的方向。 **幾個特殊狀態：** 1. checked：對於給出的選項（針對radio和check）問題，可使用這個值作為設定預設值。 2. disabled:不能獲得焦點（不能輸入）。 3. readonly:只能讀。 **上傳檔案的前提條件：** 1. 請求方式為POST 2. 必須定義`enctype='multipart/form-data'`屬性。 注意事項： 1. name屬性：資料是按k:v進行提交的，因此input內部務必填寫一個name屬性作為資料的key。 2. value屬性：針對輸入文字型別，value為輸入文字，針對按鈕類為按鈕顯示文字，針對選項類為傳送資料的鍵值對的值。 ```python select標籤：預設是單選的,下拉式選項。想要多選需新增mutiple selected為預設選中狀態 textarea標籤是獲取使用者大段文字輸入，本身是一個大的可輸入多行的文字框。 ``` ## 認識css css相當於一個化妝盒，用來給html打造的東東進行華麗大變身。 既然要進行裝飾，那麼就首先要找到被裝飾的物件。 css的引入方式有幾種： 1. head內的link標籤引入外部css檔案 2. head內的style標籤內寫入css 3. 在標籤內部直接定義style='{屬性：屬性值.....}' 一般情況建議使用第一種方式，方便後期維護，第三種方式不建議大批量使用，耦合度較高。 ### 選擇器 這個就很好理解，就是通過一些方法精確定位到某一個標籤。 **選擇器分類：** ```css /*我是註釋語法：選擇器是定位某標籤，大括號內的內容是定義的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的所有標籤 ``` 分組：多個元素樣式相同可通過逗號隔開選擇器的方式設定。 巢狀：多種選擇器巢狀使用，可以想想後代選擇器 ```css div,#d1,.c1 {} 選擇div標籤、id為d1、繼承c1類的標籤 #d1 a {} 選擇id為下的a標籤 ``` **偽類選擇器** 一般在a標籤使用比較頻繁 ```python a:link {color：blue} # 未訪問連結時的顏色 a:visited {color：blue} # 訪問連結之後的顏色 a:hover {color：blue} # 滑鼠懸浮在連結時顏色 a:active {color：blue} # 滑鼠點選連結不鬆時的顏色 input：focus {color:bule} # 輸入框獲得焦點時的樣式 ``` **偽元素選擇器** ```python p:first-letter {} 設定文字首字母的字型樣式 p:after {content:'content必須定義'} 在p元素之後新增一個不可選中的內容，多用於清除浮動 p:before {content:'content必須定義'} 在p元素之前新增一個不可選中的內容，多用於清除浮動 ``` **優先順序** 在標籤內部的所有標籤都會預設繼承該標籤的樣式，但是如果內部標籤也有自己的樣式，這個時候就要考慮優先順序的問題了。 選擇器的優先順序是按照權重來決定的，誰的權重高那麼就聽誰的。按照通俗的話說就是哪一個選擇器精確就聽誰的。 針對相同的選擇器：就近原則。後執行的會將前面執行的覆蓋。 針對不同的選擇器：行內選擇器》id選擇器>類選擇器>標籤選擇器。誰查詢的精度高，範圍小。就聽誰的。 ## 屬性 **寬和高** 這兩個屬性是塊級標籤通用的，用來設定高和寬，行內標籤是無法生效寬屬性的，它的寬是由其本身文字內容決定 ```css width:100px; 設定寬 height:100px; 設定高 ``` **字型屬性** ```css 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 ``` **文字樣式屬性** ```css text-align:left/right/center/justify 水平對齊方式 text-decoration:none 無樣式,常用語去掉a標籤預設的下劃線 underline 文字下的一條線 overline 文字上的一條線 line-through 穿過文字的一條線 text-indent:2em 空兩個字元大小 ``` **背景屬性** ```css 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 ``` **邊框** ```scss 可以設定整體的邊框樣式，也可單獨設定邊框的樣式,例如：border-left-width border-width:10px; 邊框寬 border-style:solid/none/dotted/dashed; 邊框的樣式 border-color:red; 邊框的顏色 簡寫：border：10px solid red; border-radius:50% 可以設定為圓，半徑為長與寬的一半 ``` **display屬性** ```css display:none; 文件中元素存在，但是不顯示 block; 將標籤設定為塊級標籤 inline; 將標籤設定為行內標籤 inline-block; 標籤可以在一行，且可以設定寬和高 ``` **css盒子模型** ```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浮動** 假設我們看到的頁面是一個平面的話，那麼浮動就會讓元素從平面升到空中，任何元素都可以浮動，浮動之後就會自動成為塊級元素，只可以向左或向右浮動，知道碰到邊框為止。 注意：浮動有可能導致父標籤塌陷的問題 ```css float:right 向左浮動 float:left 向右浮動 ``` **clear清除浮動** 在clear規定的屬性的某一側是不允許有浮動元素的。 ```css clear:left; 該標籤的左側是不能有浮動元素的 clear:right; 該標籤的右側不能有浮動元素 clear:both; 兩個均不能出現浮動元素 清除浮動的影響，除了使用clear還有兩種方式： 1.自己新增一個有高度的div。 2.通用的解決方式是繼承一個自定義的類clearfix， .clearfix:after { content:''; display:block; clear:both; } ``` **溢位屬性overflow** ```css overflow:visible; 多出內容預設可見，在框外可見 overfloe:hidden; 多出部分在框外不可見 overflow:scroll; 加一個滾動條 overflow:auto; 內容被修剪的話，就會顯示滾動條 最佳案例：原型頭像的設定。 ``` **position定位** ```css 定位分為四種： position:static; 預設值，沒有定位過。無法作為絕對定位的參照物 position:relative; 相對定位。以自己原始位置為參照物定位 position:absolute; 絕對定位。相對定位過的父元素為原點定位 position：fixed; 固定定位。固定在某一個位置且不會改變，原點是基於瀏覽器視窗 ``` **驗證浮動和定位是否脫離文件流（原來的位置是否儲存）** 不脫離文件流：相對定位 脫離文件流：浮動、相對定位、固定定位 **z-index模態框** 是設定物件的層疊順序，相當於在平面的文件上，又加了一個z軸，而z-index就是設定z的高度。值高的就會壓著值低的，導致值低的元素會被遮擋。 只能針對已經定位過的元素進行設定，同時，比較數值的時候是看父元素的z-index。 **opacity透明度** 定義透明效果，之前在顏色中rgba()也有一個透明度，但是隻能針對顏色，而這個透明度則是針對元素。取值範圍是0~1之間