软件测试需要具备的基础知识【功能测试】---前端知识（二）

server/2024/10/19 19:30:21/

​在这里插## 标题入图片描述
​

您好，我是程序员小羊！

前言

为了更好的学习软件测试的相关技能，需要具备一定的基础知识。需要学习的基础知识包括：
1、计算机基础
2、前端知识
3、后端知识
4、软件测试理论
后期分四篇文章进行编写，这是第二篇

下面接着上面文章继续分享：

上面那篇文章讲了HTML的一些基础知识，下面继续分享前端三件套的CSS和JS

进入正题：

CSS基础

1. CSS简介

CSS：(Cascading Style Sheets)指层叠样式表
作用：用来定义如何显示HTML元素（定义HTML元素的样式），就像HTML 中的字体标签和颜色属性所起的作用那样
样式通常保存在外部的 .css 文件中，我们只需要编辑一个简单的 CSS文档就可以改变所有页面的布局和外观

2. CSS语法

在这里插入图片描述

选择器：是用来指定要改变样式的HTML元素 每条声明由一个属性和一个值组成 属性代表要设置的样式属性，每个属性有一个值，属性和值被冒号分开
CSS声明总是以分号(;)结束，声明总以大括号({})括起来 在HTML文档中，可以把样式定义在 <style></style> 标签中

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

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

示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS</title><style>/*这是个注释*/p {color: red;text-align: center;}</style></head><body><p>Hello World!</p></body>
</html>

2.1 CSS注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它 CSS注释以 /* 开始, 以 */ 结束
为了界面简洁，观察上面代码

应用场景：

1、内嵌式应用在电商网站首页，因为对网页的打开速度有严格的要求，一次性把html和css都加载进来；
2、外链式应用在除了电商网站首页，实现代码的分离，方便后期修改
3、了解行内式：css代码写在标签的身上，强烈不推荐使用！修改不方便、重复代码太多，导致页面加载速度变慢！
例：以下写法就是反面教材！！！<p style="color: red;">小羊</p>

CSS选择器

1. CSS选择器介绍

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

1、class选择器
2、标签选择器
3、属性选择器
4、后代选择器
5、子元素选择器

2. id选择器

id选择器是通过元素的id属性来选择元素
使用id选择器时，要求元素必须有id属性
CSS中id选择器以 “#” 来定义，比如： #test01

```bash
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS</title><style>#test01 {color: red;text-align: center;}</style></head><body><p id="test01">Hello World!</p></body>
</html>```

2.1 id属性的命名规则和唯一性

命名规则：

  1. 不要以数字开头
  2. 不能使用中划线和下划线之外的符号
  3. 不推荐使用中文
  4. 尽量做到见名知意：见到名字知道意思
    唯一性：
    注意：class类选择器可以重复命名； 每个标签可以有多个class类名，中间使用空格分割即可
    在整个HTML文档中id属性必须是唯一的
    注意：HTML文档不会严格校验id属性是否唯一，在不规范的HTML文档中会出现id重复的情况！！！

3. class选择器

class选择器是通过元素的class属性来选择元素，又称类选择器
使用class选择器时，要求元素必须有class属性
class选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用
CSS中class选择器以 “.” 来定义，比如： .center

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS</title><style>.center {text-align: center;}</style></head><body><h1 class="center">标题居中</h1><p class="center">第一段文字</p><p class="center">第二段文字</p></body>
</html>

提示：class属性的第一个字符不能使用数字

4.标签选择器

标签选择器是通过元素的标签名称来选择元素，又称元素选择器
CSS中标签选择器直接使用标签名称来定义，比如： p 、 input

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS</title><style>h1 {text-align: center;}p {color: red;}</style></head><body><h1>标题居中</h1><p>第一段文字</p><p>第二段文字</p></body>
</html>

5. 属性选择器

属性选择器可以根据元素的属性及属性值来选择元素
属性选择器可以使用HTML元素的任意属性，而不仅限于id和class属性
简单属性选择：
如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器；
格式： [属性名]
根据具体属性值选择：
除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素；
格式： [属性名=“属性值”]

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS</title><style>[href] {color: red;}[title="古诗标题"] {color: blue;}[id="first"] {color: green;}[class="second"] {color: yellow;}</style></head><body><a href="https://www.itheima.com">黑马程序员</a><h1 title="古诗标题">静夜思</h1><p id="first">床前明月光，疑似地上霜。</p><p class="second">举头望明月，低头思故乡。</p></body>
</html>

6. 后代选择器

后代选择器可以选择作为某元素后代的元素，后代元素包括（儿子、孙子、重孙子…） 语法规则：多个选择器用空格分隔，例如 p
span{color: red;}

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>CSS</title><style>/*p span{color: red;}*/div span {color: red;}</style></head><body><div><span>我是span</span><p><span>我也是span</span><br /><span>我也是span</span></p></div></body>
</html>

7. 子元素选择器

与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素
不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素
语法规则：多个选择器用大于号 > 分隔，例如 div>span{color: red;}

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>CSS</title><style>div>span {color: red;}</style></head><body><div><span>我是span</span><p><span>我也是span</span><br /><span>我也是span</span></p></div></body>
</html>

