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

news2024/11/21 1:28:20

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

您好，我是程序员小羊！

前言

为了更好的学习软件测试的相关技能，需要具备一定的基础知识。需要学习的基础知识包括：
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" />

属性说明：

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

3.5 HTML空格和回车

在HTML代码中，手动输入回车、换行和空格在浏览器上的显示效果是有问题的，必须使用代码才能很好的实现。
空格： &nbsp;
回车： <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可以光标后退

结束语：

今天这篇文章就到这里了，文底会有一些作业大家可以抽空做下，在下篇文章的时候会把答案放在最后，大厦之成，非一木之材也；大海之阔，非一流之归也，希望大家能持续关注下，文章从浅入深，也欢迎大佬们的随时指导！！！
在这里插入图片描述

作业：

在这里插入图片描述在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1978750.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

MongoDB未授权访问漏洞

MongoDB未授权访问漏洞

开启MongoDB服务时不添加任何参数时,默认是没有权限验证的,登录的用户可以通过默认端口无需密码对数据库任意操作&#xff08;增、删、改、查高危动作&#xff09;而且可以远程访问数据库。 漏洞原因 造成未授权访问的根本原因就在于启动 Mongodb 的时候未设置 --auth 也很少…
阅读更多...
Node.js的下一代浏览器和移动自动化测试框架-WebdriverIO

Node.js的下一代浏览器和移动自动化测试框架-WebdriverIO

在现代软件开发中&#xff0c;自动化测试已成为保障软件质量的关键环节。而在众多测试框架中&#xff0c;WebdriverIO凭借其强大的功能和简洁的语法&#xff0c;成为Node.js生态中备受瞩目的浏览器和移动自动化测试框架。那么&#xff0c;WebdriverIO究竟有哪些独特之处&#x…
阅读更多...
Substance Painter材质制作原理

Substance Painter材质制作原理

21 材质制作原理_哔哩哔哩_bilibili 颜色&#xff0c;纹理&#xff0c;高光 木头的制作 玻璃的制作 玻璃要给一定的金属度
阅读更多...
指标一致化处理

指标一致化处理

什么是数据指标 数据指标有别于传统意义上的统计指标&#xff0c;它是通过对数据进行分析得到的一个汇总结果&#xff0c;是将业务单元精分和量化后的度量值&#xff0c;使得业务目标可描述、可度量、可拆解。 数据指标有哪些类型 极大型:期望取值越大越好&#xff1b; 极小…
阅读更多...
战略项目与可以帮助战略的项目

战略项目与可以帮助战略的项目

在公司内&#xff0c;如果没有机会做战略项目&#xff0c;那么就尽可能让自己的项目产生一些可以被战略项目使用的成果&#xff0c;最好是可以被多个战略项目使用的成果。 或者&#xff0c;将自己的项目和战略项目融合。 比如&#xff0c;一家生产面包的企业&#xff0c;你是负…
阅读更多...
用PyTorch 从零开始构建 BitNet 1.58bit

用PyTorch 从零开始构建 BitNet 1.58bit

我们手动实现BitNet的编写&#xff0c;并进行的一系列小实验证实&#xff0c;看看1.58bit 模型是否与全精度的大型语言模型相媲美&#xff01; 什么是量化以及为什么需要它&#xff1f; 量化是用更少的比特数表示浮点数的过程。当两个数字使用不同的比特数进行量化时&#xf…
阅读更多...
一篇教会你PXE高效批量网络装机及kickstart无人值守安装

一篇教会你PXE高效批量网络装机及kickstart无人值守安装

目录 搭建PXE的前提 搭建PEX的过程 如何构建PXE服务器 搭建本地yum源 搭建apache 创建软链接将本地yum源到apache页面下 搭建dhcp服务 dhcp配置文件如下 使用system-config-kickstart生成ks.cfg文件 &#xff0c;.cfg配置文件如下 搭建TFTP服务 搭建完成后测试 搭建…
阅读更多...
跟李沐学AI：NiN网络中的网络

跟李沐学AI：NiN网络中的网络

NiN块 一个卷积层后跟着两个全连接层&#xff08;实际为核窗口大小为1x1的卷积层&#xff09;。卷积层步幅为1&#xff0c;无填充&#xff0c;输出形状与卷积层输出形状相同&#xff0c;起到全连接层的作用。 NiN架构 无全连接层&#xff0c;交替使用NiN块和步幅为2的最大池化…
阅读更多...
【C++标准模版库】list的介绍及使用

【C++标准模版库】list的介绍及使用

list 一.list的介绍二.list的使用1.list 构造函数2.list 空间大小3.list 增删查改4.list 迭代器的使用1.正向迭代器2.反向迭代器 5.list 其他成员函数 三.vector与list关于sort性能的比较 一.list的介绍 C中的list标准模板库&#xff08;STL&#xff09;是C标准库中的一个重要组…
阅读更多...
Linux文件管理和IO重定向知识总结

