首页 > 其他分享 >（学习日记）一、Web框架-HTML标签-网页请求

（学习日记）一、Web框架-HTML标签-网页请求

时间：2024-02-16 13:58:06浏览次数：23  
标签：Web 网页 form GET 标签 app request HTML template

1.快速开发网站

render_template是Flask框架的一个函数，用于渲染模板并生成动态的HTML文件

app = Flask(name, template_floder(''路径''))

构造一个Flask类赋给app，

template_floder修改寻找模板的默认路径，默认是当前目录下的templates文件（没有 则需要创建一个目录文件）

from flask import Flask,render_template

app = Flask(__name__) #实例化一个Flask类并赋予app

#创建网址/show/info和函数index的对应关系
#当用户访问/show/info，网站自动执行index
@app.route("/show/info")
def index():
    return render_template("index.html")

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

对应的HTML文件

<!DOCTYPE html>
<html>
<head>
    <title>MyPage</title>
    <meta charset="UTF-8">
</head>
<body>
    <h1>Hello, World!</h1>
    <p><span style="color: aqua;">Aha!</span>This is a sample web page.This is the changes</p>
</body>
</html>

2.浏览器能识别的标签

2.1只能在<head>里

<meta charset='UTF-8'>编码

<title>头显示

<div>
	<h1>Hello, World!</h1>#占据一整行
</div>

2.2在<body>内

<h1>~<h6>级标题
<div>块级标签，一个占一行
<span>行内标签

<div>
    <p>
        <span style="color: aqua;">Aha!</span>
        <span>This is a sample web page.This is the changes</span>
    </p>
</div>

练习题 运用<div>和<span>

<!DOCTYPE html>
<html>
<head>
    <title>MyPage</title>
    <meta charset="UTF-8">
</head>
<body>
    <div>
        <h3>Time:8:53</h3>
    </div>
    <div>
        <p>
            <span style="color:#39c5bb;">Aha!</span>
            <span>I made a web with Flask</span>
        </p>
        <p>
            There will be inserted some words...
        </p>
    </div>    
    <div>
        <h3>Time:8:53</h3>
    </div>
    <div>
        <p>
            <span style="color:#39c5bb;">Aha!</span>
            <span>I put some words in here</span>
        </p>
        <p>
            There will be inserted some words...
        </p>
    </div> 

</body>
</html>

2.4超链接

<a href="">用于跳转页面

<a href="https://cn.bing.com">Click here to jump</a>

用于自己网站的跳转

<a href="http://127.0.0.1:5000/get/news">Click here to jump</a>

更简洁的写法

<a href="/get/news">Click here to jump</a>

target="_blank"点击链接不在本页面跳转，生成新的标签页

<a href="/list/goods" target="_blank">Click here to show you some goods</a>

2.5图片

<img src="">用于添加标签，是自闭和标签，因此没有</img>

<img src="https://ts1.cn.mm.bing.net/th?id=OIP.yMArSeOqnCJvLqSZpAzq7wAAAA&w=298&h=204&c=12&rs=1&qlt=99&pcl=faf9f7&o=6&dpr=1.3&pid=MultiSMRSV2Source">

用于自己网站的图片（本地图片）

-需要在本目录下创建一个static目录文件用于存放

-在自己网页中引用地址<img src="/static/图片.jpg">

可以使用width和height来调整图片大小

<img src="/static/helloworld.jpg" width="400" height="200">

小结

划分

块级标签

<div></div>
<h1></h1>~<h6><h6>

行内标签

<span></span>
<a></a>
<img />

嵌套

<a href="Link" target="_blank"><img src="ImgLink"></a>#target=_blank用于生成新的标签页，不在当前页面跳转

2.6列表标签

无序号（块级标签）

<ul>
    <li></li>
    <li></li>
</ul>

有序号（块级标签）

<ul>
    <li></li>
    <li></li>
</ul>

2.7表格标签

<table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>name</th>
                <th>age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>S1001</td>
                <td>Zhang San</td>
                <td>19</td>
            </tr>
            <tr>
                <td>S1002</td>
                <td>Li Si</td>
                <td>20</td>
            </tr>
            <tr>
                <td>S1003</td>
                <td>Wang Wu</td>
                <td>21</td>
            </tr>
        </tbody>
    </table>

