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

随机推荐

PHP 简单实现webSocket
费话少说,用源代码说话 1)客户端实现 1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <tit ...
ClientDataSet1.LoadFromStream
lStream3.Position := 0; lDataSet.LoadFromStream(lStream3);
在C#中动态调用webService
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...
Xamarin官方示例代码无法部署，提示已跳过部署解决方法
最近利用Visual Studio 2017学习Android开发.主要是通过Xamarin官方的文档进行的.官方的入门指导提供了很多的示例代码.但是下载之后,调试运行的时候,总是无法部署到虚拟机上. ...
textarea标签提示录入剩余字数
textarea标签提示录入剩余字数 <textarea onkeydown="checkMaxInput(this,300)" onkeyup="checkMax ...
ORA-01940:无法删除当前已链接的用户
(1)查看用户的连接状况 select user name, sid, serial# from v$session; (2)找到要删除用户的sid,和serial,并删除例如要删除用户nc633t ...
Lucene Payload 的研究与应用
Payload (元数据) 诞生于 Lucene 的2.2 版本,它是在 Lucene 2.1 索引文件格式的基础上扩展而来,提供了一种可以灵活配置的高级索引技术,在某些特定应用场景下能优化基于 Lu ...
MyGeneration代码生成工具
使用MyGeneration 生成代码:转自http://www.cnblogs.com/jack-liang/archive/2011/08/18/2144066.html 我们经常用数据访问层和业 ...
基于Nginx简单实现动静分离
1.首先安装Nginx 2.在Nginx.conf文件中添加如下配置: server{ listen 80; server_name www.lf.com; location ~ (.jpg|.png ...
oracle 通过序列实现某字段自增
-- 创建表 create table items( id int primary key, name ) not null, price int not null, detail ), pic ), ...

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、段落标签：上下换行段落标签