flask快速创建网站:
from flask import Flask, render_template
app = Flask(__name__)
# 创建了网址/show/info和函数index的对应关系
# 以后用户在浏览器上访问/show/info,网站会自动执行index
@app.route("/show/info")
def index():
return render_template("index.html")
# Flask内部会自动打开这个文件,并读取内容,将内容返回给用户
# 默认:取当前项目目录的templates文件夹里面找
if __name__ == '__main__':
app.run()
浏览器能识别的标签:
# 2.浏览器能识别的标签
### 2.1 编码(head)
```html
<meta charset="UTF-8">
```
### 2.2 title(head)
```html
<head>
<meta charset="UTF-8">
<title>我的联通</title>
</head>
```
![image-20211119091846208](assets/image-20211119091846208.png)
### 2.3 标题
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的联通</title>
</head>
<body>
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
</body>
</html>
```
### 2.4 div和span
```html
<div>内容</div>
<span>asdfa</span>
```
- div,一个人占一整行。【块级标签】
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的联通</title>
</head>
<body>
<div>山东蓝翔</div>
<div>挖掘机哪家强</div>
</body>
</html>
```
- span,自己多大占多少。【行内标签、内联标签】
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的联通</title>
</head>
<body>
<span>山东蓝翔</span>
<span>挖掘机哪家强</span>
</body>
</html>
```
注意:这两个标签比较素 + CSS样式。
### 2.4.5 超链接
```html
跳转到其他网站
<a href="http://www.chinaunicom.com.cn/about/about.html">点击跳转</a>
```
```html
跳转到自己网站其他的地址
<a href="http://127.0.0.1:5000/get/news">点击跳转</a>
<a href="/get/news">点击跳转</a>
```
## 2.4.6 图片
```html
<img src="图片地址" />
```
```html
直接显示别人的图片地址(防盗链):
<img src="https://pic4.zhimg.com/v2-b23f984c2aeaa7bed12e890b4338d499_720w.jpg" />
```
```html
<img src="自己图片的地址" />
显示自己的图片:
- 自己项目中创建:static目录,图片要放在static
- 在页面上引入图片
<img src="/static/wbq.png" />
```
关于设置图片的高度和宽度
```html
<img src="图片地址" style="height:100px; width:200px;" />
<img src="图片地址" style="height:10%; width:20%;" />
```
target="_blank"表示新开一个页面,如果没有表示在当前页面打开超链接
案例:商品列表
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>商品列表</h1>
<a href="https://www.mi.com/redmiwatch2" target="_blank">
<img src="/static/a1.jpeg" style="width: 150px">
</a>
<a href="https://www.mi.com/shouhuan6/nfc" target="_blank">
<img src="/static/a2.jpeg" style="width: 150px">
</a>
<a href="https://www.mi.com/xiaomibuds3pro" target="_blank">
<img src="/static/a3.jpeg" style="width: 150px">
</a>
</body>
</html>
列表标签:
```html
<ul>
<li>中国移动</li>
<li>中国联通</li>
<li>中国电信</li>
</ul>
```
```html
<ol>
<li>中国移动</li>
<li>中国联通</li>
<li>中国电信</li>
</ol>
```
# ol表示有序号的列表
表格标签:
<thead>表示头部<tr>表示一行,<th>表示一行里的一列
<tbody>表示身体<tr>表示一行,<td>表示一行里的一列
border=1,表示加上一个边框。
<table border=“1”>
<thead>
<tr> <th>ID</th> <th>姓名</th> <th>年龄</th> </tr>
</thead>
<tbody>
<tr> <td>10</td> <td>武沛齐</td> <td>19</td> </tr>
<tr> <td>11</td> <td>吴阳军</td> <td>19</td> </tr>
<tr> <td>12</td> <td>刘东</td> <td>19</td> </tr>
<tr> <td>13</td> <td>郭智</td> <td>19</td> </tr>
<tr> <td>14</td> <td>电摩</td> <td>19</td> </tr>
</tbody>
</table>
input系列:
### 2.4.9 input系列(7个)
```html
<input type="text" /> #文本框
<input type="password"> # 密码框
<input type="file"> # 选择文件框
<input type="radio" name="n1">男 # 单选框,只能选择一个,name必须相同来实现只能选择一个
<input type="radio" name="n1">女
<input type="checkbox">篮球 #复选框,可以同时选择多个
<input type="checkbox">足球
<input type="checkbox">乒乓球
<input type="checkbox">棒球
<input type="button" value="提交"> -->普通的按钮
<input type="submit" value="提交"> -->提交表单
下拉框:
### 2.4.10 下拉框
```html
<select>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
<select multiple> #多选的下拉框
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
多行文本:
### 2.4.11 多行文本
```html
<textarea></textarea>
<textarea rows="5"></textarea> #默认是5行
```
页面上的数据,想要提交到后台:
- form标签包裹要提交的数据的标签。
- 提交方式:`method="get"`
- 提交的地址:`action="/xxx/xxx/xx"`
- 在form标签里面必须有一个submit标签。
- 在form里面的一些标签:input/select/textarea
- 一定要写name属性 `<input type="text" name="uu"/>`