1.相对路径和绝对路径
2.有序和无序列表
3.表格
4.注册表单
表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,相关标签及属性用法如下:
1、<form>标签 定义整体的表单区域
- action属性 定义表单数据提交地址 空 提交至本地
- method属性 定义表单提交的方式,一般有“get”方式和“post”方式,少量不敏感GET ,大量敏感POST
2、<label>标签 为表单元素定义文字标注
3、<input>标签 定义通用的表单元素
- type属性
- type="text" 定义单行文本输入框
- type="password" 定义密码输入框
- type="radio" 定义单选框
- type="checkbox" 定义复选框
- type="file" 定义上传文件
- type="submit" 定义提交按钮
- type="reset" 定义重置按钮
- type="button" 定义一个普通按钮
- type="image" 定义图片作为提交按钮,用src属性定义图片地址
- type="hidden" 定义一个隐藏的表单域,用来存储值
- name属性 定义表单元素的名称,此名称是提交数据时的键名
- value属性 定义表单元素的值 (用于传参)url?'name'=value
4、<textarea>标签 定义多行文本输入框
5、<select>标签 定义下拉表单元素
6、<option>标签 与<select>标签配合,定义下拉表单元素中的选项
5.勾选框
6.下拉框
7.多行文本
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--./ 表示当前网页文件所在的目录,一般省略不写-->
<!--../ 表示当前网页文件所在目录的上一级目录,不能省略-->
<img src="./images/lebo.png" alt="lebo">
<img src="../自动化-002-html列表、布局、iframe等/images/lebo.png" alt="">
<img src="images/banner.jpg" alt="">
<!--不推荐使用绝对路径-->
<img src="D:\测试相关\py\自动化-002-html列表、布局、iframe等\脚本\images\img\banner.jpg"
alt="">
<hr>
<!--无序列表 需要掌握 输入下方命令+tab快速创建列表-->
<!--ul>li{列表文字}*6-->
<ul>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
</ul>
<!--ul>(li>a[href=#]{列表文字})*6-->
<ul>
<li><a href="htttp://www.baidu.com">baidu</a></li>
<li><a href="http://www.17lebo.com">lebo</a></li>
<li><a href="#">列表文字</a></li>
<li><a href="#">列表文字</a></li>
<li><a href="#">列表文字</a></li>
<li><a href="#">列表文字</a></li>
</ul>
<!--有序列表 用得少 从a开始-->
<ol type="a">
<li>python</li>
<li>selenium</li>
<li>appium</li>
</ol>
<hr>
<table border="1">
<!--tr为一行 th为表头 td为单元格内容-->
<tr>
<th>111111</th>
<th>222222</th>
<th>333333</th>
<th>444444</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>4</td>
<td>3</td>
<td>2</td>
<td>1</td>
</tr>
</table>
<hr>
<form action="" method="get">
<!-- for属性 点击label 自动定位到id为username的输入框>
<label for='username'>用户名</label>
<input type="text" name="username" id='username'> <br><br>
密码 <input type="password" name="password"><br><br>
<!--name属性一致为一组并只能选择其中一个-->
性别 <input type="radio" name="gender" value="0">男
<input type="radio" name="gender" value="1">女
<br><br>
爱好
<!--勾选框 需要在后边加上相应的value值-->
<input type="checkbox" name="hobby" value="study">学习
<input type="checkbox" name="hobby">吃饭
<input type="checkbox" name="hobby">睡觉
<input type="checkbox" name="hobby">坑蒙拐骗
<input type="checkbox" name="hobby">踢足球
<br><br>
头像<input type="file" name="pic">
<br><br>
籍贯
<select name="site" id="">
<option value="0">湖南</option>
<option value="1">北京</option>
<option value="2">河北</option>
<option value="3">广东</option>
</select>
<br><br>
<!--多行文本-->
<textarea name="inof" id="" cols="30" rows="10"></textarea>
<br><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<!-- input类型为submit定义提交按钮
还可以用图片控件代替submit按钮提交,一般会导致提交两次,不建议使用。如:
<input type="image" src="xxx.gif">
</form>
</body>
</html>
页面嵌套iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--target 属性值:
"_self" 新连接在当前窗口打开
"_blank" 新连接在新窗口中打开
"framname"指定显示在 name为"framname"的iframe区域
-->
<a href="006-注册表单.html" target="myframe">006test</a>
<!--<a href="http://www.baidu.com" target="_blank">testa</a>-->
<iframe src="http://www.baidu.com" frameborder="1" name="myframe"></iframe>
</body>
</html>