什么是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属性来定位，肯定能找到当前页面里唯一的元素。

web自动化前置准备之html相关推荐

自动化用例设计原则+web自动化框架
自动化用例设计原则 web自动化框架 PO模式就是页面对象和测试用例的分离. PageObjects放页面对象,封装元素定位和元素操作(也可以单独把元素定位放到PageLocators层) basep ...
做Web自动化前，你必会的几个技能
学习web自动化的前提条件:手工测试(了解各种测试的知识).学习编程语言.学习Web基础.学习自动化测试工具 .学习自动化测试框架 .需要掌握前端的一些知识,无论学习语言还是前端知识,都是为了接下来的 ...
Python+selenium Web自动化持续更新
保姆入门级Web自动化学习资料前言 Web自动化环境搭建软件准备开始环境搭建浏览器和驱动下载谷歌浏览器驱动版本对应以及下载: edge浏览器驱动版本对应以及下载: ie浏览器驱动官方地址: ...
10行Python代码实现Web自动化管控
目录 1.模块安装 2.模块使用本博客将为各位分享Python Helium库,其是在 Selenium库基础上封装的更加高级的 Web 自动化工具,它能够通过网页端可见的标签.名称来和 Web 进 ...
python selenium - web自动化环境搭建
前提: 安装python环境. 参考另一篇博文:https://www.cnblogs.com/Simple-Small/p/9179061.html web自动化:实现代码驱动浏览器进行点点点的操作 ...
Web自动化之Headless Chrome概览
Web自动化这里所说的Web自动化是所有跟页面相关的自动化,比如页面爬取,数据抓取,页面内容检测,页面功能测试,页面加载性能测试,页面回归测试等等,当前主要由如下几种解决方式: 文本数据获取这就是 ...
Selenium Web 自动化 - Selenium常用API
Selenium Web 自动化 - Selenium常用API 2016-08-01 目录 1 对浏览器操作 1.1 用webdriver打开一个浏览器 1.2 最大化浏览器&关闭浏 ...
Selenium Web 自动化 - 如何找到元素
Selenium Web 自动化 - 如何找到元素 2016-07-29 1. 什么是元素? 元素:http://www.w3school.com.cn/html/html_elements.asp ...
python写web自动化_使用Python+selenium实现第一个自动化测试脚本
原标题:使用Python+selenium实现第一个自动化测试脚本最近在学web自动化,记录一下学习过程. 此处我选用python3.6+selenium3.0,均用最新版本,以适应未来需求. 环境 ...

web自动化前置准备之html