1 快速前端开发

笛秋白2024-01-10 23:16

1 前端开发

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

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

1.快速开发网站

复制代码 
pip install flask
python 复制代码 
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()

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

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

    复制代码 
    浏览器可以识别很多标签+数据，例如：
	<h1>中国</h1>   						->  浏览器看见加大加粗
	<span style='color:red;'>联通</span>  ->  浏览器看见字体变红色
	
如果我们能把浏览器能识别的所有的标签都学会，我们在网站就可以控制页面到底长什么样子。

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

python 复制代码 
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）

html 复制代码 
<meta charset="UTF-8">

2.2 title（head）

html 复制代码 
<head>
    <meta charset="UTF-8">
    <title>我的联通</title>
</head>

2.3 标题

html 复制代码 
<!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

html 复制代码 
<div>内容</div>

<span>asdfa</span>

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

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

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

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

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

2.4.5 超链接

html 复制代码 
跳转到其他网站
<a href="http://www.chinaunicom.com.cn/about/about.html">点击跳转</a>
html 复制代码 
跳转到自己网站其他的地址

<a href="http://127.0.0.1:5000/get/news">点击跳转</a>
<a href="/get/news">点击跳转</a>
html 复制代码 
# 当前页面打开
<a href="/get/news">点击跳转</a>

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

2.4.6 图片

html 复制代码 
<img src="图片地址" />
html 复制代码 
直接显示别人的图片地址（防盗链）：
<img src="https://pic4.zhimg.com/v2-b23f984c2aeaa7bed12e890b4338d499_720w.jpg" />
html 复制代码 
<img src="自己图片的地址" />
显示自己的图片：
	- 自己项目中创建：static目录，图片要放在static
	- 在页面上引入图片
	    <img src="/static/wbq.png" />

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

html 复制代码 
<img src="图片地址" style="height:100px; width:200px;" />
<img src="图片地址" style="height:10%; width:20%;" />

小结

  • 学习的标签

    html 复制代码 
    <h1></h1>
<div></div>
<span></span>
<a></a>
<img />

  • 划分

    复制代码 
    - 块级标签
	<h1></h1>
	<div></div>
- 行内标签
	<span></span>
    <a></a>
    <img />

  • 嵌套

    html 复制代码 
    <div>
    <span>xxx</span>
    <img />
    <a></a>
</div>

案例：商品列表

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

<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 列表

html 复制代码 
<ul>
    <li>中国移动</li>
    <li>中国联通</li>
    <li>中国电信</li>
</ul>
html 复制代码 
<ol>
    <li>中国移动</li>
    <li>中国联通</li>
    <li>中国电信</li>
</ol>

2.4.8 表格

html 复制代码 
<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>  <td>郭智</td>  <td>19</td>    </tr>
        <tr>  <td>14</td>  <td>电摩</td>  <td>19</td>    </tr>
    </tbody>
</table>

2.4.9 input系列（7个）

html 复制代码 
<input type="text" />
<input type="password">    
<input type="file"> 

<input type="radio" name="n1">男
<input type="radio" name="n1">女

<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox">乒乓球
<input type="checkbox">棒球

<input type="button" value="提交">  -->普通的按钮
<input type="submit" value="提交">  -->提交表单

2.4.10 下拉框

html 复制代码 
<select>
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
</select>

<select multiple>
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
</select>

2.4.11 多行文本

html 复制代码 
<textarea></textarea>

知识点回顾和补充

  1. 网站请求的流程

  2. 一大堆的标签

    复制代码 
    h/div/span/a/img/ul/li/table/input/textarea/select

  3. 网络请求

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

      复制代码 
      浏览器会发送数据过去，本质上发送的是字符串：
"GET /explore http1.1\r\nhost:...\r\nuser-agent\r\n..\r\n\r\n"

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

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

      • GET请求【URL方法 / 表单提交】

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

          复制代码 
          https://www.sogou.com/web?query=安卓&age=19&name=xx

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

      • POST请求【表单提交】

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

