测试开发进阶(十一)

HTML

HTML 超文本标记语言，网页制作的编程语言

结构

<!DOCTYPE html>
<html lang="en">
<head><!-- 头部信息 -->
    <meta charset="UTF-8">
    <title>测试游记</title>
</head>
<body>
body-测试游记
</body>
</html>

<!DOCTYPE html>： HTML5的声明

<meta>：声明，例如编码

<title>：网页名称

<body>：主体内容

title-body

<table>
    <tr>
        <th>列1</th>
        <th>列2</th>
        <th>列3</th>
        <th>列4</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>11</td>
        <td>21</td>
        <td>31</td>
        <td>41</td>
    </tr>
</table>

form表单

简单的编写一个flask测试页面

from flask import Flask

app = Flask(__name__)


@app.route('/')
def index():
    return 'Hello'

if __name__ == '__main__':
    app.run()

编写一个表单

action：地址
method：方式

<form action="http://127.0.0.1:5000/" method="get">
    用户名：<input type="text">
    密码：<input type="password">
    <input type="submit">
</form>

提交：http://127.0.0.1:5000/?user=zx&pwd=123456

点击提交

文本输入框：<input type="text" name="user">
密码输入框：<input type="password" name="pwd">
提交按钮：<input type="submit">
单选框：

提交：http://127.0.0.1:5000/?user=&pwd=&like=python

1
2
3

编程语言：
<input type="radio" name="like" value="python"> Python
<input type="radio" name="like" value="java"> Java

单选框

多选框：

<input type="checkbox" name="skill" value="Django"> Django
<input type="checkbox" name="skill" value="Flask"> Flask
<input type="checkbox" name="skill" value="scrapy"> scrapy
<input type="checkbox" name="skill" value="pytest"> pytest

多选框

提交：http://127.0.0.1:5000/?user=&pwd=&skill=Django&skill=Flask&skill=scrapy&skill=pytest

文件上传

1	文件上传<input type="file" name="hello">

选择文件前

选择文件后

普通按钮

1	<input type="button" value="普通按钮">

重置按钮

1	<input type="reset" name="resetbtn">

重置按钮

输入内容后，点击重置会把填入的内容清空

图片按钮

点击图片后会提交

1	<input type="image" src="pic.JPG" height="300px" width="150px">

隐藏表单域：

1	<input type="hidden" name='csrf' value="隐藏表单域" >

提交的内容：http://127.0.0.1:5000/?user=&pwd=&hello=&csrf=隐藏表单域

label标签

for属性关联input的id

1 2	<label for="user">用户名：</label> <input type="text" name="user" id="user"> <br>

点击用户名之后激活输入框

单击用户名

单击密码

1	<input type="radio" name="like" value="python" id="python"> <label for="python">Python</label>

点击python文字会自动选中python单选框，点击Java不会选中

点击python文字

大文本输入框

1 2	<label for="user_info">个人介绍</label> <textarea name="" id="user_info" cols="30" rows="10"></textarea>

下拉选择框

<label for="city">城市</label>
<select name="city" id="city">
    <option value="0">浙江</option>
    <option value="1">上海</option>
    <option value="2">北京</option>
</select>

下拉框

选中「浙江」后提交:http://127.0.0.1:5000/?user=&pwd=&hello=&csrf=隐藏表单域&city=0

city=0

iframe 内联框架

iframe元素会创建包含另外一个文档的内联框架(行内框架)

例子：将其他页面的内容链接到当前页面

1 2	<iframe src="https://www.baidu.com/" frameborder="0" height="500px" width="600px">百度</iframe> <iframe src="http://www.sina.com/" frameborder="0" height="500px" width="600px">新浪</iframe>

iframe

测试开发进阶(十一)

HTML

结构

标签

form表单

iframe 内联框架