当前位置：生活小常识 > 数码知识 >

优质

软件测试的基本知识（软件测试过程中最基础性的测试）

周芷茵优秀作者

原创内容来源：小居数码网时间：2024-08-17 18:07:01 阅读() 收藏：55 分享：61 爆

导读：您正在阅读的是关于【数码知识】的问题，本文由科普作家协会，生活小能手，著名生活达人等整理监督编写。本文有3248个文字，大小约为12KB，预计阅读时间9分钟。

web前端三大核心技术1.HTML负责网页的架构2.CSS%20负责网页的样式,美化3.JS%20负责网页的行为

软件测试过程中最基础性的测试

web前端三大核心技术

什么是HTML?

是用来描述网页的一种语言，HTML的主要作用：就是让各大浏览器都能够显示同一样的页面

%20

HTML%20是用来描述网页的一种语言.%20即超文本标记语言

%20

超:超链接

%20

文本

%20

标记语言:是一套标记标签

%20

HTML不是一种编程语言,而是标记语言,HTML用标签来描述网页,HTML文档也称为网页.

Hbuilder简介

新建一个HTML网页1.下载%20Hbuilderx%20应用程序2.新建一个写代码的文件夹3.鼠标拖拽到工具左侧%20---项目管理器界面中

骨架标签

%20

新建的时候默认生成的那些标签

%20

meta%20标签%20可以设置网页上的字符集

%20

title%20标签%20可以设置网页网站的%20标题

%20

body标签设置网页的主体内容部分

<!DOCTYPE%20html>#%20单标签，代表html文件类型<html>#%20%20<html>开始标签%20和</html>%20结束标签,%20这对称为%20%20%20双标记标签%20【根标签：】%20%20%20%20%20%20%20%20%20<head>%20#头部标签%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<meta%20charset="utf-8">%20%20#单标签，utf-8：国际编码%20可翻译中文%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<title>标题</title>%20%20%20%20%20%20%20%20</head>%20%20%20%20%20%20%20%20<body>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20网页的主体内容%20%20%20%20%20%20%20%20</body>%20</html>

文章标题%20标签

h1---h6%20分六级，字体依次减小的效果，每个标题都是独占一行注意：不能自己制造新标签，否则无法运行<!DOCTYPE%20html><html><head><meta%20charset="utf-8"><title></title></head><body><h1>我是一级标题</h1><h2>我是二级标题</h2><h3>我是三级标题</h3><h4>我是四级标题</h4><h5>我是五级标题</h5><h6>我是六级标题</h6></body></html>

空格和回车

空格使用%20；换行使用<br%20/>%20；其他写法也可以实现： %20和<br%20>

<!DOCTYPE%20html><html><head><meta%20charset="utf-8"><title></title></head><body><!--%20空格使用%20换行使用<br%20/>%20-->欢迎来到%20%20%20%20hello%20python的世界!!!<br%20/>123%20换行<br%20/>456%20换行<br%20/>789%20换行</body></html>

p标签

%20负责放文章段落，可以使文本分成若干个段落

<!DOCTYPE%20html><html><head><meta%20charset="utf-8"><title></title></head><body>%20<p>一个p代表一个段落</p>%20%20%20%20%20<p>语义化：即代表%20标签的含义，在合适的地方使用合理的标签%20可以在搜索排名中更靠前</p>%20<p>当地时间12日20时，</p>%20<p>法国议会选举首轮投票结束。出口民调显示，</p><p>%20现任总统马克龙政党联盟和其主要对手左翼联盟支持率非常接近。</p></body></html>

代码注释

%20

按%20control+/%20：快速注释

%20

再按：control+/%20：可以取消注释

注意：软件上线前，要删除全部注释，否则会影响加载速度

<!DOCTYPE%20html><html><head><meta%20charset="utf-8"><title></title></head><body><!--control+/快速注释%20以下代码实现的一个段落的效果%20--><p>我是文章段落</p></body></html>

文字相关标签

1.字体加粗

2.字体倾斜%20%20

<!DOCTYPE%20html><html><head><meta%20charset="utf-8"><title></title></head><body><!--%20普通文字%20--><b>%20%20hello%20python</b><br%20/><strong>hello%20python</strong><br%20/><!--%20文字倾斜%20--><i>hello%20world</i><br%20/><em>hello%20world</em></body></html>

3.字体添加删除线<s></s><del></del>%20推荐优先使用

<!DOCTYPE%20html><html><head><meta%20charset="utf-8"><title></title></head><body><!--%20添加删除线%20--><s>2022年6月11号%20%20原价9.98</s><br><del>2022年6月12号%20原价9.97</del><br>6月13号今天：现价8.88</body></html>

工具打开浏览器运行代码

方式1

