ps:大师兄的博客链接http://www.imdsx.cn/
http://ui.imdsx.cn/html/
html 相当于一个人
css 相当于为这个人穿上漂亮的衣服，化妆
js 相当于是让这个人动起来
学习目标：
学习UI自动化
web自动化
主要模拟人来进行业务操作，测试ui的功能
HTML
能看懂 前端代码的含义
Html 是可以被浏览器所解析的一套规则
我们学习html的话 应该学习什么？
能够被浏览器所解析的这套规则
学习前端 需要学习三大块
1、HTML（学一套规则）在前端展示
2、CSS（样式，给前端页面化妆）
3、JS（前后台交互、增加动作）
JavaScript 和 java 没有一毛钱关系
学习内容：
CSS
JS
DOM
XPATH 写法
Css Selector 写法
app自动化
一、初识HTML
<!DOCTYPE html> <!--指定标准的html代码 格式-->
<html lang="en">
二、head
1、<meta charset="UTF-8"> meta用作配置html字符集；写在标签中的charset等叫做属性
2、自闭合标签：它没有另一对，自己就是一个整体
3、主动闭合标签：成对出现
4、修改浏览器tab页的名字：<title>水瓶座</title>
<!DOCTYPE html> <!--指定标准的html代码 格式--> <!--一个标签 通过<> 来定义--> <html lang="en"> <head> <!--head标签中大部分的标签都是不可见 前端页面不可见--> <!--配置html字符集--> <!--写在标签中的 叫做属性 --> <meta charset="UTF-8"> <!--每隔一秒钟 刷新一次--> <!--<meta http-equiv="refresh" content="1;http://www.baidu.com">--> <!--关键字检索--> <meta name="keywords" content="xxxx"> <!--描述--> <meta name="description" content="xxxx"> <!--修改浏览器tab页的名字的--> <title>水瓶座</title>
<!--链接标签 rel指定 要展示要链接的功能 href 路径--> <link rel="shortcut icon" href="http://ui.imdsx.cn/static/image/dsx_Small.jpg"> <!--链接样式表 rel指定 要展示要链接的功能 href 路径 --> <link rel="stylesheet" href=""> <!--自闭合标签--> <!--它没有另一对，自己就是一个整体--> <!--主动闭合标签--> <!--成对出现--> </head> <body> <a>水瓶座</a> </body> </html>
三、body
1、span标签：
span标签是html中的 白版标签（没有任何css的样式），它是html中出场率最高的标签。
<span>年轻,就是拿来折腾的。</span>
2、div标签：
div标签是伪白版标签。
<div>年轻,就是拿来折腾的。</div>
3、行内标签和块级标签：
行内标签（内联标签）：自己有多大，就占多大空间，如：span标签
块级标签：无论自己有多大 都占一整行，如div标签
4、段落标签：上下换行 段落标签
<p>年轻,就是拿来折腾的。让自己具备独立生活的能力，具备一技之长的资本，是需要无数个夜晚的静思，无数寂寞时光的堆积而成的。</p>
5、标题标签
标题标签 一共有6个。
<h1>我是标题标签h1</h1> <h2>我是标题标签h2</h2> <h3>我是标题标签h3</h3> <h4>我是标题标签h4</h4> <h5>我是标题标签h5</h5> <h6>我是标题标签h6</h6>
6、多行文本：
<textarea>行内标签（内联标签）块级标签</textarea>
7、input输入框：
（1）单行文本框 也叫 input框;
（2）placeholder 提示文案；
（3）type代表当前input的类型，默认是text；
<!--name代表传递给后端JSON的key 输入的字符串就是传递给后端的value--> <input name="user" value="123456" placeholder="请输入用户名" type="text"> <input name="password" placeholder="请输入密码" type="password">
8、特殊符号：
（1）<代表小于号<
（2）>代表大于号>
（3） 代表空格；若直接输入多个空格，浏览器只会识别一个空格，故需要使用特殊符号 
<div> <!–特殊符号–> <!--<p>--> <span>百    测</span> </div>
9、多选框
checkbox 多选框 checked代表默认勾选
<input type="checkbox" name="sex" value="1" checked="checked"> <input type="checkbox" name="sex" value="2"> <input type="checkbox" name="sex" value="3">
10、单选框： radio 单选 name相同则互斥
<input type="radio" name="sex" value="1"> <input type="radio" name="sex" value="2">
11、上传文件：
<!-- *****对于ui自动化来说 如果你需要上传文件的操作时，如果是input的方式实现的文件上传则可以通过sendkey直接搞--> <input type="file" name="file"> <!--button只是一个单纯的按钮 需要和js联动绑定事件来才可以进行动作操作--> <input type="button" value="登录1">
12、表单标签：
<!--表单标签 理解为一张白纸 他是一个载体 承载的数据--> <form action="http://www.baidu.com" method="get"> <div> <!--<!–label扩展input可点击的范围–>--> <label for="i1">用户名：</label> <input id="i1" type="text" name="username" placeholder="请输入用户名"> </div> <div> <label for="i2">密码：</label> <input id="i2" type="password" placeholder="请输入密码" name="passwd"> </div> <!--如果submit和form连用则会点击时自动触发请求--> <div> <input type="submit" value="登录Submit"> </div> <!--button必须和js连用--> <div> <input type="button" value="登录button"></div> <!--如果不和form表单连用 那将毫无作用 重置form中所有input变为默认模式--> <input type="reset"> </form>
13、html向后端发送请求的两种方式：
1、通过ajax进行异步请求：每次提交不会刷新页面 如果验证通过才会跳转 2、通过form表单进行请求：提交时整个页面进行刷新提交；会导致用户填写的数据被清空。
14、selected设置默认选择项：
<!--select选择框 在写value 具有层级关系 selected默认选择那一项-->
<select name="area"> <option value="1">北京</option> <option value="2">上海</option> <option value="3" selected="selected">深圳</option> </select> <!--{“area”：“3”}-->
15、label分组名：
<select> <!--<!–label分组名–>--> <optgroup label="黑龙江"> <option value="1">牡丹江</option> <option value="2">哈尔滨</option> </optgroup> <optgroup label="河北"> <option value="3">秦皇岛</option> <option value="4">石家庄</option> </optgroup> </select>
16、超链接标签：
超链接标签 href 连接地址
设置target，点击链接会新建tab打开
<a href="http://www.besttest.cn" target="_blank">跳转besttest官网</a>
17、图片标签：
图片标签：
alt->当图片加载失败后显示的文字;
title->鼠标悬浮到图片时显示的文字.
<img src="http://ui.imdsx.cn/static/image/dsx_Small.jpg1" alt="这是加载失败的文案" title="这是鼠标炫悬浮式显示文字">
18、表格：
<!--表格--> <table border="1"> <thead> <tr> <th>id</th> <th>name</th> <th>method</th> <th colspan="2">操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td rowspan="4">dsx</td> <td>post</td> <td>执行</td> <td>修改</td> </tr> <tr> <td>1</td> <td>post</td> <td>执行</td> <td>修改</td> </tr> <tr> <td>1</td> <td>post</td> <td>执行</td> <td>修改</td> </tr> <tr> <td>1</td> <td>post</td> <td><a href="s.html">执行</a></td> <td>修改</td> </tr> </tbody> </table>
四、span、div、p、h1/h2/h3/h4/h5/h6、块级标签、多选、单选、提示文案、上传文件
1、什么是块级标签？
不管多长占一行 比较霸道
2、行内标签的特点是什么？
自己有多长就占多长 不可以应用宽 高 外边距 内边距
3、自闭和标签有哪些？
- <input/>:输入标签，用户输入的标签
- <img/>:图片标签，放入图片
- <br/>:换行标签
- <link/>:链接标签，标签定义文档与外部资源的关系。 标签最常见的用途是链接样式表。
- <meta/>:元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部，不包含任何内容。<meta>标签的属性定义了与文档相关联的名称/值对。
- <frame/>:定义frameset中的一个特定的窗口。
- <param/>:元素允许你为插入XHTML文档的对象规定run-time设置。
- <col/>:为表格中一个或多个列定义属性值。
- <basefont/>:标签定义基准字体。该标签可以为文档中的所有文本定义默认字体颜色、字体大小和字体系列。
- <area/>:标签定义图像映射中的区域（注：图像映射指的是带有可点击区域的图像）。area元素总是嵌套在<map>标签中。
自闭和标签内容引自https://blog.csdn.net/huatek_wp/article/details/59587527
◆<hr/>：表示画一条线。
◆<base/>：标签为页面上的所有链接规定默认地址或默认目标。
◆<embed/>：可以在页面中嵌入任何类型的文档。
◆<keygen/>：标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。
◆<source/>：为媒介元素，定义媒介资源。
◆<command/>： 元素表示用户能够调用的命令。标签可以定义命令按钮，比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。
◆<track/>：标签为诸如 video 元素之类的媒介规定外部文本轨道。用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。
◆<wbr/>： 规定在文本中的何处适合添加换行符。如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 <wbr> 元素来添加 Word Break Opportunity（单词换行时机）。
4、input 有多少种类型、分别是哪些？
text password button submit checkbox radio reset file
button js连用
submit 如果和form表单连用 会直接提交
ajax
异步
form
刷新整个页面