软件测试（3）软件测试基础/HTML入门

Deric_

已于 2022-07-30 11:29:41 修改

阅读量450

点赞数 2

分类专栏：软件测试基础文章标签：学习

于 2022-07-18 19:10:05 首次发布

本文链接：https://blog.csdn.net/a732072213/article/details/125826559

版权

软件测试基础专栏收录该内容

7 篇文章 8 订阅

订阅专栏

前言

前面已经大概知道了软件测试的概念以及如何去设计一个工作业务当中遇到的测试用例，那么我们这时候就应该对我们实际会接触到的一些软件项目有一些基础的知识储备，平常通常会接触到的软件项目例如web，app等载体的项目，这次主要讲一部分关于web相关的知识也是大部分软件测试都需要掌握的能力。之后会再涉及到其他载体的相关知识点储备，例如数据库，linux相关的shell语言，一些常用到的接口测试工具等，我也会逐渐整理。

本次的知识储备就是和web前端界面相关的html介绍。最基本的学习目标，要能够知道常见的HTML标签的作用。

1 HTML介绍

1.1什么是HTML

HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，HTML是用来描述网页的一种语言，网页就是用HTML语言做的。是一门标签语言，不是编程语言。

既然提到了做网页相关的技术，那么也稍微拓展一下来讲解。我们常见的网页界面形式下的让我们使用者能够进行交互的通常来讲就是前端，而代码数据库/服务器数据库那些用户看不见摸不着的也统称为后端。这里不做具体的前后端定义解释，在到学习数据库的时候会在详细的讨论。那么怎么样才能很好的做一个网页呢，这离不开前端的三大核心技术。

这里推荐大家可以通过W3school这样的免费在线网站来进行学习，能够实际体验简单的脚本来上手，避免安装相关软件的麻烦。我把链接放在下面了。当然如果想比较系统并且好的了解HTML还是需要安装一下相关的编译软件，例如HBuilder，在这样的IDE（集成开发环境）下能友好的让你写大量的脚本来进行实验，一些自动的快捷添加和注释等都会比在线版本的更加流畅且美观。

HTML 简介

1.2前端开发三大技术

作为一个开发，肯定是离不开对各种技术的储备和研究，那么前端开发究竟要学习什么技术呢？网页最主要由3部分组成：结构、表现和行为。网页现在新的标准是W3C，目前模式是HTML、CSS和JavaScript。上面已经对HTML进行了解释，那么CSS和JavaScript是什么呢？

CSS：全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。总而言之，它就是负责 网页的样式和美化。

JavaScript（JS和java不是一个东西）：JavaScript是一门脚本语言，简单理解在这里主要是负责网页的行为。

2.HTML标签

前面说了HTML是标记语言，标记语言就是一套标记标签（markup tag），这套标记标签就被用来描述网页。标签通常是由尖括号包围的关键词，如<html>；并且标签是成对出现的，比如<b>和</b>，标签对中的第一个标签是开始标签，第二个标签是结束标签（也有被称为开放标签和闭合标签）。当然也有单个的标签，例如<br />，这样的标签只有一个标签且在右边最后进行结束符号例如图片标签<img src="xxx"/>。

那么HTML构造的文档 = 网页，这个就是合理的一个表述。HTML文档是包含HTML标签和纯文本的。Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。

2.1HTML编辑器

前面除了说用专业的编辑器（HBuilder/Adobe Dreamweaver/Microsoft Expression Web/CoffeeCup HTML Editor），同时推荐使用文本编辑器来学习 HTML，比如 Notepad (PC) 或 TextEdit (Mac)。化繁为简，用一款简单的文本编辑器也是学习 HTML 的好方法。

打开记事本后，输入html代码基本模版如下，这些也被称之为骨架标签。骨架标签里的<html></html>是跟标签，<head></head>这个双标签里的内容是给浏览器和搜索引擎看的，<body></body>里的标签内容是编写代码的区域。

接下来保存，在记事本的文件菜单选择“另存为”。保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 扩展名。两者没有区别。然后在浏览器中直接打开即可。如果是在专门的工具里可以指定常用的浏览器进行显示。

这里还有一个很重要的点，就是在专门的工具里如何添加html的注释呢，以常用的HBuildergju来举例，我们的注释格式一般是，一般此类注释的快捷键包含各种开发工具里的都是用ctrl+/，这在测试里很重要，我们需要在浏览器的后台用f12打开开发者工具看html源码的注释是否包含敏感元素。

2.2标签属性和元素

2.2.1标签属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。这里仅提属性格式：属性名 = "属性值" （类似名称/值对的形式），一般属性都在开始标签里进行定义。