方式2

键值对，KV对，属性名和属性值

1.添加图片

img%20src="%20"%20用法

<!DOCTYPE%20html><html><head><meta%20charset="utf-8"><title></title></head><body>插入图片步骤：<br>1.把图片放到和代码同一个文件夹中<br>2.输入img%20按下tab键，在str="%20"%20中输入图片名称即可<br><!--%20键值对，KV对，属性名和属性值%20--><img%20src="25.png"%20alt=""></body></html>

2.设置图片长度和宽度width="%20"%20height="%20"用法<img%20src="25.png"%20width="200"%20height="200">

<!DOCTYPE%20html><html><head><meta%20charset="utf-8"><title></title></head><body>插入图片步骤：<br>1.把图片放到和代码同一个文件夹中<br>2.输入img%20按下tab键，在str="%20"%20中输入图片名称即可<br>3.在第一个键值对后%20按空格键%20输入宽度和高度即可<br><!--%20键值对，KV对，属性名和属性值%20--><img%20src="25.png"%20width="200"%20></body></html>

4.在图片上添加%20鼠标悬停%20操作

title用法<img%20src="25.png"%20width="200"%20title="鼠标悬停%20出现文字">

<!DOCTYPE%20html><html><head><meta%20charset="utf-8"><title></title></head><body>插入图片步骤：<br>1.把图片放到和代码同一个文件夹中<br>2.输入img%20按下tab键，在str="%20"%20中输入图片名称即可<br>3.在第一个键值对后%20按空格键%20输入宽度和高度即可<br><!--%20键值对，KV对，属性名和属性值%20--><img%20src="25.png"%20width="200"%20title="鼠标悬停%20出现文字"></body></html>

5.设置%20图片未正常加载的情况下会显示内容

alt="描述此张图片的信息%20"%20用法1.当图片未正常加载的时候，文字才会被别人看到2.网页阅读器读取此内容给视障用户听，提升用户体验

<!DOCTYPE%20html><html><head><meta%20charset="utf-8"><title></title></head><body><img%20src="5.png"%20width="200"%20title="鼠标悬停%20出现文字"%20alt="图片未正常加载"></body></html>

超链接基础语法

1.打开网址

<a%20href="%20网址%20">%20文本</a>

<!DOCTYPE%20html><html><head><meta%20charset="utf-8"><title></title></head><body><!--%20超链接用法%20--><a%20href="https:///">点击我%20可以百度一下</a></body></html>

2.打开本地页面：输入文件名.扩展名

<!DOCTYPE%20html><html><head><meta%20charset="utf-8"><title></title></head><body><!--%20超链接用法%20-->步骤：输入a回车,添加网址即可<br><a%20href="文章标题.html">点击我%20可以百度一下</a></body></html>

超链接基础语法进阶

target="_blank"

<!DOCTYPE%20html><html><head><meta%20charset="utf-8"><title></title></head><body><!--%20新窗口打开链接%20target="_blank"%20--><a%20href="http://"%20target="_blank">点击我，跳转到新窗口打开百度</a></body></html>

空连接

暂时不知道点击之后跳转到哪里，使用空链接占位

补充：测试工作时，如果发现程序员使用#来表达返回顶部效果时，可以提醒程序员使用动画效果实现，用户体验会更好一些

相对路径（重点）

1.同级查找：当前HTML和目标在同级目录中，语法：直接写资源名字即可2.上级查找：当前HTML和目标在上级目录中，语法：../写资源的名字即可3.下级查找：当前HTML和目标在下级目录中，语法：文件夹名/写资源名字即可

<!DOCTYPE%20html><html><head><meta%20charset="utf-8"><title></title></head><body><a%20href="文章标题.html">点击我打开</a><br><!--%20打开图片文件夹下的25.png图片%20--><img%20src="图片/25.png"%20alt=""></body><a%20href="../文章标题.html">点击我打开上级的文章标题</a></html>

绝对路径（重点）

目标资源在电脑中具体的位置

列表

1.无序列表%20：在<ul></ul>中嵌套<li></li>每一个li就是一个选项%20-->

<u1><li>基础班</li><li>功能班</li><li>自动化测试班</li></u1>

2.有序列表：

<!--%20有序列表ol%20嵌套若干个li%20--><ol><li>基础班</li><li>功能班</li><li>自动化测试班</li></ol>

布局的标签

当没有任何语义的时候，可以使用div或span进行布局，目的是后期css代码可以找到对应标签中的内容来设置样式。（语义标签是有应用场景的%20如%20段落，标题等）

布局标签:无任何语义，方便后期设置内容样式

<div>各标签内容独占一行</div>标签内容合并成一行</span

