Python-Django学习笔记1-前端开发（基础标签）
Flask-Test01
目的：开发一个平台（网站）
- 前端开发：HTML、CSS、JavaScript
- Web框架：接受请求并处理
- MySQL数据库：存储数据的地方
快速上手：
- 基于Flask Web框架让你快速搭建一个网站出来。
深入学习：
- 基于Django框架（主要）
1.快速开发网站
pip install flask ----安装flask
from flask import Flask
# 实例化Flask对象
app = Flask(__name__)
# 创建了网址 /show/info 和函数 index 的对应关系
# 以后用户在浏览器上访问 /show/info 顶站，会调用 index 方法
@app.route("/show/info")
def index():
return "中国联通"
if __name__ == "__main__":
app.run()
- Flask框架支持将HTML写入文件里
from flask import Flask,render_template
# 实例化Flask对象
app = Flask(__name__)
# 创建了网址 /show/info 和函数 index 的对应关系
# 以后用户在浏览器上访问 /show/info 顶站，会调用 index 方法
@app.route("/show/info")
def index():
# return "中国联通"
# return "中<h1>国</h1><span style='color:red'>联通</span>"
#Flask内部会自动打开这个文件，并读取内容，将内容给用户返回
# 默认：去当前项目目录的templates文件夹中找
return render_template("index.html")
if __name__ == "__main__":
app.run()
-------
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>中国联通</h1>
<h3>广西联通</h3>
</body>
</html>
2. HTML标签
2.1 编码(要写在head里面)
<head>
<meta charset="UTF-8">
</head>
2.2 title(要写在head里面)
<head>
<meta charset="UTF-8">
<title>我的联通</title>
</head>
2.3 标题
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
2.4 div和span（可以+CSS样式实现更丰富的内容）
<div>内容</div>
<span>asdfga</span>
<div>
<span style="color: red;">时间：</span>
<span>2023/9/2</span>
</div>
- div，占一整行；【块级标签】
- span，自己多大就占多少；【行内标签/内联标签】
2.4.5 超链接
# 跳转到其他网站
<a href="https://www.baidu.com">点击跳转</a>
# 跳转到自己的网站的其他地址
<a href="http://127.0.0.1:5000/get/news">点击跳转</a>
<a href="/get/news">点击跳转</a>
2.4.6 图片
<img src="图片地址"/>
<img src="https://picx.zhimg.com/v2-3395e8edc2d43140563d5c7b69fd8b63_1440w.jpg?source=7e7ef6e2" />
<img src="自己的图片地址"/>
- 在自己项目中创建：static目录，图片要放在这个目录中
- 在页面上引入图片
<img src="/static/test01.jpg" />
- 设置图片高度和宽度
```
```
小结
- 学习的标签
<h1></h1>
<div></div>
<span></span>
<a></a>
<img />
- 划分
- 块级标签
<h1></h1>
<div></div>
- 行内标签
<span></span>
<a></a>
<img />
- 嵌套
<div>
<span></span>
<img />
<a></a>
</div>
- 图片链接
<a href="https://www.mi.com/shop/buy/detail?product_id=19054" target="_blank">
<img src="/static/a3.jpg" />
</a>
2.4.7 列表
- 无序列表
<ul>
<li>中国移动</li>
<li>中国联通</li>
<li>中国电信</li>
</ul>
- 有序列表
<ol>
<li>中国移动</li>
<li>中国联通</li>
<li>中国电信</li>
</ol>
2.4.8 表格标签
<table border="1">
<thead>
<tr> <th>ID</th> <th>姓名</th> <th>性别</th> </tr>
</thead>
<tbody>
<tr> <td>10</td> <td>徐泽林</td> <td>男</td> </tr>
<tr> <td>11</td> <td>XXX</td> <td>女</td> </tr>
<tr> <td>12</td> <td>刘东</td> <td>男</td> </tr>
<tr> <td>13</td> <td>自行车</td> <td>女</td> </tr>
<tr> <td>12</td> <td>徐泽林</td> <td>男</td> </tr>
</tbody>
</table>
