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>

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