基于flask的web应用开发——访问漂亮的html页面以及页面跳转_flask html-程序员宅基地

技术标签： Python实例  前端  html  flask  Flask  

目录

0. 前言

本节学习如何在flask应用程序下让用户访问你提前制作好的html页面

操作系统：Windows10 专业版

开发环境：Pycahrm Comunity 2022.3

Python解释器版本：Python3.8

第三方库：flask

1. html基本知识

HTML（HyperText Markup Language），即超文本标记语言，是用于创建网页的标准语言。HTML 文件由用标签包围的文本构成，这些标签告诉 web 浏览器如何排版文本、图片等元素，并定义网页的结构和样式。

以下是 HTML 的一些基本知识点：

  • 标签（Tag）：HTML 中最基本的元素就是标签。标签通常是成对出现的，一个是开始标签，如 “<html>”，一个是结束标签，如 “</html>”。标签为浏览器渲染页面提供了结构和语义。有些 HTML 标签是自闭合的，比如 <img>, <br>, <hr>。

  • 属性（Attribute）：HTML 标签可以包含一些属性，属性可以定义参数，用来描述标签的具体内容和样式。如 标签的 src 属性用来指定资源的 URL 地址，alt 属性用来存放图片的描述文本。

  • 元素（Element）：HTML 中的元素指的是标签和它们的内容。比如 <p>Hello World!</p> 就是一个包含文本内容的 HTML 元素，其中 <p> 是一个开始标签，</p> 是一个结束标签，Hello World! 是这个元素的内容。

  • DOCTYPE：doctype 是在 HTML5 中引入的，用来告诉浏览器当前网页的文本类型。一般在 HTML 文件开头使用 <!DOCTYPE html> 来声明当前文件的文档类型为 HTML。

  • Head：head 是 HTML 中的一个部分，包含一些描述信息和元数据，不会在页面中直接显示。head 中通常包含标题（title）、字符集定义（meta charset）、CSS 样式（style）和 JavaScript 函数等等。

  • Body：body 是 HTML 的另一个部分，包含了页面的实际内容，如文本、图片、链接等。

严格来说 HTML 不是编程语言，而是标记语言。HTML 是一种用来创建 Web 页面的标准化标记语言，用于定义和描述 Web 页面中的内容和结构。与编程语言不同，HTML 主要用于定义网页文档的结构和内容，而不能用于实现复杂的逻辑和算法。

2. 编写html文本

