current position:Home>Django website development 01.Web website and front-end HTML tags

Django website development 01.Web website and front-end HTML tags

2022-08-06 10:32:05Jay_fearless

Browser interaction flow

在这里插入图片描述

1.快速开发网站

在Pycharm控制台输入:

pip install flask

新建一个web.py,Write a basic website:

web.py

from flask import Flask

app= Flask(__name__)

@app.route("/show/info")
def index():
    return "666"

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

2.新建templates包,包中新建我们的html页面,It is convenient for the program to call:

503.html

<h1>Test</h1>
<span style="font-size:18px;">
    Ordinary users are only allowed to download one file at a time,Please complete the current download first,Try downloading another file again.
</span>
<br>
    <br>
        <br>
            <span style="font-size:18px;"> If you are not currently downloading the file,Still getting this prompt,Please check by the following two:</span>
        </br>
        <span style="font-size:18px;"> 1. If you used the browser's built-in download tool to download before,We recommend that you close and reopen your browser.</span>
    </br>
    <span style="font-size:18px;"> 2. <a href="http://www.xun-niu.com/vip.php">open fast cattleVIPExtreme speed download can download unlimited at the same time.</a></span>
</br>

After modifying the originalweb.py,Render our template page directly:

from flask import Flask,render_template

app= Flask(__name__)

@app.route("/show/info")
def index():
    return render_template("503.html")

if __name__ == '__main__':
    app.run(port=8080) #The parameters inside can specify the host、端口号

访问页面进行测试:

http://127.0.0.1:8080/show/info

3.一些简单的HTML标签

1.head

1.1.编码类型

<meta charset="UTF-8">

1.2.title标题

<head>
<meta charset="UTF-8">
<title>503</title>
</head>

2.body

2.1标题大小

<body>
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
</body>

2.2div和span标签

1.div,One person occupies an entire line.【块级标签】

<body>
<div>山东蓝翔</div>
<div>挖掘机哪家强</div>
</body>

在这里插入图片描述

2.span,自己多大占多少.【行内标签、内联标签】

<body>
<span>山东蓝翔</span>
<span>挖掘机哪家强</span>
</body>

在这里插入图片描述

2.3超链接

跳转到网站:

<a href="http://www.xun-niu.com/vip.php">开通VIP下载无限制.</a>

Jump to local website

<a href="http://127.0.0.1:5000/news"></a>
<a href="/news"></a>

2.4图片

一般写法

<img src="图片地址" /> 

引用别人的图片:

<img src="https://cdn.acwing.com/media/article/image/2022/06/29/39383_afadb7b1f7-re8storybookicon.png" /> 

使用本地的图片:
First create one in your projectstatic包,Then put the pictures in the bag:
在这里插入图片描述
一般格式:

<img src="图片地址" /> 

例:

<img src="/static/gamek.png" />
测试页面显示:

在这里插入图片描述

2.5列表

<h1>运营商列表(无序)</h1>
<ul>
    <li>中国移动</li>
    <li>中国联通</li>
    <li>中国电信</li>
</ul>
<h1>运营商列表(有序)</h1>
<ol>
    <li>中国移动</li>
    <li>中国联通</li>
    <li>中国电信</li>
</ol>

在这里插入图片描述

2.6表格

表格(table)包括表头(thead)and table contents(tbody)两部分:

<table border="1">
    <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>10</td><td>a</td><td>19</td></tr>
        <tr><td>11</td><td>b</td><td>19</td></tr>
        <tr>
            <td>12</td>
            <td>c</td>
            <td>19</td>
        </tr>
    </tbody>
</table>

在这里插入图片描述

2.7input系列

<input type="text"/>
<input type="password">
<input type="file">
<input type="radio" name="n1"><input type="radio" name="n1"><input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox">乒乓球
<input type="checkbox">棒球
<input type="button" value="提交(普通按钮)">
<input type="submit" value="提交(表单按钮)">

2.8下拉框(select)

<!--单选-->
<select>
    <option>咖啡</option>
    <option>奶茶</option>
    <option>冷饮</option>
</select>
<!--多选,按住shift键-->
<select multiple>
    <option>咖啡</option>
    <option>奶茶</option>
    <option>冷饮</option>
</select>

2.9多行文本

<!--rowsThe value of the text box displays several lines of height-->
<textarea rows="6"></textarea>

本样例rows为6,So the area can be displayed6行的内容.
在这里插入图片描述

4.formTab form and submit

网络请求知识:

When the browser sends a request to the backend
1.GET请求【URL访问 / 表单提交】
■现象:GET请求、跳转、Incoming data to the background data will be spliced ​​inURL上.

https://www.sogou.com/web?query=ios&age=17&name=xx

注意:GETRequest data will be thereURL中体现.
2.POST请求【表单提交】
现象:Submit data is not thereURLin the request body instead.
在html中,The code block that needs to submit data needs to be usedform标签包起来:

<form method="get" action="提交的地址">
	用户名:<input type="text" name="username"/>
	密码:<input type="password" name="password"/>

	<input type="submit" value="submit按钮">
</form>

formA label that wraps the data to be submitted

	提交方式: method="get"
	提交的地址: action="/xxx/xxx/xx"
	在formThere must be one inside the labelsubmit标签

可以被formSome labels wrapped inside:inputselecttextarea
每个formThe label must be writtenname属性

<input type="text" name="username" />
There are two ways to get the request result
@app.route("/do/reg" , methods=[ "GET"])
def do_register():
	#1.接收用户通过GET形式发送过来的数据
	print(request.args)
	#2.给用户再返回结果
	return"注册成功"
@app.route( "/post/reg" , methods=["POST"])
def do_register():
	#1.接收用户通过POST形式发送过来的数据
	print(request.form)
	#2.给用户再返回结果
	return "注册成功"

当然,We can also judge the request method by,Put the registration page in a function

@app.route("/register",methods=["GET","POST"])
def register():
    if request.method == "GET": #如果是getThe method displays the registration interface
        return render_template("register.html")
    else: #如果是postmethod to submit form data
        user = request.form.get("username")
        pwd = request.form.get("password")
        gender = request.form.get("gender")
        hobby_list = request.form.getlist("hobby")
        city = request.form.get("city")
        more = request.form.get("more")
        print(user, pwd, gender, hobby_list, city, more)
        return "注册成功"
Use the above content to simply make a user registration page that can submit data:

register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
<form method="post" action="/register">
    <div>
        用户名: <input type="text" name="username"/>
    </div>
    <div>
        密码:<input type="password" name="password"/>
    </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">乒乓球
        <input type="checkbox" name="hobby" value="4">棒球
    </div>
    <div>
        城市:
        <select name="city">
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option value="sz">深圳</option>
        </select>
    </div>
    <div>
        备注:<textarea name="more"></textarea>
    </div>
    <input type="submit" value="submit按钮">
</form>
</body>
</html>

copyright notice
author[Jay_fearless],Please bring the original link to reprint, thank you.
https://en.pythonmana.com/2022/218/202208061025005270.html

Random recommended