HTML ： 超文本傳輸語(yu)言（瀏覽(lan)器進行識別html標簽）

??大綱：

??????1.網絡請求(qiu)

??????2.基于flask快速(su)搭(da)建簡略版網站

??????3.HTML標簽

??????4.基于HTML標簽，flask框架 實現 注冊登錄

??

????網絡請求

????基于flask框架進行快速搭建網站：

from flask import Flask, render_template

app = Flask(__name__)
@app.route("/login",methods=['POST','GET'])          #methods:用戶通過url發送請求的方式
def login():                                         #用戶訪問網站時自動執行此url對應函數
    return render_template("login.html")             #基于flask寫的網站html文件放在templates目錄下  render_template:用戶通過url訪問網站時反回對應頁面的html文件

if __name__ == '__main__':
    app.run()

????HTML標簽：

??????1.加大加粗：  <h1> <h2>...

??????2.快標(biao)記(ji)：    <div> :塊(kuai)級標(biao)簽????<span>:行內標(biao)簽 可進行嵌套

??????3.超鏈接：    <a>進行(xing)網站跳轉

<a href="外部網址/內部基于flask搭建的網址" target="_blank">點擊跳轉</a>

????????????target=<"_blank">:   在(zai)瀏覽器中(zhong)新建(jian)頁面，而非(fei)此頁面

#a標簽默認有下劃線想去掉加 text-decoration:none;
.a1 .c1 a{
    height: 60px;
    text-align: center;
    line-height: 60px;
    float: left;
    text-decoration:none;
}
.a1 .c1 a:hover{
    color: red;
}

<div class="a1">
    <div class="c1">
        <a href="//www.luffycity.com/study/vip-card/5AG2JbrKlMwQ578EHw" target="_blank">點擊跳轉</a>
    </div>
</div>

??????4.圖片：<img src="路徑" style="width:xxx ; height:xxx;">

# 基于flask框架寫的網站圖片放在static目錄下（自己保存的圖片）相對路徑
<img src="\static\下載.png" style="width:100%;height:500px;">  



#引用外部圖片  絕對路徑
<img src="//developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/0801pcjili.jpg" style="width:100%;height:500px;">

 ??????5.小(xiao)總結：

????  6.列(lie)表（無序(xu)，有序(xu)）

?????7.表格

table表格
border為表格設置邊框
thead表頭
tbody表身
tr行
th表頭的格
td表身的格
    
    
    <table border="1">
        <thead>
            <tr>
                <th>name</th>
                <th>age</th>
            </tr>
        <tbody>
            <tr>
                <td>guohan</td>
                <td>20</td>
            </tr>
        </tbody>
        </thead>

??????7.input系列

<input type="控件類型" name="與用戶交互的控件名稱">



輸入類

1.    type="text"
用戶名：
<input type="text" name="user">

2.    type="password"
密碼：
<input type="password" name="pwd">

選擇類

3.    type="file"
選擇文件
<input type="file" name="file">

4.    type="radio"
單選
<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女

5.多選
<input type="checkbox" name="hobby" value="籃球">籃球
<input type="checkbox" name="hobby" value="乒乓球">乒乓球
<input type="checkbox" name="hobby" value="足球">足球

按鈕類

6.    type="button"     普通的按鈕
<input type="button" value="提交">

7.    type="submit"    提交表單與form形成固定搭配
<input type="submit" value="提交">

submit按鈕與form表單搭配???

#form標簽里面含： action：提交到的網址  method：提交數據到網址的請求方式（作登錄，注冊時一般用post）

<form action="\login" method="post">

#form標簽里面包裹要提交的數據標簽
比如input系列標簽，select標簽等         一定要寫控件（name）屬性:<input type="password" name="pwd">

#最后必須用submit按鈕進行表單提交

??????8.select下拉框

單選下拉框
<select name="city">
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="廣州">廣州</option>
</select>

多選下拉框
<select name="skills" multiple>
    <option value="學習">學習</option>
    <option value="看視頻">看視頻</option>
    <option value="睡覺">睡覺</option>
</select>

????

??????9.多行文本

<textarea name="more" rows="10"></textarea>

????????

############################app.py(基于flask框架寫的網站）###############################
from flask import Flask, render_template,request

app = Flask(__name__)
@app.route("/login",methods=['POST','GET'])              #   methods:用戶通過url發送請求的方式
def login():                                             #用戶訪問網站時自動執行此url對應函數
    if request.method == 'GET':
        return render_template("login.html")             #基于flask寫的網站html文件放在templates目錄下  render_template:用戶通過url訪問網站時反回對應頁面的html文件
    else:
        user=request.form.get("user")                
        pwd=request.form.get("pwd")
        gender=request.form.get("gender")                #對用戶交互層控件中填入或選擇的數據進行獲取 方式:request.form.get\getlist（"控件名稱"）方式獲取
        hobby=request.form.getlist("hobby")                
        print(user,pwd,gender,hobby)
        return "登錄成功!"
    
if __name__ == '__main__':
    app.run()
    
###########################templates目錄下login.html文件#############################
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試站用戶登錄</title>
</head>
<body>
    <form action="\login" method="post">
        <div>
        用戶名:：
        <input type="text" name="user"/>
        </div>
        <div>
            密碼:
            <input type="password" name="pwd"/>
        </div>
        <div>
            性別:                               #input標簽系列單選
            <input type="radio" name="gender" value="男">男
            <input type="radio" name="gender" value="女">女
        </div>
        <div>
            愛好:                               #input標簽系列:多選
        <input type="checkbox" name="hobby" value="籃球">籃球
        <input type="checkbox" name="hobby" value="乒乓球">乒乓球
        <input type="checkbox" name="hobby" value="足球">足球
        </div>
        <div>
            居住地:
            <select name="city">                 #select標簽:下拉單選框
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="廣州">廣州</option>
            </select>
        </div>
        <div>
            <div>
                特長:
            </div>
            <select name="skills" multiple>        #select標簽:下拉多選框
                <option value="學習">學習</option>
                <option value="看視頻">看視頻</option>
                <option value="睡覺">睡覺</option>
            </select>
        </div>
        <textarea name="more" rows="10"></textarea>
        <div>
            <input type="submit" value="提交">    #input標簽系列:表單提交按鈕
        </div>
    </form>
</body>
</html>

 ??????總結：name value 一般(ban)用于表單(dan)元素 比如(ru)（input，select，textarea）

??????????name:    表(biao)示用戶(hu)交互層(ceng)控件的(de)名(ming)稱，后續可通過(guo)request.form.get("控件名(ming)稱"）來進行獲取(qu)value

??????????value：  表示(shi)表單(dan)元素的值(zhi)