前端三劍客——HTML

HTML ： 超文本傳輸語(yǔ)言（瀏覽器進(jìn)行識(shí)別html標(biāo)簽）

??大綱：

??????1.網(wǎng)絡(luò)請(qǐng)求

??????2.基于flask快速搭建簡(jiǎn)略版網(wǎng)站

??????3.HTML標(biāo)簽

??????4.基于HTML標(biāo)簽，flask框架實(shí)現(xiàn) 注冊(cè)登錄

??

????網(wǎng)絡(luò)請(qǐng)求

????基于flask框架進(jìn)行快速搭建網(wǎng)站：

from flask import Flask, render_template

app = Flask(__name__)
@app.route("/login",methods=['POST','GET'])          #methods:用戶通過(guò)url發(fā)送請(qǐng)求的方式
def login():                                         #用戶訪問(wèn)網(wǎng)站時(shí)自動(dòng)執(zhí)行此url對(duì)應(yīng)函數(shù)
    return render_template("login.html")             #基于flask寫(xiě)的網(wǎng)站html文件放在templates目錄下  render_template:用戶通過(guò)url訪問(wèn)網(wǎng)站時(shí)反回對(duì)應(yīng)頁(yè)面的html文件

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

????HTML標(biāo)簽：

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

??????2.快標(biāo)記： <div> :塊級(jí)標(biāo)簽????<span>:行內(nèi)標(biāo)簽可進(jìn)行嵌套

??????3.超鏈接： <a>進(jìn)行網(wǎng)站跳轉(zhuǎn)

<a href="外部網(wǎng)址/內(nèi)部基于flask搭建的網(wǎng)址" target="_blank">點(diǎn)擊跳轉(zhuǎn)</a>

????????????target=<"_blank">: 在瀏覽器中新建頁(yè)面，而非此頁(yè)面

#a標(biāo)簽?zāi)J(rèn)有下劃線想去掉加 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  target="_blank">點(diǎn)擊跳轉(zhuǎn)</a>
    </div>
</div>

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

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



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

??????5.小總結(jié)：

???? 6.列表（無(wú)序，有序）

?????7.表格

table表格
border為表格設(shè)置邊框
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="控件類(lèi)型" name="與用戶交互的控件名稱(chēng)">



輸入類(lèi)

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

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

選擇類(lèi)

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="足球">足球

按鈕類(lèi)

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

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

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

#form標(biāo)簽里面含： action：提交到的網(wǎng)址  method：提交數(shù)據(jù)到網(wǎng)址的請(qǐng)求方式（作登錄，注冊(cè)時(shí)一般用post）

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

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

#最后必須用submit按鈕進(jìn)行表單提交

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

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

多選下拉框
<select name="skills" multiple>
    <option value="學(xué)習(xí)">學(xué)習(xí)</option>
    <option value="看視頻">看視頻</option>
    <option value="睡覺(jué)">睡覺(jué)</option>
</select>

????

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

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

????????

注冊(cè)登錄

############################app.py(基于flask框架寫(xiě)的網(wǎng)站）###############################
from flask import Flask, render_template,request

app = Flask(__name__)
@app.route("/login",methods=['POST','GET'])              #   methods:用戶通過(guò)url發(fā)送請(qǐng)求的方式
def login():                                             #用戶訪問(wèn)網(wǎng)站時(shí)自動(dòng)執(zhí)行此url對(duì)應(yīng)函數(shù)
    if request.method == 'GET':
        return render_template("login.html")             #基于flask寫(xiě)的網(wǎng)站html文件放在templates目錄下  render_template:用戶通過(guò)url訪問(wèn)網(wǎng)站時(shí)反回對(duì)應(yīng)頁(yè)面的html文件
    else:
        user=request.form.get("user")                
        pwd=request.form.get("pwd")
        gender=request.form.get("gender")                #對(duì)用戶交互層控件中填入或選擇的數(shù)據(jù)進(jìn)行獲取 方式:request.form.get\getlist（"控件名稱(chēng)"）方式獲取
        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>測(cè)試站用戶登錄</title>
</head>
<body>
    <form action="\login" method="post">
        <div>
        用戶名:：
        <input type="text" name="user"/>
        </div>
        <div>
            密碼:
            <input type="password" name="pwd"/>
        </div>
        <div>
            性別:                               #input標(biāo)簽系列單選
            <input type="radio" name="gender" value="男">男
            <input type="radio" name="gender" value="女">女
        </div>
        <div>
            愛(ài)好:                               #input標(biāo)簽系列:多選
        <input type="checkbox" name="hobby" value="籃球">籃球
        <input type="checkbox" name="hobby" value="乒乓球">乒乓球
        <input type="checkbox" name="hobby" value="足球">足球
        </div>
        <div>
            居住地:
            <select name="city">                 #select標(biāo)簽:下拉單選框
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="廣州">廣州</option>
            </select>
        </div>
        <div>
            <div>
                特長(zhǎng):
            </div>
            <select name="skills" multiple>        #select標(biāo)簽:下拉多選框
                <option value="學(xué)習(xí)">學(xué)習(xí)</option>
                <option value="看視頻">看視頻</option>
                <option value="睡覺(jué)">睡覺(jué)</option>
            </select>
        </div>
        <textarea name="more" rows="10"></textarea>
        <div>
            <input type="submit" value="提交">    #input標(biāo)簽系列:表單提交按鈕
        </div>
    </form>
</body>
</html>

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

??????????name: 表示用戶交互層控件的名稱(chēng)，后續(xù)可通過(guò)request.form.get("控件名稱(chēng)"）來(lái)進(jìn)行獲取value

??????????value：表示表單元素的值

posted @ 2025-10-22 22:58 guohan 閱讀(10) 評(píng)論(0) 收藏舉報(bào)

刷新頁(yè)面返回頂部

前端三劍客——HTML

公告