行业知识
基于Django的web开发(前端部分-HTML)
2026-11-15 13:48:14
来源:互联网转载
最近在学武沛齐老师的Django开发项目,学习之余整理了笔记,有兴趣的同学可以跟着此笔记来同步辅助学习。
另附上课程链接:00 课程介绍_哔哩哔哩_bilibilihttps://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 Flaskapp = 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_templateapp = Flask(__name__)# Flask内部会自动打开这个文件,并读取内容,将内容给用户返回。# 默认:去当前项目目录的templates文件夹中找。@app.route('/show/info')def index(): return render_template('index.html')if __name__=='__main__': app.run() (2).创建templates目录,新建index.html
Title中国电信
中国移动
中国联通
运行结果:
2.浏览器能识别的标签
2.1编码(head中)
2.2title(head中)
移动运营商
2.3标题
1级标题
2级标题
3级标题
4级标题
5级标题
6级标题
2.4p和span
1.p:占一整行。【块级标签】
移动运营商有什么好玩的网游穿越火线永远滴神
2.span:自己多大占多少行。【行内标签,内联标签】
移动运营商111222
注意:这两个标签比较素+CSS样式,可以实现丰富的功能
2.5超链接
1.跳转到其他网站
NBA新闻
2.跳转到自己的网站
CBA新闻
3.target="_blank新建一个页面跳转
# 当前页面跳转CBA新闻# 跳转到新建页面CBA新闻
此时需要修改web.py内容,然后在同目录下新建一个news.html
# 基于flask框架编写网站from flask import Flask,render_templateapp = 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表格
表格格式
案列:用户列表
user用户列表
| ID | 头像 | name | 更多信息 | 操作 | |
|---|---|---|---|---|---|
| 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/p/span/a/img/ul/li/table/input/textarea/select
3.网络请求
在浏览器的URL中写入地址,点击回车,访问。 浏览器会发送数据过去,本质上发送的是字符串: "GET/explore http1.1\rlnhost:. . .\r\nuser-agentlr\n..lr\n\r\n" 浏览器会发送数据过去,本质上发送的是字符串: "PosT /explore http1.1\rlnhost:...\r\nuser-agentlr\n..lr\nlr\n数据库"浏览器向后端发送请求时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,requestapp=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代码
Title用户注册
账号: 密码: 性别: 男 女 爱好: 吃 喝 玩 乐 城市: 北京 上海 深圳 擅长领域: 游戏 体育 泡妞 备注: