Django学习第一天-Flask_Web前端HTML部分
目录
- 1.day1
- 1.快速开发网站
- 2.浏览器能识别的标签
- 2.1 编码
- 2.2 title
- 2.3标题
- 2.4 div和span
- 2.5 超链接
- 2.6 图片
- 小结
- 2.7 列表
- 2.8表格
- 2.9 input系列（7个）
- 2.10 下拉框
- 2.11 多行文本
- 案例：用户注册
- 2.12 网络请求
目的：开发一个平台（网站）
-前端开发：HTML、CSS、JavaScript
-Web框架：接收并处理请求
-MySQL数据库：存储数据的地方
快速上手：
基于Flask Web框架快速搭建一个网站
深入学习：基于Django框架（主要）
1.day1
1.快速开发网站
pip install flask #在本地安装flask
创建一个web.py的文件
from flask import Flask
app = Flask(__name__) #Flask是一个类，我们实例化了一个类的对象
#创建了网址 /show/info 和函数index的对应关系
#以后用户在浏览器上访问 /show/info 网站自动执行 index
@app.route("/show/info")
def index():
return "Hello"
if __name__ == "__main__":
app.run()
输出
Running on http://127.0.0.1:5000 #这个域名后加上我们的 /show/info 网址就可以打开网站了
我们做的简单网站和复杂网站的区别
-
别人的更好看
因为浏览器可以识别很多 标签+数据，例如：
<h1>中国</h1> ->浏览器返回会加大加粗 <span style='color:red;'>联通</span>` ->会让字体变红所以我们可以使用大量标签来是我们的页面符合我们的标准
-
Flask等Web框架为了让我们写标签更方便，支持将字符串写入到文件里
from flask import Flask, render_template
app = Flask(__name__) #Flask是一个类，我们实例化了一个类的对象
#创建了网址 /show/info 和函数index的对应关系
#以后用户在浏览器上访问 /show/info 网站自动执行 index
@app.route("/show/info")
def index():
# return "Hello"
#Flask内部会自动打开这个文件，读取文件内容，将内容返回给用户。
#默认：去当前项目目录templates文件夹寻找
return render_template("index.html") #这是一个文件
if __name__ == "__main__":
app.run()
2.浏览器能识别的标签
2.1 编码
<meta charset="UTF-8">
//我们的网站发送给用户浏览器的是一大堆字符串文件
//用户的浏览器读取这些字符串就会以 UTF-8 的编码来打开文件
2.2 title
<head>
<meta charset="UTF-8">
<title>浏览器中网页的标题</title>
</head>
2.3标题
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
2.4 div和span
- div：一个人占一整行。【块级标签】
<div>会换行</div>
<span>不会换行</span>
- span：自己多大就占多少。【行内标签、内联标签】
在这儿我试了试一个span加一个div，不管谁在前谁在后，他都会在两行
因为div必须自己单独一行
h标签也是块儿级标签
这两个标签比较素，上述是他们的默认功能，后期我们会加上 CSS
2.5 超链接
跳转到其他网站
<a href = "https://www.bilibili.com/">点击跳转</a>
跳转到自己的网站其他地址
<a href = "http://127.0.0.1:5000/get/news">点击跳转</a>
等价于
<a href = " /get/news">点击跳转</a>
默认为在当前页面跳转
我们在<a></a>中加上target = "_blank",就会新开一个页面跳转
<a href = "xxx" target = "_blank">点击跳转</a>
2.6 图片
显示自己的图片
<img src = "自己图片的地址" />
Flask框架需要我们在项目中创建：
-static目录，图片要放在static目录中
-在页面上引入图片
<img src = "/static/ac.jpg" />
<img style = "height: 100px" src = "" /> 只定义高度不定义宽度，会等比例进行缩放
<img style = "height: 100px; width: 100px" 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> <img /> </a> </div>
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</td> <td>高宇轩</td> <td>19</td> </tr>
<tr> <td>2</td> <td>耿倩</td> <td>19</td> </tr>
<tr> <td>3</td> <td>张三</td> <td>24</td> </tr>
<tr> <td>4</td> <td>李四</td> <td>54</td> </tr>
<tr> <td>5</td> <td>王五</td> <td>77</td> </tr>
</tbody>
</table>
2.9 input系列（7个）
<input type = "text" /> 文本
<input type = "password" /> 密码
<input type = "file" /> 文件
<input type="radio" name="sex">男 单选框，用name来归类
<input type="radio" name="sex">女
<input type="checkbox">三国杀 多选框
<input type="button" value="提交"> -->普通按钮
<input type="submit" value="提交"> -->提交表单
2.10 下拉框
<select>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>单选下拉框
<select multiple>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>多选下拉框
2.11 多行文本
<textarea rows="3">请输入</textarea>
案例：用户注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<h1>用户注册</h1>
<div>
用户名：<input type="text"/>
</div>
<div>
密 码：<input type="password"/>
</div>
<div>
性 别：
<input type="radio" name="sex"/>男
<input type="radio" name="sex">女
</div>
<div>
爱好：
<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox">乒乓球
</div>
<div>
城市：
<select>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
</div>
<div>
擅长领域：
<select multiple>
<option>体育</option>
<option>编程</option>
<option>游戏</option>
<option>吹牛逼</option>
</select>
</div>
<div>
备注：
<textarea></textarea>
</div>
<div>
<input type="button" value="提交">
<input type="submit" value="Submit"/>
</div>
</body>
</html>
2.12 网络请求
-
在浏览器的URL中写入地址，点击回车访问
浏览器会发送数据过去，本质上发送的是字符串 -
浏览器向后端发送请求时
-
GET请求【URL方法，表单提交】
-
现象：GET请求、跳向后台传入数据 数据会拼接在URL上
https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=安卓&fenlei=256&rsv_pq=0x9b5b50c6000f23b1&rsv_t=16ddZlD60dst5T87dekGoSO4Md%2FAFSvouOxhZH3MvpYJwYUYp3JGSzPvo8RE&rqlang=en&rsv_enter=1&rsv_dl=tb&rsv_sug3=8&rsv_sug1=7&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&inputT=1750&rsv_sug4=3205)注意：GET请求数据会在URL中体现。
-
-
POST请求【表单提交】
- 现象：提交数据不在URL中体现，而是在请求体中
-