新建一个的后缀名为html的文件，然后输入以下内容并保存：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <style>
        body {
      
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
        }
        .container {
      
            margin: 0 auto;
            padding-top: 50px;
            text-align: center;
        }
        .title {
      
            font-size: 32px;
            font-weight: bold;
            color: #333;
            margin-bottom: 20px;
            text-shadow: 1px 1px 1px #888;
        }
        .subtitle {
      
            font-size: 20px;
            font-style: italic;
            color: #666;
            margin-bottom: 50px;
            text-shadow: 1px 1px 1px #aaa;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="title">Hello World</h1>
        <h2 class="subtitle">This is a beautiful index page</h2>
        <img src="https://source.unsplash.com/1200x800/?nature" alt="Nature">
    </div>
</body>
</html>

然后你的文件夹里会有一个这样的东西：
在这里插入图片描述
双击它就会自动进入到这么一个界面：
在这里插入图片描述
到这你就大概了解html的作用了

3. 在Flask中设置访问html

上一节中我们学了如何设置路由：基于flask的web应用开发——认识@app.route
现在我们设置只要访问我们的IP+5000端口就会跳转到这个helloworld界面，以下是代码

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/IoT_H2')
def hello_H2():
    return "Hello,IoT_H2"

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

现在运行你的代码，然后访问：
在这里插入图片描述

如下，注意！！！现在是通过网络访问，而不是本地访问了：
在这里插入图片描述

其实处在同一局域网下的设备也是可以访问的，你可以先查看本机IP：
在这里插入图片描述
记录下来，我的是：

192.168.31.58

然后我在地址栏输入192.168.31.58:5000，进入的就是我的主页。

你可以玩玩室友的电脑，或者用自己的手机做测试，前提条件是你必须 与手机连接同一wifi。

4. 实现点击跳转

可以使用html的<button>标签和<form>标签画出按钮，然后进行页面的跳转，下面这段html将产生一个替换按钮，它使用到了css来布局：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>IoT_H2的导航页面</title>
  <style>
  body {
      
    background-color: #2f3542;
    font-family: Arial, sans-serif;
  }
  h1 {
      
    color: white;
    text-align: center;
  }
  .button {
      
    background-color: #ff9f43;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: auto;
    margin-top: 50px;
    border-radius: 10px;
    transition: background-color 1s ease, border-radius 1s ease;
  }
  .button:hover {
      
    background-color: #2998ff;
    border-radius: 20px;
  }
  </style>
</head>
<body>

  <h1>IoT_H2的导航页面！</h1>

  <button class="button" onclick="location.href='https://www.baidu.com/'">去百度</button>

</body>
</html>

在这里插入图片描述

现在点击去百度就会跳转到百度的页面：
在这里插入图片描述

我在我的公网服务器上部署了它，现在你可以通过它来访问刚刚制作的界面了，点击下方链接以进入：
IoT_H2的导航页面
在这里插入图片描述
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53381910/article/details/131021754

智能推荐

手把手教你安装Eclipse最新版本的详细教程 （非常详细，非常实用）_eclipse安装教程-程序员宅基地

文章浏览阅读4.4k次，点赞2次，收藏16次。写这篇文章的由来是因为后边要用这个工具，但是由于某些原因有部分小伙伴和童鞋们可能不会安装此工具，为了方便小伙伴们和童鞋们的后续学习和不打击他们的积极性，因为80%的人都是死在工具的安装这第一道门槛上，这门槛说高也不高说低也不是太低。所以就抽时间水了这一篇文章。_eclipse安装教程

分享11个web前端开发实战项目案例+源码_前端项目实战案例-程序员宅基地

文章浏览阅读4.1w次，点赞12次，收藏193次。小编为大家收集了11个web前端开发，大企业实战项目案例+5W行源码！拿走玩去吧！1）小米官网项目描述：首先选择小米官网为第一个实战案例，是因为刚开始入门，有个参考点，另外站点比较偏向目前的卡片式设计，实现常见效果。目的为学者练习编写小米官网，熟悉div+css布局。学习资料的话可以加下web前端开发学习裙：600加上610再加上151自己去群里下载下。项目技术：HTML+CSS+Div布局2）迅雷官网项目描述：此站点特效较多，所以通过练习编写次站点，学生可以更多练习CSS3的新特性过渡与动画的实_前端项目实战案例

计算质数-埃里克森筛法（间隔黄金武器）-程序员宅基地

文章浏览阅读73次。素数，不同的质数，各种各样的问题总是遇到的素数。以下我们来说一下求素数的一种比較有效的算法。就是筛法。由于这个要求得1-n区间的素数仅仅须要O（nloglogn）的时间复杂度。以下来说一下它的思路。思路：如今又1-n的数字。素数嘛就是除了1和本身之外没有其它的约数。所以有约数的都不是素数。我们从2開始往后遍历，是2的倍数的都不是素数。所以我们把他们划掉然后如...

探索Keras DCGAN：深度学习中的创新图像生成-程序员宅基地

文章浏览阅读532次，点赞9次，收藏14次。探索Keras DCGAN：深度学习中的创新图像生成项目地址:https://gitcode.com/jacobgil/keras-dcgan在数据驱动的时代，图像生成模型已经成为人工智能的一个重要领域。其中，Keras DCGAN 是一个基于 Keras 的实现，用于构建和训练 Deep Convolutional Generative Adversarial Networks（深度卷积生...

org.apache.ibatis.binding.BindingException: Invalid bound statement (not found):_spring-could org.apache.ibatis.binding.bindingexce-程序员宅基地

文章浏览阅读116次。今天在搭建springcloud项目时，发现如上错误，顺便整理一下这个异常：1. mapper.xml的命名空间（namespace）是否跟mapper的接口路径一致<mapper namespace="com.baicun.springcloudprovider.mapper.SysUserMapper">2.mapper.xml接口名是否和mapper.java接..._spring-could org.apache.ibatis.binding.bindingexception: invalid bound state

四种高效数据库设计思想——提高查询效率_数据库为什么能提高效率-程序员宅基地

文章浏览阅读1.1k次。四种高效数据库设计思想——提高查询效率：设计数据库表结构时，我们首先要按照数据库的三大范式进行建立数据。1. 1NF每列不可拆分2. 2NF确保每个表只做一件事情3. 3NF满足2NF，消除表中的依赖传递。三大范式的出现是在上世纪70年代，由于内存资源比较昂贵，所以严格按照三大范式进行数据库设计。而如今内存变得越来越廉价，在考虑效率和内存的基础上我们可以做出最优选择以达到最高效率。_数据库为什么能提高效率

随便推点

HTML标签分类及转义字符_ol是单标记还是双标记-程序员宅基地

文章浏览阅读302次。一. HTML标签分类1.根据标签个数分类。 单标签：只有一个标签。 <br>, <hr>,<img>,<meta>, 实现一个特定的功能。 双标签：既有开始标签，也有结束标签。 Html,head,Body,title,h1~h6，p,a,ul,li,ol,strong,em。2.根据标签特性分类（网页效果）。 2.1行属性..._ol是单标记还是双标记

什么是配置_基于配置是什么意思-程序员宅基地

文章浏览阅读1.6k次。应用程序在启动和运行的时候往往需要读取一些配置信息，配置基本上伴随着应用程序的整个生命周期，比如：数 据库连接参数、启动参数等。配置主要有以下几个特点：配置是独立于程序的只读变量配置对于程序是只读的，程序通过读取配置来改变自己的行为，但是程序不应该去改变配置配置伴随应用的整个生命周期配置贯穿于应用的整个生命周期，应用在启动时通过读取配置来初始化，在运行时根据配置调整行为。比如：启动时需要读取服务的端口号、系统在运行过程中需要读取定时策略执行定时任务等。配置可以有多种加载方式常见的有程序内部_基于配置是什么意思

二、使用GObject——一个简单类的实现-程序员宅基地

文章浏览阅读170次。Glib库实现了一个非常重要的基础类--GObject，这个类中封装了许多我们在定义和实现类时经常用到的机制： 引用计数式的内存管理 对象的构造与析构 通用的属性（Property）机制 Signal的简单使用方式 很多使用GObject..._

golang 定时任务处理-程序员宅基地

文章浏览阅读6.3k次，点赞2次，收藏9次。在 golang 中若写定时脚本，有两种实现。一、基于原生语法组装func DocSyncTaskCronJob() { ticker := time.NewTicker(time.Minute * 5) // 每分钟执行一次 for range ticker.C { ProcTask() }}func ProcTask() { log.Println("hello world")}二、基于 github 中封装的 cron 库实现package taskimport (_golang 定时任务

VC获取精确时间的方法_vc 通过线程和 sleep 获取精准时间-程序员宅基地

文章浏览阅读2.1k次。 来源:http://blog.csdn.net/clever101/archive/2008/10/18/3096049.aspx 声明：本文章是我整合网上的资料而成的，其中的大部分文字不是我所为的，我所起的作用只是归纳整理并添加我的一些看法。非常感谢引用到的文字的作者的辛勤劳动，所参考的文献在文章最后我已一一列出。 对关注性能的程序开发人员而言，一个好的计时部件既是益友，也_vc 通过线程和 sleep 获取精准时间

wml入门-程序员宅基地

文章浏览阅读58次。公司突然说要进行wap开发了，以前从没了解过，但我却异常的兴奋，因为可以学习新东西了，呵呵，我们大家一起努力吧。首先说说环境的搭建。可以把.wml的文件看做是另一种的html进行信息的展示，但并不是所有的浏览器都支持，好用的有Opera，还有WinWap。编写wml文件语法比较严格，不好的是我还没有找到好的提示工具，就先用纯文本吧。我找到了一个很好的学习网站：http://w3sc..._winwap学习

推荐文章

热门文章

相关标签