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>

二、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）&nbsp代表空格；若直接输入多个空格，浏览器只会识别一个空格，故需要使用特殊符号&nbsp

<div>

&lt;!&ndash;特殊符号&ndash;&gt;

<!--&ltp&gt-->

<span>百&nbsp&nbsp&nbsp&nbsp测</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>

<!--&lt;!&ndash;label扩展input可点击的范围&ndash;&gt;-->

<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>

<!--&lt;!&ndash;label分组名&ndash;&gt;-->

<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
刷新整个页面

随机推荐

Python实现SSH连接远程服务器
首先需要安装paramiko模块 #-*- coding:utf-8 -*- __author__ = "MuT6 Sch01aR" import paramiko ssh = p ...
Java之常用类及方法
下面我们介绍Java类库所提供的常用类及类的常用方法一.java.lang.String 1. String类常用的构造函数 public String(String original) 使用串对象 ...
提高ListView的效率
按照普通的写法,如果ListView里面有比较多的东西的话,在加载每一个Item的时候,是非常非常卡的.具体表现就是滚动起来的时候会看见明显的卡顿. 关键还是处理自定义Adapter里面的getVie ...
「小程序JAVA实战」小程序的事件（11）
转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-11/ 我们以前在web开发的时候,web页面也有一些相关的事件,当然小程序要接触屏幕要进行一些点击 ...
一只小蜜蜂(斐波那契dp)
有一只经过训练的蜜蜂只能爬向右侧相邻的蜂房,不能反向爬行.请编程计算蜜蜂从蜂房a爬到蜂房b的可能路线数. 其中,蜂房的结构如下所示. Input输入数据的第一行是一个整数N,表示测试实例的个数,然后是 ...
OpenGL3.x,4.x中使用FreeImage显示图片的BUG-黑色，或颜色分量顺序错乱
//参照FreeImage官网给出的CTextrueManager写的加载函数 //官方给的例子是用opengl3.0以下的旧GL写的,没有使用glGenerateMipmap(GL_TEXTURE_ ...
转 -ALSA 配置
原文地址:-ALSA 配置">转 -ALSA 配置作者:超级大苹果 alsa 音频路径的问题: 在sound/soc/codecs目录中有很多音频codec的codec驱动,我使用的是 ...
Unity3D Physics Keynote
[Unity3D Physics Keynote] 1.在哪设置Layer Collision Matrix? "Edit"->"Project Settings& ...
图解KMP算法
ios7适配--navgationbar遮住下面view的处理
3down votefavorite Have you guys stumbled up on this issue ? Basically in iOS 7 Navigation Control ...

html->head->body

一、初识HTML

二、head

三、body

1、span标签：

2、div标签：

3、行内标签和块级标签：

4、段落标签：上下换行段落标签

5、标题标签

6、多行文本：

7、input输入框：

8、特殊符号：

9、多选框

10、单选框： radio 单选 name相同则互斥

11、上传文件：

12、表单标签：

13、html向后端发送请求的两种方式：

14、selected设置默认选择项：

15、label分组名：

16、超链接标签：

17、图片标签：

18、表格：

四、span、div、p、h1/h2/h3/h4/h5/h6、块级标签、多选、单选、提示文案、上传文件

随机推荐

热门专题

html->head->body

一、初识HTML

二、head

三、body

1、span标签：

2、div标签：

3、行内标签和块级标签：

4、段落标签：上下换行 段落标签

5、标题标签

6、多行文本：

7、input输入框：

8、特殊符号：

9、多选框

10、单选框： radio 单选 name相同则互斥

11、上传文件：

12、表单标签：

13、html向后端发送请求的两种方式：

14、selected设置默认选择项：

15、label分组名：

16、超链接标签：

17、图片标签：

18、表格：

四、span、div、p、h1/h2/h3/h4/h5/h6、块级标签、多选、单选、提示文案、上传文件

随机推荐

热门专题

4、段落标签：上下换行段落标签