UI自动化-HTML页面构成
上篇我们介绍1-UI自动化-HTML页面构成
♡ \color{red}{\heartsuit} ♡
HTML页面的结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>web自动化</title>
</head>
<body>
</body>
</html>
作为测试只需要了解一些简单的标签
测试所需要掌握的html标签
p标签，段落标签<p></p>
经常和p一起出现的还有 标题标签<h1></h1>，有6级标题h1-->h6
div标签<div></div>
a标签，超链接<a></a>
a标签，经常和href属性一期使用，当点击时就会跳转到href里的链接。
img标签，图片<img></img>经常和src属性一起使用，src存放图片链接。
<a href="http://www.baidu.com">
<img src="https://pics7.baidu.com/xxx.jpeg">
</a>
input标签，输入框<input>input标签经常和type=(password、checkbox、radio、file、text)等属性一起使用。
input经常有name属性，如
<input type="radio" name="favor_singer" value="zhoujielun">周杰伦
<input type="password" name="password" placeholder=‘请输入密码’>
form表单<form></form>
前端和后端数据交互的一种方式
select标签，选择框<select></select>
<select>
<option>学习</option>
<option>游戏</option>
<option>逛街</option>
<option>工作</option>
</select>
span标签，块<span>
测试需了解的属性
disabled，不可以点击
readonly，只读，比如在一些日期框，12306买票，当天之前的日期不能选择，就会有这个readonly属性
placeholder，输入框的提示内容，这个很常见在登录页面基本会有。
checked，默认选择
value，在input标签时经常能见到
id属性
name属性
class属性，在标签中使用这个属性时经常是规划css样式的作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>UI自动化</title>
<style type="text/css">
h1::before {
content: "好好学习，认真搞钱"
}
</style>
<!-- 伪元素 -->
</head>
<body>
<div>
<h4>4级标题<span>span</span></h4>
<p>这是一个段落</p>
<p>又是一个段落</p>
</div>
<h1>1级标题</h1>
<a href="http://www.baidu.com">
<img src="https://pics7.baidu.com/xxx.jpeg">
</a>
<form action="http://baidu.com/post" method="post">
用户名：<input name="username" type="text" placeholder="请输入账号" readonly>
密码：<input name="password" type="password" placeholder="请输入密码">
<div>
最喜欢的歌手：
<input type="radio" name="favor_singer" value="zjl">周杰伦
<input type="radio" name="favor_singer" value="cyx">陈奕迅
</div>
<div>
喜欢的演员（多选）：
<input type="checkbox" name="favor_actor">陈晓
<input type="checkbox" name="favor_actor">刘亦菲
<input type="checkbox" name="favor_actor">白敬亭
</div>
<div>
选择文件：<input name="avatar" type="file">
</div>
爱好：
<select>
<option>篮球</option>
<option>游戏</option>
<option>跑步</option>
</select>
<input type="submit">
</form>
<!--在一个html页面中嵌套另一个页面-->
<div>
<iframe src="http://www.baidu.com" width="800" height="600"></iframe>-->
</div>
<p>这是段落</p>
<ul>
<li>学习</li>
<li>游戏</li>
<li>工作</li>
</ul>
</body>
</html>