测试小白入门-02基础开发语言扫盲看这一篇就够了！

佳佳不爱上班

已于 2024-08-23 08:11:04 修改

阅读量752

点赞数 18

分类专栏： 01测试理论文章标签：开发语言功能测试自动化

于 2024-08-22 21:32:27 首次发布

本文链接：https://blog.csdn.net/m0_55605424/article/details/141409584

版权

01测试理论专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

适合在校大学生、转行想从事软件测试行业的初级人员，提供最基础的语言扫盲，面试大概率不问但要知道。

一、HTML

1.web前端三大核心技术

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

2.工具的使用

HBuilder
更改字体：工具-视觉主题设置-更改大小、颜色等

3.html简介

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

(2)新建一个html网页

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

4.html骨架标签

骨架标签：新建的时候默认生成的那些标签
meta 标签可以设置网页的字符集（utf-8 国际编码）
title 标签设置网页的标题
body 标签设置网页的主体内容部分

5.文章标题标签

h1到h6分六级，依次减小效果，每个标题都是独占一行空间
输入标签英文，点击tab按键，自动生成标签
注意：不能自己造标签，因为无法正常运行

6.空格和回车

1、空格和回车在代码中直接使用不准确
2、必须使用代码来实现

一个空格： &nbsp
一个换行、一个回车：“< br />”

3、注意：html代码因为历史原因，导致语法较为松散；测试细节的时候，以浏览器最终运行效果为准；

7.p标签和标签语义化

1、p就是负责放文章段落的
2、语义化：在合适地方使用合理的标签，就叫满足标签语义化；可以在搜索引擎排名中更靠前！点击率更高，带来更多的收益！

8.代码注释

快捷键： ctrl+？再按一次会取消注释
测试要注意：项目上线之前，要求程序员删除注释的内容，目的是加快网页的加载速度

9.文字相关的标签

b和strong都可以代表加粗，后者代表特别强调的语义
i和em都可以实现倾斜，后者代表一般强调语义
s和del都可以实现删除线效果，后者即将替代前者
运行找不到浏览器，点击提示框的浏览，选择位置，位置是最关键的，安装好浏览器软件后，都会在桌面上有快捷图标，通过浏览按钮，找到你桌面上的图标即可；

10.img标签

插入图片标签

先把图片准备好，复制到当前html文件同一级文件夹中
src代表资源，它后面的值应该写想要加载的那张图片的名字
width代表宽度（横向距离）、height代表高度（纵向距离）；注意：宽或高只设置其中一个属性，另外一个会按照原图的比例去进行缩放显示；如果宽和高都不设置，图片会按照原本的大小去显示
title=“鼠标悬停时候的提示文字”
alt （1）当图片未正常加载的时候，文字才会被别人看到（2）网页阅读器读取此内容给视障用户听，提升用户体验

例子：<img src=”想要加载的图片名字” width=”宽度” height=”高度” title=”鼠标悬停的提示文字” alt=”未加载图片时候的提示文字；可以读给网页阅读器听” />

定义：键值对儿、kv对儿、属性名和属性值；类似下面的例子：人身高=“180” 年龄=“18” 体重="100

11.超链接标签

超链接：点击之后实现页面内容的跳转
打开线上的网站：href属性对应的属性值应该设置成带有 http://

例：<a href="http://www.baidu.com">点击我可以打开百度</a>

如果想打开本地（你自己的电脑）的页面，只需要把目标文件和当前文件放在同一个目录中，在href属性中写目标文件的名字即可

<a href="02文章标题.html">点击我可以打开本地的页面</a>

新窗口打开链接：默认超链接都是在当前窗口打开，如果想在新窗口打开，需要添加target属性

例：<a href="http://www.baidu.com" target="_blank">点击我可以在新窗口打开百度</a>

空链接：暂时不知道点击之后跳转到哪里，使用空链接占位,当知道具体要跳转的位置后，再回来更改即可

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

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

12.路径

1.路径：写想要找到的资源位置（前端需要了解：相对路径的资源不能跨越盘符查询）

2.相对路径：相对于当前html文件去找其它资源的方式

同级查找当前html和目标在同一级目录中；语法：直接写资源的名字即可

<img src="t1.gif" alt="" />

上级查找：当前html和目标在上级目录中；语法：…/写资源的名字即可

<img src="../t1.gif" alt="" />

下级查找：当前html和目标在下级目录中；语法：文件夹名/写资源的名字

<img src="tu/t1.gif" alt="" />

3.绝对路径：资源在电脑中的具体位置(复制电脑中具体位置的时候，别忘了加这个资源的具体名字，以及斜杠！)

<img src="F:\测试课程\直播课03\tu2\t1.gif"/>

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

13.列表

无序列表：ul嵌套若干li，每个li就是一个选项

例：
  	<ul>
  		<li>基础班</li>
  		<li>自动化测试</li>
  		<li>功能测试</li>
  	</ul>

有序列表：ol嵌套若干li，每个li就是一个选项

例：
  	<ol>
  		<li>周杰伦</li>
  		<li>李荣浩</li>
  		<li>鹿晗</li>
  	</ol>

14.布局的标签

布局标签：当没有任何语义的时候，就可以使用div或span来进行内容的包裹，目的是后期css代码可以找到对应标签中的内容来设置样式
div：独占一行空间，称之为大盒子
span：一行可以放置多个，称之为小盒子

例：
<div>我是div</div>
<span>我是span</span>

15.音、视频、测试点

audio音、video视频
测试细节：因为历史发展原因，导致音、视频标签兼容性很差，对于测试工作来讲，需要测试三大主流浏览器是否能正常运行音、视频；
Ie测试低版本(ie7、8、9、10、11)
测试方法：打开ie，f12，找到仿真（必须是ie高版本才能测试低版本）
什么时候测试低版本：用户要求，再测试！

