标签：__ Web 浏览器 Flask 标签 Django 跳转 rsv

1.day1
- 1.快速开发网站
- 2.浏览器能识别的标签

目的：开发一个平台（网站）
-前端开发：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 = "图片地址" />

直接引入别人的图片地址， 但可能会有防盗链，不能直接显示
<img src = "https://pic1.zhimg.com/80/v2-e2692ab1428f812d0e76b4ec70bb331b_1440w.webp?source=2c26e567" />

显示自己的图片
<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中体现，而是在请求体中

标签：__,Web,浏览器,Flask,标签,Django,跳转,rsv
From： https://www.cnblogs.com/gaoyx/p/17986036

Django学习第一天-Flask_Web前端HTML部分