软件测试需要具备的基础知识【功能测试】---前端知识（一）

在这里插## 标题入图片描述

您好，我是程序员小羊！

前言

为了更好的学习软件测试的相关技能，需要具备一定的基础知识。需要学习的基础知识包括：
1、计算机基础
2、前端知识
3、后端知识
4、软件测试理论
后期分四篇文章进行编写，这是第二篇

一、web前端三大核心技术

HTML：负责网页的架构
CSS：负责网页的样式、美化
JS：负责网页的行为

二、工具的使用（HBuilder、vscode）

掌握HBuilder工具的基本使用
工欲善其事必先利其器，有一个好的写代码工具，可以提升效率

三、html简介

中文定义：超文本标记（标签、元素）语言；

1.1 什么是HTML？

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标签来描述网页

HTML文档也被称为网页；浏览器的作用就是读取 HTML 文档，并以网页的形式显示出它们。

1.2 HTML标签

HTML 标签是由尖括号包围的关键词，比如 <html >
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签

HTML单标签和双标签：

单标签书写规则： <单标签名称 /> ，例如 <br/>
双标签书写规则： <双标签名称>xxx</双标签名称> ，例如> <a >xxx</a>

1.3 HTML属性

HTML属性指的是标签属性
HTML标签可以拥有属性，属性提供了有关 HTML 元素的更多的信息
属性总是以名称/值对的形式出现，比如：name=“value”
属性总是在 HTML 元素的开始标签中规定，比如： <a href="http://www.baidu.com">百度

小练习：

新建一个html网页： 1、准备好一个写代码的文件夹！！！
2、鼠标左键拖拽文件夹到工具的左侧–项目管理器中
3、鼠标左键点击文件夹的名字（必须绿色背景才叫被点击选中）
4、鼠标右键–新建–html文件
5、在弹出的对话框中，改文件扩展名之前的名字（.html代表当前文件的扩招名、后缀名：描述当前文件类型）
6、点击完成即可新建一个html文件

在这里插入图片描述

2. HTML标签骨架

HTML最基本的就是骨架标签

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>程序员小羊！</title></head><body>好好学习，天天向上！！！</body>
</html>

2.1 HTML骨架标签详解

<!DOCTYPE html> ：用来声明当前的文档类型是 html
html：是网页当中最大的标签，我们称之为根标签
head：称之为网页的头部，它里面的内容主要用来定义网页标签及给浏览器查看的一些信息
<meta charset="UTF-8"> ：用来定义网页的编码标准，国际编码
title：称之为网页标题标签，它里的内容会显示在浏览器的标签页上
body：称之为网页主体标签，它里面的内容都会显示在浏览器的白色窗口区域【网页里展示的内容都会写在body标签里】

3. 基本的HTML标签

3.1 HTML标题
HTML 标题是通过 <h1> - <h6> 等标签进行定义的
实例：

		<h1>一号标题</h1><h2>二号标题</h2><h3>三号标题</h3><h4>四号标题</h4>

在这里插入图片描述

3.2 HTML段落

HTML 段落是通过 <p> 标签进行定义的
实例：

<p>第一个段落</p>
<p>另外一个段落</p>

语义化：在合适地方使用合理的标签，就叫满足标签语义化；可以在搜索引擎排名中更靠前！点击率更高，带来更多的收益！

3.3 HTML超链接

HTML超链接是通过 <a> 标签进行定义的，在 href 属性中指定链接的地址。
实例：

<a href="http://www.baidu.com">百度</a>

3.4 HTML图片

网页中插入图片就要使用图片标签，HTML图片是通过标签进行定义的。
实例：

<img src="xiaoyang.jpg" title="小羊程序员" alt="logo" width="104" height="142" />

属性说明：

src：用来指定当前想要引入的图片位置，也叫路径
title：用来定义鼠标悬停到图片上方时的提示文字
alt：当图片由于某些原因无法正常加载显示的时候，才会显示 alt 里的文字
width：用来定义图片的宽度
height：用来定义图片的高度
如果只设置宽度或高度中的一个，另外的一个就会按着原图的比例自动缩放

3.5 HTML空格和回车

在HTML代码中，手动输入回车、换行和空格在浏览器上的显示效果是有问题的，必须使用代码才能很好的实现。
空格：  
回车： <br />
提示：HTML版本的发展决定了这门语言比较松散，写法较为随意。

3.6 布局标签

布局标签没有语义，专门负责布局的标签，在页面中较为常见。
div：块级元素；独占一行
span：是内联元素，可用作文本的容器，该元素也没有特定的含义；可以一行放置多个
HTML内联元素在显示时通常不会以新行开始

> <div>大盒子、独占一行</div> 
> <span>小盒子、一行可以放置多个</span>
>  <span>另一个小盒子</span>

四、HTML文字相关的标签

b和strong都可以代表加粗，后者代表特别强调的语义；
i和em都可以实现倾斜，后者代表一般强调语义；
s和del都可以实现删除线效果，后者即将替代前者

五、HTML表单标签

表单就是在web网页上用来收集用户输入数据，并将数据提交到后台的一个HTML代码段
表单可以包含许多不同类型的表单元素，比如：输入框、单选框、复选框、提交按钮等等

