2-UI自动化-HTML页面的构成和常见标签、属性

lucky多多

已于 2022-11-29 00:20:46 修改

阅读量591

点赞数

分类专栏： web自动化测试文章标签： html ui 自动化

于 2022-11-28 18:23:35 首次发布

本文链接：https://blog.csdn.net/weixin_41948075/article/details/128077489

版权

web自动化测试专栏收录该内容

5 篇文章 1 订阅

订阅专栏

本文介绍了UI自动化中HTML页面的基础构成，涵盖了p、h1-h6、div、a、img、input、form、select等标签的使用，以及disabled、readonly、placeholder等关键属性。

摘要由CSDN通过智能技术生成

上篇我们介绍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>