诺小新 | Neuerliu
0%

前端入门:(二)HTML基本标签介绍/flask快速了解

Posted on Edited on In

1.flask框架

flask是一个web框架，支持将html语言写入文件并读取。这时我们需要从flask模块导入render__template模块，新建templates文件夹，在文件夹下新建html文件并读取相对应文件。

1
return render_template(<html文件名>) #注意render_template会自动在templates文件夹下搜索

2.HTML标签

2.1 head部分标签

1
2
3
4
<head>
    <meta charset='utf-8'>
    <title>标题</title>
</head>

2.2 body部分标签

2.2.1 标题

1
2
3
4
5
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>

2.2.2 div和span标签

1
2
3
<div>内容</div>

<span>neirong</span>
  • div：所包裹的内容占一整行**[块级标签]**
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>你好</div>
    <div>我是</div>
</body>
</html>
  • span：自己有多大占多少**[行内标签]**
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <span>你好</span>
    <span>我是</span>
</body>
</html>

2.3 超链接

超链接由a标签构成，通过填写href属性，添加跳转目标，属于行内标签。

1
2
3
4
5
/*跳转至其他网站*/
<a href='http://www.chinaunicom.com.cn/about/about.html'>点击跳转</a>

/*跳转至自己网站的其他地址*/
<a href='/get/news'>查看更多</a>

2.4 图片

图片的插入需要img标签，它是个自闭合标签，属于行内标签。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<img src='图片地址'/>

#引用别人的图片地址--->注意有的网站存在防盗链
<img src='http://www.chinaunicom.com.cn/resource/group1/M00/00/
          3A/wKjcAmLIivqAJPJDABcn99WXr_g313.jpg'/>

#显示自己的图片
#首先需要在自己的项目目录中创建static目录
<img src="/static/test.png" />

#设置图片高宽
<img style="height: 200px;" src="/static/test.png" />#宽度自动设置
<img style="height: 200px; width: 100px;" src="/static/test.png" />
<img style="height: 10%;" />

2.5 列表标签(块级标签)

  • ul标签：无序列表(unordered list)
1
2
3
4
5
<ul>
    <li>中国移动</li>
    <li>中国联通</li>
   	<li>中国电信</li>
</ul>
  • ol标签：有序列表(ordered list)
1
2
3
4
5
<ol>
    <li>中国移动</li>
    <li>中国联通</li>
   	<li>中国电信</li>
</ol>

2.6 表格标签

1
2
3
4
5
6
7
8
9
10
11
12
<table> #可以通过属性border='1'使得表格加上一个简单的边框
    <thead> #表头
        <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> </tr> #tr表示一行，th包裹列名
    </thead>
    <tbody> #表内容
        <tr> <td>10</td> <td>小明</td> <td>20</td> </tr> #表内容中td包裹数据
        <tr> <td>11</td> <td>小黄</td> <td>19</td> </tr>
        <tr> <td>12</td> <td>小蓝</td> <td>22</td> </tr>
        <tr> <td>13</td> <td>小绿</td> <td>28</td> </tr>
        <tr> <td>14</td> <td>小紫</td> <td>23</td> </tr>
    </tbody>
</table>

2.7 input系列

1
2
3
4
5
6
7
<input type='text' /> #输入框
<input type='password' /> #密码框
<input type='file' /> #选择文件框
<input type='radio' /> #选择框--->限制只能选择一个需要设置name属性一致
<input type='checkbox' /> #复选框--->可以选择多个
<input type='button' value="提交" /> #按钮 value设置按钮显示内容--->普通按钮
<input type='submit' value='提交' /> #另一种按钮--->可以提交表单

2.8 下拉框

1
2
3
4
5
6
7
8
9
10
11
<select> #单选下拉框
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
</select>

<select multiple>
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
</select>

2.9 多行文本

1
2
3
4
<textarea>
    在这里可以在页面中输入多行文本(不同于input框只能输入一行)
</textarea>
#还可以通过设置rows属性，控制显示的文本行数

2.10 案例：用户注册