结束语：

今天这篇文章就到这里了，文底会有一些作业大家可以抽空做下，在下篇文章的时候会把答案放在最后，大厦之成，非一木之材也；大海之阔，非一流之归也，希望大家能持续关注下，文章从浅入深，也欢迎大佬们的随时指导！！！
在这里插入图片描述

扩展知识：

一、开发人员调试工具

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

在这里插入图片描述

二、扩展知识：

1、:hover 伪类：鼠标移入动作执行后的css代码 例： p:hover{color: blue;}
注意：鼠标移入和鼠标悬停不是一个动作！ 2、并列、并集选择器：需要一句话选择多个元素的时候，可以使用逗号进行连接 语法：
h1,div,span,p{} 3、后代选择器：后代选择器：使用空格来进行选取后代元素的方式 语法： div span{ }
找div的后代span（儿子、孙子、重孙子。。。都算后代） 代码从左向右执行，我们就从左向右读代码

作业：

在这里插入图片描述


http://www.ppmy.cn/server/95850.html

相关文章

flex的css总结，

flex的css总结，

1、App.vue的<style>中全局阴影 <style> /* 引入flex布局样式 */ import "./styles/flex.css"; </style> 2、编写flex.css文件 charset "UTF-8";.flex {display: -webkit-flex;display: flex; }/*即项目的排列方向*/ .flex-direction…
阅读更多...
Vcpkg安装指定版本包或自定义安装包

Vcpkg安装指定版本包或自定义安装包

在使用 vcpkg 安装特定版本的包或自定义包时&#xff0c;你可以按照以下步骤进行操作&#xff1a; 安装特定版本的包 列出可用的版本&#xff1a; 使用以下命令列出特定包的所有可用版本&#xff1a; vcpkg search <package-name>安装特定版本&#xff1a; 使用 vcpkg …
阅读更多...
谷粒商城实战笔记-125-全文检索-ElasticSearch-整合-SpringBoot整合high-level-client

谷粒商城实战笔记-125-全文检索-ElasticSearch-整合-SpringBoot整合high-level-client

文章目录 一&#xff0c;技术选型1. 通过 TCP 连接&#xff08;9300 端口&#xff09;2. 通过 HTTP 连接&#xff08;9200 端口&#xff09;3.最终选择 二&#xff0c;SpringBoot整合Elasticsearch-Rest-High-Level-Client1&#xff0c;新增模块gulimall-search1&#xff0c;添…
阅读更多...
Studying-代码随想录训练营day57| prim算法精讲、kruskal算法精讲

Studying-代码随想录训练营day57| prim算法精讲、kruskal算法精讲

第57天&#xff0c;图论07&#xff0c;两个最小生成树算法的讲解&#x1f4aa;(ง •_•)ง&#x1f4aa;&#xff0c;编程语言&#xff1a;C 目录 题目&#xff1a;53. 寻宝&#xff08;第七期模拟笔试&#xff09; (kamacoder.com) prim算法精讲 拓展 总结&#xff1a; …
阅读更多...
贝叶斯学习方法：几种方法介绍

贝叶斯学习方法：几种方法介绍

目录 1 拉普拉斯还原-轻松贝叶斯深度学习2 具有归一化流的变分推理3 基于条件归一化流的多元概率时间序列预测 1 拉普拉斯还原-轻松贝叶斯深度学习 深度学习的贝叶斯公式已被证明具有令人信服的理论性质&#xff0c;并提供实用的功能优势&#xff0c;例如改进预测不确定性量化…
阅读更多...
搜索引擎设计：如何避免大海捞针般的信息搜索

搜索引擎设计：如何避免大海捞针般的信息搜索

搜索引擎设计&#xff1a;如何避免大海捞针般的信息搜索 随着互联网的发展&#xff0c;信息的数量呈爆炸式增长。如何在海量信息中快速、准确地找到所需信息&#xff0c;成为了搜索引擎设计中的核心问题。本文将详细探讨搜索引擎的设计原理和技术&#xff0c;从信息获取、索引…
阅读更多...
机器学习第五十周周报 CGNN

机器学习第五十周周报 CGNN

文章目录 week50 CGNN摘要Abstract0. 概述1. 题目2. Abstract3. 网络结构3.1 状态更新网络3.2 method 4. 文献解读4.1 Introduction4.2 创新点4.3 实验过程 5. 结论6.相关代码CompositeLGNNCompositeGNNcomposite-graph-class小结参考文献 week50 CGNN 摘要 本周阅读了题为Co…
阅读更多...
MYSQL数据管理 - 增删改语句

MYSQL数据管理 - 增删改语句

文章目录 数据管理&#xff08;CRUD&#xff09;1 插入数据 INSERT2 删除数据 DELETEQ- drop、delete 与 truncate 区别&#xff1f; 3 修改数据 UPDATE参考 数据管理&#xff08;CRUD&#xff09; CRUD: CREATE READ UPDATE DELETE 对于增加数据、删除和修改数据&#xff0c…
阅读更多...
最新文章

Copyright @ 2022~2023