Django网站开发 01.Web网站与前端HTML标签

原创已于 2022-08-05 16:25:19 修改 · 546 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #django #html

于 2022-08-04 14:49:17 首次发布

Django 专栏收录该内容

3 篇文章

订阅专栏

浏览器交互流程

在这里插入图片描述

1.快速开发网站

在Pycharm控制台输入：

pip install flask

新建一个`web.py`，编写一个基础网站：

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页面，方便程序进行调用：

503.html

<h1>Test</h1>
<span style="font-size:18px;">
    普通用户只允许同时下载一个文件，请您先完成当前下载后，再尝试下载其他文件。
</span>
<br>
    <br>
        <br>
            <span style="font-size:18px;"> 若您当前并没有下载文件，仍然收到此提示，请通过以下两条进行检查：</span>
        </br>
        <span style="font-size:18px;"> 1. 如果您之前使用浏览器内置下载工具下载，我们建议您关闭并重新打开浏览器。</span>
    </br>
    <span style="font-size:18px;"> 2. <a href="http://www.xun-niu.com/vip.php">开通迅牛VIP极速下载可以同时下载无限制。</a></span>
</br>

之后修改原`web.py`，直接渲染我们的模板页面:

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) #里面的参数可以指明主机、端口号

访问页面进行测试：

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，一个人占一整行。【块级标签】

<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>

跳转本地网站

<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" />

使用本地的图片：
首先要在项目中创建一个static包，之后把图片放入包中：
在这里插入图片描述
一般格式：

<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)和表的内容(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多行文本

<!--rows的值为文本框显示几行高度-->
<textarea rows="6"></textarea>

本样例rows为6，所以区域可以显示6行的内容。
在这里插入图片描述

4.form标签表单和提交

网络请求知识：

浏览器向后端发送请求时
1.GET请求【URL访问 / 表单提交】
■现象:GET请求、跳转、向后台传入数据数据会拼接在URL上。

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

注意:GET请求数据会在URL中体现。
2.POST请求【表单提交】
现象:提交数据不在URL中而是在请求体中。
在html中，需要提交数据的代码块需要用form标签包起来：

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

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

form标签包裹要提交的数据的标签

	提交方式: method="get"
	提交的地址: action="/xxx/xxx/xx"
	在form标签里面必须有一个submit标签

可以被form包在里面的一些标签:input、select、textarea
每个form里的标签一定要写name属性

<input type="text" name="username" />

两种方式获取请求结果

@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 "注册成功"

当然，我们也可以通过判断请求方法，把注册页面放在一个函数中

@app.route("/register",methods=["GET","POST"])
def register():
    if request.method == "GET": #如果是get方法就显示注册界面
        return render_template("register.html")
    else: #如果是post方法就提交表单数据
        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 "注册成功"

使用以上内容简单的制作一个可提交数据的用户注册页面：

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>