在后面的超链接标签里会使用到这样的格式，例如<a href= "http://www.jd.com">京东</a>

2.2.2元素

HTML 文档是由 HTML 元素定义的。html元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。元素的内容是开始标签与结束标签之间的内容，例如常见的段落标签

<p>This is my first paragraph.</p>，  # 段落标签里的元素内容就是This is my first paragraph

当然也存在没有元素内容即某些元素是空内容，空元素在开始标签里就会进行关闭。例如<br/>换行标签就是这样的单标签，如果前面所说的大多数标签都是成对出现，只书写了开始标签而忘记了关闭标签的话，也不会造成影响，但是！！！在未来的html版本中明确要求要做关闭标签的规范。还有一个细节就是，不少网站也会使用大写的HTML标签，如<P>等同于<p>。

2.3常用标签

前面讲了部分的基础理论，可能逻辑不是那么顺畅，但是如果理清了对于标签的基本格式和使用方法其实会有了一个大概的模糊印象，接下来会通过实际里最经常用到的一些标签直接切入主题来进行了解和学习。

2.3.1标题标签

说明：HTML标题是通过<h1>-<h6>等标签进行定义，h1是最大的，1-6由大到小输出的标题会变得越来越小。

示例：

注意：这里可以看到每个标题后面会自动有一个空行，这是浏览器自动地会在块级元素前后添加额外的空行（比如段落/标题元素前后），我们也可以使用一个简单的<hr/>单标签创建水平线来分隔内容，例如下图示例：

2.3.2段落标签

说明：段落是通过<p>标签定义的，上面又说到<p>段落元素也是个块级元素，会出现自动的空行，那么我们是可以使用<p></p>不输入中间的元素内容，把它当作一个空行符来进行插入空行，不过这不是一个好习惯！在换行的同时还会多出一个空行出来！我们有更好的换行方法，在上面也有提到过那就是<br/>单标签作为代替。

示例：

在这里，我们讲一首诗《春晓》作为范例，先利用上面讲过的标题标签来书写不同大小的标题达到诗名和作者名的格式效果，再通过段落部分来达到诗句的书写，但是！为什么我们这里没有换行呢，因为只要是在段落标签内的元素内容，那么都是在一行里输出的！

在下图里，我们简单的使用了上面添加<br/>单标签的方法来实现换行效果！

2.3.3超链接标签

说明：超链接标签是通过<a>标签进行定义的，超链接可以是一个字/一个词/也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。（当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。）

我们通过使用<a>标签在HTML中创建链接

有两种使用 <a> 标签的方式：

通过使用 href 属性 - 创建指向另一个文档的链接（常用，重要！）
通过使用 name 属性 - 创建文档内的书签

格式：<a href = "url">Link text</a>，下图可以看到具体呈现出来的超链接结果。

href属性规定链接的目标，在开始标签和结束标签之间的元素内容就是被作为超链接来显示。例如<a href = "http://www.baidu.com" target = "_blank">百度</a>。这里又有一个target出现了，它是什么呢，在标签里面，很明显它和href一样也是属性。如果有自己亲自尝试去试验上面的那个超链接的标签的话，在浏览器中去点击链接会发现能直接跳转，但是我们有时候更希望去新打开一个窗口来显示我们的链接。而target属性的使用方法如下图所示。

2.3.4图片标签

说明：网页中插入图片就要使用图片标签（记住图片标签是单标签），HTML图片是通过<img>标签进行定义的。<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。一般这里的地址会放在同一个目录底下。

格式：<img src = “url地址”>

这时候有人就会问了，我们如果放的图片是个空的，或者网络不好没有及时加载出来，那么图片显示的地方是不是就是显示空白了？这时候就要引入一个概念，叫做替代文本属性，这个东西也很好理解，其实它是为了能够告诉使用浏览器的人他们失去的信息，此时，浏览器将显示这个替代性的文本而不是图像。而这个替代文本也是一个属性，是用alt来表示，为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。具体格式是：<img src="boat.gif" alt="Big Boat">

在没有图片加载出来的时候，会显示 Big Boat这样的文本信息。同时，还有注意的是HTML文件如果包含多个图片的话，加载是需要时间的，为了正确显示这个页面需要加载的文件量很大，需要的时间也多，所以我们要慎用图片！

最后还有一些比较小的细节，例如当我们把鼠标光标移动到图片上面悬停时会有显示文字，这一部分也有属性来进行解释，这个属性是title格式可以是<img src="boat.gif" title="boat">这时候，鼠标放上去就会有一个boat的文字显示出来。我们还想再调节图片的大小也有对应的属性来进行调节，比如width和height这样耳熟能详的属性，他们分别代表的是图片的宽度和图片的高度，格式是 <img src="boat.gif" width="104" height="142" />

