pythonWeb～壹～前端知识+Flask框架

原创

已于 2024-12-10 10:49:00 修改 · 1k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#python

于 2024-12-02 22:30:06 首次发布

第一章前端知识+Flask框架

目的：
	开发一个平台（网站）

技术战：
	- 前端开发：HTML、CSS、JavaScript
	- Web框架：接收请求并处理
	- MySQL数据库：存储数据地方

快速入门：
	基于Flask Web框架快速搭建一个网站。
	
进阶学习：
	基于Django框架（主要）

1.快速开发网站

# 安装flask
pip install flask

直接返回字符串信息

from flask import Flask

app = Flask(__name__)


# 创建了网址 /show/info 和 函数index 的对应关系
# 以后用户在浏览器上访问 /show/info，网站自动执行 index
@app.route("/show/info")
def index():
    return "中国联通"


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

Flask框架支持通过模版返回信息

  from flask import Flask,render_template
  
  app = Flask(__name__)
  
  @app.route("/show/info")
  def index():
      # Flask内部会自动打开这个文件，并读取内容，将内容给用户返回。
      # 默认：去当前项目目录的templates文件夹中找。
      return render_template("index.html")
  
  if __name__ == '__main__':
      app.run()

2.浏览器能识别的标签

2.1 设置编码（head）

<meta charset="UTF-8">

2.2 设置title（head）

<head>
    <meta charset="UTF-8">
    <title>我的联通</title>
</head>

在这里插入图片描述

2.3 标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的联通</title>
</head>
<body>
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
</body>
</html>

2.4 div和span

<div>内容</div>

<span>asdfa</span>

div，一个人占一整行。【块级标签】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的联通</title>
</head>
<body>
    <div>山东蓝翔</div>
    <div>挖掘机哪家强</div>
</body>
</html>

span，自己多大占多少。【行内标签、内联标签】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的联通</title>
</head>
<body>
    <span>山东蓝翔</span>
    <span>挖掘机哪家强</span>
</body>
</html>

注意：这两个标签比较素 + CSS样式。

示例

在这里插入图片描述

2.4.5 超链接

跳转到其他网站
<a href="http://www.chinaunicom.com.cn/about/about.html">点击跳转</a>

跳转到自己网站其他的地址
<a href="http://127.0.0.1:5000/get/news">点击跳转</a>
<a href="/get/news">点击跳转</a>

# 当前页面打开
<a href="/get/news">点击跳转</a>

# 新的Tab页面打开
<a href="/get/news" target="_blank">点击跳转</a>

2.4.6 图片

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

直接显示别人的图片地址（防盗链）：
<img src="https://pic4.zhimg.com/v2-b23f984c2aeaa7bed12e890b4338d499_720w.jpg" />

<img src="自己图片的地址" />
显示自己的图片：
	- 自己项目中创建：static目录，图片要放在static
	- 在页面上引入图片
	    <img src="/static/wbq.png" />

关于设置图片的高度和宽度

按像素设置
<img src="图片地址" style="height:100px; width:200px;" />
按比例射者
<img src="图片地址" style="height:10%; width:20%;" />

小结

html的标签

<h1></h1>
<div></div>
<li></li>
<span></span>
<a></a>
<img />
<input />

划分

- 块级标签
	<h1></h1>
	<div></div>
	<li></li>
- 行内标签
	<span></span>
    <a></a>
    <img />
    <input />

嵌套

<div>
    <span>xxx</span>
    <img />
    <a></a>
</div>

案例：商品列表（超链接+图片）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>商品列表</h1>

<!--【target="_blank"】 表示超链接打开新的页面-->
<a href="https://www.mi.com/redmiwatch2" target="_blank">
    <img src="/static/a1.jpeg" style="width: 150px">
</a>

<a href="https://www.mi.com/shouhuan6/nfc" target="_blank">
    <img src="/static/a2.jpeg" style="width: 150px">
</a>

<a href="https://www.mi.com/xiaomibuds3pro" target="_blank">
    <img src="/static/a3.jpeg" style="width: 150px">
</a>

</body>
</html>

2.4.7 列表

<!--    列表按点的形式展示-->
<ul>
    <li>中国移动</li>
    <li>中国联通</li>
    <li>中国电信</li>
</ul>

<!--    列表按数字的形式展示-->
<ol>
    <li>中国移动</li>
    <li>中国联通</li>
    <li>中国电信</li>
</ol>

示例
在这里插入图片描述

2.4.8 表格

<table>
    <thead>
    	<tr>  <th>ID</th>  <th>姓名</th>   <th>年龄</th>  </tr>
    </thead>
    <tbody>
    	<tr>  <td>10</td>  <td>武沛齐</td>  <td>19</td>   </tr>
        <tr>  <td>11</td>  <td>吴阳军</td>  <td>19</td>   </tr>
        <tr>  <td>12</td>  <td>刘东</td>  <td>19</td>    </tr>
        <tr>  <td>13</td