软件测试工程师学习笔记 -7
入门必读
基础入门目标五天结束,能独立完成功能测试过程。
4. 项目实战——HTML篇
30%占比
1)目标
- 能说出常见的html标签(10+)的作用
- 项目(登录)测试
2)知识点
- HTML介绍
- HTML是用来描述网页的一种语言
- Web前端三大核心技术:
- HTML:负责网页的架构
- css:负责网页的样式、美化
- JS:负责网页的行为- HTML标签分为单标签
<html>
和双标签<b>
内容</b>
- 标签属性格式:属性名 = “属性值”,例如:
<a href = "http://www.jd.com">京东</a>
- HTML骨架标签
- html:根标签,所有内容都在html标签中
- head:头部标签
- body:身体标签(代码编写区域)
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>软件测试工程师</title>
</head>
</html>
<body>
从入门到精通
</body>
</html>
编写HTML工具
常用标签
- 标题标签:h1~h6,h1最大,h6最小
- 示例:
<h1>我是h1</h1>
<h6>我是h6</h6>
- 段落标签:p,特点是语义化、独占一行
- 示例:
<p>我是p</p>
- 超链接标签:a,属性:href为跳转地址,target为新窗口打开
- 示例:
<a href = "http://www.jd.com" target=“_blank”>京东</a>
- 图片标签:img
- 属性:
src 图片路径、title 悬停显示文字、alt 图片未加载显示
width 宽 100px px:像素、height 高- 测试点:必须有title属性(悬停和未加载显示)
- 示例:<img src = "Ayar.jpg"title = “ayar” width=“500px”>
- 拓展–图片存放路径
相对路径:“相对于当前执行文件所在位置作为起点”,上一级…/、同级./
绝对路径不推荐- 换行和空格:换行
<br/>
、空格
- 布局标签:div、span
- 示例:
<div>div1</div>
<div>div2</div>
<div>
价格<span>$199<span>
</div>
- 列表标签:li、ol、ul
- 示例:
<!-- 有序列表 -->
<ol>
<li>昌平</li>
<li>海淀</li>
<li>朝阳</li>
</ol>
<!-- 无序列表 -->
<ul>
<li>苹果</li>
<li>橘子</li>
<li>葡萄</li>
</ul>
- 运行结果
- 表单标签:form
- from里嵌套了input,input根据属性值可分为
【文本框】 :type = “text”
【密码框】 :type = “password”
【单选按钮】:type = “radio”
【复选框】 :type = “checkbox”
【按 钮】 :type = “button ” 普通按钮、type = “reset” 重置按钮、type = “submit”提交按钮- form的作用是将输入的数据提交到后台或者指定页面,属性为acction。方法有get和post两种。get提交时参数url明文显示,有长度限制,一般用做查询使用。post非明文显示,长度无限制,但是也不安全,一般用做提交数据、登录、注册。
- 示例:
<div>
用户名:<input type = "text" /><br/>
</div>
<div>
密码框:<input type = "password" />
</div>
<div>
性别:
<span>
<input type="radio" name="one"/>男
<input type="radio" name="one"/>女
</span>
</div>
您的爱好:
<input type="checkbox" name="">挣钱
<input type="checkbox" name="">挣钱
<input type="checkbox" name="">挣钱
<input type="checkbox" name="">挣钱
<br>
<input type="submit" name="">
<input type="reset" name="">
<input type="button" value ="点我看看">`
- 运行结果
![]()
- 注意事项:此处有一个测试点——不同浏览器运行时,button默认显示值是不同的,给与客户体验感不佳,因此需要给使用value赋值,保证其在不同浏览器上显示均相同。
- CSS的标签:style
- JS 的标签:script
- 外部加载CSS标签:link