一、前端介紹
1.什麼是前端？
** 只要是跟使用者直接打交道的介面都可以稱之為前端**
** # eg：PC端，手機端，平板**
2.什麼是後端？
** 後端就是不直接與使用者介面打交道的都是後端**
** # eg：Python，java，go，node.js，php...**
前端工程師，後端工程師，Python工程師，Java工程師...
二、前端學習內容
1.HTML 網頁的骨架
2.css 美化網頁
3.javascript 讓網頁能夠動起來，有動態效果
# 前端三劍客
4.前端的框架：
** # bootstrap，jQuery，Vue，react，angular...**
三、軟體開發架構

1.c/s：客戶端/服務端
2.b/s：瀏覽器/服務端
'''學習前端的環境：只需要一個瀏覽器即可，前端程式碼是瀏覽器來執行的'''
3.學習前端程式碼的書寫環境：
** 文字，pycharm，vscode...**
** 我們業餘的使用pycharm就可以**
四、在瀏覽器網址欄輸入 網址發生了什麼？
'''
** 1.瀏覽器發起請求**
** 2.服務端接收請求**
** 3.服務端處理請求**
** 4.服務端返回結果給瀏覽器**
'''
# 瀏覽器也可以作為服務端的客戶端
# 寫一個瀏覽器/服務端程式
瀏覽器是可以充當很多服務端的客戶端
** eg：騰訊視訊，百度，淘寶，京東...**
問題：
** 瀏覽器如何識別是哪個服務端？**
** # 所有的服務端都必須遵守一個規則**
** 這個規則是什麼？# http協議**
五、HTTP協議
1.tcp/udp協議 ===> 傳輸層
2.IP協議 ===> 網路層
3.HTTP協議 ===> 應用層
# 1.HTTP協議的四大特性：
'''
** 1.基於請求響應**
** 2.在tcp/udp協議之上的應用層協議**
** 3.無狀態**
** 不能儲存資料（不能儲存使用者資訊）**
** 解決：cookie，session，token...**
** 4.短連結/無連結**
'''
# 2.請求資料
** 1.請求首行**
** 2.請求頭**
** 3.\r\n**
** 4.請求體**
# 3.響應資料
** 1.響應首行**
** 2.響應頭**
** 3.\r\n**
** 4.響應體**
# 4.請求方式
** 面試題：get和post的區別？**
** 1.get**
** 當客戶端向服務端索要資料的時候使用get請求**
** '''get請求是沒有請求體的，不安全'''**
** '''get請求攜帶的引數大小有限制：4KB'''**
** 2.post**
** 當客戶端向服務端提交資料的時候使用post請求**
** '''post請求是有請求體的，相對安全'''**
** '''post請求攜帶的引數大小沒有限制'''**
# 5.響應狀態碼：
** 1xx：請求提交成功，你還可以繼續提交**
** 2xx：200，請求成功**
** 3xx：301,302都是重定向**
** 4xx：404:代表資源不存在,403：代表沒有許可權**
** 5xx：500代表伺服器內部錯誤**
六、HTML
1.簡介：只要你想在網頁中現實一些內容，就必須適應HTML標籤
2.HTML程式碼的書寫位置
** 我們現在學習前端，只需要一個瀏覽器，推薦Chrome瀏覽器**
** '''在前端中，最大的問題就是瀏覽器相容性問題，同樣的程式碼在不同的瀏覽器執行的結果是不一樣的'''**
** 1.直接新建一個txt檔案，只需要把字尾名改為.html即可**
** 2.在pycharm中新建HTML檔案**
3.如何開啟HTML檔案？
** 1.直接雙擊開啟**
** 2.在pycharm中開啟，右鍵執行，在右上角點選瀏覽器圖示**
4.HTML的文件結構
** 1.**
** 2.**
** 3.**
** 4.<>**
5.head中常用的標籤
** **
** **
** **
** **
** **
** **

** **

6.body內常用標籤
** 加粗**
** 斜體**
** 下劃線**
** 刪除線**
**

**
** 採菊東籬下，悠然見**
**

**
**

**
** 採菊東籬下，悠然見南山**
**

**
**
**
**

---

**

** '''**
** div span**

** div就是用來佔佈局的**
** span:佔文字佈局的**
** '''**
7.標籤的分類
** 1.單雙標籤**
** 單標籤，雙標籤**
** 2.按照性質分類**
** 塊級標籤：**
** 內容獨自佔一行**
** div，p，h1~h6都是**
** 行內標籤：**
** 內容不是獨自佔一行，自身文字有多大就佔多大**
** i，u，s，b，span...**

---

8.標籤的巢狀
** 我們在前端中使用親戚關係來表示巢狀關係**
** '''**
**

div是p和span的父親**
**

p是span的父親**
** span是p的兒子，是div 的孫子，後代**
**

**
** **
**

**
** 是div的弟弟**
** **
** '''**
** # 標籤的巢狀：**
** 塊級元素可以巢狀所有的行內元素，行內元素不可以巢狀塊級元素**
** p標籤不能巢狀塊級元素**

---

** '''前端不會輕易報錯'''**
七、img標籤

src:
** 1. 外鏈地址**
** 2. 本地地址**
title:
** 當滑鼠懸浮時候顯示的文字資訊, title屬性是所有標籤都有的屬性**
width：
** 設定圖片的大小，一般只設置一個款或者一個高，預設是等比例縮放**

---

alt：
** 當圖片載入失敗的時候，顯示的提示資訊**
八、a標籤
# 超連結
點我

href:
** 跳轉的地址**
** target：**
** _self 預設，從當前標籤跳轉，替換當前標籤**
** _blank 跳轉到一個新標籤**