web自动化前置准备之html

什么是html?

html翻译过来是超文本标记语言。那么这里就需要解释下什么叫超文本,什么叫标记语言。
所谓超文本就是超越了普通文本的文本,它是文字、视频、图片、音频等的混合体,最关键的是含有超链接,能够从一个文本跳转至另一个文本。而正因为是超文本,它不像TCPIP协议中底层的复杂、普通人无法看懂的二进制包形式,它是完整的、有意义(正常人能看懂)的数据。
第二个要解释的是标记语言。标记语言是用来存储信息,但不具有任何行为,而编程语言是有行为的,也就是可以调用各种函数、方法等对信息进行各种灵活的处理。它跟编程语言的相同点是,都可以描述对象拥有哪些属性。
总结起来,html就是以标签的形式存储文字、视频、图片、音频等信息的语言。

html有什么作用?

html起到打标签的作用,而打标签的目的是为了方便查找。有点类似于python的字典及json,我们可以通过里面的key找到对应的信息。
举个例子,一个输入框,我们给它打个input标签,而当我们找到了类型为input的标签,我们就知道他代表的是文本框。

做UI自动化为什么要学html?

ui自动化需要定位元素,然后对元素进行操作,而html可以帮助我们认识网页有哪些元素以及这些元素有哪些特性、属性,方便我们更好地进行元素定位。

html构成

标签(元素)
子标签
属性
texe文本

如下面所示:

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

table就是一个标签(元素),它表示的是表格;就是它的子元素,而、是的子元素;border是table元素的属性,表示边框宽度;Month、Savings这些是text文本。

基础标签及属性

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
<form action="http://httpbin.org/post" method="post">
用户名<input name="username" placeholder="请输入用户名">
密码<input type="password" name="pwd" placeholder="请输入密码">
<div>
    你最喜欢的书籍
    <input type="checkbox" name="favor_book" value="harrypotter">《哈利波特》
    <input type="checkbox" name="favor_book" value="dmbj">《盗墓笔记》
    <input type="checkbox" name="favor_book" value="santi">《三体》
</div>
<div>
    你所在的城市
    <input type="radio" name="city" value="guangdong">广东
    <input type="radio" name="city" value="guangxi">广西
    <input type="radio" name="city" value="beijing">北京
    <input type="radio" name="city" value="shanghai">上海
</div>
请上传一张你的照片<input type="file" name="photo">
<br>
请选择你投票的项目
    <select name="project">
    <option value="basketball">篮球</option>
    <option value="football">足球</option>
    <option value="badmintain">羽毛球</option>
    <option value="golf">高尔夫球</option>
</select>
<br>
<input type="submit">
</form>
    <!--注释-->
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h6>3级标题</h6>

    <p>床前明月光, <br>
        疑是地上霜。 <br>
        举头望明月, <br>
        低头思故乡。 <br>
    </p>

    <p>床前明月光, </p>
    <p>疑是地上霜。</p>
    <p>举头望明月,</p>
    <p>低头思故乡。</p>

<!--    水平线-->
    <hr>

    <!--    div 非常常见,因为经常使用他去进行页面排版和优化-->
    <div>床前明月光,</div>
    <div>疑是地上霜。</div>
    <div>举头望明月,</div>
    <div>低头思故乡。</div>

<!--    有序列表-->
    <ol>
        <li>tom</li>
        <li>jack</li>
        <li>john</li>
    </ol>

    <ul>
        <li>tom</li>
        <li>jack</li>
        <li>john</li>
    </ul>


<!--    表格-->
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>月薪</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>29</td>
            <td></td>
            <td>20k</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>19</td>
            <td></td>
            <td>50k</td>
        </tr>
        <tr></tr>
    </table>

    <!--超链接:经常会进行元素定位-->
    <div>
        <a href="http://www.baidu.com">进入百度</a>
    </div>

    <!--    图片地址可以是本地的地址,也可以网页地址-->
    <a href="http://www.baidu.com">
        <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1197759743,594720098&fm=26&gp=0.jpg"
            width="500px" height="342px"
        >
    </a>
</body>
</html>

input标签

input标签最常用的属性是name和value,还有id

name属性

如果没有name属性,如下面这段代码:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="http://httpbin.org/post" method="post">
<div>
    你所在的城市
    <input type="radio" value="guangdong">广东
    <input type="radio" value="guangxi">广西
    <input type="radio" value="beijing">北京
    <input type="radio" value="shanghai">上海
