UI自动化(一)html基础

前端的三把利器

HTML:赤裸的一个人

CSS:华丽的衣服

JS/JavaScript:赋予这个人的行为,也就是动起来

DOM 就是将页面变成可操

HTML(超文本标记语言)

html代码实际上就是一套能够被浏览器所识别的规则代码,由一个个标签组成。html代码就是一大长串字符串,而这种字符串的格式正好能够被浏览器所识别,也就有了我们的WEB页面。

<!DOCTYPE html>
<!--html标签的开始 一个页面只可以有一对html标签-->
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<!--指定了字符集 自闭和标签-->
<!--一对的叫做主动闭合标签-->
<!--head标签中大部分都是不可见的-->
<!--charset="UTF-8" 叫做meta标签的属性-->
<meta charset="UTF-8">
<!--每隔一秒钟,刷新一次-->
<!--<meta http-equiv="refresh" content="1;http://ui.imdsx.cn">-->
<!--关键字检索参数-->
<meta name="keywords" content="性能测试,自动化测试">
<!--描述当前网站是干什么的-->
<meta name="description" content="">
<!--rel代表告诉link标签干什么,stylesheet引入css的标签,href引入的路径-->
<link rel="stylesheet" href="">
<!--title的logo图标-->
<link rel="shortcut icon" href="timg.jpg">
<!--修改浏览器的tag名-->
<title>HTML</title>
<!--css样式标签-->
<style></style>
<!--js标签-->
<script></script>
</head>
<br>
<h3><p>段落标签</p></h3>
<h3></br>换行</h3>
<!--段落标签-->
<p>年轻,就是拿来折腾的。让自己具备独立生活的能力,具备一技之长的资本,是需要无数个夜晚的静思,无数寂寞时光的堆积而成的。

别在最该拼搏的年纪选择稳定,世界上最大的不变是改变,只有每天进步,才能拥抱生命的无限可能!

你以为你给对方留了电话存了微信,应该彼此也能互相帮忙,却忘记了一件很重要的事情,只有关系平等,才能互相帮助。

不要为了户口丢掉生活,为了稳定丢掉青春,为了平淡丢掉梦想,因为你所谓的稳定,不过实在浪费生命。

真正的勇者不是狼狈的逃脱,而是用闲暇时间,磨练自己。

只有等现实的日子富足了,能力够强了,才可以去追求那些美好的生活状态,才该去追求那些伟大的梦。否则那些梦幻般的生活,都只是空中阁楼,不堪一击。

生活是自己的,自己都不求进取,凭什么让别人给你美好的未来?</p>
<!--标题标签-->
<h1>标题标签h1</h1>
<h2>标题标签h2</h2>
<h3>标题标签h3</h3>
<h4>标题标签h4</h4>
<h5>标题标签h5</h5>
<h6>标题标签h6</h6>
<!--块级标签,自己有多大,都占一行,div伪白板标签,只有一个css样式修饰-->
<div>div标签</div>
<!--行内标签,也叫内联标签,自己有多大占多大,白板标签,没有任何css样式修饰-->
<span>span标签</span>
<br>
<!--text 文本框-->
<input type="text" placeholder="默认值" name="">
<!--password 密文-->
<!--<input type="password">-->
<!--checkbox 多选框-->
<input type="checkbox" name="a" checked="checked">男的
<input type="checkbox" name="a">一米四
<input type="checkbox" name="a">36c
<!--radio 单选框 name属性相同 名字互斥-->
<input type="radio" name="sex">男
<input type="radio" name="sex">女
<!--用button写的,绑定js才可以操作-->
<input type="button" value="登陆">
<!--submit如果和form标单连用,则直接提交-->
<!--form表单为一张白纸,action要提交的地址,method请求方式-->
<form action="http://baidu.com" method="get">
<input type="text">
<input type="submit" value="提交">
</form>
<!--重置-->
<input type="reset">
<!--隐藏的数据-->
<input type="hidden" name="" value="">
<!--上传文件-->
<input type="file">
<!--通过for与inputid进行关联,扩展获取焦点的范围-->
<label for="i1">用户名</label><input type="text" id="i1">
<!--多行文本-->
<textarea name="">默认值</textarea>
<div>
<!--下拉框,selected默认属性-->
<select>
<option value="1">北京</option>
<option value="2">四川</option>
<option value="3">辽宁</option>
<option value="4" selected="selected">黑龙江</option>
</select>
<select>
<!--optgroup组名-->
<optgroup label="黑龙江">
<option value="">哈尔滨</option>
<option value="">大庆</option>
<option value="">佳木斯</option>
<option value="">鹤岗</option>
</optgroup>
<optgroup label="北京">
<option value="">石景山区</option>
<option value="">朝阳区</option>
<option value="">海淀区</option>
<option value="">通州区</option>
</optgroup>
</select>
</div>
<div>
<a href="http://baidu.com">跳转</a>
<!--<span id="i2">11111</span>-->
<!--<a href="#i2">按钮</a>-->
</div>
<div>
<table border="1">
<thead>
<tr>
<td>ID</td><td>用例名称</td><td>执行人</td><td>编辑</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>table表格测试</td><td>大师兄</td><td>详情 编辑</td>
</tr>
<tr>
<td>1</td><td colspan="2">table表格测试</td><td>详情 编辑</td>
</tr>
<tr>
<td>1</td><td rowspan="2">table表格测试</td><td>大师兄</td><td>详情 编辑</td>
</tr>
<tr>
<td>1</td><td>大师兄</td><td>详情 编辑</td>
</tr>
</tbody>
</table>
</div>
<div>
<!--原点的方式显示数据-->
<ul>
<li>第一列</li>
<li>第二列</li>
</ul>
<!--数字的形式标记数据-->
<ol>
<li>第一列</li>
<li>第二列</li>
</ol>
<dl>
<dt>黑龙江</dt>
<dd>哈尔滨</dd>
<dd>牡丹江</dd>
</dl>
<dl>
<dt>北京</dt>
<dd>北京</dd>
</dl>
</div>
<div>
<!--title鼠标悬浮在图片上显示的文案,alt代表当图片加载失败时显示的文字-->
<img src="timg.jpg" alt="代表当图片加载失败时显示的文字" title="鼠标悬浮在图片上显示的文案">
</div>
</body>
</html>
posted @ 2019-02-25 09:56  狐觞  阅读(534)  评论(0编辑  收藏  举报