1. 基于UI自动化–HTML介绍
UI自动化测试需要一些web html元素的基础知识，此处简单介绍用于UI自动化测试学习基础
一、HTML
HTML指的超文本标记语言(Hyper Text Markup Language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
二、标签
是由尖括号包围的关键词，例如 <html>
通常是成对出现的，例如 <b> 和 </b>
标签中的第一个标签是开始标签，第二个标签是结束标签
空标签，没有结束标签，例如：<input>
三、元素
元素由标签、属性、元素文本内容组成，例如<a href="http://www.baidu.com">超链接</a>，标签为<a></a>，属性为href="http://www.baidu.com"，元素文本内容为：超链接
四、HTML组成结构
由无数的元素嵌套组成
有head和body两部分组成，head中包含js、css等内容部分，body中包含显示页面的主体内容
五、需要掌握的常见元素
1. 文本输入框，<input type="text" >
2. 选择框，<input type="checkbox" >
3. 单选/复选按钮，<input type="radio" name="gender">，name字段设置为一个名字为单选按钮，不设置则为多选按钮
4. 文件上传，<input type="file" >
5. 密码输入框，<input type="password" >
6. 下拉框，<select><option>–请选择–</option></select>
7. 超链接，<a href="http://www.baidu.com">百度链接地址</a><br>
8. 表单，<form></form>
9. 图片，<img src="路径">
10. 有序列表，<ol></ol>
11. 无序列表，<ul></ul>
12. 文本域，<textarea></textarea>
13. 框架，<iframe></iframe>
14. 页面布局，div
例子代码如下：
<html>
<head>
<style type="text/css">
.head{
background-color:black;
color:white;
text-align:center;
padding:5px;
}
.left{
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
.middle{
width:350px;
float:left;
padding:10px;
}
.foot{
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
文本框：<input type="text"><br>
选择框：<input type="checkbox">电影<input type="checkbox">篮球<br>
单选按钮：<input type="radio" name="gender">男<input type="radio" name="gender">女<br>
文件上传：<input type="file"><br>
密码输入框：<input type="password"><br>
下拉框：<select><option>–请选择–</option><option>北京</option><option>上海</option></select><br>
超链接：<a href="http://www.baidu.com">百度链接地址</a><br>
表单：
<form>
<table border="1px">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>分数</td>
</tr>
<tr>
<td>张三</td>
<td>28</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>100</td>
</tr>
</table>
<form>
图片：<img width="10%" height="10%" src="Chrysanthemum.jpg"><br>
无序列表：
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
</ul>
<br>
有序列表：
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
</ol>
<br>
文本区域：<textarea></textarea><br>
iframe框架：<iframe>iframe</iframe><br>
页面布局：
<div class="head">
<h1>页面顶部区域</h1>
</div>
<div class="left">
<h1>页面左面区域</h1>
</div>
<div class="middle">
<h1>页面中部区域</h1>
</div>
<div class="foot">
<h1>页面底部区域</h1>
</div>
</body>
</html>