python web开发（二）：HTML标签语言
文章目录
- 简介
- 标签语法
-
-
- 标题
- div和span
- 超链接
- 插入图片
- 列表
- 表格
- Input系列
- 提交表单
-
- 参考
简介
如下展示了一段简单的HTML模板， 标签中主要包含一些基本配置，如编码方式，标题等，注意标题的作用如下图所示
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hellotitle>
head>
<body>
<div>hello worddiv>
body>
html>
标签语法
标题
每个标题单独占一行
<body>
<h1>一级标题h1>
<h2>二级标题h1>
<h3>三级标题h1>
<h4>四级标题h1>
<h5>五级标题h1>
body>
div和span
<div>内容div>
<span>内容span>
div和span标签不会像标题h一样对字体大小进行改变，只展示最原始的文字，其两者的区别如下
- div: 占一整行(块级标签)
- span: 用多少占多少(行内标签/内联标签)
两个 span 标签不在同一行,页面显示时会在同一行,中间以一个空格分隔
两个 span 标签在同一行,页面显示时会在同一行,中间没有空格,连着
超链接
如下代码所示，使用标签来应用超链接，a标签中间的文字是超链接文字，href参数存放url地址，下面的代码段中展示了引用外部链接，以及引用内部链接两种方式
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hellotitle>
head>
<body>
<div>hello worddiv>
<a href="https://mp.csdn.net/mp_blog/manage/article?spm=1011.2124.3001.5298">小方的博客链接a>br>
<a href="/master">内部链接a>
body>
html>
from flask import Flask, render_template
app = Flask(__name__, template_folder="./templates")
@app.route("/")
def index():
return render_template("index.html")
@app.route("/master")
def master():
return "byebye"
if __name__ == "__main__":
app.run()
结果如下图所示
在新的 Tab 标签页打开链接，添加 target=“_blank”
<body>
<a href="https://www.mi.com/shop/buy/detail?product_id=16642" target="_blank">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202210262033_ef39fca0e37395d07682124770fd3ad9.png" style="width: 150px;"/>
a>
body>
插入图片
语法如下style设置图片大小，此处指定了宽和高，若只指定宽或高，则按比例放大缩小，此外style里可以直接填百分比，表示放大缩小，如style=“50%”
如果要插入本地图片，需要在当前项目下创建static文件夹，并将离线图片存放在static文件夹中
我们得到如下效果
标签嵌套：点击图片跳转到对应的网站
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hellotitle>
head>
<body>
<div>
<a href="https://consumer.huawei.com/cn/phones/" target="_blank">
<img src="/static/img.png" style="width: 200px; height: 200px">
a>
div>
body>
html>
列表
无序列表
<body>
<ul>
<li>中国移动li>
<li>中国联通li>
<li>中国铁塔li>
<li>中国电信li>
ul>
<body>
有序列表
<body>
<ol>
<li>中国移动li>
<li>中国联通li>
<li>中国铁塔li>
<li>中国电信li>
ol>
body>
效果如下
表格
<body>
<h1>表格h1>
<table border="1">
<thead>
<tr> <th>idth> <th>nameth> <th>ageth> tr>
thead>
<tbody>
<tr> <td>01td> <td>xiaofangtd> <td>18td> tr>
<tr> <td>02td> <td>xiaomingtd> <td>19td> tr>
<tr> <td>03td> <td>xiaohuatd> <td>20td> tr>
tbody>
table>
body>
表格以 在多行文本中通过参数 GET 方法与 POST 方法的区别 表单可以提交的前提条件: 如下所示 后端程序中通过 效果如下 Django web开发(一) - 前端开头，中间包括表头
和表主体，代表一行，在表头中一列用 表示，在主体部分一列用 表示，上述代码结果如下， border=1使得表格有线条（无该参数时只显示文字，没有线条分割）
Input系列
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<h2>文本和密码h2>
<input type="text" />
<input type="password" />
<h2>选择文件h2>>
<input type="file" />
<h2>单选h2>
<input type="radio" name="n1" />男
<input type="radio" name="n1" />女
<h2>多选h2>
<input type="checkbox" />唱
<input type="checkbox" />跳
<input type="checkbox" />Rap
<input type="checkbox" />篮球
<h2>按钮：普通按钮和提交表单h2>
<input type="button" value="提交"/> 普通按钮
<input type="submit" value="提交"/> 提交表单
<h4>下拉框h4>
<select>
<option>北京option>
<option>上海option>
<option>深圳option>
select>
<h4>多行文本h4>
<textarea rows="3">textarea>
body>
html>
rows指定文本行数，如果文本rows没有指定，会根据输入内容自动调整框的大小
提交表单
GET: 可通过URL/表单提交
POST: 只能通过表单提交,提交数据不在URL而是在请求体中
提交方式: method=get or post
提交地址: action=“/xxx/xxx/xxx”
在form标签里面必须有一个submit标签
每个标签有name属性DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册title>
head>
<body>
<form method="post" action="/do/post/regist">
<h4>用户注册h4>
<div>
用户名: <input type="text" name="username" />
div>
<div>
密码: <input type="password" name="passwd" />
div>
<div>
性别：
<input type="radio" name="gender" value="1">男
<input type="radio" name="gender" value="2">女
div>
<div>
爱好：
<input type="checkbox" name="hobby" value="1">篮球
<input type="checkbox" name="hobby" value="2">羽毛球
<input type="checkbox" name="hobby" value="3">排球
div>
<div>
城市：
<select name="city">
<option value="bj">北京option>
<option value="sh">上海option>
<option value="hz">杭州option>
select>
div>
<div>
自我评价：
<textarea name="slef review">textarea>
div>
<div>
<input type="submit" value="submit提交">
div>
<div>
<input type="button" value="button提交">
div>
form>
body>
html>
request.args和request.form获取前端传递过来的信息from flask import Flask, render_template, request
app = Flask(__name__, template_folder="./templates")
@app.route("/regist", methods=["GET"])
def regist():
return render_template("regist.html")
@app.route("/do/get/regist", methods=["GET"])
def do_get_regist():
# GET方式提交信息获取
submit_info = request.args
print(submit_info)
# POST方式提交信息获取
# submit_info = request.form
return str(submit_info)
@app.route("/do/post/regist", methods=["POST"])
def do_post_regist():
# POST方式提交信息获取
submit_info = request.form
return str(submit_info)
if __name__ == "__main__":
app.run(port=5001)
返回参数如下
name属性value属性，对应选择对应的值@app.route("/do/post/regist", methods=["POST"])
def do_post_regist():
# POST方式提交信息获取
# submit_info = request.form
# 也可获取单一的值
usrname = request.form.get("username")
pwd = request.form.get("passwd")
# 多选的情况
hobby_list = request.form.getlist("hobby")
return str(usrname)
# 指定即可接收GET也可接收POST请求
@app.route("/regist", methods=["GET", "POST"])
def regist():
if request.method == "GET":
submit_info = request.args
return str(submit_info)
else:
usrname = request.form.get("username")
pwd = request.form.get("passwd")
return str(usrname)
参考
最新Python的web开发全家桶（django+前端+数据库）