当前位置：首页 > news >正文

系统开发 Day1

news 2025/8/11 5:41:55

前端开发

目的： 开发一个平台（网站）
- 前端开发：HTML CSS JavaScript
- web框架：接受请求和处理
- MySQL数据库：存储数据的地方快速上手：基于Flask Web框架快速搭建一个网站
深度学习：基于Django框架（主要）

1.快速开发网站

pip install flask

from flask import Flaskapp = Flask(__name__)# 创建了网址show/info和函数 index的对应关系
# 以后用户在浏览器上访问show/info，网站会自动执行 index@app.route("/show/info")
def index():return "中国联通"
if __name__ == '__main__':app.run()

网站与别人不一样：

浏览器可以识别多标签+数据 例如：<h1>中国<h1>           ->浏览器看见加大加粗<span style='color:red,'>

Flask框架为了让我们写标签方便，支持将字符串（网页返回的本质是一个字符串）写在文件里面

from flask import Flask ,render_templateapp = Flask(__name__)# 创建了网址show/info和函数 index的对应关系
# 以后用户在浏览器上访问show/info，网站会自动执行 index@app.route("/show/info")
def index():#Flask内部会自动打开文件并读取，将内容给用户返回#默认去templates文件夹中去寻找(需要自己添加，并创建html文件)return  render_template("index.html")
if __name__ == '__main__':app.run()

2.浏览器能识别的标签

2.1 编码（head)

<meta charset="UTF-8">

2.2 title(head)

<head><meta charset="UTF-8"><title>Title</title>
</head>

2.3 标题

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>学习web</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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>学习web</title>
</head>
<body><div>哈哈哈</div><div>啦啦啦啦啦</div>
</body>
</html>

div ：一个人占一整行【块级标题】
```
<div>哈哈哈</div>
```
span ：自己多大就占多少【行内标签、内联标签】
```
<span>哈哈哈</span>
```

注意:这两个标签比较素+CSS

2.5 超链接

跳转到其他网站（绝对路径）
<a href="https://www.csdn.net/">点击跳转</a>

跳转到自己的网站（相对路径）
<a href="http://127.0.0.1:5000/show/info">点击跳转</a>
简化：<a href="/show/info">点击跳转</a>

2.6 图片

<img src="图片地址"/>

<img src="自己图片地址"/>
显示自己图片：-自己的项目中创建：static目录，图片要放在里面-页面上引用图片 <img src="/static/图片名字"/>

显示别人的图片（防盗链）
<img src="图片地址"/>

设置图片的高度和宽度
<img style="height:100px;width:100px" src="图片地址"/>
<img style="height:10%;width:10%" src="图片地址"/>

小结

学习的标签

<h1></h1>
<div></div>
<span></span>
<a></a>
<img />

划分

- 块级标签<h1></h1><div></div>
- 行内标签(紧挨着放在一起)<span></span><a></a><img />

嵌套

<div><span>xxx</span><img /><a></a>
</div>

案例：商品列表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>商品名称</h1><a href="https://www.zhihu.com/" target="_blank"><img src="/static/a2.jpg" style="height:150px"></a><a href="https://www.zhihu.com/" target="_blank"><img src="/static/a1.jpg" style="height:150px"></a><a href="https://www.zhihu.com/" target="_blank"><img src="/static/a3.jpg" style="height:150px"></a>
</body>
</html>

2.7 列表

<ul><li>中国移动</li><li>中国联通</li><li>中国电信</li>
</ul>

<ol><li>中国移动</li><li>中国联通</li><li>中国电信</li>
</ol>

2.8 表格

<table border="1">(加边框)<thead><tr> <th>ID</th>    <th>姓名</th>  <th>年龄</th> </tr></thead><tbody><tr> <td>1</th>    <th>hh</th>  <th>59</th> </tr><tr> <th>2</th>    <th>dd</th>  <th>9</th> </tr><tr> <th>3</th>    <th>ww</th>  <th>5</th> </tr><tr> <th>4</th>    <th>ee</th>  <th>1</th> </tr><tr> <th>5</th>    <th>rr</th>  <th>3</th> </tr><tr> <th>6</th>    <th>tt</th>  <th>4</th> </tr></tbody>
</table>

案例：用户列表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>用户列表</h1>
<table border="1"><thead><tr><th>ID</th><th>头像</th><th>姓名</th><th>邮箱</th><th>更多信息</th><th>操作</th></tr></thead><tbody><tr><td>1</td><td><img src="/static/a1.jpg" style="height:50px"></td><td>wcx</td><td>123456@qq.com</td><td><a href="https://www.zhihu.com/">查看详细</a></td><td>编辑 删除</td></tr><tr><td>1</td><td><img src="/static/a1.jpg" style="height:50px"></td><td>wcx</td><td>123456@qq.com</td><td><a href="https://www.zhihu.com/">查看详细</a></td><td>编辑 删除</td></tr><tr><td>1</td><td><img src="/static/a1.jpg" style="height:50px"></td><td>wcx</td><td>123456@qq.com</td><td><a href="https://www.zhihu.com/">查看详细</a></td><td>编辑 删除</td></tr></tbody>
</table></body>
</html>

