html知识

一、web自动化：

主要模拟人来进行业务操作，测试ui的功能

html是可以被浏览器解析的一套规则，学习html需要学习三大块：1、html代码，在前端展示。2、css样式，给前端页面化妆。3、js，前后端交互，给页面增加动作

二、html知识

1、行内标签（内联标签）和块级标签：

行内标签是自己内容有多大，就占多大，比如span、input；

块级标签是无论自己有多大，都占屏幕的一整行，比如div、p等

2、主动闭合标签和自闭和标签：

主动闭合标签：比如<div></div> <span></span>

自闭和标签：比如<input>

3、单行文本和多行文本：

单行文本：比如input标签，登陆时用户名密码文本框，就是单行文本，内容再多只能显示一行

多行文本：比如textarea标签，内容很多时，会进行换行

4、特殊符号：

<&lt 和&gt>：比如想让页面显示<a>，就写成&lta&gt

空格&nbsp：<span>空&nbsp&nbsp&nbsp&nbsp格</span>      #浏览器只能识别一个空格，所以如果想要多个空格，就加上&nbsp

5、向后端发送请求的方式：

（1）通过ajax进行异步请求

每次提交不会刷新页面，如果验证通过了才会跳转；现在都用这个

（2）通过form表单进行请求

提交时整个页面会刷新，返回页面，数据就刷新清空了，造成如果数据填错，每次提交后都得重新填写

三、html标签：

1、标题标签：

<h1> <h2> <h3> <h4> <h5> <h6>主动闭合标签：有6个标题标签，1最大最粗，依次减小

2、<p>标签：

段落标签，用了p标签的文案上下会换行，页面更好看一点

3、<span>主动闭合标签：

是html中的白版标签（指没有任何css的样式），是行内标签

4、input文本框标签：单行文本框

name属性：

<input name="username">          name是传递给后端json的key；文本框内输入的字符串就是传递给后端的value

value属性：

<input name="username" value="houning">        这是文本框内默认的内容

placeholder属性：

<input name="username" placeholder="请输入用户名">         这是文本框内的提示文案

type属性：代表当前input的类型，不写type时默认是text；

type=password:<input name="password" placeholder="请输入密码" type="password">      这个type会把输入的密码展示成···
type=checkbox:<input name="sex" type="checkbox" value="1" checked="checked">      这个是多选框，checked是默认勾选
type=radio:<input name="sex" type="radio" value="1">      这个是单选框，如果有多个name相同 value不同的单选框，选了一个，其他的就不能勾选，是互斥的关系
type=file:<input name="file" type="file">       这是上传文件；***input方式需要上传文件时，可以通过sendkey直接上传
type=button:<input value="登陆1" type="button">        这单纯是一个按钮，只有和js联动才能进行行动操作
type=submit:<input value="登陆2" type="submit">        这是提交按钮，如果和form连用，则会自动触发提交请求
type=reset:<input type="reset">        重置form表单里所有input变为默认模式；必须用在form表单里，否则毫无作用

 

5、form表单：相当于一张白纸，在上面可以写东西

<form action="http://www.baidu.com" method="get">
    <!--action指提交到哪个地址，method是方法-->
    <div><input name="username" placeholder="请输入用户名"></div>
    <!--div在这里起到换行的作用，每一个文本框在页面上占一行-->
    <div><input name="password" placeholder="请输入密码" type="password"></div>
    <div><input type="submit" value="登录"></div>
    <!--这里的提交按钮一点击，就会把json值传到action的地址上，页面跳到这个地址-->
</form>

6、label标签：扩展input框可点击的范围

<form>
    <div>
        <span>用户名：</span>
        <input name="username" type="text" placeholder="请输入用户名">
        <!--span标签这里是行内标签，这个不能做成点击标签后、后面的文本框内会出现输入的指示光标；与后面的label标签做出区别-->
    </div>
    <div>
        <label for="i2">密码：</label>
        <!--点击这个label标签，文本框内就会出现指示光标；for是对应input里的id-->
        <input id="i2" name="password" type="password" placeholder="请输入密码">
        <!--这里的id是为了一个label标签对应一个文本框，否则点击标签，文本框内不会出现指示光标-->
    </div>
</form>

7、select标签：下拉选项文本框

eg1：不分组

<select name="city">
    <!--这是一个下拉文本框，有3个城市选项-->
    <option value="1">北京</option>
    <!--与后端交互时，就传name和选择的value值；比如传json串：{"city":"2"}-->
    <option value="2">上海</option>
    <option value="3">深圳</option>
</select>

eg2：分组

<select>
    <optgroup label="河南">
        <!--optgroup是用来给选项分组的，label展示分组的名，但不可选-->
        <option>郑州</option>
        <option selected="selected">驻马店</option>
        <!--selecte是默认选这个选项-->
    </optgroup>
</select>

8、<a>超链接标签：

<a href="http://www.baidu.com" target="_blank">跳转百度</a>
<!--超链接标签，target="_blank"是跳转并新建一个tab，不加target的话，就是在原tab页上跳转-->

9、图片标签img：

<img src="http://ui.hudhu" alt="图片加载失败时展示" title="鼠标悬浮在图案上时展示">
<!--src里是图片的路径，alt是图片加载失败时才展示，title是鼠标悬浮的时候展示的文字-->

10、表格标签table：

<table>
    <thead>
        <tr>
            <th>id</th>
            <!--thead是指表头，tr是表头里的行，th是表头里的列-->
            <th>name</th>
            <th>method</th>
            <th colspan="2">操作</th>
            <!--colspan是合并列的单元格，此处是合并两列单元格-->
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <!--tbody是指表体，tr是表体里的行，td是表体里的列-->
            <td rowspan="2">houning</td>
            <!--rowspan是合并行的单元格，此处是合并两行单元格；此处有行的合并，所以表体里下一行就会少写一列-->
            <td>post</td>
            <td><a href="http://www.baidu.com" target="_blank">执行</a></td>
            <!--此处可以用个超链接，点击表格里的"执行"，就会跳转-->
            <td>修改</td>
        </tr>
        <tr>
            <td>2</td>
            <td>get</td>
            <td>执行</td>
            <td>修改</td>
        </tr>
    </tbody>
</table>