前端三剑客——HTML

诉称 · 7 天前

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.图片：

# 基于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.多行文本

[/code]
注册登录[code]############################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：表示表单元素的值

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

账号		自动登录	找回密码
密码			立即注册

前端三剑客——HTML

相关帖子

签约作者

前端三剑客——HTML

相关帖子

相关推荐

签约作者