2.3.5换行与空格

说明：换行标签就是<br />，空格是 &nbsp，其实只要把它们当成特例来记就好。

具体的实现方法在下图：

2.3.6布局标签

说明：页面布局使用，常用（div和span）。<div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位，下图即是示例。简单理解，div就是一个大盒子布局自己独自占一行可以和段落标题等进行组合，而span就是小盒子布局，一行里可以存在多个。（这里的span是行内元素，需要区分开不能和div这样的块元素在一起！！）

只单单看图，并不难很明显的看出来布局和上面的区别，那再通过一些div 示例元素来进行美化，这里的代码我们不需要知道会写，只要能看懂即可。

不难看出在美化之后，确实是各自会呈现一块块的区域，这里只要知道常用的两个布局标签大概呈现什么样的状态即可，美化部分的代码细节都很好理解，那些属性都是添加的ui元素，例如上面说过的宽高还有背景色/填充/位置等等常见的属性。

2.3.7列表标签

说明：列表标签常用li元素（分为：有序和无序）。一个是ol一个是ul，有序可以记忆为order比较好理解。

有序列表是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。示例如下：

无序列表也是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 <ul> 标签。每个列表项始于 <li>标签。示例如下：

注意：列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。还有一种比较少见的自定义列表，它不仅仅是项目而是项目和注释的结合。如下图所示：

2.3.8表单标签

说明：页面提交输入信息需要使用表单标签<form></form>，一般是用来收集不同类型的用户输入，像常见的登录界面啊还有手机信息的调查表等。HTML表单包含表单元素（表单元素指的是不同类型的 input 元素，根据type分为复选框、单选按钮、提交按钮等等。）input是里面最重要的表单元素。下图是作为常见的登录界面的示例：

name属性--单选按钮

我们会看到里面所有的标签都是我们上面学习过的标签，但是有一个新的属性是之前没有见过的那就是name属性，在表单里的name属性是起到什么作用呢？好像输入的文本内容并没有影响到什么地方。原因是因为这里的input元素的type属性对应的是text文本格式，那么如果是另外一种格式下，像我们常见的单选按钮radio如果是不带name属性的话是无法提交表单无法传递值的。name属性在这里的主要作用就是用于提交到服务器后的表单数据进行标识。

通过下面的示例，就能很好的明白name属性在表单之中的作用，比如radio是能够让用户来选择性别的，通过<input type="radio"> 定义单选按钮。，如果我们不把两个radio的name设成相同的话，那么他就会既能选择男又能选择女！

action属性--提交按钮

<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。表单处理程序在表单的 action 属性中指定。这里只进行了解，对于服务器返回部分不深入。具体示例部分如下：

能够看出，上面的例子里的标签都和先前的一样，按从上往下的顺下加入了一个<form action="/demo/demo_form.asp">和一个<input type="submit" value="Submit"> ，action 属性定义在提交表单时执行的动作。向服务器提交表单的通常做法是使用提交按钮。通常，表单会被提交到 web 服务器上的网页。注意，如果省略了action，则会被提交到当前的页面。

另外，补充说明的是既然是提交方法，在HTTP协议里的提交就是由post和get两个比较主要的提交方法，提交的属性表达就是用Method。格式为：<form action="action_page.php" method="GET">和<form action="action_page.php" method="post">。

那么我们使用get和post的情景是什么样的呢？默认我们使用的方法都是get方法，根据两种方法的特性不同（被动主动/数据长度/安全性/），在表单提交是被动的（比如搜索引擎查询），并且没有敏感信息时我们就会使用get，这时单数据在页面地址栏中是可见的。如果表单正在更新数据，或者包含敏感信息（例如密码）。post方法的安全性更好，因为在页面地址栏中被提交的数据是不可见的。还有一点就是长度的限制，因为get的数据传入服务器是会在浏览器页面地址里出现，因此会受到不同浏览器的长度限制，而post方法传入的数据是在请求体里，因此长度不受限制。

3.总结

这次主要是对html常见的标签做了一个学习认识，基本上都很好理解，作为测试人员对于标签主要是能看懂即可，在后续一些ui自动化才会涉及到具体的实际操作，这个我目前也仍然在学习当中。平常多用鼠标右键点开浏览的网页的源码来看看，每个网页呈现在我们面前的部分都是怎么构造出来的，感兴趣的话也可以再去对其他的两个前端技术去了解了解。