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

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

您好，我是程序员小羊！

前言

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【精选】通信与感知（ISAC）必读好文

【精选】通信与感知（ISAC）必读好文

微信公众号&#xff1a;EW Frontier 个人博客&#xff1a;106.54.201.174 QQ交流群&#xff1a;949444104 简介 通信与感知&#xff08;ISAC&#xff09;也被称为联合雷达通信 (JRC) / 联合通信和雷达传感 (JCAS) / 双功能雷达通信 (DFRC) 定义&#xff1a;将传感和通信系统集…
阅读更多...
记录一次学习过程（msf、cs的使用、横向渗透等等）

记录一次学习过程（msf、cs的使用、横向渗透等等）

目录 用python搭建一个简单的web服务器 代码解释 MSF msfvenom 功能 用途 查看payloads列表 msfconsole 功能 用途 msfvenom和msfconsole配合使用 来个例子 msf会话中用到的一些命令 在windows中net user用法 列出所有用户账户 显示单个用户账户信息 创建用户账…
阅读更多...
学python的第一天：PyCharm创建项目

学python的第一天：PyCharm创建项目

创建项目 打开工具 PyCharm 点击“新建项目” 点击“创建” 环境 系统会创建虚拟环境&#xff0c;稍等 初始设置 创建完成后会进入main.py文件 性能 可以看到 右下角提示我们增强性能&#xff0c;点“自动” 会获取到管理员权限 完成后会提示完成
阅读更多...
【数据结构】栈和队列（c语言实现）（附源码）

【数据结构】栈和队列（c语言实现）（附源码）

&#x1f31f;&#x1f31f;作者主页&#xff1a;ephemerals__ &#x1f31f;&#x1f31f;所属专栏&#xff1a;数据结构 目录 一、栈 1.栈的概念与结构 2.栈的实现 2.1 栈的结构定义 2.2 方法的声明 2.3 方法的实现 2.3.1 初始化 2.3.2 销毁 2.3.3 判空 2.3.4 压…
阅读更多...
常见CMS漏洞（WordPress、DeDeCMS、ASPCMS、PHPMyadmin、Pageadmin）

常见CMS漏洞（WordPress、DeDeCMS、ASPCMS、PHPMyadmin、Pageadmin）

目录 一&#xff1a;WordPress 步骤一:进入Vulhub靶场并执行以下命令开启靶场;在浏览器中访问并安装好子... 步骤二:思路是修改其WP的模板写入一句话木马后门并访问其文件即可GetShel;登陆WP后点击【外观】--》【编辑】 --》 404.php 步骤三:访问以下连接即可获取WebShel...…
阅读更多...
用VBA在Word中随机打乱单词表，进行分列

用VBA在Word中随机打乱单词表，进行分列

一、效果展示&#xff08;以下是三次随机打乱的结果&#xff09; 二、代码 Sub 随机分单词到后面的单元格()Dim C1 As CellDim str, str1, aDim shuffledArray() As VariantSet C1 Selection.Range.Tables(1).Cell(1, 1)str C1.Range.textstr mid(str, 3, Len(str) - 4)str…
阅读更多...
ADC的介绍和工作原理

ADC的介绍和工作原理

一&#xff0c;什么是ADC&#xff1f; Analog-to-Digital Converter&#xff0c;指模拟/数字转换器 什么是ADC&#xff1a; ADC可以将引脚上连续变化的模拟电压转换为内存中存储的数字变量&#xff0c;建立模拟电路到数字电路的桥梁 SUCH AS: 12 位 ADC 是一种逐次逼近…
阅读更多...
C# Solidworks二次开发------设置按键打开模型查询

C# Solidworks二次开发------设置按键打开模型查询

一、代码 public void Open_File(string FileNmae) {Process.Start("explorer.exe", FileNmae); }Open_File("路径"); 二、内容 这个代码很简单&#xff0c;我使用其主要的作用是设置一个按键&#xff0c;可以快速的查看我们已生成的三维模型&#xff0…
阅读更多...
JS使用 navigator.clipboard 操作剪切板

JS使用 navigator.clipboard 操作剪切板

注意&#xff1a;需要在安全域下才能够使用&#xff0c;比如&#xff1a;https 协议的地址、127.0.0.1、localhost safari浏览器需要打开配置&#xff0c;在地址栏输入 about:config&#xff0c;搜索 clipboard&#xff0c;将 asyncClipboard 由 false 改为 true&#xff0c;然…
阅读更多...
C语言初阶（11）

C语言初阶（11）

