什么是前端：
與用戶直接打交道的，例如：手機電腦的界面
什么是后端：
幕后操作者，不直接與用戶打交道的
WEB服務的本質：
瀏覽器中輸入網址回車發送了幾件事？
1、瀏覽器朝服務端發送請求
2、服務端接收請求
3、服務端返回響應
4、瀏覽器接收響應 按照相應的規則渲染給用戶看。
HTTP協議：
超文本傳輸協議
規定了瀏覽器與服務端傳輸數據的格式
四大特性：
1、基於請求響應
2、基於TCP/IP之上的作用於應用層的協議
3、無狀態（服務端不保存用戶狀態，即使同一用戶每次來都當做第一次來響應）
4、無連接（用戶端請求一次響應一次，之后立馬斷開連接，失去聯系！）
請求數據格式：
1、請求首行（標識HTTP協議版本，當前請求方式）
2、請求頭（一大堆k，v鍵值對）
3、/n/r
4、請求體（攜帶敏感信息）
響應數據格式：
1、響應首行（標識HTTP協議版本、響應狀態碼）
2、響應頭（一大堆k，v鍵值對）
3、/n/r
4、響應體（返回給瀏覽器頁面的數據，通常響應體為html頁面）
響應狀態碼：用一些簡單的數字來表示一些復雜的狀態或者提示信息
1XX：服務端已經成功接收你的請求正在處理，你可以繼續發送一些額外的數據
2XX：服務端成功響應 你想要的的數據（請求成功200）
3XX：重定向（當你訪問一個需要先登錄的頁面時，會自動跳轉到登錄界面 301、302）
4XX：請求錯誤（請求資源不存在或請求不合法，不符合內部規定或權限不夠 403）
5XX:服務端內部錯誤（500）
請求方式：
1、get請求：
朝服務端要資源（例如在瀏覽器窗口輸入www.baidu.com，服務端會返回一個百度首頁）
2、post請求：
朝服務端提交數據（比如用戶登錄時朝服務端提交用戶名和密碼）
URL：統一資源定位符（即：網址）
HTML:
超文本標記語言
想讓你寫的頁面被瀏覽器正常顯示出來，那么你所寫的頁面就必須遵守HTML標記語法，
也就是說所有可以被瀏覽器正常顯示的頁面都是HTML頁面，內部都是HTML代碼。
瀏覽器只認識：HTML,CSS,JS
WEB本質：
瀏覽器
服務器
文件（后綴名是.html結尾的文件，即.html結尾的文件是前端頁面文件，.html后綴就是給用戶看的，計算機內都是二進制數據）
html的注釋：
<!--單行注釋-->
<!--
多行注釋
多行注釋
-->
一般情況下 html的注釋都會按照下面的方式書寫
<!--導航條樣式開始-->
<!--導航條樣式結束-->
HTML的文檔結構：
<html>
<head></head>:head內的標簽 不是用來展示給用戶看的 而是定義一些配置 主要是給瀏覽器看的
<body></body>:body內的標簽 就是瀏覽器展示給用戶看的內容
</html>
HTML頁面的兩種打開方式：
1、在文件路徑下選擇瀏覽器打開
2、在pycharm的快捷方式直接打開
標簽的分類1：
1、雙標簽：<h1>uzi</h1>
2、單標簽：<img src="" alt="">
head內常用的標簽：
title:用來顯示網頁的標題
style:用來控制樣式，內部支持寫CSS代碼
script:內部支持寫js代碼，也支持外部傳來的js文件。
link:專門用來引入外部的CSS文件
標簽的分類2：
1、塊級標簽（獨占瀏覽器的一整行）：
如：div、p、h
塊級標簽可以嵌套任意的塊級標簽，但是p標簽雖然也是塊級標簽但是不能夠嵌套塊級標簽（包括自身），可以嵌套行內標簽。
2、行內標簽（自身內容是多大就占多大空間）：
例如：span b ：加粗 s ：划掉 i ：斜體 u ：下划線
div和span通常是用來搭建頁面布局時使用的。
body內常用的標簽：
基本標簽：
h標簽：標題標簽
p標簽：段落標簽
符號：
常用標簽：
div、span、p、img
img:
src用來存放圖片的路徑，可以是本地的也可以是網上的
1、可以放url(會自動請求該url自動獲取相應的數據)
2、也可以放圖片的二進制數據 會自動轉換成圖片
alt：當圖片加載不出來時，顯示該提示信息
title:當鼠標懸浮在圖片上 提示的信息
height、width 當你指定其中一個時另一個會等比例縮放，所以一般不要同時指定兩個參數。
a標簽：<a href=""></a>
href后面存放的url的時候，點擊跳轉到該url
如果該鏈接沒有被點擊過顏色為藍色的，只要點擊過一次，瀏覽器會記錄下來，以后不都會是紫色的。
target:默認是_self,當前頁面跳轉。_blank表示新建一個空白頁面進行跳轉。
錨點功能（回到頂部）：
href還可以寫另一個a標簽的id值,點擊就會跳轉到id所對應的a標簽的值。如上圖。
每個標簽都應該有的三個重要的屬性值：
1、id值：該值類似於身份證號，一個html文檔中的id值應該保證是唯一的
2、class值：該值類似於面向對象中的繼承。（可以繼承多個）
這樣便可以擁有c1標簽的所有功能
3、style（不是一定需要的）支持標簽自己定義自己的CSS代碼，屬於行內，優先級最高。
補充：任何標簽都支持自定義屬性。
列表標簽：
無序列表：
結果演示：
調整形狀：
有序列表：
標題列表：
表格標簽：
基本結構：
<table>
<thead></thead>
<tbody></tbody>
</table>
tr表示一行
th和td都是文本
建議在thead內用th
tbody內用td
標簽使用：
<table border="1"> <thead> <tr> <th>username</th> <th>pwd</th> <th>hoppy</th> </tr> </thead> <tbody> <tr> <td>cxk</td> <td>123</td> <td>籃球</td> </tr> <tr> <td>yyj</td> <td>123</td> <td>game</td> </tr> </tbody> </table> </body>
colspan表示的是水平方向
rowspan表示的是豎直方向
用法：
表單標簽：
作用：接收用戶輸入（輸入、選擇、上傳）文件並發送給后端。
以注冊為例講解form表單：
<form action="">
<label for="d1">username:<input type="text" id="d1"></label>
</form>
action:用來控制數據提交的目的地
1、不寫的情況下，默認提交到當前頁面所在的路徑
2、寫全路徑(https://www.baidu.com)
3、路徑后綴（(/index/)）
input標簽：類似於前端的變形金剛
type:
text:普通文本
password:密文 不展示明文
date:日期
submit:觸發提交動作
button:普通按鈕 沒有實際意義 但是可以通過js綁定事件實現自定義動作
reset:重置表單內容
radio:單選 可以通過checked控制默認選擇(當屬性值和屬性名相同的情況下 可以簡寫 checked) checked="checked"
checkbox:多選 同上 可以設置默認值
file:獲取用戶上傳的文件
select標簽：
默認為單選，可以通過multiple變成多選，默認選擇可以用selected(selected='selected')
textarea標簽（個人簡介）
獲取用戶輸入的大段文本
form 表單默認是get請求 你需要通過method參數手動修改post提交！
form 表單中觸發提交動作的兩種方式：
1、input中type指定成submit
2、直接寫button標簽
獲取用戶輸入（輸入、選擇、上傳...）的標簽，都必須有一個name屬性，
這個name屬性就類似於字典的key用戶輸入的內容就是字典的value
<input type="text" id="d1" name="username" value="默認值">
用戶輸入的值都會放在value屬性中
form表單再傳文件的時候，需要指定enctype屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h2>注冊頁面</h2> <form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data"> <p><label for="d1">username:<input type="text" id="d1" name="username"></label></p> <p><label for="d2">password:<input type="password" id="d2" name="password"></label></p> <p> <label for="d3">birthday:</label> <input type="date" id="d3" name="birth"> </p> <p>性別: <input type="radio" name="gender" checked value="male">男 <input type="radio" name="gender" value="female">女 </p> <p>愛好: <input type="checkbox" name="hobby" value="basketball">籃球 <input type="checkbox" name="hobby" value="football">足球 <input type="checkbox" name="hobby" checked value="doublecolorball">雙色球 </p> <p>省市: <select name="province" id=""> <option value="sh">上海市</option> <option value="bj">北京市</option> <option value="sz">深圳市</option> </select> </p> <!--<p>伴侶:--> <!-- <select name="" id="" multiple>--> <!-- <option value="" selected>新垣結衣</option>--> <!-- <option value="" selected>斯嘉麗</option>--> <!-- <option value="">明老師</option>--> <!-- </select>--> <!--</p>--> <!--<p>省市1:--> <!-- <select name="" id="">--> <!-- <optgroup label="上海">--> <!-- <option value="">嘉定區</option>--> <!-- <option value="" selected>浦東新區</option>--> <!-- <option value="">靜安區</option>--> <!-- </optgroup>--> <!-- <optgroup label="北京">--> <!-- <option value="">朝陽區</option>--> <!-- <option value="">海淀區</option>--> <!-- <option value="">昌平區</option>--> <!-- </optgroup>--> <!-- <optgroup label="安徽">--> <!-- <option value="">蕪湖市</option>--> <!-- <option value="">合肥市</option>--> <!-- <option value="">安慶市</option>--> <!-- </optgroup>--> <!-- </select>--> <!--</p>--> <p>頭像: <input type="file" name="avatar"> </p> <p>個人簡介: <textarea name="info" id="" cols="30" rows="10"></textarea> </p> <!--<p>隱身--> <!-- <input type="hidden">--> <!-- --> <!--</p>--> <input type="submit" value="注冊1"> <input type="button" value="注冊2"> <input type="reset" value="注冊3"> <button>button標簽</button> </form> </body> </html>