测试开发进阶(十一)
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
标签
- 注释：
<!-- 我是注释 --> - 段落标签：
<p></p> - 标题：
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
标题
- 换行：
<br> - 水平线：
<p>「测试游记」</p>
<br>
<hr>
<br>
<p>「测试游记」</p>
换行-水平线
- 块标签：
块
<div style="width: 300px; height: 200px; background-color: red">
<p>「测试游记」</p>
<br>
<hr>
<br>
<p>「测试游记」</p>
</div>
增加大小，背景颜色
大小，颜色
- 行内元素: 不会换行
<span>66666</span>
<span>66666</span>
<span>66666</span>
<span>66666</span>
<span>66666</span>
行内元素
- 字体倾斜
- 比较重要的字体倾斜
<i>「测试游记」</i>
<em>「测试游记」</em>
字体倾斜
- 字体加粗
- 比较重要的字体加粗
<b>「测试游记」</b>
<strong>「测试游记」</strong>
image-20190828204655083
- 图片：
图片无法加载：
<img src="pic.JPG1" alt="背景图片">
图片无法加载
正常加载
<img src="pic.JPG" alt="背景图片" height="600px" width="300px">
正常加载
- 超链接：
<a href="https://map.baidu.com">百度地图</a>
超链接
- 链接到外部样式：
- 无序列表
<ul>
<li></li>
</ul>
快速语法：ul>li*5创建5条内容的列表
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
列表
- 有序列表
快速语法：ol>li*5创建5条内容的列表
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ol>
image-20190828205856959
- 表格
<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
表单
点击提交
image-20190828211958938
- 文本输入框：
<input type="text" name="user"> - 密码输入框：
<input type="password" name="pwd"> - 提交按钮：
<input type="submit"> - 单选框：
提交：http://127.0.0.1:5000/?user=&pwd=&like=python
编程语言：
<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
- 文件上传
文件上传<input type="file" name="hello">
选择文件前
选择文件后
- 普通按钮
<input type="button" value="普通按钮">
image-20190828213549841
- 重置按钮
<input type="reset" name="resetbtn">
重置按钮
输入内容后，点击重置会把填入的内容清空
- 图片按钮
点击图片后会提交
<input type="image" src="pic.JPG" height="300px" width="150px">
image-20190828214000856
- 隐藏表单域：
<input type="hidden" name='csrf' value="隐藏表单域" >
提交的内容：http://127.0.0.1:5000/?user=&pwd=&hello=&csrf=隐藏表单域
- label标签
for属性关联input的id
<label for="user">用户名：</label>
<input type="text" name="user" id="user"> <br>
点击用户名之后激活输入框
单击用户名
单击密码
<input type="radio" name="like" value="python" id="python"> <label for="python">Python</label>
点击python文字会自动选中python单选框，点击Java不会选中
点击python文字
- 大文本输入框
<label for="user_info">个人介绍</label>
<textarea name="" id="user_info" cols="30" rows="10"></textarea>
image-20190828214837431
- 下拉选择框
<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元素会创建包含另外一个文档的内联框架(行内框架)
例子：将其他页面的内容链接到当前页面
<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