Linux文件管理和IO重定向知识总结

目录 一&#xff0c;文件管理 Linux的目录结构是一个树状结构&#xff1a; 文件的分类&#xff1a; 操作文件的常用命令&#xff1a; 文件元数据和节点和inode表结构&#xff1a; 特点&#xff1a; 创建文件&#xff1a; 查看文件inode号&#xff1a; cp和inode&#x…
阅读更多...
揭秘Matplotlib等高线图：让数据‘高山流水‘间，笑点与深度并存！

揭秘Matplotlib等高线图：让数据‘高山流水‘间，笑点与深度并存！

1. 引言 在这个数据如山的时代&#xff0c;你是不是也曾在茫茫数海中迷失方向&#xff0c;渴望找到那片隐藏的“数据绿洲”&#xff1f;别怕&#xff0c;今天咱们就来聊聊Matplotlib这位绘图界的魔术师&#xff0c;特别是它那令人叹为观止的等高线图技能。想象一下&#xff0c…
阅读更多...
领域模型(Domain Model)

领域模型(Domain Model)

前言 软件的核心是其为用户解决领域相关的问题的能力。所有其他特性&#xff0c;不管有多么重要&#xff0c;都要服务于这个基本目的。当领域很复杂时&#xff0c;这是一项艰巨的任务&#xff0c;要求高水平技术人员的共同努力。开发人员必须钻研领域以获取业务知识。他们必须…
阅读更多...
拉刀基础知识——拉刀的种类

拉刀基础知识——拉刀的种类

如前面所说&#xff1a;近期要围绕拉削和拉刀这个话题&#xff0c;分享一些相关的内容&#xff0c;从最基础的知识开始&#xff0c;为此还专门买了本旧书——《拉刀设计》入门学习。废话不多说&#xff0c;直接开始。 拉刀最早由冲头演变而来&#xff0c;用于加工方孔&#xf…
阅读更多...
【Web】TFCCTF 2024 部分题解

【Web】TFCCTF 2024 部分题解

目录 GREETINGS SURFING SAFE_CONTENT FLASK DESTROYER GREETINGS 打express的SSTI GitHub - TheWation/NodeJsSSTI: Express app with Pug templates demonstrating SSTI vulnerability and secure implementation for educational purposes. payload: /result?user…
阅读更多...
历史标签如何时间迁移？

历史标签如何时间迁移？

本文解析的论文是&#xff1a; Lin, C.; Du, P.; Samat, A.; Li, E.; Wang, X.; Xia, J. Automatic Updating of Land Cover Maps in Rapidly Urbanizing Regions by Relational Knowledge Transferring from GlobeLand30. Remote Sens. 2019, 11, 1397. https://doi.org/10.33…
阅读更多...
一刷代码随想录（动态规划2）

一刷代码随想录（动态规划2）

62.不同路径 题意&#xff1a; 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#xff09;。 问总共有多少…
阅读更多...
我的面包多

我的面包多

我的面包多主页&#xff1a;https://mbd.pub/o/author-bGubnGpq 欢迎咨询。
阅读更多...
JavaSE面试篇章——一文干破Java集合

JavaSE面试篇章——一文干破Java集合

文章目录 Java集合——一文干破集合一、集合的理解和好处1.1 数组1.2 集合 二、集合的框架体系三、Collection接口和常用方法3.1 Collection接口实现类的特点3.2 Collection接口遍历元素方式1-使用Iterator(迭代器)3.2.1 基本介绍3.2.2 迭代器的执行原理3.2.3 Iterator接口的方…
阅读更多...
数据库典型例题2-ER图转换关系模型

数据库典型例题2-ER图转换关系模型

1.question solution: 2.做题步骤 一些解释&#xff1a; <1弱实体把强属性的主键写进去&#xff0c;指向强属性。eg:E6_A13指向E5_A13 <21:1&#xff0c;1:n&#xff0c;m:n&#xff1a;将完全参与的一方&#xff08;双线&#xff09;指向另一方&#xff0c;并将对方的…
阅读更多...
AutoCAD ObjectArx二次开发(三) 创建MFC界面

AutoCAD ObjectArx二次开发(三) 创建MFC界面

主题&#xff1a;本章节主要介绍在ObjectARX项目中如何使用MFC界面进行交互操作&#xff0c;具体采用模态对话框的形式。 一、创建MFC的对话框 在项目中添加新项&#xff0c;选择MFC类&#xff0c;点击确定按钮&#xff0c;如下图所示。 然后会出现下图界面&#xff0c;填写类…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023