HTML常见标签及黑马头条测试全流程-DAY4
?、学习目标
-
- 明确HTML常见标签
- 根据测试流程对黑马头条登陆进行需求分析
- 提取登陆模块测试点并设计登陆用例
- 能实用工具对缺陷进行管理
一、常见HTML标签
1、html介绍
2、html骨架标签
标签一般是标题或搜索等内容</p>
<p> 3、常用标签</p>
<table border="0">
<tbody>
<tr>
<td style="text-align: center"><span style="font-size: 14pt; font-family: 黑体, "Heiti SC""><strong>标签实例</strong></span></td>
<td style="text-align: center"><span style="font-size: 14pt; font-family: 黑体, "Heiti SC""><strong> 效果</strong></span></td>
</tr>
<tr>
<td>
<p><body><br> <h1>一级标题</h1><br> <h2>二级标题</h2><br> <h3>三级标题</h3><br> <h4>四级标题/h4><br> <h5>五级标题</h5><br> <h6>六级标题</h6><br> <p>段落标题</p><br> <a href="网址加http协议" target="窗口打开方式，默认_blank新窗口“>超链接标签</a><br> <img src="图片路径或图片网址" title="悬停提示信息"/>单标签<br> <br />换行单标签<br> 空格，可以在文本等内容存在<br> <div class="" style="background: blueviolet;"><br> 大盒子1<br> </div><br> <div style="background: brown;">大盒子2</div><br> <span style="background: greenyellow;">span标签</span><br> <span style="background: green;">span标签2</span><br> <ul style="color: red;">无序标签|div与span区别<br> <li>div标签是块级元素，标签里的内容占据一行，不会与其他标签在一行显示；</li><br> <li>div标签可以通过css样式来设置自身的宽度></li><br> <li>div标签中，可以使用其他标签</li><br> <li>span是行内元素，会和其他标签元素会在一行显示</li><br> <li>span标签的宽度、高度都无法通过css样式设置</li><br> <li>span不能容纳块节元素</li><br> </ul><br> <ol>有序标签<br> <li></li><br> <li></li><br> </ol><br> <form name="login" method="post" action="URL地址；指定form表单向何处发送数据">表单标签<br> <table align="center" name="表格布局"><br> <caption>表格标题</caption><br> <tr name="表格行"><br> <td>用户名</td><br> <td><input type="text" name="" id="" value="" />td单元格</td><br> </tr><br> <tr><br> <td>密码</td><br> <td><input type="password" name="" id="" value="" />不会明文显示</td><br> </tr><br> <tr><br> <td>性别</td><br> <td><input type="radio" name="sex" id="" value="" />男<br> <input type="radio" name="sex" id="" value="" checked="checked"/>女，name一致为一组</td><br> <br> </tr><br> <tr><br> <td>喜好</td><br> <td><br> <input type="checkbox" name="read" id="" value="" />看书<br> <input type="checkbox" name="game" id="" value="" />打游戏<br> <input type="checkbox" name="tv" id="" value="" />看电视<br> <input type="checkbox" name="eat" id="" value="" />吃火锅<br> </td><br> </tr><br> <tr><br> <td><input type="button" name="" id="" value="" />普通按钮<br> <input type="submit" name="" id="" value="" />提交按钮<br> <input type="reset" name="" id="" value="" />重置按钮</td><br> </tr><br> </table><br> </form></p>
</td>
<td>
</td>
</tr>
</tbody>
</table>
<p> <span style="background-color: rgba(255, 0, 0, 1)"><strong>注释：国际通用注释，使用ctrl+/进行注释。测试时需要检查或删除。（f12代码可以看到注释，防止看到信息，可参考虾米注释问题）</strong></span></p>
<ol>
<li style="margin-left: 90px"><span style="background-color: rgba(255, 255, 255, 1)">图片必须有title属性，title图片加载时鼠标悬停信息，图片未加载时显示信息（优先级低于alt,体验感强<strong>)</strong></span></li>
<li style="margin-left: 90px"><span style="background-color: rgba(255, 255, 255, 1)"><strong>img中alt和title区别:</strong></span></li>
</ol>
<ul>
<li style="list-style-type: none">
<ul>
<li style="list-style-type: none">
<ul>
<li style="list-style-type: none">
<ul>
<li style="margin-left: 90px"><span style="background-color: rgba(255, 255, 255, 1)"><strong>alt 此属性的实质作用是图片在无法正确显示的时候起到文本替代的作用,不过在IE6下还起到了title的作用（鼠标放上去后的文字提示）\</strong></span></li>
<li style="margin-left: 90px"><span style="background-color: rgba(255, 255, 255, 1)"><strong>title <strong>鼠标滑过时显示的文字提示</strong><br></strong></span></li>
<li style="margin-left: 90px"><span style="background-color: rgba(255, 255, 255, 1)"><strong><strong>两者皆有时图片加载不成功，图片位置显示alt，经过文字区域时显示title</strong></strong></span></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<p style="margin-left: 270px"><span style="background-color: rgba(255, 255, 255, 1)"><span style="background-color: rgba(255, 255, 255, 1)"><span style="background-color: rgba(255, 255, 255, 1)"><strong></strong></span></span></span></p>
<p style="margin-left: 120px"> 3、相对路径：当前位置./可以直接省略./,上一级../</p>
<p style="margin-left: 120px"> 绝对路径;不推荐</p>
<p style="margin-left: 120px">4、form标签作用：提交页面输入数据，属性：action为数据提交的页面，method确认post还是get</p>
<p style="margin-left: 120px"> get：α参数在url中显示；β速度 比post快；γ提交内容长度有限制</p>
<p style="margin-left: 120px"> post:参数不在url中显示，速度比get慢，提交内容无限制</p>
<p style="margin-left: 120px"> get和post场景：get查询按钮，post提交数据（登陆、注册）</p>
<p style="margin-left: 30px"> </p>
<p style="margin-left: 30px">4、什么是抓包？</p>
<p style="margin-left: 90px"></p>
<p style="margin-left: 30px"> </p>
</div>
<!--conend-->
<div class="p-2"></div>
<div class="arcinfo my-3 fs-7 text-center">
<a href='/t/etagid11322-0.html' class='tagbtn' target='_blank'>测试基础</a>
</div>
<div class="p-2"></div>
</div>
<div class="p-2"></div>
<!--xg-->
<div class="lbox p-4 shadow-sm rounded-3">
<div class="boxtitle"><h2 class="fs-4">相关</h2></div>
<hr>
<div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-552656.html">测试基础（六）</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div><div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-491678.html">软件测试基础知识题目</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div><div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-440161.html">性能测试基础知识</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div><div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-426731.html">软件测试基础（六）用例设计方法之场景法</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div><div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-382866.html">基于Appium的APP自动化测试基础--美团APP的实例</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div><div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-334672.html">[软件测试] 软件测试基础问答</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div><div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-285874.html">【测试基础】每天这么忙，到底写不写测试用例？</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div><div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-285553.html">【测试基础】你写过测试计划和测试报告吗？</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div><div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-254156.html">【测试基础】带你全面了解软件测试及工作流程</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div><div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-207947.html">测试基础知识（系统测试的方法与过程）</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div><div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-132779.html">网络安全测试基础环境phpStudy的搭建</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div><div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-82770.html">单元测试基础 -- 基本概念</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div>
<!---->
<!---->
</div>
<!--xgend-->
</div>
<div class="col-lg-3 col-12 p-0 ps-lg-2">
<!--box-->
<!--boxend-->
<!--<div class="p-2"></div>-->
<!--box-->
<div class="lbox p-4 shadow-sm rounded-3">
<div class="boxtitle pb-2"><h2 class="fs-4"><a href="#">标签</a></h2></div>
<div class="clearfix"></div>
<ul class="m-0 p-0 fs-7 r-tag">
</ul>
<div class="clearfix"></div>
</div>
<!--box end-->
</div>
</div>
</div>
</main>
<div class="p-2"></div>
<footer>
<div class="container-fluid p-0 bg-black">
<div class="container p-0 fs-8">
<p class="text-center m-0 py-2 text-white-50">一品网 <a class="text-white-50" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备14022925号-6</a></p>
</div>
</div>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?6e3dd49b5f14d985cc4c6bdb9248f52b";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script>
</body>
</html>