♥、学习目标
-
- 明确HTML常见标签
- 根据测试流程对黑马头条登陆进行需求分析
- 提取登陆模块测试点并设计登陆用例
- 能实用工具对缺陷进行管理
一、常见HTML标签
1、html介绍
![]()
2、html骨架标签
![]()
<title>标签一般是标题或搜索等内容
3、常用标签
| 标签实例 |
效果 |
|
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题/h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>段落标题</p>
<a href="网址加http协议" target="窗口打开方式，默认_blank新窗口“>超链接标签</a>
<img src="图片路径或图片网址" title="悬停提示信息"/>单标签
<br />换行单标签
空格，可以在文本等内容存在
<div class="" style="background: blueviolet;">
大盒子1
</div>
<div style="background: brown;">大盒子2</div>
<span style="background: greenyellow;">span标签</span>
<span style="background: green;">span标签2</span>
<ul style="color: red;">无序标签|div与span区别
<li>div标签是块级元素，标签里的内容占据一行，不会与其他标签在一行显示；</li>
<li>div标签可以通过css样式来设置自身的宽度></li>
<li>div标签中，可以使用其他标签</li>
<li>span是行内元素，会和其他标签元素会在一行显示</li>
<li>span标签的宽度、高度都无法通过css样式设置</li>
<li>span不能容纳块节元素</li>
</ul>
<ol>有序标签
<li></li>
<li></li>
</ol>
<form name="login" method="post" action="URL地址；指定form表单向何处发送数据">表单标签
<table align="center" name="表格布局">
<caption>表格标题</caption>
<tr name="表格行">
<td>用户名</td>
<td><input type="text" name="" id="" value="" />td单元格</td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="" id="" value="" />不会明文显示</td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" name="sex" id="" value="" />男
<input type="radio" name="sex" id="" value="" checked="checked"/>女，name一致为一组</td>
</tr>
<tr>
<td>喜好</td>
<td>
<input type="checkbox" name="read" id="" value="" />看书
<input type="checkbox" name="game" id="" value="" />打游戏
<input type="checkbox" name="tv" id="" value="" />看电视
<input type="checkbox" name="eat" id="" value="" />吃火锅
</td>
</tr>
<tr>
<td><input type="button" name="" id="" value="" />普通按钮
<input type="submit" name="" id="" value="" />提交按钮
<input type="reset" name="" id="" value="" />重置按钮</td>
</tr>
</table>
</form>
|
![]()
|
注释：国际通用注释，使用ctrl+/进行注释。测试时需要检查或删除。（f12代码可以看到注释，防止看到信息，可参考虾米注释问题）
- 图片必须有title属性，title图片加载时鼠标悬停信息，图片未加载时显示信息（优先级低于alt,体验感强)
- img中alt和title区别:
-
-
-
- alt 此属性的实质作用是图片在无法正确显示的时候起到文本替代的作用,不过在IE6下还起到了title的作用（鼠标放上去后的文字提示）\
- title 鼠标滑过时显示的文字提示
- 两者皆有时图片加载不成功，图片位置显示alt，经过文字区域时显示title
![]()
3、相对路径：当前位置./可以直接省略./,上一级../
绝对路径;不推荐
4、form标签作用：提交页面输入数据，属性：action为数据提交的页面，method确认post还是get
get：α参数在url中显示；β速度 比post快；γ提交内容长度有限制
post:参数不在url中显示，速度比get慢，提交内容无限制
get和post场景：get查询按钮，post提交数据（登陆、注册）
4、什么是抓包？
![]()
<title>标签一般是标题或搜索等内容
浙公网安备 33010602011771号