2.8input系列

<input type="">输入，自闭和标签，行内标签

type=text 文本输入框

type=password 密码框

type=file 选择文件框

type=radio 单选框 name标签一样就只能选一个

type=checkbox 复选框

type=button value=按钮内容--普通按钮

type=submit 也是按钮--提交表单

<div>
    <h3>输入内容</h3>
    <p>账号 <input type="text"></p>
    <p>密码 <input type="password"></p>
    <p>上传文件 <input type="file"></p>
    <p>您的性别 <input type="radio" name="gender">男 <input type="radio" name="gender">女</p>
</div>

2.9下拉框

<select>下拉框（单个）

<select mutiple>下拉框（多个）

​

2.10多行文本

<textarea rows=3>支持三行内容的多行文本输入框

案例：用户注册

网络请求的两种方式

GET请求和POST请求
GET请求【URL方法，表单方法】：输入地址、跳转链接、向后台传入数据数据会拼接在URL上
POST请求【表单方法】：向后台提交表单，数据不体现在URL中，体现在请求体中

@app.route('/register', methods=['GET'])

用form标签包裹内容，只有form包裹的内容可以被提交

<form method="get" action="/registersuccess">
    Account: <input type="text" name="account">
    Password: <input type="password" name="password">
    <input type="submit" value="Submit">
</form>

name提交的属性名，method提交的方式，action提交的地址。以GET的方式接收返回的结果，request.args是包含元组的列表

form flask import request
@app.route('/registersuccess', methods=['GET'])
def register_success():
    #接收结果
    print(request.args)
    #返回结果
    return render_template('register_success.html')

以POST的方式接收返回的结果，request.args是包含元组的列表，只有用户交互的标签才可以返回到后台

@app.route('/post_registersuccess', methods=['POST'])
def register_success():
    #接收结果
    print(request.form)
    #返回结果
    return render_template('post_register_success.html')

实例：用户注册表单

<form method="post" action="/post_registersuccess">
            <div>
                Account: <input type="text" name="account">
                Password: <input type="password" name="password">
                <br>
                Gender: 
                <input type="radio" name="gender" value="male">Male
                <input type="radio" name="gender" value="female">Female
            </div>
            <div>
                Favorite thing:
                <input type="checkbox" name="hobby" value="basketball">Basketball
                <input type="checkbox" name="hobby" value="football">Football
                <input type="checkbox" name="hobby" value="tennis">Tennis
                <input type="checkbox" name="hobby" value="Reading">Reading
            </div>
            <div>
                From city:
                <select name="city">
                    <option value="Shanghai">Shanghai</option>
                    <option value="Nanjin">Nanjin</option>
                    <option value="Shaanxi">Shaanxi</option>
                </select>
            </div>
            <div>
                Skills:
                <select multiple name="skill">
                    <option value="p">Programing</option>
                    <option value="a">Arting</option>
                    <option value="m">Managing</option>
                </select>
            </div>
            <div>
                Tips:<textarea name="tips" rows="2"></textarea>
            </div>
            <input type="submit" value="Submit">
        </form>

获得用户返回的值，单个用get，多个用getlist

request.form.get("name")

根据用户的请求方式返回页面（将submit也发送到/register）

@app.route('/register', methods=['GET', 'POST'])
def register():
    if request.method == "GET":     #将POST请求和GET请求都发送到这个地址，然后根据请求方式的不同展示不同页面
        return render_template('register.html')
    else:
        account = request.form.get("account")
        password = request.form.get("password")
        gender = request.form.get("gender")
        hobby = request.form.getlist("hobby")
        city = request.form.get("city")
        skill = request.form.getlist("skill")
        return 'success'

相同的请求，例如登录和返回成功，注册和返回成功可以放在一个页面，不同的功能不要放在同一个页面

@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == "GET":
        return render_template('login.html')
    else:
        return 'login success'

标签：Web,网页,form,GET,标签,app,request,HTML,template
From： https://www.cnblogs.com/gin49sz/p/18017058