</div>
    <input type="submit">
</form>
</body>
</html>

在选择时,并不知道这个选项是属于哪个问题的,所以明明是单选框却能多选,因为html会把每个选项的问题都分别独立开来了:
在这里插入图片描述
而当提交表单后,后台也无法收到数据:
在这里插入图片描述
加上name属性后:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="http://httpbin.org/post" method="post">
<div>
    你所在的城市
    <input type="radio" name="city" value="guangdong">广东
    <input type="radio" name="city" value="guangxi">广西
    <input type="radio" name="city" value="beijing">北京
    <input type="radio" name="city" value="shanghai">上海
</div>
    <input type="submit">
</form>
</body>
</html>

html才能区分每一个选项分别属于哪一个问题:
在这里插入图片描述
提交的时候,后台才能接收到数据。
在这里插入图片描述
所以name属性不仅决定页面上单选框、复选框等选项元素属于哪个元素下的选项,而且决定了这些选项传到后台时是属于哪个列表下面的。

value属性

如果没有value属性,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="http://httpbin.org/post" method="post">
<div>
    你最喜欢的书籍
    <input type="checkbox" name="favor_book">《哈利波特》
    <input type="checkbox" name="favor_book">《盗墓笔记》
    <input type="checkbox" name="favor_book">《三体》
</div>
    <input type="submit">
</form>
</body>
</html>
```在这里插入图片描述

html展示的效果如下,实际上并无变化:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201213204321303.png)

但在提交之后就能看出来了:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201213204351264.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg4NTAyNw==,size_16,color_FFFFFF,t_70)
而如果我们加上value属性:
```html
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="http://httpbin.org/post" method="post">
<div>
    你最喜欢的书籍
    <input type="checkbox" name="favor_book" value="harrypotter">《哈利波特》
    <input type="checkbox" name="favor_book" value="dmbj">《盗墓笔记》
    <input type="checkbox" name="favor_book" value="santi">《三体》
</div>
    <input type="submit">
</form>
</body>
</html>

传到后台时就能看出这个选项具体的值是什么,后端程序员也能方便地拿着这个value去做相应的处理。
在这里插入图片描述

readonly和disable属性

这两个属性并不属于元素定位的依据,但会阻碍我们进行元素定位,它们都不能允许用户自由地输入。因此如果我们想在输入框输入字符而碰巧有这两个属性中的其中一个,我们需要通过js去掉该属性后才能正常输入字符。
readonly表示输入框只读不可写,一般会和value属性连用,可以被focus,用户会看到输入框中value的值但不能进行修改;提交表单时会把value的值传到后台去:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="http://httpbin.org/post" method="post">
用户名<input name="username" value="jack" readonly="true">
    <input type="submit">
</form>
</body>
</html>

在页面上可看到value的值,但不能进行修改:
在这里插入图片描述
点击提交后,会把value的值传到后台:
在这里插入图片描述
disabled属性会令输入框置灰不能输入,不可focus;提交表单时不会提交该元素的值过去:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="http://httpbin.org/post" method="post">
用户名<input name="username" disabled="true">
    <input type="submit">
</form>
</body>
</html>

页面上可看到输入框置灰不可输入,连光标都没有:
在这里插入图片描述
提交表单后,不会提交该元素的数据过去:
在这里插入图片描述

a标签

href属性

href属性需要和a标签绑定起来用,它表示链接的目的地址,这是我们以后进行元素定位时一个比较重要的定位方法。
另外,img标签也可加入到href标签里并进行超链接。

iframe标签

这个标签里面会嵌套另外的html的代码,这在以后进行元素定位时需要格外注意。

div标签

div标签也叫块元素,它可以把一连串的标签(也包括div)集合起来,方便进行排版及使用样式。它下面的元素都是它的子元素,因此在元素定位时可通过父子关系等层次进行定位。

id属性

id属性是一个非常重要的属性,任何元素都可使用该属性,这个id在当前页面是唯一值。多个页面可存在重复的id,但同一个页面上是不可能有重复的id的,因此进行元素定位的时候,如果通过属性如name等能找出好几个元素时,我们可以通过id属性来定位,肯定能找到当前页面里唯一的元素。

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页