前端三剑客——HTML

HTML ： 超文本传输语言（浏览器进行识别html标签）

大纲：

1.网络请求

2.基于flask快速搭建简略版网站

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.快标记： <div> :块级标签 <span>:行内标签可进行嵌套

3.超链接： <a>进行网站跳转

<a href="外部网址/内部基于flask搭建的网址" target="_blank">点击跳转</a>

target=<"_blank">: 在浏览器中新建页面，而非此页面

#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="https://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="https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/0801pcjili.jpg" style="width:100%;height:500px;">

5.小总结：

6.列表（无序，有序）

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 一般用于表单元素比如（input，select，textarea）

name: 表示用户交互层控件的名称，后续可通过request.form.get("控件名称"）来进行获取value

value：表示表单元素的值

posted @ 2025-10-22 22:58 guohan 阅读(8) 评论(0) 收藏举报

刷新页面返回顶部

前端三剑客——HTML

公告