16.form表单标签

form表单标签里面就是所有用户填写的表单数据；
action=“xxx.jsp” 把表单数据提交给哪一个后台程序去处理
method=“post” 传递数据时候的方式方法，post代表隐式提交数据；get明文传送数据

input标签的type类型：

(1)type=“text” 普通的输入框
(2)type=”password” 密码框
(3)type=“radio” 单选框
(4)checked=“checked” 此属性可以表达默认选中状态

点击查看是否为单选效果
刷新的时候是否有默认选中的状态
点击文字是否可以进行切换

(5)type=“checkbox” 多选框、复选框

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

(6)select标签嵌套若干option标签，每组option就是一个下拉菜单中的选项

selected=“selected” 下拉菜单的默认选中
内容的顺序
默认选中的状态
内容的条数

(7)textarea 文本域

测试三大主流浏览器外观大小是否一致
提醒程序员禁用拖拽大小的功能

(8)type=“button” 普通按钮，需要js配合才能实现其它效果

value属性设置按钮身上的文字

(9)type=“reset” 点击后可以让表单数据恢复默认值

value属性设置按钮身上的文字

(10)type=“submit” 点击后可以让表单提交给指定后台处理

value属性设置按钮身上的文字
点击后无论是否报错，都与我们无关，最终测试的时候，只要关注数据库中的内容是否正常添加即可

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

表单的用户体验提升

(1)可以添加placeholder属性，可以给文本框设置提示文字

例：placeholder="请输入用户名"

(2)如果是专门写表单的页面，可以给第一个输入框设置一个默认获取鼠标焦点的属性autofocus

例：autofocus="autofocus"

(3)注意：tab可以让光标前进，shift+tab可以光标后退

二、CSS

1.CSS基础

css定义：可以设置网页中的样式、外观、美化
css中文名字：级联样式表、层叠样式表、样式表

2.css基础语法

1、style标签写在title标签的后面
2、选择器{ 属性名1:属性值1; 属性名2:属性值2; }
3、color 代表颜色
4、font-size 代表字号，px代表像素单位（在css中90%以上的情况，数字后面必须跟单位）

例子：<style type="text/css">
			div{ color: red; font-size: 100px; }
		</style>

3.开发人员调试工具

1、打开方式：f12或在网页中右键–检测
2、找到菜单中的第一个选项：elements（元素、标签、标记）
3、用鼠标左键点击想要查看的标签
4、右侧就会出现对应的css代码
5、想设置颜色：点击颜色前面的方框，使用调色盘改变颜色后，别忘了把颜色的代码放在程序中；
6、设置数字大小：鼠标左键点击数字，按键盘的上、下可以调整大小，最终的代码也要自己更改才可以生效

4.标签选择器

1、选择器：在大括号之前写的内容，就是选择器，找到你要选择的内容
2、标签选择器：用标签的名字来进行页面元素、标签、标记的选择

例：
p{color: #edff05;}

5.id选择器

1、id选择器：用html标签中的id属性来进行选取的方式

语法规则：
		#id的值{xxx}
		<p id="id的值">xxx</p>

例：
#p1{color: red;}
<p id="p1">黑马</p>

6.命名规则

1、不能数字开头
2、不能使用中划线、下划线之外的符号
3、不推荐中文
4、尽量做到见名知意(看到名字就知道意思)
5.id命名不可以重复使用；在js中会因为id的命名冲突而导致报错
6.每个标签只能有一组id

7.class类选择器

1、类选择器：使用html中的class的值来进行选取的方式

2、语法：
			.类名2{xx}
			<p class="类名1 类名2 类名3">xx</p>

3、注意：class类选择器可以重复命名；每个标签可以有多个class类名，中间使用空格分割即可

4、命名的规则：与id的命名规则完全一样

8.css书写位置、引入方式

1、内嵌式：css写在style标签中，放在title标签的后面；因为html代码和css代码混在同一个文件中

2、外链式：css代码和html代码，实现代码的分离效果，使用link标签设置href属性，即可单独把css文件链入到当前的html文件中

例：
<link rel="stylesheet" type="text/css" href="css.css"/>

应用场景：

1、内嵌式应用在电商网站首页，因为对网页的打开速度有严格的要求，一次性把html和css都加载进来；
2、外链式应用在除了电商网站首页，实现代码的分离，方便后期修改
3、了解行内式：css代码写在标签的身上，强烈不推荐使用！修改不方便、重复代码太多，导致页面加载速度变慢！

4、例：以下写法就是反面教材！！！
<p style="color: red;">jiajia</p>

9.扩展内容

1、hover 伪类：鼠标移入动作执行后的css代码

例：
p:hover{color: blue;}
注意：鼠标移入和鼠标悬停不是一个动作！

2、并列、并集选择器：需要一句话选择多个元素的时候，可以使用逗号进行连接

语法：
	h1,div,span,p{}

3、后代选择器：后代选择器：使用空格来进行选取后代元素的方式

语法：
div span{  }    找div的后代span（儿子、孙子、重孙子。。。都算后代）
	代码从左向右执行，我们就从左向右读代码

三、后端语言

1.CS和BS软件架构

1、CS即客户端-服务器架构与BS即浏览器-服务器架构，区别总结
2、效率：c/s效率高，某些内容已经安装在系统中了，b/s每次都要加载最新的数据
3、升级：b/s无缝升级；c/s删除老版本再安装新版本
4、安全：c/s更安全，需要安装、注册、登录；b/s有浏览器即可使用，安全程度低
5、开发成本：b/s成本低；c/s需要不同的系统要不同的开发人员，成本高