1.1 form标签

所有的表单元素必须要放在一个form标签中

<form action="/user/login.jsp" method="get">
</form>

属性说明：
action：表单数据提交的服务器地址（URL）
method：提交表单时所用的 HTTP 请求方式（默认：GET）

1.2 文本输入框

文本输入框提供文本输入功能，并且是单行输入

<input type="text">

1.3 密码输入框

密码输入框中输入的内容会被做掩码处理，一般显示为星号或实心圆

<input type="password">

1.4 单选按钮

在一组单选按钮中，同时只能选中其中的一个；name的属性值相同，即为一组元素
checked=“checked” ：使用checked属性设置默认选中状态

<form>
<input type="radio" name="sex" value="male" checked="checked">男
<input type="radio" name="sex" value="female">女
</form>

测试细节：1、点击查看是否为单选效果2、刷新的时候是否有默认选中的状态3、点击文字是否可以进行切换

1.5 复选框

复选框又称多选框
复选框允许用户在有限数量的选项中选择零个或多个选项
checked=“checked” ：使用checked属性设置默认选中状态

<form>
<input type="checkbox" name="hobby" value="1">吃饭
<input type="checkbox" name="hobby" value="2">睡觉
<input type="checkbox" name="hobby" value="3" checked="checked">打豆豆
</form>

测试细节：
1、刷新的时候是否有默认选中的状态
2、点击文字是否可以进行切换注意：一切测试要追溯到用户的需求

1.6 下拉框

<select> 元素定义下拉列表
<option> 元素定义下拉列表的选项

测试细节： 1、内容的顺序 2、默认选中的状态 3、内容的条数

列表通常会把首个选项显示为被选选项
通过添加 selected 属性来定义预定义选项

<select name="city" id="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
<option value="sz" selected="selected">深圳</option>
</select>

1.7 文本域

文本域可以输入多行文本内容

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

测试细节：

1、测试三大主流浏览器外观大小是否一致
2、提醒程序员禁用拖拽大小的功能 type=“button”
普通按钮，需要js配合才能实现其它效果 value属性设置按钮身上的文字

type=“reset” 点击后可以让表单数据恢复默认值 value属性设置按钮身上的文字
type=“submit” 点击后可以让表单提交给指定后台处理 value属性设置按钮身上的文字点击后无论是否报错，都与我们无关，最终测试的时候，只要关注数据库中的内容是否正常添加即可

placeholder=“请输入用户名” 文字提醒属性

1.8 按钮

普通按钮：必须配合js才能实现其它效果
重置按钮：恢复表单数据到初始化状态
提交按钮：提交表单数据到服务器

普通按钮：<input type="button" value="我是按钮" />
重置按钮：<input type="reset" value="我是重置按钮" />
提交按钮：<input type="submit" value="提交按钮" />

案例：

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>表单</title></head><body><form action="reg.html" method="get">用户名：<input type="text" name="username" placeholder="请输入用户名" /><br />密码框：<input type="password" name="password" /><br />性别：<input type="radio" name="sex" id="nan" /><label for="nan">男</label><input type="radio" name="sex" id="nv" checked="checked" /><label for="nv">女</label><br />你的爱好：<input type="checkbox" id="cs" checked="checked" /><label for="cs">测试 </label><input type="checkbox" id="cf" /><label for="cf">吃饭</label><input type="checkbox" checked="checked" />睡觉<input type="checkbox" />打豆豆<br />你来自哪里：<select name="city" id="city"><option value="bj">北京</option><option value="sh">上海</option><option value="wz">广州</option><option value="sz" selected="selected">深圳</option></select><br />建议：<textarea name="message" cols="30" rows="3" placeholder="请填写建议"></textarea><br /><input type="button" value="普通按钮" /><input type="reset" value="重置按钮" /><input type="submit" value="提交按钮" /></form></body>

效果：

在这里插入图片描述

扩展：

一、注释问题

程序员给自己代码的提醒文字，浏览器不会直接显示；
快捷键： ctrl+？再按一次会取消注释
测试要注意：项目上线之前，要求程序员删除注释的内容，目的是加快网页的加载速度
例： 

二、超链接问题

<a href="#">点击我可以打开隔壁老王的页面</a>

测试工作的时候，如果发现程序员使用#来表达返回顶部效果，一定要提示程序员，要用动画效果实现，用户体验才更好！

三、路径问题

注意：在前端语法中，绝对路径不推荐写！！！只推荐使用相对路径！！！

四、音、视频、测试点

测试细节：因为历史发展原因，导致音、视频标签兼容性很差，对于测试工作来讲，需要测试三大主流浏览器是否能正常运行音、视频；

Ie测试低版本(ie7、8、9、10、11) 测试方法：打开ie，f12，找到仿真（必须是ie高版本才能测试低版本）
什么时候测试低版本：用户要求，再测试！

五、表单的用户体验提升

1、可以添加placeholder属性，可以给文本框设置提示文字例：placeholder=“请输入用户名”
2、如果是专门写表单的页面，可以给第一个输入框设置一个默认获取鼠标焦点的属性autofocus
例：autofocus=“autofocus” 注意：tab可以让光标前进，shift+tab可以光标后退