web开发全家桶（django+前端+数据库）

目的: 开发一个平台

前端开发: HTML CSS JavaScript

接收请求并处理

Mysql数据库: 存储数据

快速上手:

基于Flask Web框架快速搭建一个网站

深入学习:

基于Django框架

1.快速开发网站

1.1 Flask web 框架安装

python 安装 Flask web 框架

python 复制代码

pip install flask

创建一个名为web.py的python文件

python 复制代码

from flask import Flask

app = Flask(__name__)

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

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5100, debug=False)

1.2返回html

引入templates模板，返回html方式

python 复制代码

from flask import Flask, render_template

app = Flask(__name__)

# 创建了网址 /show/info 和 函数index 的对应关系
# 以后用户在浏览器上访问 /show/info, 网站自动执行
@app.route("/show/info")
def index():
    # 默认去当前目录的 templates 文件夹中找
    return render_template("index.html")

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5100, debug=False)

创建文件夹templates，放入其中html文件，html文件内容如下

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>中国联通</h1>
</body>
</html>

1.3分级标题

浏览器能识别的标签，放在head中

<title>Title</title>表示开头

python 复制代码

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
</body>

2.4 div和span标签

html 复制代码

<div>内容</div>

<span>内容</span>

div: 占一整行(块级标签)
span: 用多少占多少(行内标签/内联标签)
- 两个 span 标签不在同一行,页面显示时会在同一行,中间以一个空格分隔
- 两个 span 标签在同一行,页面显示时会在同一行,中间没有空格,连着2.5 超链接

2.5 超链接

可以选择跳转自己网站的地址,或者跳转外部的网站

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的联通</title>
</head>
<body>
    <a href="/get/news">点击跳转自己的网站</a></br>
    <a href="http://www.baidu.com">点击跳转别人的网站百度</a>
</body>
</html>

2.6图片

html 复制代码

<body>
    <h1>我是内部链接</h1>
    <img src="https://t7.baidu.com/it/u=848096684,3883475370&fm=193&f=GIF"/>
</body>