#视频链接：https://www.bilibili.com/video/BV1rT4y1v7uQ?p=1&vd_source=1717654b9cbbc6a773c2092070686a95

前端开发

目的：开发一个平台（网站）
	- 前端开发：HTML、CSS、JavaScript
	- Web框架：接收请求并处理
	- MySQL数据库：存储数据的地方

快速上手：
	基于Flask Web框架让你快速搭建一个网站出来。
	
深入学习：
	基于Django框架（主要）
1
2
3
4
5
6
7
8
9
10

1、快速开发网站

pip install flask
1

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()
1
2
3
4
5
6
7
8
9
10
11
12
13
14

咱们的网站与别人的不一样

• 别人的好看 vs 咱们的难看

  浏览器可以识别很多标签+数据，例如：
  	
  中国
                                           ->  浏览器看见加大加粗
  	联通                  ->  浏览器看见字体变红色
  	
  如果我们能把浏览器能识别的所有标签都学会，我们在网站就可以控制页面到底长什么样子
  1
  2
  3
  4
  5

• Flask框架为了让咱们写标签方便，支持将字符串写入到文件里。

• from flask import Flask, render_template
  
  app = Flask(__name__)
  
  
  # 创建了网址 /show/info 和 函数index的对应关系
  # 以后用户在浏览器上访问 /show/info，网站自动执行index
  @app.route('/show/info')
  def index():
      # return "中国联通"
      # Flask内部会自动打开这个文件，并读取内容，将内容给用户返回。
      # 默认：去当前项目目录的templates文件夹中找。
      return render_template("index.html")
  
  
  if __name__ == '__main__':
      app.run()
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17

2、浏览器能识别的标签

2.1 编码（head）

1

2.2 title(head)

    
    

1
2
3
4

2.3 标题

    
    


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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2.4 div和span

内容

asdfa
1
2
3

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

  
  
  
      
      
  
  
      
  山东蓝翔
      
  挖掘机哪家强
  
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

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

  
  
  
      
      
  
  
      山东蓝翔
      挖掘机哪家强
  
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

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

练习题

    
    


    
中国联通
        

            时间：
            2021-11-12
        
        

            展现了中国联通踔厉奋发、笃行不怠的精神面貌和奋斗姿态，团结一心、共同奋斗，以一往无前的奋斗姿态和永不懈怠的精神状态，以创新发展引领世界一流、以开放合作锻造世界一流、以卓越管理夯实世界一流，加快建设产品卓越、品牌卓著、创新领先、治理现代的世界一流企业。
        

    
广西联通
        

            时间：
            2021-11-12
        
        

            中国联合网络通信有限公司广西壮族自治区分公司成立于2001年03月27日，注册地位于南宁市青秀区金浦路8号，法定代表人为孙江山。
        


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

2.5 超链接

跳转到其他网站
点击跳转
1
2

跳转到自己网站其他的地址

点击跳转
点击跳转
1
2
3
4

# 当前页面打开
点击跳转

# 新的tab页面打开
点击跳转
1
2
3
4
5

2.6 图片

1

直接显示别人的图片地址（防盗链）：

1
2

显示自己的图片：
	- 自己项目中创建：static目录，图片放在static
	- 在页面上引入图片
		
1
2
3
4
5

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

1
2

小结

• 学习的标签

  
  
  
  
  
  1
  2
  3
  4
  5

• 划分

  - 块级标签
  	
  
  	
  
  - 行内标签
  	
      
      
  1
  2
  3
  4
  5
  6
  7

• 嵌套

  
  	xxx
  	
  	
  
  1
  2
  3
  4
  5

案例：商品列表

    
    


商品列表


    


    


    




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2.7 列表

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

1
2
3
4
5

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

1
2
3
4
5

运营商列表

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

运营商列表

​ 1. 中国移动

2. 中国联通
3. 中国电信
1
2

2.8 表格

	

		
 
ID
 
姓名
 
年龄
 
	
	

		
 
10
 
刘德华
 
19
 
		
 
11
 
张学友
 
19
 
		
 
12
 
黎明
 
19
 
		
 
13
 
郭富城
 
19
 
		
 
14
 
王杰
 
19
 
	

1
2
3
4
5
6
7
8
9
10
11
12

    
    


用户列表

    

    

        
ID
        
头像
        
姓名
        
邮箱
        
更多信息
        
操作
    
    

    

    

        
1
        

            
        
        
刘德华
        
休息@live.com
        

            点击查看详细
        
        

            编辑
            删除
        
    

    

        
1
        

            
        
        
刘德华
        
休息@live.com
        

            点击查看详细
        
        

            编辑
            删除
        
    

    

        
1
        

            
        
        
刘德华
        
休息@live.com
        

            点击查看详细
        
        

            编辑
            删除
        
    
        
    




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

2.9 input系列(7个)

男
女

篮球
足球
乒乓球
棒球

  --->普通的按钮

  --->提交表单
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2.10 下拉框

    北京
    上海
    深圳



    北京
    上海
    深圳

1
2
3
4
5
6
7
8
9
10
11

