html-head-body
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代码 格式--> <!--一个标签 通过<> 来定义--> <htmllang="en"> <head><!--head标签中大部分的标签都是不可见 前端页面不可见--><!--配置html字符集--><!--写在标签中的 叫做属性--><metacharset="UTF-8"><!--每隔一秒钟 刷新一次--><!--<meta http-equiv="refresh" content="1;http://www.baidu.com">--><!--关键字检索--><metaname="keywords"content="xxxx"><!--描述--><metaname="description"content="xxxx"><!--修改浏览器tab页的名字的--><title>水瓶座</title><!--链接标签 rel指定 要展示要链接的功能 href 路径--><linkrel="shortcut icon"href="http://ui.imdsx.cn/static/image/dsx_Small.jpg"><!--链接样式表 rel指定 要展示要链接的功能 href 路径--><linkrel="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--> <inputname="user"value="123456"placeholder="请输入用户名"type="text"> <inputname="password"placeholder="请输入密码"type="password">
8、特殊符号:
(1)<代表小于号<
(2)>代表大于号>
(3) 代表空格;若直接输入多个空格,浏览器只会识别一个空格,故需要使用特殊符号 
<div> <!–特殊符号–> <!--<p>--> <span>百    测</span> </div>
9、多选框
checkbox 多选框 checked代表默认勾选
<inputtype="checkbox"name="sex"value="1"checked="checked"> <inputtype="checkbox"name="sex"value="2"> <inputtype="checkbox"name="sex"value="3">
10、单选框: radio 单选 name相同则互斥
<inputtype="radio"name="sex"value="1"> <inputtype="radio"name="sex"value="2">
11、上传文件:
<!--*****对于ui自动化来说 如果你需要上传文件的操作时,如果是input的方式实现的文件上传则可以通过sendkey直接搞--> <inputtype="file"name="file"> <!--button只是一个单纯的按钮 需要和js联动绑定事件来才可以进行动作操作--> <inputtype="button"value="登录1">
12、表单标签:
<!--表单标签 理解为一张白纸 他是一个载体 承载的数据--> <formaction="http://www.baidu.com"method="get"> <div> <!--<!–label扩展input可点击的范围–>--> <labelfor="i1">用户名:</label> <inputid="i1"type="text"name="username"placeholder="请输入用户名"> </div> <div> <labelfor="i2">密码:</label> <inputid="i2"type="password"placeholder="请输入密码"name="passwd"> </div> <!--如果submit和form连用则会点击时自动触发请求--> <div> <inputtype="submit"value="登录Submit"> </div> <!--button必须和js连用--> <div> <inputtype="button"value="登录button"></div> <!--如果不和form表单连用 那将毫无作用 重置form中所有input变为默认模式--> <inputtype="reset"> </form>
13、html向后端发送请求的两种方式:
1、通过ajax进行异步请求:每次提交不会刷新页面 如果验证通过才会跳转 2、通过form表单进行请求:提交时整个页面进行刷新提交;会导致用户填写的数据被清空。
14、selected设置默认选择项:
<!--select选择框 在写value 具有层级关系 selected默认选择那一项-->
<selectname="area"> <optionvalue="1">北京</option> <optionvalue="2">上海</option> <optionvalue="3"selected="selected">深圳</option> </select> <!--{“area”:“3”}-->
15、label分组名:
<select> <!--<!–label分组名–>--> <optgrouplabel="黑龙江"> <optionvalue="1">牡丹江</option> <optionvalue="2">哈尔滨</option> </optgroup> <optgrouplabel="河北"> <optionvalue="3">秦皇岛</option> <optionvalue="4">石家庄</option> </optgroup> </select>
16、超链接标签:
超链接标签 href 连接地址 设置target,点击链接会新建tab打开
<ahref="http://www.besttest.cn"target="_blank">跳转besttest官网</a>
17、图片标签:
图片标签:
alt->当图片加载失败后显示的文字;
title->鼠标悬浮到图片时显示的文字.
<imgsrc="http://ui.imdsx.cn/static/image/dsx_Small.jpg1"alt="这是加载失败的文案"title="这是鼠标炫悬浮式显示文字">
18、表格:
<!--表格--> <tableborder="1"><thead><tr><th>id</th><th>name</th><th>method</th><thcolspan="2">操作</th></tr></thead><tbody><tr><td>1</td><tdrowspan="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><ahref="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
刷新整个页面
转载于:https://www.cnblogs.com/Noul/p/9594338.html
最新文章
- JAVA 继承内存模型_Java内存模型
- 031_div和span
- 和我一起学《HTTP权威指南》——安全HTTP与HTTPS
- linux下挂载ntfs(windows)文件系统
- Java Web实训项目:西蒙购物网(2016)
- 【codevs2098】【Tyvj1625】化工厂装箱员,煞笔的人打煞笔的DP
- 源码解析——消息机制
- 经验 | 我的研究生这三年
- 面对面的办公室【冯·诺伊曼与艾伦•图灵】——纪念艾伦•图灵百年诞辰 1912.6.23-2012.6.23...
- Jmeter启动失败
- B 站视频下载器(BV号、dash、音视频分离)
- Fabric 1.0 ubuntu1704安装过程
- 编译原理 自下而上分析题型
- java中jdbc查询有返回值_使用JdbcTemplate查询方法的返回值 | 学步园
- c++ vector二维数组初始化与vector切片
- 最优化理论复习视频合集
- ntp linux 是什么意思,【NTP】Linux NTP
- 关于云计算必知的关键核心技术
- Jquery ajax, Axios, Fetch区别
- 实用又好用,6 款 Python 特殊文本格式处理库推荐