<!DOCTYPE%20html><html><head><meta%20charset="utf-8"><title></title></head><body><div>我是div</div><div>我是div</div><div>我是div</div><div>特点：多个div独占一整行空间</div><br><span>我是span</span><span>我是span</span><span>我是span</span><span>特点：多个span在同一行显示</span></body></html>

音频标签

<audio%20src="音频.mp3"%20controls="controls"></audio>

<!DOCTYPE%20html><html><head><meta%20charset="utf-8"><title></title></head><body><audio%20src="音频.mp3"%20controls="controls"></audio></body></html>

视频标签

<video%20src="视频.mp4"%20controls="controls"%20height="200"%20width="200"></video>

<!DOCTYPE%20html><html><head><meta%20charset="utf-8"><title></title></head><body><video%20src="视频.mp4"%20controls="controls"%20height="200"%20width="200"></video></body></html>

音频，视频，测试点

audio%20音频%20video%20视频测试细节：因历史原因%20导致音，视频版本兼容性低，对于测试工作来说需要测试三大主流浏览器是否能够正常运行，音频，视频。Ie测试低版本（ie7.8.9.10.11）测试方法：打开ie浏览器，按F12%20找到仿真(必须是IE高版本才能测试低版本)什么时候测试低版本：用户要求的情况下%20再测试

表单标签

1.表单基础+密码框type="text"普通输入框type="password"密码框

<form%20action=""%20method="post"></form><!--%20input+tab键%20type="text"普通输入框%20-->用户名：<input%20type="text"><br><!--%20type="password"密码框%20-->密码框：<input%20type="password"%20>

2.单选按钮type="radio"%20单选checkde="checked"%20此属性表示%20默认选中状态

性别：<input%20type="radio"%20name="xb"%20checked="checked"%20id="nan"><label%20for="nan">男</label><input%20type="radio"%20name="xb"id="nv"><label%20for="nv">女</label>

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

3.多选框type="checkbox"%20多选框，复选框checked="checked"%20默认选中

测试的细节：1.刷新的时候是否有默认选中的状态2.点击文字是否可以进行切换一切测试要看是否满足用户需求%20-->

<input%20type="checkbox"%20id="cs"><label%20for="cs">测试</label><input%20type="checkbox"%20id="cf"><label%20for="cf">吃饭</label><input%20type="checkbox"%20id="sj"><label%20for="sj">睡觉</label><input%20type="checkbox"%20id="dyx"><label%20for="dyx">打游戏</label>

4.下拉菜单

select标签嵌套若干个option标签，每个option标签就代表一个下拉选项测试细节1.下拉选中的内容顺序2.默认选中的状态

默认选中的是：郑州

%20%20%20<select%20name=""%20id=""><option%20value="">北京</option><option%20value="">上海</option><option%20value="">广州</option><option%20value="">深圳</option><!--%20默认选中郑州的状态%20--><option%20value=""%20selected="selected">郑州</option></select>

5.文本域

textarea+tab键测试的细节：1.测试三大主流浏览器外观大小是否一致2.提醒程序员禁用拖拽大小的功能

意见:<!--%20禁用文本域拖拽大小功能%20--><style%20type="text/css">%20%20%20%20%20%20%20textarea{resize:none;}</style><textarea%20name=""%20id=""%20cols="30"%20rows="10"></textarea>

6.按钮

普通按钮:<!--%20type="button"%20普通按钮%20需要js配合才能实现效果value属性设置的是按钮身上的文字%20--><input%20type="button"%20value="按钮"><br>重置按钮:<!--%20type="reset"%20点击后让表单恢复默认值value属性设置的是按钮身上的文字%20--><input%20type="reset"%20value="重置"><br>提交按钮:<!--%20type="submit"点击后可以把表单提交给%20指定后台处理value属性设置是按钮上的文字测试时%20只关注数据库中的内容是否正常添加即可%20--><input%20type="submit"%20value="提交">

关于表单的用户体验提升

1.添加placeholder="%20"属性，可以文本框设置提示文字如下图

用户名：<input%20type="text"%20placeholder="请输入用户名">

2.可以给第一个输入框设置一个%20默认获取鼠标焦点的属性%20：autofocus%20如下图所示

autofocus="autofocus"

上面就是小居数码小编今天给大家介绍的关于（软件测试过程中最基础性的测试）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。

94%的朋友还想知道的：

（441）个朋友认为回复得到帮助。

部分文章信息来源于以及网友投稿，转载请说明出处。

本文标题：软件测试的基本知识（软件测试过程中最基础性的测试）：http://sjzlt.cn/shuma/156538.html

上一篇：solidworks的快捷键技巧（solidworks怎么设置快捷键比较好）

下一篇：excel如何保护工作表不被修改（工作表不想被别人改动怎么办）

数码知识