案例：用户注册

  • 新创建项目

  • 创建Flask代码

    python 复制代码 
    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()

  • HTML代码

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>用户注册</h1>

<form method="post" action="/register">
    <div>
        用户名：<input type="text" name="user"/>
    </div>
    <div>
        密码：<input type="password" name="pwd"/>
    </div>
    <div>
        性别：
        <input type="radio" name="gender" value="1">男
        <input type="radio" name="gender" value="2">女
    </div>
    <div>
        爱好：
        <input type="checkbox" name="hobby" value="10">篮球
        <input type="checkbox" name="hobby" value="20">足球
        <input type="checkbox" name="hobby" value="30">乒乓球
        <input type="checkbox" name="hobby" value="40">棒球
    </div>

    <div>
        城市：
        <select name="city">
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option value="sz">深圳</option>
        </select>
    </div>

    <div>
        擅长领域：
        <select name="skill" multiple>
            <option value="100">吃饭</option>
            <option value="101">睡觉</option>
            <option value="102">打球</option>
        </select>
    </div>

    <div>
        备注：<textarea name="more"></textarea>
    </div>

    <input type="submit" value="submit按钮">
</form>

</body>
</html>

案例：登录()

见代码示例。

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

  • form标签包裹要提交的数据的标签。
    • 提交方式：method="get"
    • 提交的地址：action="/xxx/xxx/xx"
    • 在form标签里面必须有一个submit标签。
  • 在form里面的一些标签：input/select/textarea
    • 一定要写name属性 <input type="text" name="uu"/>

总结

  1. 称呼

    复制代码 
    - 浏览器能够识别的标签（不专业）
- HTML标签。

什么是是HTML？超文本传输语言（与浏览器搭配）。

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

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

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

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

3.CSS样式

css，专门用来"美化"标签。

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

3.1 快速了解

html 复制代码 
<img src="..." style="height:100px" />

<div style="color:red;">中国联通</div>

3.2 CSS应用方式

1. 在标签上
html 复制代码 
<img src="..." style="height:100px" />

<div style="color:red;">中国联通</div>
2. 在head标签中写style标签（*）
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color:red;
        }
    </style>
</head>
<body>

<h1 class='c1'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
    
</body>
</html>
3.写到文件中（*）
css 复制代码 
.c1{
    height:100px;
}

.c2{
    color:red;
}
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="common.css" />
</head>
<body>

<h1 class='c1'>用户登录</h1>
<h1 class='c2'>用户登录</h1>
<h1 class='c2'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
    
</body>
</html>
案例：flask中的应用（登录注册）

见示例：day11_account-1.zip

问题：用Flask框架开发不方便
  • 每次都需要重启
  • 规定有些文件必须要放在特定的文件夹
  • 新创建一个页面
    • 函数
    • HTML文件

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

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

3.3 选择器

  • ID选择器

    css 复制代码 
    #c1{
    
}

<div id='c1'></div>

  • 类选择器（最多）

    css 复制代码 
    .c1{
    
}

<div clss='c1'></div>

  • 标签选择器

    css 复制代码 
    div{
    
}

<div>xxx</div>

  • 属性选择器

    css 复制代码 
    input[type='text']{
	border: 1px solid red;
}
.v1[xx="456"]{
	color: gold;
}
    html 复制代码 
    <input type="text">
<input type="password">

<div class="v1" xx="123">s</div>
<div class="v1" xx="456">f</div>
<div class="v1" xx="999">a</div>

  • 后代选择器

    css 复制代码 
    .yy li{
    color: pink;
}
.yy > a{
    color: dodgerblue;
}
    html 复制代码 
    <div class="yy">
    <a>百度</a>
    <div>
        <a>谷歌</a>
    </div>
    <ul>
        <li>美国</li>
        <li>日本</li>
        <li>韩国</li>
    </ul>
</div>

关于选择器：

复制代码 
多：类选择器、标签选择器、后代选择器
少：属性选择器、ID选择器

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

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: red;
            border: 1px solid red;
        }
        .c2{
            font-size: 28px;
            color: green;
        }
    </style>
