软件测试基础三（前端知识）

前端基础

1. HTML（超文本标记语言）

1.1. 基本概念

定义：HTML 是用来描述网页的一种语言，指的是超文本标记语言（Hyper Text Markup Language）。它不是编程语言，而是一种标记语言，由一套标记标签组成。使用标签来描述网页，HTML 文档也被称为网页。浏览器读取 HTML 文档，并以网页的形式显示。
作用：是网页制作的基础，决定了网页的框架和布局。

1.2. HTML 文档结构

由<html>标签包裹，包含<head>和<body>两个主要部分。
<head>部分通常包含网页的元信息和引用的外部资源（如 CSS 文件、JavaScript 文件等）。
<body>部分包含网页的实际内容，如文本、图像、链接等。

1.3. HTML 标签骨架

HTML 最基本的是骨架标签，包括<html>用来声明当前文档类型是 html，是网页当中最大的标签，即根标签；<head>是网页头部，里面内容主要定义网页标签及给浏览器查看的信息，如<meta charset="UTF-8">用来定义网页的编码标准；<title>是网页标题标签，内容会显示在浏览器的标签页上；<body>是网页主体标签，里面内容会显示在浏览器的白色窗口区域。

1.4. HTML 标签

HTML 标签是由尖括号包围的关键词，通常成对出现，如<html>和</html>标签对，第一个是开始标签，第二个是结束标签。也有单标签，书写规则为<单标签名称 />，如<br/>；双标签书写规则为<双标签名称>xxx</双标签名称>，如<p>xxx</p>。

常见标签：

<html>：整个网页的根标签。
<head>：包含网页的元信息，如标题、编码等。
<title>：定义网页的标题，显示在浏览器标签页上。
<body>：包含网页的主体内容，如文本、图片、链接等。
<h1> - <h6>：标题标签，用于定义不同级别的标题。
<p>：段落标签。
<a>：超链接标签，用于创建链接到其他网页或资源的链接。
<img>：图片标签，用于在网页中插入图片。

标签属性：

为标签提供额外的信息，如<img src="image.jpg" alt="图片描述">中的src和alt就是属性。
HTML 标签可以拥有属性，提供有关 HTML 元素的更多信息，总是以名称 / 值对的形式出现，如name="value"，且在 HTML 元素的开始标签中规定，如<a href="百度">百度</a>。

1.5. 基本的 HTML 标签

HTML 标题：通过<h1> - <h6>标签进行定义。
HTML 段落：通过<p>标签进行定义。
HTML 超链接：通过<a>标签进行定义，在href属性中指定链接地址。
HTML 图片：通过<img>标签进行定义，属性说明如下：

- src：指定图片位置，即路径。
- title：定义鼠标悬停到图片上方时的提示文字。
- alt：当图片无法正常加载时显示的文字。
- width：定义图片宽度。
- height：定义图片高度。若只设置其中一个，另一个会按原图比例自动缩放。

HTML 空格和回车：在 HTML 代码中，手动输入回车、换行和空格在浏览器上显示效果有问题，需使用代码实现。空格： ；回车：<br/>。
布局标签：

- div：块级元素，独占一行。
- span：内联元素，可用作文本容器，没有特定含义，可一行放置多个。

1.6. HTML 编辑器

如 HBuilder，使用时点击启动图标，可暂不登录。第一次进入可选择适合电脑的视觉方案，根据喜好设置字体大小（建议 20 号左右），在工具 - 视觉主题设置 - 字体 - 更改。

1.7. HTML 文字标签

文字加粗标签：b和strong都可实现加粗效果，后者有特别强调语义。
文字倾斜标签：i和em都可实现倾斜效果，后者有一般强调语义。
文字删除线标签：s和del都可实现删除线效果，前者即将被后者替代。

1.8. HTML 表单标签

表单是在 web 网页上用来收集用户输入数据并提交到后台的 HTML 代码段，包含输入框、单选框、复选框、提交按钮等不同类型表单元素。