用户提交信息可以使用form标签，form标签需要包裹所有需要提交的信息，form有两种提交方式，分别是get和post。

  • 创建项目
  • 优化register函数，依据methods不同，返回不同页面

2.10.1 get方式提交数据

1
2
3
4
5
6
7
8
9
10
11
12
<form method="get" action="path">  #method提交方式 action提交地址
    <div>
        用户名：<input type="text" name='uname'/> #name属性用于指定get请求下拼接url参数名
    </div>
    <div>
        密码：<input type="password" name='pwd'/>
    </div>

    <div>
        <input type="submit" value="submit提交" /> #submit提交至action对应地址
    </div>
</form>
  • form包裹需要提交的数据
    • 提交方式有get和post，需要在form的method属性指定
    • 提交的地址由form的action属性指定
    • form提交必须要有submit按钮
  • form里面的一些标签：input/select/textarea等
    • 标签要指定name，便于get请求时拼接到url中
  • 接收用户信息的是request.args

2.10.2 post方式提交数据

1
2
3
4
5
6
7
8
9
10
11
12
13
<h1>用户注册</h1>
<form method="post" action="/post/reg"> <!--form标签处理提交信息-->
    <div>
        用户名：<input type="text" name="uname"/> <!--name属性用于提交表单时拼接url参数名-->
    </div>
    <div>
        密码：<input type="password" name="pwd"/>
    </div>

    <div>
        <input type="submit" value="submit提交" /> <!--submit按钮用于提交form表单至action对应的地址-->
    </div>
</form>

需要在web.py中写入对应地址/post/reg的路径html代码，接收用户信息采用的是request.form

2.10.3 非输入框数据的传递

上述数据传递是基于输入框传递的，但有一些是选择框，它们的数据传递需要注意：

  • 设置name属性：传递用户信息字典的字段名
  • 设置value属性：针对单选/复选的选项具体对应的值进行设置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<h1>用户注册</h1>
<form method="post" action="/post/reg"> <!--form标签处理提交信息-->
    <div>
        用户名：<input type="text" name="uname"/> <!--name属性用于提交表单时拼接url参数名-->
    </div>
    <div>
        密码：<input type="password" name="pwd"/>
    </div>
    <div>
        性别：
        <input type="radio" name="gender" value="male">男
        <input type="radio" name="gender" value="female">女
    </div>
    <div>
        爱好：
        <input type="checkbox" name="hobby" value="baskteball">篮球
        <input type="checkbox" name="hobby" value="football">足球
        <input type="checkbox" name="hobby" value="badminton">羽毛球
        <input type="checkbox" name="hobby" value="other">其他
    </div>
	<div>
        城市：
        <select name="city">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
            <option value="武汉">武汉</option>
            <option value="其他">其他</option>
        </select>
    </div>
    <div>
        <input type="submit" value="submit提交" /> <!--submit按钮用于提交form表单至action对应的地址-->
    </div>
</form>

2.10.4 修改register函数，合并get和post请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@app.route("/register", methods=['POST','GET'])
def register():
    if request.method == 'GET': #如果请求是get方法，则返回注册页面
        return render_template('register.html')
    else: #如果请求是post方法，则收集用户注册信息并返回注册成功
        #1.接收通过post请求传递的数据
        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')
        otherinfo = request.form.get('other info')
        print(user, pwd, gender, hobby, city, otherinfo)

        #2.给用户返回结果
        return "注册成功！"

相应地，我们在register.html文件也要进行修改，将form的action改为/register

3.小结

  • 网站请求流程：用户浏览器实际上是加载html字符串

  • 学习的标签包括h1\div\span\a\img等标签

  • 块级标签：h1\div\ol\ul

  • 行内标签：span\a\img

  • 标签的嵌套—>在a标签中嵌套img，实现点击图片跳转至相应网页

  • 列表和表格

  • 网络请求

    • 在浏览器的URL中写入地址，点击回车并访问：浏览器会发送数据，本质是发送字符串
    • 网络请求分为get和post请求
      • get请求：向后台传入数据会拼接在URL上，get请求数据会在url上体现
      • post请求：提交数据不在url中体现，而是放到请求体中