2.11 多行文本

1

案例：用户注册

    
    


用户注册

    用户名：



    密码：



    性别：男 女



    爱好：
    篮球
    足球
    乒乓球



    城市：
    
        北京
        上海
        深圳
    



    擅长领域：
    
        刷抖音
        看电影
        打游戏
    



    备注：
    



    
    



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

知识点回顾和补充

1. 网站请求的流程
   

2. 一大堆的标签

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

3. 网络请求

   • 在浏览器的URL中写入地址，点击回车，访问。

     浏览器会发送数据过去，本质上发送的是字符串：
     "GET /explore httpl.l\r\nhost:...\r\nuser-agent\r\n..\r\n\r\n"
     
     浏览器会发送数据过去，本质上发送的是字符串：
     "POST /explore httpl.l\r\nhost:...\r\nuser-agent\r\n..\r\n\r\n数据库"
     1
     2
     3
     4
     5

   • 浏览器向后端发送请求时

     • GET请求

       • 现象：GET请求、跳转、向后台传入数据数据会拼接在URL上。

         https://www.sogou.com/web?query=安卓&age=19&name=xx
         1

         注意：GET请求数据会在URL中体现。

     • POST请求

       • 现象：提交数据不在URL中而是在请求体中。

案例：用户注册

• 新创建项目

• 创建Flask代码

  from flask import Flask, render_template, request
  
  app = Flask(__name__)
  
  
  @app.route('/register', methods=['GET', 'POST'])
  def register():
      if request.method == 'GET':
          return render_template("register.html")
      else:
          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()
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27

• HTML代码

  
  
  
      
      
  
  
  用户注册
  
  
      
  
          用户名：
      
      
  
          密码：
      
      
  
          性别：
          男
          女
      
      
  
          爱好：
          篮球
          足球
          乒乓球
          棒球
      
      
  
          城市：
          
              北京
              上海
              深圳
          
      
      
  
          擅长领域：
          
              刷抖音
              看电影
              打游戏
          
      
      
  
          备注：
          
      
  
      
  
  
  
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54

案例：登录（）

见代码示例

页面上的数据，想要提交到后台：

• form标签包裹要提交的数据的标签

  • 提交方式：method="get"
  • 提交的地址：action="/xxx/xxx/xx"
  • 在form标签里面必须有一个submit标签

• 在form里面的一些标签：input/select/textarea

  • 一定要写name属性

总结

1. 称呼

   - 浏览器能够识别的标签（不专业）
   - HTML标签
   
   什么是HTML? 超文本传输语言（与浏览器搭配）
   1
   2
   3
   4

2. HTML标签（默认格式样式、以后通过手段可以修改）

3. HTML标签与编程语言无关

   • java + HTML
   • c# + HTML
   • php + HTML
   • python + HTML

4. 提醒：HTML标签比较多，标签还有很多很多，不必逐一学会。

CSS样式

CSS，专门用来“美化”标签。

• 基础css，写简单页面&看懂&改。
• 模板，调整和修改

3.1 快速了解

中国联通
1
2
3

3.2 css应用方式

1. 在标签上

中国联通
1
2
3

2. 在head标签中写style标签(*)

    
    
    



用户登录
用户登录
用户登录
用户登录



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

3. 写到文件中（*）

.c1{
height: 100px;
}

.c2 {
color: red;
}
1
2
3
4
5
6
7

    
    
    



用户登录
用户登录
用户登录
用户登录



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

案例：flask中的应用（登录注册）

见示例：user_register

问题：用flask框架开发不方便

• 每次都需要重启
• 规定有些文件必须要放在特定的文件夹
• 新创建一个页面
  • 函数
  • HTML文件

有没有一种方式，可以让我快速的编写前端的代码并查看效果呢，最后再讲页面集成到Flask中。

pycharm为我们提供了一张非常便捷开发前端页面的工具。

3.3 选择器

• ID选择器

  #c1{
  
  }
  
  
  1
  2
  3
  4
  5

• 类选择器（最多）

  .c1{
  
  }
  
  
  1
  2
  3
  4
  5

• 标签选择器

  div{
  
  }
  
  xxx
  1
  2
  3
  4
  5

• 属性选择器

  input[type="text"]{
  	border: 1px solid red;
  }
  .v1[xx="456"]{
  	color: gold;
  }
  1
  2
  3
  4
  5
  6

  
  
  
  s
  f
  a
  1
  2
  3
  4
  5
  6

• 后代选择器

  .yy li {
      color: pink;
  }
  .yy > a {
      color: dodgerblue;
  }
  1
  2
  3
  4
  5
  6

  "yy">
      百度
      
  
          谷歌
      
      
  
          
  美国
          
  日本
          
  韩国
      
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

关于选择器

多：类选择器、标签选择器、后代选择器
少：属性选择器、ID选择器
1
2

关于多个样式 & 覆盖的问题：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .c1{
            color: red;
            border: 1px solid red;
        }
        .c2{
            font-size: 28px;
            color: green;
        }
    style>
