最近在学武沛齐老师的Django开发项目，学习之余整理了笔记，有兴趣的同学可以跟着此笔记来同步辅助学习。

另附上课程链接：00 课程介绍_哔哩哔哩_bilibilihttp://www.bilibili.com/video/BV1rT4y1v7uQ?p=1&vd_source=95365bd1c5a79f54e63e9e08f3d6ce1b

一.HTML

目的:开发一个平台(网站)
    -前端开发︰HTML、css、Javascript
    -web框架:接收请求并处理
    -MysQL数据库:存储数据地方

快速上手:
基于Flask web框架让你快速搭建一个网站出来。

深入学习:
基于Django框架(主要)

1.快速开发网站

pip install flask

# 基于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框架为了让咱们写标签方便，支持将字符串写入到文件里

(1).增加了render_template，用来访问文件

# 增加了render_template，用来访问文件
from flask import Flask,render_template

app = Flask(__name__)

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

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

(2).创建templates目录，新建index.html

    
    


    
中国电信
    
中国移动
    
中国联通

运行结果：

2.浏览器能识别的标签

2.1编码(head中)

2.2title(head中)

2.3标题

1级标题
2级标题
3级标题
4级标题
5级标题
6级标题

2.4div和span

1.div：占一整行。【块级标签】

    
    


有什么好玩的网游
穿越火线永远滴神

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

    
    


111
222

注意：这两个标签比较素+CSS样式，可以实现丰富的功能

2.5超链接 

1.跳转到其他网站

NBA新闻

2.跳转到自己的网站

CBA新闻

3.target=”_blank新建一个页面跳转

# 当前页面跳转
CBA新闻

# 跳转到新建页面
CBA新闻

 此时需要修改web.py内容，然后在同目录下新建一个news.html

# 基于flask框架编写网站
from flask import Flask,render_template

app = Flask(__name__)

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

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

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

 2.6图片

直接显示别人的图片(防盗链)

显示自己的图片需要在同目录下新建static，然后在static中放入图片即可
显示自己的图片小米su7

关于设置图片的宽度和高度
 # 设置高度和宽度为500像素
 # 设置图片大小为原来的30%

小结：

块级标签：

               

               

行内标签：
               

               

               

2.7列表 

无序列表格式

    

    

    

    

    

有序列表格式

    

    

    

    

    

2.8表格

表格格式
 #表头
     #表内容
     #行内容
         #行内容
         #行内容
         #行内容
        

案列：用户列表

    
    


    
用户列表
    

        

            

                
ID
                
头像
                
name
                
email
                
更多信息
                
操作
            
        
        

            

                
1
                

                    
                
                
ty
                
666@qq.com
                

                    
                        点击查看详情
                    
                
                

                    编辑
                    删除
                
            
            

                
1
                

                    
                
                
ty
                
666@qq.com
                

                    
                        点击查看详情
                    
                
                

                    编辑
                    删除
                
            
            

                
1
                

                    
                
                
ty
                
666@qq.com
                

                    
                        点击查看详情
                    
                
                

                    编辑
                    删除
                
            
            

                
1
                

                    
                
                
ty
                
666@qq.com
                

                    
                        点击查看详情
                    
                
                

                    编辑
                    删除
                
            
            

                
1
                

                    
                
                
ty
                
666@qq.com
                

                    
                        点击查看详情
                    
                
                

                    编辑
                    删除
                
            
        
    

 2.9input系列

    
输出框
        
        
        

    
单选框
    man
    women

    
多选框
    1
    2
    3
    4

    
按钮
     # 普通按钮
     # 提交表单

2.10 下拉框

    
下拉框
    
        北京
        上海
        广州
        深圳
    

    
多选下拉框
    
        北京
        上海
        广州
        深圳
    

2.11多行文本

    
多行文本
    

案例：用户注册1

    
    


    
用户注册
    
        账号：
    
    
        密码：
    
    
        性别：
             男
             女
    
    
        爱好：
             篮球
             游泳
             羽毛球
             乒乓球
    
    
        城市：
        
            上海
            北京
            广州
            深圳
        
    
    
        擅长领域：
        
            打游戏
            睡觉
            吃饭
            泡妞
        
    
    
        备注：
        
    
    
        
        
    

知识点回顾和补充

1.网站请求的流程

2.一大堆的标签

h/div/span/a/img/ul/li/table/input/textarea/select

 3.网络请求

在浏览器的URL中写入地址，点击回车，访问。
    浏览器会发送数据过去，本质上发送的是字符串:
    "GET/explore http1.1\rlnhost:. . .\r
user-agentlr
..lr
\r
"
    浏览器会发送数据过去，本质上发送的是字符串:
    "PosT /explore http1.1\rlnhost:...\r
user-agentlr
..lr
lr
数据库"

浏览器向后端发送请求时

GET请求【url方法，表单提交】
现象:GET请求、跳转、向后台传入数据数据会拼接在URL上。
https : / / www.sogou.com/web?query=安卓&age=19&name=xX
注意:GET请求数据会在URL中体现。

POST请求【表单提交】
现象:提交数据不在URL中而是在请求体中。

页面上的数据，想要提交到后台:
form标签包裹要提交的数据的标签。

        提交方式:method="get"
        提交的地址:action="/ xxx/ xxx/xx"

        在form标签里面必须有一个submit标签。

在form里面的一些标签: input/select/textarea
      一定要写name属性

案例：用户注册2

创建新代码

创建Flask代码

from flask import Flask,render_template,request

app=Flask(__name__)

@app.route('/register',methods=['GET'])
def register():
        return render_template('register.html')

@app.route('/post/reg',methods=['POST'])
def post_register():
        user = request.form.get("user")
        pwd = request.form.get("pwd")
        gender = request.form.get("gender")
        hobby_list = request.form.getlist("hobby")
        city = request.form.get("city")
        skill_list = request.form.getlist("skill")
        more = request.form.get("more")
        print(user, pwd, gender, hobby_list, city, skill_list, more)
        # 将用户信息写入文件中实现注册、写入到excel中实现注册、写入数据库中实现注册

        # 2.给用户再返回结果
        return "注册成功"



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

创建html代码

    
    


    
用户注册
    
        
            账号：
        
        
            密码：
        
        
            性别：
            男
            女
        
        
            爱好：
            吃
            喝
            玩
            乐
        
        
            城市：
            
                北京
                上海
                深圳
            
        
        
            擅长领域：
            
                游戏
                体育
                泡妞
            
        
        
            备注：