form 标签：所有表单元素必须放在form标签中，属性有action（表单数据提交的服务器地址）和method（提交表单时所用的 HTTP 请求方式，默认 GET）。
文本输入框：提供单行文本输入功能。
密码输入框：输入内容会被做掩码处理，一般显示为星号或实心圆。
单选按钮：一组单选按钮中同时只能选中一个，name属性值相同即为一组，可使用checked="checked"设置默认选中状态。
复选框：又称多选框，允许用户在有限数量的选项中选择零个或多个选项，可使用checked="checked"设置默认选中状态。
下拉框：<select>元素定义下拉列表，<option>元素定义下拉列表的选项，列表通常会把首个选项显示为被选选项，可通过添加selected属性定义预定义选项。
文本域：可以输入多行文本内容。
按钮：包括普通按钮（需配合 js 实现其他效果）、重置按钮（恢复表单数据到初始化状态）、提交按钮（提交表单数据到服务器）。

1.9. 代码示例

1.9.1. 代码块

<!DOCTYPE html>
<html><head><!-- 定义文档的字符编码为UTF-8 --><meta charset="UTF-8"><!-- 设置网页标题 --><title>简单前端示例</title><style type="text/css">/* CSS样式部分 */body {font-family: Arial, sans - serif;}/* 选择id为text的元素并设置颜色为蓝色 */#text {color: blue;}</style>
</head><body><!-- HTML结构部分 --><p id="text">这是一段可以改变颜色的文字。</p><p p1= "这是一段可以改变颜色的文字。"</p><h1>这是P1标题</h1><h6>这是P6标题</h6><p>这是一个包含 <a href="https://baidu.com">百度网站超链接</a> 的段落，还有  <b>b加粗的文字效果</b> <strong>strong加粗强调的文字效果</strong> <i>i倾斜的文字效果</i> <em>em倾斜强调的文字效果</em> <s>s删除的效果</s> <del>del删除的效果</del>。</p><img src="/Users/bytedance/Desktop/教师端图片素材/图像.png" title="鼠标悬停到图片上方时的提示文字" alt="这是一张示例图片" width="300" height="200"><p>这里后面有一个空格&nbsp这里后面会换行<br/>换行后</p><button onclick="changeColor()">点击改变颜色</button><!-- JavaScript部分 -->s<script>function changeColor() {// 获取元素var textElement = document.getElementById('text');// 改变颜色为红色textElement.style.color ='red';}</script><form action="/submit" method="post"><!-- 文本输入框 --><label for="username">用户名：</label><input type="text" id="username" name="username"><br><!-- 密码输入框 --><label for="password">密码：</label><input type="password" id="password" name="password"><br><!-- 单选按钮 --><label>性别：</label><input type="radio" name="gender" value="male" checked="checked">男<input type="radio" name="gender" value="female">女<br><!-- 复选框 --><label>爱好：</label><input type="checkbox" name="hobbies" value="reading" checked="checked">阅读<input type="checkbox" name="hobbies" value="music">音乐<input type="checkbox" name="hobbies" value="sports">运动<br><!-- 下拉框 --><label>城市：</label><select name="city"><option value="beijing" selected="selected">北京</option><option value="shanghai">上海</option><option value="guangzhou">广州</option></select><br><!-- 文本域 --><label>简介：</label><textarea name="description"></textarea><br><!-- 普通按钮 --><input type="button" value="普通按钮"><br><!-- 重置按钮 --><input type="reset" value="重置"><br><!-- 提交按钮 --><input type="submit" value="提交"></form>
</body></html>

1.9.2. 效果

2. CSS（层叠样式表）

2.1. CSS 简介

CSS 指层叠样式表（Cascading Style Sheets），作用是定义如何显示 HTML 元素，即定义 HTML 元素的样式，样式通常保存在外部的.css 文件中，可改变所有页面的布局和外观。

2.2. 基本概念

定义：用于定义网页的样式和布局，控制网页元素的外观。
作用：使网页更加美观、易读，提高用户体验。

2.3. CSS 语法

CSS 规则由选择器和一条或多条声明构成。选择器指定要改变样式的 HTML 元素，每条声明由一个属性和一个值组成，属性代表要设置的样式属性，属性和值被冒号分开，CSS 声明以分号结束，总以大括号括起来。在 HTML 文档中，可以把样式定义在<style>标签中。
选择器：用于选择要应用样式的 HTML 元素，如标签选择器（p选择所有<p>标签）、类选择器（.classname选择具有特定类名的元素）、ID 选择器（#idname选择具有特定 ID 的元素）等。
属性和值：选择器后面跟着一对大括号，里面包含属性和值，用于定义元素的样式，如color: red;表示将文本颜色设置为红色。

2.4. CSS 盒模型

组成：由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。
作用：决定了元素在网页中的布局和大小。

2.5. CSS 布局

常见布局方式：流式布局、浮动布局、定位布局等。
响应式设计：使网页能够根据不同的设备和屏幕尺寸自动调整布局和样式。

2.6. CSS 注释

用来解释代码，浏览器会忽略。以/*开始，以*/结束。

2.7. CSS 选择器

CSS 选择器是一种模式，用于选择需要添加样式的元素，常用的有：

id 选择器：通过元素的id属性选择元素，要求元素必须有id属性，CSS 中以#定义，如#test01。id属性命名规则为不要以数字开头、不能使用中划线和下划线之外的符号、不推荐使用中文、尽量做到见名知意，在整个 HTML 文档中id属性必须唯一，但 HTML 文档不会严格校验。
class 选择器：通过元素的class属性选择元素，又称类选择器，要求元素必须有class属性，用于描述一组元素的样式，可以在多个元素中使用，CSS 中以.定义，如.center，class属性的第一个字符不能使用数字，可以使用空格分割多个class类名。
标签选择器：通过元素的标签名称选择元素，又称元素选择器，CSS 中直接使用标签名称定义，如p、input。
属性选择器：可以根据元素的属性及属性值选择元素，可使用 HTML 元素的任意属性，包括简单属性选择（选择有某个属性的元素，格式为[属性名]）和根据具体属性值选择（选择有特定属性值的元素，格式为[属性名="属性值"]）。
后代选择器：选择作为某元素后代的元素，语法规则为多个选择器用空格分隔，如p span{color: red;}。
子元素选择器：选择作为某元素子元素的元素，语法规则为多个选择器用大于号 > 分隔，如div>span{color: red;}。
并列并集选择器：并列并集选择器使用逗号（,）将多个选择器连接在一起。如：h1, h2, p {color: blue; font-size: 16px;}。

2.8. CSS鼠标移入伪类

在 CSS 中，鼠标移入伪类是 :hover。它用于当鼠标指针悬停在特定元素上时应用特定的样式。

2.8.1. 用法示例

假设我们有一个 HTML 段落元素：

<p>这是一段文本。</p>

可以使用 CSS 为这个段落元素设置鼠标移入时的样式：

p {color: black;
}p:hover {color: blue;font-weight: bold;
}

在上述代码中，当鼠标没有悬停在段落上时，文本颜色为黑色。当鼠标移入段落时，文本颜色变为蓝色且字体变为粗体。

2.8.2. 特点

增强交互性
通过 :hover 伪类，可以为网页添加交互效果，让用户在操作过程中得到即时的反馈。例如，当用户将鼠标悬停在导航栏上的菜单项时，可以改变菜单项的颜色、背景色或添加下划线等，以提示用户该元素是可点击的。
对于按钮元素，鼠标移入时可以改变按钮的外观，使其看起来更加突出，吸引用户点击。
突出重点内容
可以用 :hover 伪类来突出显示网页中的重要内容。比如，当鼠标悬停在图片上时，可以添加阴影或边框，使图片更加醒目。对于一些关键的文本信息，如重要的链接或提示性文字，鼠标移入时可以改变颜色或字体大小，以引起用户的注意。
动态效果
结合 CSS 的过渡效果，可以为 :hover 伪类创建平滑的动态过渡。例如，当鼠标移入一个元素时，可以让元素的颜色、大小或位置等属性逐渐变化，而不是突然改变，从而增加页面的视觉吸引力。
可以使用 transition 属性来定义过渡效果的属性和持续时间。例如：“transition: color 0.3s ease;”表示当颜色属性发生变化时，在 0.3 秒内以平滑的方式过渡。

2.9. CSS 内链式和外链式

2.9.1. 内链式

内链式是将 CSS 样式直接写在 HTML 文档的 <style> 标签中，作用于当前 HTML 文档。

例如：

<!DOCTYPE html>
<html><head><style>p {color: blue;font-size: 16px;}</style></head><body><p>这是一段文本。</p></body></html>

内链式的特点如下：

优点：

方便在单个 HTML 文档中进行局部样式调整，不需要额外的 CSS 文件。
可以快速看到样式效果，对于小型项目或临时调整样式比较方便。

缺点：

如果多个 HTML 文档需要相同的样式，内链式会导致重复编写 CSS 代码，增加维护成本。
不利于代码的可维护性和可重用性，因为样式与 HTML 代码混合在一起。

2.9.2. 外链式

外链式是将 CSS 样式写在一个独立的 CSS 文件中，然后通过 HTML 文档中的 <link> 标签引入。

例如：

创建一个名为“styles.css”的 CSS 文件：

p {color: green;font-size: 18px;
}

在 HTML 文档中引入这个 CSS 文件：

<!DOCTYPE html>
<html><head><link rel="stylesheet" href="styles.css">
</head><body><p>这是一段文本。</p></body></html>

外链式的特点如下：

优点：

实现了 HTML 结构和 CSS 样式的分离，使代码更加清晰、易于维护。
可以在多个 HTML 文档中共享同一个 CSS 文件，提高了代码的可重用性，减少了代码冗余。
方便对整个网站的样式进行统一管理和修改，只需要修改一个 CSS 文件，所有引用该文件的页面都会相应地更新样式。

缺点：

需要额外的 CSS 文件，增加了文件管理的复杂性。
如果 CSS 文件加载失败，可能会导致页面显示异常。

2.9.3. 行内样式（Inline Styles）

直接在 HTML 元素的标签内使用 style 属性来定义样式。

例如：

<p style="color: red; font-size: 14px;">这是一段文本。</p>

优点：

可以非常精确地控制单个元素的样式，具有最高的优先级。
对于一些临时的、特定的样式调整很方便。

缺点：

导致 HTML 代码和样式混合在一起，使得代码难以维护。
如果多个元素需要相同的样式，会造成大量的重复代码。

2.9.4. 导入式（@import）

在 CSS 文件中使用 @import 规则来导入其他 CSS 文件。

例如：

@import url('otherStyles.css');body {background-color: gray;
}

优点：

可以将多个 CSS 文件整合到一个主 CSS 文件中，方便管理。

缺点：

加载页面时，浏览器会先加载包含 @import 的 CSS 文件，然后再去加载被导入的 CSS 文件，可能会导致页面加载速度变慢。
在一些老旧的浏览器中可能存在兼容性问题。

3. JavaScript

3.1. JavaScript 简介

JavaScript 是一种轻量级的编程语言，也是一种脚本语言。它可以插入 HTML 页面中，能够控制 HTML 页面的结构和样式。Javascript 原本叫 livescript，在发布前夕为搭上媒体热炒 java 的顺风车，临时改名为 javascript。实际上 js 与 java 没有关系，当时只是想借助 java 的名气。

3.2. 基本概念

定义：一种轻量级的编程语言，用于为网页添加交互性和动态效果。
作用：可以实现网页的动态更新、用户交互、表单验证等功能。

3.3. JavaScript 语法

变量和数据类型：包括数字、字符串、布尔值、数组、对象等。
运算符：如算术运算符、比较运算符、逻辑运算符等。
控制结构：如条件语句（if、else if、else）、循环语句（for、while）等。
函数：可以封装一段可重复使用的代码，提高代码的可维护性和可读性。

3.4. DOM（文档对象模型）操作

通过 JavaScript 可以访问和操作 HTML 文档的 DOM，实现动态更新网页内容、响应用户事件等功能。
常见操作：获取元素、修改元素属性、添加和删除元素等。

3.5. 事件处理

可以为 HTML 元素绑定事件，当特定事件发生时执行相应的 JavaScript 代码。
常见事件：点击事件（onclick）、鼠标移动事件（onmousemove）、键盘按键事件（onkeydown等）。

3.6. JavaScript 用法

JS 内嵌式：把 JS 脚本写在 HTML 文档中，且 JS 脚本必须位于<script>与</script>标签之间，可被放置在 HTML 页面的<body>和<head>部分中。
JS 外链式：脚本可放置在外部文件中，专门用来存储 JS 脚本的文件后缀名为.js。外部脚本很实用，相同的脚本可以被许多不同的网页引用。外部脚本需要在<script>标签的src属性中设置，如<script src="myScript.js"></script>。创建 JS 文件如myScript.js。
JS 行内式：把 JS 脚本写到 HTML 标签上，不推荐使用，因为不方便修改，也没有实现代码的分离。

3.7. 操作 HTML 元素

使用 JavaScript 获取某个 HTML 元素，可以使用document.getElementById(id)方法。使用innerHTML来获取或插入元素内容。

3.8. JS 变量

概念：变量是用于存储信息的 “容器”。与代数一样，JavaScript 变量可用于存放值（比如x = 5）和表达式（比如z = x + y）。
命名规范：变量名应该由字母、数字、下划线、$ 构成，不建议使用中文。变量名不能以数字开头，变量名称对大小写敏感（y 和 Y 是不同的变量）。
创建变量：在 JavaScript 中创建变量通常称为 “声明” 变量，使用var关键词来声明变量，如var username;。变量声明之后，该变量是空的（它没有值），为变量赋值需要使用等号，如username = "张三";。

3.9. JS 函数和事件

JS 函数：函数就是被调用时可重复使用的代码块。使用function关键字来定义，代码块放到大括号中，通过使用函数名 () 来调用函数，当函数被调用时，会执行函数内的代码。
JS 事件：HTML 事件是发生在 HTML 元素上的事情，可以是浏览器行为，也可以是用户行为。

- 常见的 HTML 事件：

- - onchange：HTML 元素改变。
  - onclick：用户点击 HTML 元素。
  - onmouseover：用户在一个 HTML 元素上移动鼠标。
  - onmouseout：用户从一个 HTML 元素上移开鼠标。
  - onkeydown：用户按下键盘按键。
  - onload：浏览器已完成页面的加载。

- 为元素绑定事件：

- - 通过元素属性绑定。
  - 通过 JS 脚本绑定，事件三要素：事件源.事件类型 = function () { 触发后执行的代码}。

3.10. 代码示例

3.10.1. 代码块

<!DOCTYPE html>
<html><head><!-- 定义文档的字符编码为UTF-8 --><meta charset="UTF-8"><!-- 设置网页标题 --><title>简单前端示例</title><style type="text/css">/* CSS样式部分 */body {/* “font-family” 是 CSS 属性，用于指定文本的字体族。“Arial” 是一种具体的字体名称。如果用户的系统上安装了 Arial 字体，那么文本将以 Arial 字体显示。Arial 字体是一种无衬线字体，具有简洁、清晰的外观。“sans-serif” 是一种通用字体族名称，表示无衬线字体。如果用户的系统上没有安装 Arial 字体，浏览器会尝试寻找其他无衬线字体来显示文本，以确保在不同的设备和系统上都能有相对一致的字体显示效果。 */font-family: Arial, sans-serif;}/* id选择器-选择id为text的元素并设置颜色为蓝色,文字大小为20像素 */#text {color: blue; font-size: 20px;}/* 标签选择器-选择所有h1标签并设置颜色为红色 */  h1 {color: red;}/* claas选择器-选择所有class为sub的元素并设置颜色为绿色*/.sub {color: green;}.size_{font-size: 30px;}/* 并列并集选择器-选择h1,h6标签并设置颜色为红色*/h1,h6 {color: red;}/* 后代选择器-选择div-hehe的后代元素并设置颜色为蓝色*/div  hehe {color: blue;}/* 子代选择器-选择div-span的子元素并设置颜色为绿色*/div > span >span {color: rgb(0, 255, 208);}</style>
</head><body><!-- HTML结构部分 --><p id="text">这是一段可以改变颜色的文字。</p><h1>这是P1标题</h1><h6>这是P6标题</h6><p>这是一个包含 <a href="https://baidu.com">百度网站超链接</a> 的段落，还有  <b>b加粗的文字效果</b> <strong>strong加粗强调的文字效果</strong> <i>i倾斜的文字效果</i> <em>em倾斜强调的文字效果</em> <s>s删除的效果</s> <del>del删除的效果</del>。</p><img src="/Users/bytedance/Desktop/教师端图片素材/图像.png" title="鼠标悬停到图片上方时的提示文字" alt="这是一张示例图片" width="300" height="200"><p>这里后面有一个空格&nbsp这里后面会换行<br/>换行后</p><button onclick="changeColor()">点击改变颜色</button><!-- JavaScript部分 -->s<script>function changeColor() {// 获取元素var textElement = document.getElementById('text');// 改变颜色为红色textElement.style.color ='red';}</script><div>我是div, 我会独占一行<hehe> <fi> 我是老大</fi><hehe> 我是老二</se></hehe> <haha>我老三</haha></div><div>我是div, 我会独占一行</div><div><span><th>我是老四</th><span>我是老五</span></span><span>我是老六</span></div><span>我是span, 我不会独占一行哈</span><span>我是span, 我不会独占一行</span><br/><audio controls src="/音频.mp3"></audio><br/><video controls src="/视频.mp4"></video><!-- 这是一个无序列表 --><ul><li>这是一个列表项</li><li>这是另一个列表项</li><li>这是第三个列表项</li></ul><!-- 这是一个有序列表 --><ol><li>这是一个列表项</li><li>这是另一个列表项</li><li>这是第三个列表项</li></ol><!-- action的内容是指把表单数据提交给哪一个后台程序去处理；method的内容是指提交表单数据的方式，常用的有get和post两种 --><form action="xxx.py" method="post"><!-- 文本输入框 --><label for="username">用户名：</label><input type="text" id="username" name="username" placeholder="请输入用户名" autofocus="autofocus"> <br><!-- 密码输入框 --><label for="password">密码：</label><input type="password" id="password" name="password" placeholder="请输入密码"><br><!-- 单选按钮 --><label>性别：</label><input type="radio" name="gender" value="male" checked="checked" id="nan"><label for="nan">男</label><input type="radio" name="gender" value="female" id="nv"><label for="nv">女</label><br><!-- 复选框 --><label>爱好：</label><input type="checkbox" name="hobbies" value="reading" checked="checked" id="read" class="hob"><label for="read">读书</label><input type="checkbox" name="hobbies" value="music" id="mus" class="hob"><label for="mus">音乐</label><input type="checkbox" name="hobbies" value="sports" id="spo" class="hob"><label for="spo">运动</label><br><!-- 下拉框 --><label>城市：</label><select name="city"><option value="beijing" selected="selected">北京</option><option value="shanghai">上海</option><option value="guangzhou">广州</option></select><br><!-- 文本域 --><label>简介：</label><textarea name="description">这是一段默认的文本</textarea><br><!-- 普通按钮 --><input type="button" value="普通按钮"><br><!-- 重置按钮 --><input type="reset" value="重置" id="chongzhi" ><br><!-- 提交按钮 --><input type="submit" value="提交" class="sub size_" ></form></body></html><script type="text/JavaScript">/*onclick 事件: 鼠标点击事件语法格式：事件源.事件类型=function(){事件发生的时候要执行的命令} 例: document 代表查找的范围在整个文档中;onclick 代表鼠标点击事件*/document.getElementById('chongzhi').onclick=function(){ alert("已重置");}document.getElementsByClassName('hob')[0].onclick=function(){ alert("已点击");}/*onmouseover 事件: 鼠标移入事件语法格式：事件源.事件类型=function(){事件发生的时候要执行的命令}例: document 代表查找的范围在整个文档中;onmouseover 代表鼠标移入事件*/document.getElementsByClassName('hob')[1].onmouseover=function(){ alert("鼠标移入");}/*onmouseout 事件: 鼠标移出事件语法格式：事件源.事件类型=function(){事件发生的时候要执行的命令}例: document 代表查找的范围在整个文档中;onmouseout 代表鼠标移出事件*/document.getElementsByClassName('hob')[2].onmouseout=function(){ alert("鼠标移出");}
</script>