项目实训(三) —— HTML简单制作

最新推荐文章于 2023-08-14 16:10:22 发布

B258202

最新推荐文章于 2023-08-14 16:10:22 发布

阅读量888

点赞数 1

文章标签： python html flask

本文链接：https://blog.youkuaiyun.com/B258202/article/details/118439173

版权

本文档描述了如何创建一个简单的HTML页面用于展示饮食记录，包括菜名和配料的显示，以及通过提交按钮实现页面跳转。在<head>中设置了网页标题，<body>中利用<h>标签、<img>标签和<p>标签展示内容，同时通过<input>标签实现点击上传菜单的功能。此外，介绍了如何在Flask中传递参数到HTML并实现跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为完成“饮食记录”界面，初步构想就是将文字和对应的图片展现在html上，暂时不考虑美工排版，仅致力于内容展现和跳转按钮的实现。基于此，本文主要记录简单html内容的堆放。

<head>字段只是为网页取名以及规定展现格式，格式默认UTF-8不做改动。

剩下的编辑主要是<body>字段，这里展示仅简单用到了部分控制手段：

<h数字>包裹的控制文本和字相对大小；

<img src="路径+图片命"/>展现图片；

<p>换行；

<input.../>包含submit类型按键，附加点击跳转地址写法，对应点击跳转功能。

show.html代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>用户食谱</title>
</head>

<body>
    <h1>我的菜谱</h1>
    <h2>菜名：{{fname}}</h2>               # 双大括号，可以由外部flask传递值
    <h3>配料：{{fmaterial}}</h3>
    <img src="../static/user_pic/yv.jpg"/>

    <p>
    <input type="submit" value="上传菜单" id="Button1"
    onclick="window.location.href='/upload'"/>
</body>

</html>

py文件内，route对应的函数下，返回值如下设置，就可以实现对html的传参数，并且打开该html：

return render_template('show.html', fname='字符串1', fmaterial='字符串2')

当然，这两个传入的字符串可以直接在html内指定，但这样传递的好处是，便于后期在flask代码内读取数据库的数据，再传入html。