目录
1、什么是软件测试
2、计算机基础知识
--硬件系统
--软件系统
1、系统软件：控制硬件（不做测试）
2、应用软件（测试）
--B/S和C/S架构
B/S：Browser-Server
C/S：Client-Server
B/S软件和 C/S软件的区别
--二进制
1、常见的单位换算：
2、计算机指令系统
3、计算机编程语言
--OSI七层模型
--TCP/IP 协议
--IP地址
--DOS命令
---服务器域名
上传网站：
3、web端基本知识
HTML基本语法
CSS基础语法
HTML5新标签
1、什么是软件测试
软件测试就是利用手工或测试工具按照测试方案和流程对产品进行功能和性能测试，简单来说就是为软件做“质检”
2、计算机基础知识
--硬件系统
运算器、控制器统称为中央处理器cpu：负责数据的算术运算和逻辑运算，即数据的加工处理，是整个计算机中枢神经，分析程序规定的控制信息，并根据程序要求进行控制，协调计算机各部分组件工作及内存与外设的访问等
存储器：实现记忆功能的部件，用来存储程序、数据和各种信号、命令等信息，并在需要的时候提供这些信息。内存（rom只读存储器；ram随机存储器；断电数据会消失）；外存（硬盘、软盘ab、光盘）
输入设备：实现将程序、原始数据、文字、字符、控制命令或现场采集的数据等信息输入到计算机
输出设备：实现将计算机处理后生成的中间结果或最后结果（各种数据符号及文字或各种控制信息等信息）输出出来
--软件系统
1、系统软件：控制硬件（不做测试）
① 桌面操作系统
Windows系统：用户群体大
macOS系统：适用于开发人员
Linux系统：应用软件少
②服务器操作系统
Linux系统：安全、免费、稳定、占有率高
Windows server：付费、占有率低
③嵌入式操作系统
Linux系统：稳定、文件小、一般放在机顶盒、pda、网络电视、手机
④移动设备操作系统
iOS
安卓：Linux
2、应用软件（测试）
QQ、迅雷、words、PPT、游戏
--B/S和C/S架构
B/S：Browser-Server
浏览器和服务器架构，包含客户端浏览器、web应用浏览器、数据库服务器浏览器的软件系统。用户只需要一个浏览器就可以访问服务。系统在更新的时候只需要更新服务器，不需要更新浏览器（如淘宝网、百度）。
C/S：Client-Server
客户机和服务器结构，和B/S不同的就是需要安装客户端（如QQ、微信、手游），通过客户端应用程序来访问系统，所以在更新的时候既要更新客户端，又要更新服务端
B/S软件和 C/S软件的区别
1、硬件环境不同
C/S建立在专用网络上，小范围的网络环境，局域网在通过专门的服务器提供连接和数据交换服务
B/S建立在广域网上，不需要专门的网络硬件环境
2、安全要求不同
C/S 面对相对固定的人群，对信息安全控制能力强（如QQ、微信）
B/S 建立在广域网上，对安全的掌握能力弱，面向不可知的用户的用户群
3、系统维护不同
C/S 由于整体性，必须整体考察，升级困难，多建立在Windows系统上面，表现方式有限，对程序员要求高（考虑到兼容性）
B/S 无缝升级，维护开销小，有更加丰富的表现形式，开发难度较低
4、处理问题不同
C/S 处理用户固定，安全需求高，要求相同的操作系统
B/S 面向所有的用户，分散广，对系统要求小
--二进制
计算机描述数据使用的二进制
表现形式：0 1 （逢2进1；计算机只需要0和1就能表示开和关）
在线工具：在线进制转换
1、常见的单位换算：
1B（计算机处理数据的最小单位）=8b（计算机表示数据的最小单位）
1kb=1024B
1024kb=1MB（兆）
1024MB=1GB
1024GB=1TB
1024TB=1PB
2、计算机指令系统
机器语言，是一种指令集的体系，机器码，简单来说，是一组需要CPU处理的二进制数
3、计算机编程语言
机器语言
由0和1组成的二进制数
汇编语言
用一些简洁的英文字母、字符串来替代一个特定的字符串，如ADD（加法）、MOV（数据传递），更容易识别和记忆，运行效率高
高级语言
Java、C++、PHP等；大大简化了中间过程
--OSI七层模型
描述了网络活动的特点
1、应用层
所有应用程序的网络在此展开
2、表示层
表示数据形式，完成对传输数据的转化（数据的加密解密）
3、会话层
负责建立、维护、拆除会话（session缓存）
4、传输层
负责建立一个 可靠的端到端的链接
5、网络层
负责路由寻址和广播
6、数据链路层
负责将上层数据封装成帧
7、物理层
只负责传输0和1二进制比特流
--TCP/IP 协议
定义：网络通讯协议
1、应用层：应用程序之间相互沟通的层
2、传输层：提供了数据传输，应用程序之间的通信服务
3、网络互联层：负责提供基本的数据封装包传输功能，让每一个块数据包都能够达到目的主机
4、网络接口层：接受数据，并进行传输
--IP地址
IP地址是IP协议提供的一种统一的地址格式，它为互联网上的每一个网站和每一台主机分配了
一个逻辑地址，以此来屏蔽物理地址的差异（相当于门牌号）
IPV4地址：4段数字组成（地址已经使用枯竭）例如：127.0.0.1
IPV6地址：6段数字组成
地址分类：
1、A类：第一组数字在1-126
2、B类：第一组数字在128-191
3、C类：第一组数字在192-223
保留IP地址（只能用于局域网中）
1、网络号：
10
127
172.16.0.0-172.31.255.255
192.168.*.*
--DOS命令
1、win+R 打开运行窗口
2、cmd 打开命令行窗口
3、ipconfig/all 回车，查看电脑物理地址（Mac地址）、IP地址
4、arp -a 回车，查看IP地址和物理地址的对应的关系
5、ping (某地址）www.baidu.com 回车，访问目标地址，查看本机和目标地址是否能够连接（一般测试可以测试与目标地址是否连通）
6、cls 回车，清屏
7、盘符：回车，切换盘符
8、cd 文件夹名 回车，进入指定文件夹
9、dir 回车，显示当前路径下的目录内容
10、cd.. 回车，回到上层目录
11、cd/ 回车，返回根目录
12、md 文件夹名 回车，在当前路径下创建一个新的文件夹（新建目录结构）
13、rd 路径/文件夹名（具体目录） 回车，删除目录结构（空文件夹，非空删除失败）
14、copy 要复制的路径\文件名（空格）目标路径 回车，复制文件；例子：copy d:1\2\1.png d:2（将d:1\2下的1.png复制到d:2）
15、move 要剪切的路径\文件名（空格）目标路径 回车，剪切/移动文件
16、del 文件路径\名字，注意：如果只写目录，全删除该目录下的全部文件（非空文件也可以删除）
17、del *.*表示当前在哪个文件夹下，就删除该文件夹下全部文件（不是文件夹）
18、del 具体的文件目录和名字，可以单独删除某一个文件
19、键盘↑ ↓可以重复使用已经使用的命令行
20、format:盘符 该盘下全部内容全部删除！！！！（切记不要轻易尝试）
---服务器域名
常见的网站可以通过网址、IP地址都可以输入之后查询到
域名：常见的网址
空间、服务器、云存储、虚拟空间
上传网站：
新浪云（上传自己写好的代码来创建网址可以供其他人访问，注意要写到自己的子路径）
1、注册登录
2、选择首页右上角的控制台--云应用sae
3、创建新应用
4、选择不要钱的版本
5、上传代码（必须是 .zip格式）
6、找到地址链接复制到浏览器中，手动在最后添加 zip文件夹名字\index.htm
草料二维码生成器（网址-->二维码，可以手机扫码进去）
3、web端基本知识
web标准：
html结构标准：负责网页结构的搭建
css样式标准/表现标准：负责网页的美化工作
js行为标准：负责网页的行为动作
行业词条：
internet：互联网
WWW（3Ｗ）：万维网
URL：统一资源定位器（网络地址）
HTTP：超文本传输协议
W3C：万维网联盟（是一个组织不是某个公司）制定html、css、js基本规则
网站：多个页面的集合
网页：.htm或者是 .hmtl结尾的文件
浏览器：观看网页最终效果的平台
HTML基本语法
超文本标记语言
XHTML：相当于HTML的严谨版
<!DOCTYPE html>描述当前文件的版本信息，如果没有详细说明是4.0还是x1.0，那就是5版本
html文档不能正常识别回车和换行，只能靠标签来完成
<!---注释-->
HTML标签
1、<h>文章标题
<h1> </h1> 一级标题
<h2> </h2> 二级标题
..... ...
<h6> </h6> 六级标题
2、<p>文章内容
标签语义化，在浏览器里面输入文字，都需要<p> </p>
3、"buis"标签
<b> </b> 表示加粗 == <strong> </strong> 也是加粗，可以代表强调的语义，一般不多次出现
<u> </u> 表示下划线
<i> </i> 表示倾斜 ==<em> </em> 也是加粗，多了强调语气
<s> </s> 表示删除线 == <del> </del>也是删除线，这种方式是主流
<br /> 单标签 代表一个换行回车
HTML属性
键值对：属性名称="值"(空格)属性名称="值" //属性不分先后
<img src = "选中的图片.jpg"(空格）width="宽度" (空格) heght="高度"/> 如果高度和宽度设置其中一个，则会等比例缩放
<img src = "选中的图片.jpg"(空格）title="鼠标悬停后才出现的文字" />
<img src = "选中的图片.jpg"(空格）alt="我是提醒文字，如果图片没有加载出来，会加载问题文字，否则不显示文字" /> //alt一般描述该图片内容
<autofocus="autofocus"/> //添加属性之后会在网页中光标默认在那个位置
相对/绝对路径
相对路径：从自身出发去寻找文件
1、同级查找直接写文件名字
2、下级查找，写文件夹名字加 /；例如：img/01.jpg
3、上级查找 ../ ；例如：../01.jpg
相对路径不能跨越盘符
绝对路径：在某个盘的某个文件夹下面
超链接
<a href="链接/路径（alt+?代码提示，打开已经写过的html）">跳转超链接提示文字</a>
<a href="链接" target="_blank"> </a> 新窗口打开新链接 target="_blank"
<a href="#"> </a> ##/#/（不写；空格）代表一个空链接，点击之后回到网页顶部（用户体验感不好）
<!---以下三种写法不需要debug；表示空链接，但是不会回到网页顶部-->
<a href="###"> </a>
<a href="javascript:;"> </a>
<a href="javasrcipt:void(0);"> </a>
锚点链接
设置锚点：
<p id="123"> </p>
<a name="one"> </p>
设置启动器开关：
<a href="#123> </a>
<a href="#one"> </a>
如果是跨页链接：
<a href="需要跳转的.html#one"> </a>
实际场景：京东、淘宝等购物网站需要定位到某个内容区的
HTML表单
所有的表单填写的数据都要放在这个标签下；action表示要提交给哪个后台程序；method代表传输过程中使用哪种形式（post加密；get不加密）
<form action="" method="">
输入框 <input type="input输入框类型，如=text则为标准的文字输入框；=password密码框，显示加密"（空格）name="输入框的名字"（空格） id="唯一标识该输入框"（空格） value="默认文本框文字，用户体验感不好"/>
<!-----为了提高用户体验感，可以将value改成placeholder=""(html5 不兼容ie6、7、8、9版本)虽然低版本IE不支持，但是不会造成页面的混乱，认为此属性没有问题（渐进增强，优雅降级：版本越高用户体验感好；高版本体验感好，低版本不混乱为原则）--->
</form>
单选按钮
<input type="radio" name="a"/>男<input type="radio" name="a"/>女
其中radio保证了是单选按钮；name保证了是两个单选按钮的情况下只能选择其中一个
实现点击文字也能勾选按钮（用户体验感好）：
<input type="radio" name="a" id="nan"/><label for="nan">男</label>
多个单选出现了之后，默认选择一个值（用户体验感好）：
<input type="radio" name="a" id="nan" checked="checked"/><label for="nan">男</label> 则会默认选择“男”这个选项
下拉菜单
<!----单个下拉框选项，且默认是天河区--->
<select name="">
<option>番禺区</option>
<option selected="selected">天河区</option>
<option>越秀区</option>
<option>白云区</option>
<option>海珠区</option>
</select>
<!----分组下拉框选项，且label为提示文字--->
<select name="">
<optgroup label="广州">
<option>番禺区</option>
<option>天河区</option>
<option>越秀区</option>
<option>白云区</option>
<option>海珠区</option>
</optgroup>
<optgroup label="深圳">
<option>罗湖区</option>
<option>福田区</option>
<option>南山区</option>
</optgroup>
</select>
文本域
<!----文本域不能设置rows和cols，会因为不同的浏览器解析的结果导致显示不同的大小，只能通过height和width--->
<textarea placehoder="请输入文字"></textarea>
placehoder则为浅色字的提示文字
多选按钮
<input type="checkbox" />
默认选中某个值：
<input type="checkbox" checked="checked"/>软件测试 #默认选中软件测试
点击文字也能勾选按钮:
<input type="checkbox" id="ceshi"/><label for="ceshi">软件测试</label>
按钮和用户体验
提交按钮：<input type="submit" value="按钮上的文字"/> #会把提交后的操作提供到后台其他功能
重置按钮：<input type="reset" value="按钮上的文字"/> #会重置已经写过的内容
<!-----必须设置value属性，否则浏览器之间有兼容性问题----->
按钮：<input type="button" value="按钮上的文字"/>== <button> </button>
CSS基础语法
样式表、跟外观有关的内容都是CSS
在<head> </head>标签内
<head>
<style> 标签{属性名：属性值; (空格可有可无)属性名：属性值;}
</style>
</head>
例如：
p{ color:red;font-size:30px;font-family:"黑体";text-align:left;}
红色字体 30px大小 黑体字体 向左对齐（不设置，默认left）
text-align:right 向右
text-align:center 居中
首行缩进 text-indent:2em(em代表是一个文字的大小）
实体化、选择器
实体化三属性：width（宽度）、height（高度）、background（背景色）
例子：P{ width:200px; height:200px; background:pink;}
<div> </div> #代表大盒子，用来存放内容的，可以存放多行
<span> </span> #代表小盒子，用来存放内容，只能存放一行
标签选择器
<style> 标签名字{属性名：属性值; (空格可有可无)属性名：属性值;} </style>
#即选择标签后赋予不同的属性
ID选择器
<head>
<style>
#p1{ color:red }
#p2{ color:blue}
</style>
</head>
<body>
<p id="p1"> p1是红色 </p>
<p id="p2"> p2是蓝色 </p>
</body>
Class选择器（类选择器）
<head>
<style>
.p1{ color:red }
.p2{ color:blue }
</style>
</head>
<body>
<p class="p1"> p1是红色 </p>
<p class="p2"> p2是蓝色 </p>
</body>
#类选择器和id选择器都可以实现一样的效果，但是更多会使用类选择器（类选择器可以复用）另外可以多个属性叠加：
<head>
<style>
.p1{ color:red }
.p2{ color:blue }
.s1{ font-size:30px}
</style>
</head>
<body>
<p class="p1 s1"> p1是红色且大小为30px </p>
<p class="p2"> p2是蓝色 </p>
</body>
CSS引入方式
1、内嵌式：放在html的<head><style>；加载速度快，电商网站首页使用这种方式，因为电商首页要求加载速度快；代码和CSS没有实现分离，修改复杂
2、外链式：另外建一个css文件，然后在需要引入的html的<head>标签中写入：<link rel="stylesheet" type="text/css" href="需要引入的css文件"/>；实现了代码分离，方便修改和管理；运行速度比内嵌稍慢
3、行内css：在<body>里面需要加css的部分加上：<body> <p style="color:red;">这里面的字变成了红色</p> </body>；少用，累赘，代码量庞大
基础选择器权重
id选择器>类选择器>标签选择器
复合选择器
后代选择器：一个空格表示后代关系；div span代表的意思是找到后代元素（后代可以是儿子、儿子的儿子......）
并集/列选择器：用逗号连接选择器，代表这些元素同时被选中，赋予相同的属性
标签指定式/指定标签式
<head>
<style>
div(空格).div1{ color: red} #先找后代，在指定到class标签
</style>
</head>
<body>
<div class="div1">我是div1，我的颜色是红色</div>
<div>我是div2</div>
</body>
复合选择器权重对比
由基础的权重对比：id选择器100斤>类选择器10斤>标签选择器1斤
可知：如果是权重叠加也会增加权重，如果权重一样，则先写的会被后面的覆盖
高权重对比（引入方式）
外链和内嵌的权重相同，先写的会被后写的覆盖
行内CSS权重最高，如果人为改变权重，则在该位置写 !important（了解）
CSS常用文字属性
#font-wight 设置字体粗细 font-style：设置字体倾斜 text-decoration：设置线
不加粗：font-weight:normal
加粗：font-weight:bold
倾斜：font-style：normal/italic
无下划线：text-decoration：none
下划线：text-decoration：underline
上划线：text-decoration：overline
贯穿线/删除线：text-decoration：line-through 例子：棒棒棒
强制换行：word-break：break-all
a：hover{ color：green；} #鼠标悬停状态的样式设置，这种写法叫做伪类
行高属性：line-height
盒子模型
边框属性：boder-bottom（下边框）border-top（上边框）border-left（左边框）border-right（右边框）border（四条边同时设置）
#border：1px solid red 表示四条边都是1px大小的红色实线
实线：solid
虚线：dashed
注意：边框属性只有虚线是没有兼容性问题，其他方式的线会有兼容性的问题（双横线、点桩）
padding：内边距（盒子和内里内容的边距） padding：10px 20px 30px 40px 顺时针变化效果
margin：外边距（盒子和盒子的距离）margin：10px 20px 30px 40px 顺时针变化效果
HTML5新标签
<!---以下html5新标签IE低版本不识别，所以只能用在手机网站的书写，pc网页端不建议使用---->
头：<header> </header>
导航：<nav> </nav>
侧导航:<aside> </aside>
文章块：<article> </article>
底部：<footer> </footer>
#可以提升搜索引擎对网站的优化 代替了<div> </div>
