前端三剑客——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.加大加粗： ...
2.快标记： :块级标签 :行内标签 可进行嵌套
3.超链接： 进行网站跳转
点击跳转 target=: 在浏览器中新建页面，而非此页面
4.图片：https://www.cnblogs.com/路径
# 基于flask框架写的网站图片放在static目录下（自己保存的图片）相对https://www.cnblogs.com/路径
<img src="https://www.cnblogs.com/\static\下载.png" >
#引用外部图片绝对https://www.cnblogs.com/路径
<img src="https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/0801pcjili.jpg" >
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="篮球">篮球
<input type="checkbox" name="乒乓球">乒乓球
<input type="checkbox" name="足球">足球
按钮类
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.多行文本
注册登录############################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">
用户名:：
<input type="text" name="user"/>
密码:
<input type="password" name="pwd"/>
性别: #input标签系列单选
<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女
爱好: #input标签系列:多选
<input type="checkbox" name="hobby" value="篮球">篮球
<input type="checkbox" name="hobby" value="乒乓球">乒乓球
<input type="checkbox" name="hobby" value="足球">足球
居住地:
<select name="city"> #select标签:下拉单选框
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select>
特长:
<select name="skills" multiple> #select标签:下拉多选框
<option value="学习">学习</option>
<option value="看视频">看视频</option>
<option value="睡觉">睡觉</option>
</select>
<textarea name="more" rows="10"></textarea>
<input type="submit" value="提交"> #input标签系列:表单提交按钮
</form>
</body>
</html>
总结：name value 一般用于表单元素 比如（input，select，textarea）
name: 表示用户交互层控件的名称，后续可通过request.form.get("控件名称"）来进行获取value
value： 表示表单元素的值
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ yyds。多谢分享
页:
[1]