相关文章

  • 网页 三剑客
    网页三剑客，是一套强大的网页编辑工具，最初是由美国的Macromedia公司开发出来的。由Dreamweaver，Fireworks，Flash三个软件组成，俗称网页三剑客。Dreamweaver是一个“所见即所得”的可视化网站开发工具，主要用于动态网页和静态网页的开发；Fireworks主要是用于对网页上常用的jpg、gif的制......
  • 网页hook方法
    1.加密解密内容操作(function(){varparse_=JSON.parse;JSON.parse=function(arg){console.log("您猜怎么着？断住了！——>",arg);debugger;returnparse_(arg);//不改变原来的执行逻辑}})();2.异步加载的请求参数(function(){varopen=window.XMLHttpRe......
  • Net 8 Blazor Web App项目访问Identity Server 4
    Net8BlazorWebApp项目访问IdentityServer4IdentityServer系列目录BlazorServer访问IdentityServer4单点登录-SunnyTrudeau-博客园(cnblogs.com)BlazorServer访问IdentityServer4单点登录2-集成Asp.Net角色-SunnyTrudeau-博客园(cnblogs.com)BlazorSe......
  • 如何使用TailwindCSS和JavaScript构建自定义的HTML5视频播放器
    HTML5自带了一个原生视频播放器。它在浏览器中配备了简单的用户界面、功能和一些基本的控件。尽管通过浏览器的默认视频播放器的功能完美运行，但用户界面并不那么美观和时尚，总体上并不令人满意。因此，大多数现代Web应用程序和平台，如Udemy、Netflix、YouTube和AmazonPrime，不会将默......
  • HGAME2024-WEB WP
    WEEK12048*16直接把前端全部扒下来，自己搭建一个本地的环境，我这里用vscode搭建了一个。然后看下js代码，这里混淆了一堆，实在是难看，就找关键的地方，题目所说的32768找到了上面这个算式，他的结果就算32768，所以我们只需要将这里修改:然后本地起服务，随便玩几下，即可得到flag:Bypas......
  • HTML
    table标签（1）介绍<table>标签是HTML中用来创建表格的元素之一。它可以包含一个或多个<tr>（表格行）元素，而每个<tr>元素则可以包含一个或多个<td>（表格数据）或<th>（表头）元素，用于定义表格中的单元格内容。下面是一个简单的HTML表格示例：<!DOCTYPEhtml><htmllang="en"><head><m......
  • Linux Firefox 无法播放网页H5视频解决方案
    系统版本：Fedora38解决方案来自官方文档：https://docs.fedoraproject.org/en-US/quick-docs/openh264/#_firefox_config_changes安装openh264sudodnfconfig-manager--set-enabledfedora-cisco-openh264sudodnfinstall-ygstreamer1-plugin-openh264mozilla-openh264......
  • 【译】使用.NET将WebAssembly扩展到云（一）
    原文|RichardLander翻译|郑子铭WebAssembly（Wasm）是一种令人兴奋的新虚拟机和（汇编）指令格式。Wasm诞生于浏览器，是Blazor项目的重要组成部分。Wasm的第二个行动是针对应用程序和功能的云计算。WebAssembly系统接口(WASI)是新的推动者，为WebAssembly代码提供了一种安......
  • 验证：web应用程序要遵循http协议
     说明webserver响应的格式必须要遵循http响应协议，否则浏览器或者其它客户端工具不能解析响应，而http请求协议已经由浏览器或者其它客户端工具帮我们封装好了。这里我们直接通过socket写一个简单的server来演示。 get请求server.pyimportsocketimporttime#创建TCP......
  • Blazor OIDC 单点登录授权实例5 - 独立SSR App (net8 webapp ) 端授权
    目录:OpenID与OAuth2基础知识BlazorwasmGoogle登录BlazorwasmGitee码云登录BlazorOIDC单点登录授权实例1-建立和配置IDS身份验证服务BlazorOIDC单点登录授权实例2-登录信息组件wasmBlazorOIDC单点登录授权实例3-服务端管理组件BlazorOIDC单点登录授权实......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99