您好，我是程序员小羊！
前言
为了更好的学习软件测试的相关技能，需要具备一定的基础知识。需要学习的基础知识包括：
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" />
属性说明：
- src：用来指定当前想要引入的图片位置，也叫路径
- title：用来定义鼠标悬停到图片上方时的提示文字
- alt：当图片由于某些原因无法正常加载显示的时候，才会显示 alt 里的文字
- width：用来定义图片的宽度
- height：用来定义图片的高度
- 如果只设置宽度或高度中的一个，另外的一个就会按着原图的比例自动缩放
案例说明（插入图片标签；）：
键值对儿、kv对儿、属性名和属性值；类似下面的例子 人 身高=“180” 年龄=“18” 体重=“100”
步骤：
1、先把图片准备好，复制到当前html文件同一级文件夹中
2、src代表资源，它后面的值应该写想要加载的那张图片的名字
3、width代表宽度（横向距离）、height代表高度（纵向距离）；注意：宽或高只设置其中一个属性，另外一个会按照原图的比例去进行缩放显示；如果宽和高都不设置，图片会按照原本的大小去显示
4、title="鼠标悬停时候的提示文字"
5、alt
（1）当图片未正常加载的时候，文字才会被别人看到
（2）网页阅读器读取此内容给视障用户听，提升用户体验
例：
<img src=”想要加载的图片名字” width=”宽度” height=”高度” title=”鼠标悬停的提示文字” alt=”未加载图片时候的提示文字；可以读给网页阅读器听” />
3.5 HTML空格和回车
在HTML代码中，手动输入回车、换行和空格在浏览器上的显示效果是有问题的，必须使用代码才能很好的实现。
空格：
回车： <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>
测试工作的时候，如果发现程序员使用#来表达返回顶部效果，一定要提示程序员，要用动画效果实现，用户体验才更好！
超链接：点击之后实现页面内容的跳转
打开线上的网站：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>
测试工作的时候，如果发现程序员使用#来表达返回顶部效果，一定要提示程序员，要用动画效果实现，用户体验才更好！
三、路径问题
注意：在前端语法中，绝对路径不推荐写！！！只推荐使用相对路径！！！
超链接：点击之后实现页面内容的跳转
路径：写想要找到的资源位置（前端需要了解：相对路径的资源不能跨越盘符查询）
1、相对路径：相对于当前html文件去找其它资源的方式
(1)同级查找：当前html和目标在同一级目录中；语法：直接写资源的名字即可
<img src="t1.gif" alt="" />
(2)上级查找：当前html和目标在上级目录中；语法：../写资源的名字即可
<img src="../t1.gif" alt="" />
(3)下级查找：当前html和目标在下级目录中；语法：文件夹名/写资源的名字
<img src="tu/t1.gif" alt="" />
2、绝对路径：资源在电脑中的具体位置(复制电脑中具体位置的时候，别忘了加这个资源的具体名字，以及斜杠！)
<img src="F:\测试课程\直播课03\tu2\t1.gif"/>
注意：在前端语法中，绝对路径不推荐写！！！只推荐使用相对路径！！！
四、音、视频、测试点
测试细节：因为历史发展原因，导致音、视频标签兼容性很差，对于测试工作来讲，需要测试三大主流浏览器是否能正常运行音、视频；
Ie测试低版本(ie7、8、9、10、11) 测试方法：打开ie，f12，找到仿真（必须是ie高版本才能测试低版本）
什么时候测试低版本：用户要求，再测试！
五、表单的用户体验提升
1、可以添加placeholder属性，可以给文本框设置提示文字 例：placeholder=“请输入用户名”
2、如果是专门写表单的页面，可以给第一个输入框设置一个默认获取鼠标焦点的属性autofocus
例：autofocus=“autofocus” 注意：tab可以让光标前进，shift+tab可以光标后退
结束语：
今天这篇文章就到这里了，文底会有一些作业大家可以抽空做下，在下篇文章的时候会把答案放在最后，大厦之成，非一木之材也；大海之阔，非一流之归也，希望大家能持续关注下，文章从浅入深，也欢迎大佬们的随时指导！！！
作业：
扫一扫
6883
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