</head>
<body>
    <div class="c1 c2">中国联通</div>
</body>
</html>

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

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>

3.4 样式

1. 高度和宽度
css 复制代码 
.c1{
    height: 300px;
    width: 500px;
}

注意事项：

  • 宽度，支持百分比。
  • 行内标签：默认无效
  • 块级标签：默认有效（霸道，右侧区域空白，也不给你占用）
2. 块级和行内标签
  • 块级
  • 行内
  • css样式：标签 -> display:inline-block

示例：行内&块级特性

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            display: inline-block;

            height: 100px;
            width: 300px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <span class="c1">中国</span>

    <span class="c1">联通</span>

    <span class="c1">联通</span>

    <span class="c1">联通</span>
</body>
</html>

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

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
    <div style="display: inline;">中国</div>
    <span style="display: block;">联通</span>
</body>
</html>

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

3.字体设置
  • 颜色
  • 大小
  • 加粗
  • 字体格式
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: #00FF7F;
            font-size: 58px;
            font-weight: 600;
            font-family: Microsoft Yahei;
        }
    </style>
</head>
<body>
    <div class="c1">中国联通</div>
    <div>中国移动</div>
</body>
</html>
4.文字对齐方式
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>
5.浮动
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <span>左边</span>
        <span style="float: right">右边</span>
    </div>
</body>
</html>

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

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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 class="item"></div>
    </div>
</body>
</html>

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

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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 class="item"></div>
        <div style="clear: both;"></div>
    </div>
    <div>你哦啊呀</div>
</body>
</html>
6.内边距

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

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>
7.外边距

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

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="height: 200px;background-color: dodgerblue;"></div>
<div style="background-color: red;height: 100px;margin-top: 20px;"></div>
</body>
</html>

总结

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

    html 复制代码 
    body{
	margin: 0;
}

  • 内容居中

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

      html 复制代码 
      <div style="width: 200px; text-align: center;">武沛齐</div>

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

      html 复制代码 
      .container{
    width: 980px;
    margin: 0 auto;
}

<div class="container">
	adfasdf
</div>

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

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

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

  • 关于布局不知如何下手。

相关推荐
用户461169657285 分钟前
网站 HTTPS 不稳定？证书排查指南
前端
高晶12 分钟前
Android 通讯录应用开发实战：从零搭建 SQLite 数据持久化完整项目
android·设计模式·前端框架
n876517 分钟前
Playwright Java WEB UI 自动化实现框架与逻辑
java·前端·ui
keyipatience19 分钟前
TypeScript学习（1）
前端·javascript·学习·typescript·html·css3
xifangge20251 小时前
基于 JavaScript 实现 CNC 数控切削参数与螺纹公差纯前端核算引擎
开发语言·前端·javascript
wangruofeng1 小时前
2026 Web 技术选型指南，AI 时代如何选择适合项目的技术栈
前端·aigc·ai编程
honkun61 小时前
vue 表格组件 vxe-table 修改滚动条样式，修改滚动条样式，统一宽度、颜色与自动隐藏
前端·javascript·vue.js
爱勇宝2 小时前
研究数字孪生的这半年，做了个 Demo，也有了一些新想法
前端·程序员
不可能片场2 小时前
工程实践 一个缓存把选片从十分钟压到一分钟
前端·electron
前端小万2 小时前
探索副业五个月，最终以放弃告终
前端·后端·面试
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02如何新建文件夹？ 电脑新建文件夹的4种方法03历年考研数学一、数学二、数学三真题试卷及答案PDF04GitHub 镜像站点05「全语录+省流版」邵艾伦 × 孙宇晨：聊风口、聊个人IP、聊年轻人如何抓住 AI 时代的机会06几个好用的ip纯净度检测网站07昇腾910B系列芯片完全指南：四款型号对比、服务器选型与大模型部署实战08苹果iPA游戏软件资源下载网站09乙二醇水溶液物性参数10Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）