简单开发网站+HTML标签
目录
一、学习路线
二、快速开发网站
1、简单demo
2、浏览器能识别的标签
① 编码② Title ③ 标题 ④ div和span ⑤ 超链接
⑥ 图片⑦ 列表 ⑧ 表格 ⑨ input系列 ⑩ 下拉框 ⑪ 多行文本
三、网络请求
四、案例
1、用户注册
2、用户登录
五、小结
1、学习标签的总结
2、划分
一、学习路线
目的：开发一个平台（网站）
- 前端开发：HTML、CSS、JavaScript
- web框架：接受请求并处理
- MySQL数据库：储存数据的地方
快速上手：基于Flask Web框架让你可以快速搭建一个网站出来。了解上面的三者是怎样配合。
深入学习：基于Django框架（主要）
二、快速开发网站
1、简单demo
首先终端输入命令 pip install 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()
运行程序后可以得到，如果出现404NOT FOUND 在后面记得加/show/info
如果我们返回的是
return "中国联通"
浏览器可以识别很多标签+数据，例如：
中国
→浏览器看见加大加粗联通 →浏览器看见字体变红
如果我们能把浏览器能识别的所有标签都学会，我们在网站就可以控制页面到底是什么样子
网站给用户返回本质：字符串 字符串的格式：中国联通
中国联通
浏览器具备解析
格式的能力
Flask框架为了让我们写标签方便，支持讲字符写入到文件中
from flask import Flask,render_template # 导入库
...
def index():
# Flask内部会自动打开这个文件，并读取内容，将内容给用户返回
# 默认：去当前项目目录的templates文件夹中找
return render_template("index.html")
Title
中国联通
广西联通
>
2、浏览器能识别的标签
① 编码
② Title
我的页面
③ 标题
我的页面
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
④ div和span
内容
内容div，一个人占一行。【块级标签】
span，自己多大占多大。【行内标签、内联标签】
注意：这两个标签比较素（无特殊实义） +CSS样式。
另外，标题
一个小练习
我的页面
我的网页
时间
2023-1-16
HTML学习
学习路线
时间
2023-1-16
目的：开发一个平台（网站）
- 前端开发：HTML、CSS、JavaScript
- web框架：接受请求并处理
- MySQL数据库：储存数据的地方
⑤ 超链接
# 跳转到其他的网站
点击跳转
# 跳转到自己的其他网站
点击跳转
点击跳转
Title
商品列表
#新的Tab页面打开
点击跳转
⑥ 图片
直接显示别人的图片地址(防盗链)
显示自己的图片：
- 自己项目中创建:static目录，把图片放在static里面
- 在页面上引入图片
关于设置图片的宽度和高度
⑦ 列表
不带数字的列表
- python
- java
- C++
带数字的列表
- python
- java
- C++
⑧ 表格
# border="1"有边框
ID 姓名 年龄
01 二蛋 22
02 三蛋 22
03 四蛋 22
04 五蛋 22
05 六蛋 22
小案例
Title
用户列表
ID
头像
姓名
邮箱
更多信息
操作
1
二狗
休息@live.com
点击查看详细
编辑 删除
1
二狗
休息@live.com
点击查看详细
编辑 删除
1
二狗
休息@live.com
点击查看详细
编辑 删除
1
二狗
休息@live.com
点击查看详细
编辑 删除
⑨ input系列
--文本
--密码
--文件
男 --互斥单选框
女
唱 --多选框
跳
rap
篮球
--普通按钮
--提交表单⑩ 下拉框
⑪ 多行文本
多行文本
三、网络请求
- 在浏览器的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上。
注意：GET请求数据会在URL中体现。
POST请求【表单提交】 :
现象：提交数据不在URL中而是在请求体中。
页面上的数据想要提交到后台：
- form标签包裹要提交的数据的标签
- 提交方式：method = "get"
- 提交的地址：action="/xx/xxx/xxx"
- 在form标签里面一定要有一个
标签 - 在form里面的一些标签：input/select 等
- 一定要写name属性 用户名:
四、案例
1、用户注册
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 = 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, city, skill_list, more)
# 将用户信息写入到文件中实现注册，写入到excel中实现注册，写入数据库中实现注册
# 2、给用户返回结果
return "注册成功"
if __name__ == '__main__':
app.run()
HTML代码
用户注册
用户注册
2、用户登录
HTML代码
Title
用户登录
五、小结
1、学习标签的总结
![]()
/ul/li/table/input/textarae/select
2、划分
- 块级标签
- 行内标签