Web开发学习笔记-html篇
视频教程地址
目的:开发一个平台(网站)
- 前端开发: html,css,JavaScript
- web框架: 接受请求并处理 django ,flask
- 数据库: mysql数据库,存储数据的地方
快速上手: 基于flask web框架 快速搭建网站用于学习
深入学习: 基于djanggo 框架(主要)
1.快速开发网站
1.1
python安装,换源,pycharm专业版略过.
安装flask用pip install flask
from flask import Flask # 引入模块
app = Flask(__name__) # 实例化
@app.route("/show/info") # 路由路径,网址和函数的对应关系.访问此路径就会指向下面的函数.
def index(): # 路由指向函数
return "中国联通" # 返回网页内容
if __name__ == '__main__':
app.run()
运行成功后服务启动 访问给出的网址+自定的路径 访问即可得查看网页内容 127.0.0.1:5000/show/info
如下图:
1.2 flask支持return html文件
from flask import Flask,render_template # 多引render_template入模块
app = Flask(__name__) # app = Flask(__name__,temmplate_folder='xxx')更换html文件目录,一般不改
@app.route("/show/info")
def index():
return render_template("index.html")
# 参数是指定要返回的html文件,框架会去项目当前目录的templates文件夹找此文件 所以要在项目中创建一个templates文件夹,然后放入html文件
if __name__ == '__main__':
app.run() # app.run(host="",port=80) 自定义主机名和端口
运行成功 如下图:
1.3 浏览器能识别的标签
接下来开始学习html标签
头部标签 写给机器程序看的
2.1返回文件的编码
2.2title 浏览器的表头身体 写网站的主体内容1级标题
以此类推到6级标题
[块级标签]- 内容一个标签站一整行 [块级标签] 应用广泛 通过css设置各种样式 通过浏览器检查可以看到占用多大空间
内容 内容多大站多少空间 [行内标签, 内联标签] 应用广泛 通过css设置各种样式 通过浏览器检查可以看到占用多大空间, 跳转到其他网站, 跳转到站内网站直接写路径即可[行内标签, 内联标签]-
自闭和标签,[行内标签, 内联标签] 定义图片显示大小,图会变形px:像素 如果只定义高度或宽度 会按照比例缩放 按照百分比定义
- tips:各种标签可嵌套 例子:a标签嵌套img标签
商品列表
- 列表标签 [块级标签]
- 中国联通
- 中国移动
- 中国电信
//或者
- 中国联通
- 中国移动
- 中国电信
- 表格标签
列一表头 列二表头 列三表头
列1行1数据 列2行1数据 列3行1数据
列1行2数据 列2行2数据 列3行2数据
列1行3数据 列2行3数据 列3行3数据
列1行4数据 列2行4数据 列3行4数据
实验例子
用户列表
ID
头像
姓名
邮箱
操作
1
名字
zxx@163.com
点击查看信息
- input系列标签(暂时7个) 自闭和标签 [行内标签, 内联标签]
男
女
足球
篮球
羽毛球
- 下拉框
- 多行文本
- 用户注册案例:
用户注册
用户名:
密码:
性别:
男
女
爱好:
足球
篮球
羽毛球
城市:
擅长领域:
备注:
- GET请求和POST请求
浏览器在向后端发送请求的时候 一般两种请求 GET 和 POST
GET 请求 一般通过url 网址的字符串发送请求,向后台提交数据时,会自动拼接在url上 通过?号连接后面的就是参数 [url方式或者
POST求的数据请求不体现在url中,而是放在请求体中 formdata[只能表单方式提交]
案例 用户注册:
在python flask代码中 @app.route("/index/",methods=['GET']) 表示 只是用GET请求
想要把前台的数据提交到后台 需要用form标签包裹住要提交的数据内容
注册信息
如果相关要接受数据需要在flask接接收函数中引入 request 然后用 request.args 读取
from flask import request
@app.route("/index",methods=["GET"])
def index():
print(request.args)
return "注册成功"
post方式发送请求
注册信息
在后端
@app.route("/index",methods=["POST"])
def index():
print(request.form) # 用form来读取发送来的数据
request.form.get("参数名") # 获取到提交参数的内容
request.form.getlist("参数名") # 获取多个数据用getlist
return "注册成功"
@app.route("/inde",methods=["GET","POST"]) # 也可同时支持两种请求方式,利用判断的方式对两种请求做出不同的返回
def index():
if request.method = "GET":
return "get111"
print(request.form) # 用form来读取发送来的数据
request.form.get("参数名") # 获取到提交参数的内容
request.form.getlist("参数名") # 获取多个数据用getlist
return "注册成功"
案例 登录界面 与上面同理 略过
基础的html完结,有其他再补充