head>
<body>
    <div class="c1 c2">中国联通div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

补充：下面的不要覆盖我。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .c1{
            color: red !important;
            border: 1px solid red;
        }
        .c2{
            font-size: 28px;
            color: green;
        }
    style>
head>
<body>
    <div class="c1 c2">中国联通div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

3.4 样式

1.高度和宽度

.cl{
	height: 300px;
	width: 500px;
}
1
2
3
4

注意事项：

• 宽度，支持百分比。
• 行内标签：默认无效
• 块级标签：默认有效（霸道，右侧区域空白，也不给你占用）

2.块级和行内标签

• 块级
• 行内
• css样式：标签 -> display:inline-block

示例：行内&块级特性

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .c1{
            display: inline-block;
            height: 100px;
            width: 300px;
            border: 1px solid red;
        }
    style>
head>
<body>
    <span class="c1">中国span>
    <span class="c1">联通span>

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

示例：块级和行内标签的设置

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>

    style>
head>
<body>
    <div style="display: inline-block">中国div>
    <span style="display: block">联通span>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

注意：块级 + 块级&行内。

3.字体和颜色

• 颜色
• 大小
• 加粗
• 字体格式

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .c1{
            color: #00FF00;
            font-size: 58px;
            font-weight: 400;
            font-family: sans-serif;
        }
    style>
head>
<body>
    <div class="c1">中国联通div>
    <div>中国移动div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

4.文字对齐方式

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .c1{
            height: 59px;
            width: 300px;
            border: 1px solid red;
            text-align: center;  /* 水平方向居中 */
            line-height: 59px;  /* 垂直方向居中 */
        }
    style>
head>
<body>
    <div class="c1">郭智div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

5.浮动

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    <div>
        <span>左边span>
        <span style="float: right">右边span>
    div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13

div默认块级标签（霸道），如果浮动起来就不一样了。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .item{
            float: left;
            width: 280px;
            height: 170px;
            border: 1px solid red;
        }
    style>
head>
<body>
    <div>
        <div class="item">div>
        <div class="item">div>
        <div class="item">div>
        <div class="item">div>
    div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

如果你让标签浮动起来之后，就会脱离文档流。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .item{
            float: left;
            width: 280px;
            height: 170px;
            border: 1px solid red;
        }
    style>
head>
<body>
    <div style="background-color: dodgerblue">
        <div class="item">div>
        <div class="item">div>
        <div class="item">div>
        <div class="item">div>
        <div style="clear: both">div>
    div>
    <div>你好啊div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

6.内边距

内边距，我自己的内部设置一点距离。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .outer {
            border: 1px solid red;
            height: 200px;
            width: 200px;

            padding-top: 20px;
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom: 20px;
        }
    style>
head>
<body>
<div class="outer">
    <div style="background-color: gold">听妈妈的话div>
    <div>
        小朋友你是否有很多问好
    div>
div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .outer {
            border: 1px solid red;
            height: 200px;
            width: 200px;

            padding: 20px;
        }
    style>
head>
<body>
<div class="outer">
    <div style="background-color: gold">听妈妈的话div>
    <div>
        小朋友你是否有很多问好
    div>
div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .outer {
            border: 1px solid red;
            height: 200px;
            width: 200px;

            padding: 20px 10px 5px 20px;
        }
    style>
head>
<body>
<div class="outer">
    <div style="background-color: gold">听妈妈的话div>
    <div>
        小朋友你是否有很多问好
    div>
div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

7.外边距

外边距，我与别人加点距离。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    <div style="height: 200px; background-color: dodgerblue">div>
    <div style="background-color: red; height: 100px; margin-top: 20px">div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11

案例：小米商场

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        body {
            margin: 0;
        }

        .header {
            background-color: #333;
        }

        .container {
            width: 1226px;
            margin: 0 auto;
        }

        .header .menu {
            float: left;
            color: white;
        }

        .header .account {
            float: right;
            color: white;
        }

        .header a {
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
            margin-right: 10px;
        }
    style>
head>
<body>
<div class="header">
    <div class="container">
        <div class="menu">
            <a>小米商城a>
            <a>MIUIa>
            <a>云服务a>
            <a>有品a>
            <a>开放平台a>
        div>
        <div class="account">
            <a>登录a>
            <a>注册a>
            <a>消息通知a>
        div>
        <div style="clear: both">div>
    div>
div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

总结

• body标签，默认有一个边距，造成页面四边都有白色间隙，如何去除呢？

  body{
  	margin: 0;
  }
  1
  2
  3

• 内容居中

  • 文本居中，文本会在这个区域中居中。

    刘德华
    1

  • 区域居中，自己要有宽度 + margin-left:auto;margin-right:auto

    .container {
        width: 1226px;
        margin: 0 auto;
    }
    
    
    	dlksgl
    
    1
    2
    3
    4
    5
    6
    7
    8

• 父亲没有高度或没有宽度，被孩子支撑起来。

• 如果存在浮动，一定记得加入。

  

• 如果想要用别人的样式。
  

• 关于布局不知如何下手