整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
elenium的定位元素方式是基于html语言构建的，所以学习web自动化是很有必要去学习html
HTML
HTML 全名 HyperText Markup Language(超文本标记语言),是一种用于创建网页的标准标记语言。常常和css js一起使用来构建漂亮的页面。
HTML构成
HTML的元素的以 标签、属性、text、内嵌标签 构成
下面以百度为例
在我们看到的页面上展示的内容都在内嵌标签有（head 头部信息、body 体信息）
在web自动化测试中重要的是body里内嵌标签中，因为展示的页面操作都是在body 中完成的
html脑图结构
常见HTML标签
p : 段落 文本，代表进行换行
h1-h6:标题从H1（最大） 到H6（最小） ,标题大小
div：对html页面进行布局，填充数据，容器，也有换行作用
span：对html页面进行布局，填充数据，容器，在一行独立设置样式
ul: 将 <ul> 标签与 <li> 标签一起使用，创建无序列表 组合：<ul><li></li></ul>
web自动化测试的重点
a：超链接跳转到页面，需要配合 href，一般都是<a href='www.baidu.com'> </a>使用
img： 图片的超链接，组合<img src="#图片链接#">
iframe：
在html页面里面嵌套html页面 ，src 页面链接 width 宽度 height 长度
组合 <iframe src="http://www.toutiao.com" width="400" height="500"></iframe>
select标签：组合<form><selevct></select> </form>
select的作用下拉选择框
form标签：
form的作用form表单是前端和后端进行用户数据交互的一种方式，前端编写的数据可以通过form表单传递给后端
<form action="http://httpbin.org/post" method="post"> #数据内容#<from>
action:接口地址，根据需求更改请求的接口地址 method：请求方法
input： input:通常有name和value属性
格式：<input type="" name="" value="">
代表输入，基本web自动化测试都必须要测的内容
<input name> ：默认属性输入框
组合：name 属性 <input name="123" value=“number”>
input name属性的作用：
当我们选择（输入）的数据传递给后端时会进行接收
input value值的作用：
后端接收的数据如果是json格式的话就会以接收{"name（123）"="value（number）"}
input type 的作用：
设定输入格式，不设置格式，默认是text 文本输入
<input name='password' type='password'>：
type='password'：代表输入内容带*号，用于设置密码框
type="text"：默认是text 文本输入
type="checkbox"：代表多选
type="radio"：代表单选框
type="file"：选择文件
type="submit" 提交按钮（配合form表单使用，将form内的数据提交到后端）
input placeholder的作用：输入框提示
input disable 的作用：
禁用输入框，输入框置灰，如果想输入在F12找到该元素并且去除
input readonly 的作用：只读输入框
样式代码与演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>web自动化</title>
</head>
<form action="http://httpbin.org/post" method="post">
<div>div也是个容器，对html页面进行布局
<h4>标题h4<span>对html页面进行布局，这是个容器</span></h4>
<a href="http://www.toutiao.com">点击我，跳转头条<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANgAAAA2CAMAAACSsKctAAAANlBMVEVHcEzuQEDwRETyRUX3TEzvQkLuQEDuQUHuQUHvQEDuQUHuQEDvQkLuQEDuQUHwQUHxQkLtQEDKaksGAAAAEXRSTlMAxiweDlyo49Nri/F5+bhLOapXaIgAAATMSURBVGje7ZrpsqQqDIAb2VEE3/9lx263AAmu3XVv1cn8mFOtIh+JIQuvFyFSzdK8/jsSrbg7BG+HSdjPZi3iJPTchR7a7iYam7mGNvwKTM5vlOQd6n3Z37IhN6zSNhW1TsJqMt/TwQk6G3gxmt0DC5/LfpxS9U38wOJ9RJN38uG4KGBR0wRNxrcHtn4dlPjpv4pCYzqEEffBfAG2XDC9sxyCUbbfH3wVDdbkS2P4FzQGRR4As8NdsEYXy01Y4xMa28C6KljT3gUDXNtYOn5fY3UwNtwEA9+XA397+zONxR03fQ1MerjG0Is4QYK5riLzEMDdC4+CuQoY99sKoW9R20z5zsKwN0gAczDFUohdPzSKRpw4j9Yp0+Jg2GgCrHBf3sAVuIytC8u4RjIwYmGOh8AMvTutfLtgydR8ZjzCgeV32M7eFlyZj2T8GY3lfHwNmChTGmcP5tECNNFBf4m4AqEGhGt8rYEj2i+AwUhwFCocgOs+ok383MFfMecdoGYUHFwkW76Jz5kiHlmQ4TtPY48+iNAnfqgX1a+vtNMueXyjvqox5WTkJFgthq3t0i2ydhY+4MsbYhKMtEu6dxFseqw1Gd+s2raasylPRgCluoJJgnnU3SYaHbS8Y4rJBv3h42AFdN1gGzwWZtgcMHD3Xk5BfYOz67qlsWKDnq3G1DP74DTCZVwQVbA1X57WpWWqk40od4svgInKBrtUPJSpfGPGyYYC6zma/OjJm0RzBcwcBONltAzKIVYxfyBObJlbFAHAtKSyOla4x+c1FiuhAxvOiDcpWBKo4GDbp3sLDA2CJR07EGCaUZYJwUys5OGgBhdYCRYFIWQQHKzrjU/AXCUdQ8C0e0+Y295XwbSsFhiS4qLUC9hePsZ2QqqVT4I3NvtgvrfbXQLxkwsYUoWsgI37uX4GbOXj231+J332DPHsXKb+cknCkC2gkZ1iLQE2RtRPgiVJq6mAadVtUKL5CAea69v9qGxxs/KTMLFrVaozYLLi7UcwrVxWY3XYtjfu32q07cOF/Ob7YKpWLm0Emewj+7m43Ud5EGzdAvjJKnz/jTbCg2B2OBIpXgBzZl9a/xFdhBChwYWXYIEYe1GYzn6fHlPIE3rJDhBBTPxIPHYng5bDObEXQqrEK34PTP+B/c/A/kzxD+wUWLB1AXVJd8cUm3Jkv1W/SpmGlsiVOUw32GxPbMVbZtA9WwneGjo+Xun/34s8hEGLqQ+AgUaVff0cDHCpJ7stSZvKTVW//vNPoXVuNV3rVQ7WVR+juRjRfLqtMeuzkWOtG2SxdtrnuehrSc9utyBpwjwB5sp23eqdI33Og5Wm6IZan3eXKz/wcc8UYdl87ZOsrUtDZmzz6xIwoU9nB2CHKw5FLGBWVkQXzrTsu4Fvw1K+JGRWmjoPiTjto6eqysMeF08NFA0chRVu8jNRyzpogXpF6rF9LuSw2MVzHtnphMxRNLgj6IasdpCBNef8B+CKj53zyI5tWOqdATsP0VP7GPoYJd1QDQuuagw2f30xj9URaFF6MM8pMPSxfa7w4FmqxtTb4YgjCOVPReQRanvgKa5TGuvQ7j9+rq5QD6aNMqRa/LffKb9JvQoR6Al9XCQyrCZCIL5eX5Z4+QEscJfekj/2D7KhSDEKe9jHAAAAAElFTkSuQmCC">
</a>
<!-- 下面是html页面中嵌套另一个html页面-->
</div>
<div></div>
<iframe src="http://www.toutiao.com" width="400" height="500"></iframe>
<!-- 段落-->
<p>这是第一行段落</p>
<p>这是第二行段落</p>
<p>菜单标题</p>
<ul>无序列表
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
</ul>
<!-- 用户输入-->
username:<input name="username" placeholder="输入账号" >
<p></p>
password:<input type="password" name="password" placeholder="输入密码">
<p></p>
禁用框 <input name="text" disabled>
<p></p>
只读框 <input name="text" placeholder="只能复制框内文字" readonly>
<p>choice you like color</p>
<div>
<!-- radio代表的意思是单选-->
<input type="radio" name="like_color" value="红色">red
<input type="radio" name="like_color" value="蓝色">blue
<input type="radio" name="like_color" value="绿色">green
</div>
<p>choice you not like color</p>
<div>
<!-- checkbox代表的意思是多选-->
<input type="checkbox" name="not_like_color">yellow
<input type="radio" name="not_like_color">white
<input type="radio" name="not_like_color">black
<p>选择文件</p>
<input type="file" name="file" >
</div>
<p>choice you not like animal</p>
<select name="dog">
<option>dog</option>
<option>cat</option>
<option>fish</option>
</select>
<p></p>
<input type="submit" width="50" height="20" value="点击提交">
</form>
</html>作为web自动化测试 ，了解具体是什么意思，以及如何进行元素的定位调用即可，当然全能弄懂那当然是更好的
Web领域的一些基本概念。
Web（World Wide Web）叫全球广域网，俗称万维网（www）。
W3C（World Wide Web Consortium）叫万维网联盟，是国际最著名的标准化组织，制定了web标准。
一个网页包含了html元素 Css JavaScript，Html元素决定了网页结构，Css进行了修饰美化，JavaScript控制了交互行为和动态效果。
web标准包含了下面三个方面：
Html不是一种编程语言，而是描述性的标记语言，主要作用是定义内容的结构。
2014年10月万维网联盟（W3C）完成了HTML5标准制定，是目前最新的HTM版本。
HTML5的出世，标志着web进入一个富客户端（具有很强的交互性和体验的客户端程序）时代，像APP网页，小程序都是HTML5的应用场景。
Html5新特性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!--字符集-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="Author" content="">
<meta name="Keywords" content="关键词" />
<meta name="Description" content="页面描述" />
<title>页面标题</title>
</head>
<body>
</body>
</html>viewport用户网页的可视区域，一个针对移动网页优化的页面 viewport meta 标签如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">head区域元素：
meta title style link script base。
body区域元素：
块级元素：每个元素都是独占一行
行内元素：元素在同一行水平排列
inline-block：元素可以排列在同一行显示，并且可以设置一些块元素属性
通过Css：display:inline-block 改变元素。
很多元素都自带了默认样式，不同浏览器下默认样式表现不一致，为了统一或者满足一些需求我们需求将所有默认样式清空，这种处理方式又称为 Css Reset，比如：
*{
margin: 0;
padding: 0;
}另外一种方案使用normalize.css，它将不同浏览器下的默认样式进行了统一，
https://github.com/necolas/normalize.css
html中的单位是像素px
绝对单位
相对单位
属性：字体、行高、颜色、大小、背景、边框、滚动、换行、修饰属性（粗体、斜体、下划线）
p{
font-size: 20px; /*字体大小*/
line-height: 30px; /*行高*/
font-family: PingFang SC; /*字体类型：显示PingFang SC，没有就显示默认*/
font-style: italic ; /*italic表示斜体，normal表示不倾斜*/
font-weight: bold; /*粗体或写（400｜500｜600）*/
font-variant: small-caps; /*小写变大写*/
}行高（line-height）
一般约定行高、字号都是偶数，这样保证它们的差一定偶数除2得到整数，如下图所示：
line-height
文本垂直居中
对于单行文本可以设置行高=盒子高度。
对于多行元素的垂直对齐，我们可以使用vertical-align: middle属性，不过vertical-align 仅适用inline、inline-block 和 table-cell 元素。
vertical-align
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
/* 指定长度值 */
vertical-align: 10em;
vertical-align: 4px;
/* 使用百分比 */
vertical-align: 20%;
/* 全局值 */
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: unset;内容溢出处理
filter:gray()理解优先级很重要，有助于我们排查一些问题。浏览器将优先级分为两部分：HTML的行内样式和选择器的样式。
行内样式
行内样式是直接作用在元素，它的优先级高于选择器样式，使用！important可以提高样式表的优先级。
<div style="font-size:16px">
</div>选择器样式
<style type="text/css">
p{
font-size: 16px;
}
</style>
<link rel="stylesheet" href="style/app.css">优先级规则如下：
优先级
我们通过下图这种标记方式，就可以判断出选择器的优先级。
优先级
两条经验法则
由多个基础选择器组合成的复杂选择器。
多个基础选择器连起来（中间没有空格）组成一个复合选择器（如：ul.nav）。复合选择器选中的元素将匹配其全部基础选择器，.box.nav 可以选中 class="box nav" ，但是不能选中 class="box"。
用于选中某种特定状态的元素，优先级（0，1，0）。
:nth-child(an+b)
更多参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS
伪元素选择器可以向HTML标记中未定义的地方插入内容，优先级（0，0，1）。
属性选择器用于根据HTML属性进行匹配元素，优先级（0，1，0）。
本文要点回顾，欢迎留言交流。
网页中文字作为信息的主要载体，非常重要，之前学习过HTML中关于文本、段落等格式的知识，这些只是简单排版，如果想制作更好看的文本样式，就的使用css 字体和文本样式了。
css 字体属性主要包括字体系列、字体大小、字体风格等其它样式。
1、设置字体系列 —— font-family
这个属性用来设置网页使用哪种类型的字体显示文本，语法如下：
font-family: "字体1"，"字体2"，"字体3"...font-family 属性可以定义多个字体，浏览器会从前到后优先选择使用字体，当浏览器不支持第一个字体，则会尝试使用第二个字体，以此类推。如果浏览器不支持所有字体，则使用默认字体。
如下示例：
2、字体样式—— font-style
字体样式有三种：
如下示例：
这里有2种斜体，它们有什么区别？
italic 和 oblique 都是向右倾斜的文字, 但区别在于 italic 是指斜体字，而 oblique 是倾斜的文字，对于没有斜体的字体应该使用 oblique 属性值来实现倾斜的文字效果。
3、字体大小 —— font-size
“font-size”属性来设置字体大小，它的值可以使用预定义关键字、绝对大小、相对大小。
预定义关键字
预定义关键字有 xx-small、x-small、small、medium、large、x-large、xx-large，尺寸按顺序依次增大。它的可选范围只有这几种，且不同浏览器厂商定义的预定义关键字对应的字体大小不一致，所以相同的属性值，在不同浏览器看到的大小不一样，建议不要使用这种方式。
绝对大小
绝对大小使用比如：px(像素)、pt(点，1pt 相当于 1/72in)、in(英寸)、cm(厘米)、mm(毫米)等单位设置字体大小。
如下示例：
绝对大小不会随着页面大小改变而改变，如果要想使文字大小自适应不同的屏幕或设备就需要使用相对大小。
相对大小：
相对大小使用 em、%、rem等来设置大小，它们都是相对于某个参考基准的字体大小，来计算当前字体的大小，只是参考基准不同而已。
如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（1em=16px,100%=16px）。
em和%都是相对于父级元素的字体大小，其子级元素会在其父级元素的计算结果上继续计算大小，如下示例：
如上p元素的字体大小是36px，而不是12px * 200%等于24px，它是在其父级div元素的计算结果上继续计算的值。
使用em 或 %虽然可以方便修改文字大小，但是当元素嵌套很深的时候，就变得比较复杂，深层的元素文字大小就变得不可控，所以css3 新增加了rem 来设置字体大小。
rem 是相对于根元素 （html 元素） font-size属性的值，每一层级都会参考html根元素的字体大小来计算，这样一来，无论嵌套多少层，字体大小的计算就变得统一了。
rem 是CSS3新增的一个相对单位，IE9 以下版本的老浏览器却不支持它，这也是很多编程人员尚未使用 rem 的原因。
在定义字体大小时，建议在 html 元素中定义绝大多数元素所需要的字体大小，并让所有子元素继承 html 的字体大小。如果某个子元素要改变字体大小，则使用相对尺寸 em 或 % 或 rem 重新定义。
4、复合属性—— font
font 属性可以看成是字体的简写，它可以定义字体系列、大小、风格、粗细、等样式，语法如下：
font："font-style font-variant font-weight font-size/line-height font-family"其中font-size和font-family的值是必需的。如果缺少了其他值，将使用浏览器的默认值。
如下示例：
除了以上设置，font还有其它的属性值，如下：
这些属性，只有部分浏览器支持，具体使用时请查看浏览器是否支持。
5、其它字体属性
字体还有 font-weight（设置粗细的属性）、font-variant（设置小型大写字母的字体显示文本）如下示例：
font-weight 字体粗细：有normal、lighter、bold、数值三种，数值范围从 100 ~ 900 依次变粗，900 相当于 bold。
font-variant值有normal（标准字体显示）、small-caps（浏览器会显示小型大写字母的字体）、inherit（继承父元素的设置）
如下示例：
font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
css 文本属性主要设置比如字符间隔，文本颜色、单词间隔、行高、文字修饰、对齐方式等效果。
1、文字颜色 —— color
color 使用以“#”开头16进制的颜色代码或颜色关键词（如red、blue），如下示例：
2、字符间隔 —— letter-spacing
设置字符水平间距，如下示例：
3、单词间隔 —— word-spacing
设置单词之间的间距，如下示例：
这里注意中文比较特殊，一个中文字不等同于英文的一个单词。
4、行高 —— line-height
设置字体行之间垂直间距，如下示例：
5、文字修饰 —— text-decoration
可以设置文字下划线、删除线等样式，如下示例：
还可以定义波浪线效果，如下示例：
6、水平对齐 —— text-align
有三种水平方向的对齐方式，居左，居中、居右，如下示例：
7、垂直对齐—— vertical-align
vertical-align 属性设置一个元素的垂直对齐方式。
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
如下示例，对齐图片：
还有很多其它属性，在此不每个都介绍了，可参考如下：
8、文字大小写转换—— text-transform
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。如下示例：
9、文本缩进 —— text-indent
文本缩进属性是用来指定文本的第一行的缩进。如下示例：
文本缩进可以使用绝对值如：px、pt、cm等，也可以是相对单位 %。且可以是负值，如果是负值，就相当于变成向左缩进了。
10、空白处理 —— white-space
white-space属性指定元素内的空白怎样处理。如下示例：
11、文字阴影 —— text-shadow
text-shadow 可以设置文字阴影效果，比如内阴影或外阴影，语法：
text-shadow: x坐标 y坐标 模糊大小 颜色;其中x/y 坐标相对于文本左上角的偏移量，如下示例：
12、文本溢出 —— text-overflow
text-overflow 属性指定当文本溢出时包含它的元素应该如何显示。可以设置文本被剪切、显示省略号 (...) 或显示自定义字符串（不是所有浏览器都支持）。
text-overflow 需要配合以下两个属性使用：
如下示例：
本篇讲述了文字和文本的大部分样式设置，掌握这些css用法非常重要，网页大部分都是文本，要想制作一个漂亮的页面，这些是必须要学会的，且要学会融会贯通。
本篇主要讲了以下内容：
以上都是最基本的，要多加练习，才能够理解学会使用。感谢关注，祝学习愉快！
上篇：前端入门——css 盒子模型
*请认真填写需求信息，我们会在24小时内与您取得联系。