2.9 input系列(7个)

<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.10 下拉框

<select><option>北京</option><option>上海</option><option>深圳</option>
</select>
<select multiple>（shift多选）<option>北京</option><option>上海</option><option>深圳</option>
</select>

2.11 多行文本

<textarea></textarea>

案例：用户注册

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>用户注册</h1>
<div>用户名: <input type="text">
</div>
<div>密码:  <input type="password">
</div>
<div>性别: <input type="radio" name="n1">男<input type="radio" name="n1">女
</div>
<div>爱好： <input type="checkbox">篮球<input type="checkbox">乒乓球<input type="checkbox">羽毛球
</div>
<div>城市：<select ><option >北京</option><option >上海</option><option >重庆</option></select>
</div>
<div>备注：<textarea></textarea>
</div>
<div><input type="button" value="提交">
</div>
</body>
</html>

知识点回顾和补充

网站请求流程

一大堆标签

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

3.网络请求

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

浏览器会发送数据过去，本质上发送的是字符串：
"GET/explore httpxxxxxxxxxxxxxxxxx"
"POST/explore httpxxxxxxxxxxxxxxxxxxxxxxx"

浏览器向后端发送请求
- GET请求【URL访问/表单提交】
  - 现象：跳转、向后台传入数据会拼接在URL上
```
https://www.sogou.com/web?query=%E5%AE%89%E5%8D%93&_ast=1754632236&_asf=www.sogou.com
```
    注意：GET请求的数据会在URL上体现
- POST请求【表单提交】
  - 现象：提交数据不在URL中而是在请求体中

案例：用户注册

新创建项目
创建Flask代码

from flask import Flask, render_template, requestapp = 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.get("hobby")city = request.form.get("city")more = request.form.get("more")return "注册成功"if __name__ == '__main__':app.run()

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="20">篮球<input type="checkbox" name="hobby" value="30">乒乓球<input type="checkbox" name="hobby" value="40">羽毛球
</div><div>城市：<select name="city"><option value="122">北京</option><option value="123">上海</option><option value="124">重庆</option></select>
</div><didv>备注：<textaera name="more"></textaera></didv><input type="submit" value="submit提交">
</form></body>
</html>

form标签包裹要提交的数据
- 提交方式：method=“”
- 提交地址：action=“”
- 在form标签里面必须有一个submit
在form里面的一些标签：input/select/textarea
- 一定要写name属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>用户注册</h1>
<div><form method="post" action="/post/reg" >用户名: <input type="text" name="user">密码:  <input type="password" name="pwd"><input type="button" value="button提交"><input type="submit" value="submit提交"></form>
</div>
</body>
</html>

总结

1.称呼

-HTML标签（超文本传输语言）与浏览器搭配

2.HTML标签（默认格式样式，可通过手段进行修改）

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

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

查看全文

http://www.dtcms.com/a/322291.html

PyLS简介

NumPy性能飞跃秘籍：向量化计算如何提升400倍运算效率？

【C++详解】AVL树深度剖析与模拟实现（单旋、双旋、平衡因⼦更新、平衡检测）

云服务器--阿里云OSS(2)【Springboot使用阿里云OSS】

Datawhale AI夏令营-记录2

Kotlin初体验

【linux基础】Linux 文本处理核心命令指南

代码随想录day59图论9

NY151NY152美光固态闪存NY153NY154

利用whisper api实现若无字幕则自动下载音频并用 whisper 转写，再用 LLM 总结。

JVM相关（AI回答）

等保测评-RabbitMQ中间件

【Java EE初阶 --- 网络原理】JVM

从零玩转Linux云主机：免费申请、连接终端、命令速查表

分析报告：基于字节连续匹配技术的KV缓存共享实施可能性及其扩展

✨ 基于 JsonSerialize 实现接口返回数据的智能枚举转换（优雅告别前端硬编码！）

【Linux】Socket编程——UDP版

(nice!!!)(LeetCode 面试经典 150 题) 146. LRU 缓存 (哈希表+双向链表)

Go语言实战案例:文件上传服务

香橙派 RK3588 部署千问大模型 Qwen2-VL-2B 推理视频

在Docker中下载RabbitMQ(详细讲解参数）

BGP 笔记

C语言gdb调试

母线电压采样芯片的四大类——汽车级选型对比表

101和201复制卡技术难点与解决方案

Express中间件和路由及响应方法

软件定义车辆加速推进汽车电子技术

Python如何将图片转换为PDF格式

2025最新高频前端面试题解析（含Vue/React/JS核心考点）

day30-HTTP

前端开发

1.快速开发网站

2.浏览器能识别的标签

2.1 编码（head)

2.2 title(head)

2.3 标题

2.4 div和span

2.5 超链接

2.6 图片

小结

2.7 列表

2.8 表格

案例：用户列表

2.9 input系列(7个)

2.10 下拉框

2.11 多行文本

案例：用户注册

知识点回顾和补充

案例：用户注册

总结

相关文章：