1.结构体定义 结构体就是一群数据类型的集合体。这些数据类型被称为成员变量。结构的成员可以是标量、数组、指针&#xff0c;甚至是其他结构体。 2.结构体的声明和结构体变量命名与初始化 结构体声明由以下结构组成 struct stu {char name[12];int age; }; 结构体命名有两…
阅读更多...
算法通关：017_2：二叉树及三种顺序的非递归遍历

算法通关：017_2：二叉树及三种顺序的非递归遍历

文章目录 题目思路运行结果 题目 二叉树及三种顺序的非递归遍历 思路 import java.util.Stack;/*** Author: ggdpzhk* CreateTime: 2024-08-04* 二叉树非递归版本*/ public class _017_Tree2 {public static void main(String[] args) {TreeNode head new TreeNode(1);head.…
阅读更多...
keil编程中#pragma NOAREGS的作用和优点

keil编程中#pragma NOAREGS的作用和优点

参考 功能 不直接操作内存地址 #pragma NOAREGS在Keil中的使用含义是禁用自动分配寄存器&#xff0c;开发人员指定控制的寄存器。‌例如中断的执行使用的寄存器需要人为的指定&#xff0c;避免分配同样的寄存器导致数据错误。对寄存器R0到R7不直接操作寄存器地址&#xff0c…
阅读更多...
学习笔记-Cookie、Session、JWT

学习笔记-Cookie、Session、JWT

目录 一、验证码的生成与校验 1. 创建生成验证码的工具类 2. 写一个 Controller 3. 实现验证码验证 1. 获取验证码 2. 验证码请求过程 3. 验证码的校验 4. 原理说明 5. 验证 6. 总结 二、JWT登录鉴权 1. 为什么要做登录鉴权&#xff1f; 2. 什么是 JWT 3. JWT相比…
阅读更多...
Open Interpreter - 开放解释器

Open Interpreter - 开放解释器

文章目录 一、关于演示它是如何工作的&#xff1f;与 ChatGPT 的代码解释器比较 二、快速开始三、更多操作1、互动聊天2、程序化聊天3、开始新的聊天4、保存和恢复聊天5、自定义系统消息6、更改模型7、在本地运行 Open Interpreter终端Python上下文窗口&#xff0c;最大令牌 8、…
阅读更多...
【Golang 面试 - 进阶题】每日 3 题（十四）

【Golang 面试 - 进阶题】每日 3 题（十四）

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/UWz06 &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;收藏…
阅读更多...
python pip怎么安装包

python pip怎么安装包

按WinR键打开运行窗口&#xff0c;输入“cmd”&#xff0c;再按回车键&#xff0c;打开命令行窗口。 找到pip安装路径。 Python2/Python3安装路径是相同的&#xff0c;都在x:\Python xx\Scripts路径下。 拖动pip主应用程序到命令行窗口。 输入“install 模块/包名”&#xff…
阅读更多...
【Golang 面试 - 进阶题】每日 3 题（十）

【Golang 面试 - 进阶题】每日 3 题（十）

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/UWz06 &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;收藏…
阅读更多...
PCIe总线-RK3588 PCIe RC初始化流程分析（十二）

PCIe总线-RK3588 PCIe RC初始化流程分析（十二）

1.简介 RK3588 PCIe RC的初始化涉及PCIe设备枚举、中断&#xff08;INTx、MSI、MSI-X&#xff09;配置、BAR配置、ATU配置、链路训练等&#xff0c;下面一一介绍。 2.初始化 当RC的模式为RK_PCIE_EP_TYPE时&#xff0c;平台驱动调用rk_add_pcie_port函数初始化RC&#xff0c…
阅读更多...
【论文笔记】4D Millimeter-Wave Radar in Autonomous Driving: A Survey

【论文笔记】4D Millimeter-Wave Radar in Autonomous Driving: A Survey

原文链接&#xff1a;https://arxiv.org/abs/2306.04242 I. 引言 传统毫米波雷达&#xff08;3D毫米波雷达&#xff09;测量俯仰角的能力有限&#xff0c;数据通常仅包括距离、水平角和多普勒速度信息。此外&#xff0c;3D雷达数据存在噪声且分辨率低&#xff08;尤其是水平角…
阅读更多...
python学习之路 - python的函数

python学习之路 - python的函数

目录 一、python函数1、函数介绍2、函数的定义3、函数的参数4、函数的返回值5、函数说明文档6、函数的嵌套调用7、变量的作用域8、综合案例9、函数与方法的区别 二、python函数进阶1、函数多返回值2、函数多种传参方式a、位置参数b、关键字参数c、缺省参数d、不定长参数 3、匿名…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023