做Web自动化前，你必须掌握的几个技能

最新推荐文章于 2024-06-22 18:52:02 发布

程序员二黑④

最新推荐文章于 2024-06-22 18:52:02 发布

阅读量84

点赞数

文章标签：自动化 python 数据库

本文链接：https://blog.csdn.net/apex_eixl/article/details/129406138

版权

每天进步一点点，关注我哦，每天分享测试技术文章

学习web自动化的前提条件：手工测试（了解各种测试的知识）、学习编程语言、学习Web基础、学习自动化测试工具、学习自动化测试框架、需要掌握前端的一些知识，无论学习语言还是前端知识，都是为了接下来的脚本和框架做铺垫，本篇文章介绍下前端基础知识

网页基础（HTML、CSS），web前端三大核心技术

HTML：负责网页架构
CSS：负责网页的样式，美化
JS：负责网页行为

01常见的HTML标签

HTML是描述网页的一种语言
HTML指的是超文本语言，不是编程语言，是一种标记语言
HTM使用标签来描述网页

案例：txt文本转html格式

<h1>这是第一个段落文件</h1>

<h2>这是第二个段落文件</h2>

HTML标签

标签是有尖角号包裹的关键词，通常成对出现

第一个标签开始标签，最后一个标签结束标签例:<p> </p>

HTML单标签和双标签

单标签书写：<br/>

双标签书写：<html></html>

HTML属性

HTML属性指的是标签属性

HTML的标签可以拥有多个属性

属性是以属性名称=属性值的格式出现

1、HTML骨架

<!DOCTYPE html>

<html>

<head>

<title>码同学教育</title>

</head>

<body>

码同学教育

</body>

</html>

<!DOCTYPE html>用来声明当前的文档类型是html
html：是网页当中最大的标签，我们称之为根标签
head：称之为网页的头部，它里面的内容主要用来定义网页标签及给浏览器查看的一些信息
UTF-8：用来定义网页的编码标准，国际编码
title：称之为网页标题标签，它里的内容会显示在浏览器的标签页上
body：称之为网页主体标签，它里面的内容都会显示在浏览器的白色窗口区域

2、基本HTML标签

HTML标题

HTML段落

<p>这是一个段落 </p>

<p>这是另一个段落</p>

HTML超链接

HTML图片

HTML空格和回车

<div> 我是一个块元素 </div>

<br />

<span>我是一个内联元素,存放文本容器</span>

3、HTML表单

web网页手机用户输入数据，包含不同类型：文本输入框、单选框、复选框、下拉框、提交按钮

免费领取码同学软件测试课程笔记+超多学习资料+完整视频+面试题，可加微信：magetest

文本输入框

<body>

<form>

firstname: <input type="text" name="fristname">

<br>

lastname: <input type="text" name="lastname">

</form>

密码输入框

<form>

Password: <input type="password" name="pwd">

</form>

单选按钮

<form>

<input type='radio' name="sex" value="male" "/>男

<input type="radio" name='sex' value='female' />女

</form>

复选框

<form>

<input type="checkbox" name="hobby">读书

<input type="checkbox" name="hobby">听音乐

<input type="checkbox" name="hobby">看电影

</form>

下拉框

</select>

提交按钮

提交按钮：<input type="submit" value="提交按钮" />

02熟悉CSS常见选择器

CSS：指层叠样式表

作用：

用来定义如何显示HTML元素（定义HTML元素的样式），就像 HTML 中的字体标签和颜色属性所起的作用那样
.css 文件中，我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观

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

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

常用的CSS选择器有：id选择器、class选择器标签选择器、属性选择器、后代选择器、元素选择器

1、ID选择器

id选择器是通过元素的id属性来选择元素

CSS中id选择器以 "#" 来定义，比如： #test

<!DOCTYPE html>

<html>

<head>

<style>

/*这是一个关于样式注释*/

#test {color:blueviolet; text-align:center;}

</style>

</head>

<body>

<p id = 'test'>Hello World!</p>

</body>

</html>

在整个HTML文档中id属性必须是唯一的

注意：HTML文档不会严格校验id属性是否唯一，在不规范的HTML文档中会出现id重复的情况！

2、Class选择器

class选择器是通过元素的class属性来选择元素，又称类选择器，使用class选择器时，要求元素必须有class属性

class选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用CSS中class选择器以 "." 来定义，比如： .center

<!DOCTYPE html>

<html>

<head>

<style>

.center {text-align: center;}

.center {color: #8A2BE2;}

</style>

</head>

<body>

</body>

</html>

3、标签选择器

标签选择器是通过元素的标签名称来选择元素，又称元素选择器

CSS中标签选择器直接使用标签名称来定义，比如： h 、 input

<!DOCTYPE html>

<html>

<head>

<style>

h3 {text-align: center;} p {color:#8A2BE2

</style>

</head>

<body>

<p>第二个段落</p>

</body>

</html>

最后感谢每一个认真阅读我文章的人，下面这个网盘链接也是我费了几天时间整理的非常全面的，希望也能帮助到有需要的你！

在这里插入图片描述

这些资料，对于想转行做【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴我走过了最艰难的路程，希望也能帮助到你！凡事要趁早，特别是技术行业，一定要提升技术功底。希望对大家有所帮助……

如果你不想一个人野蛮生长，找不到系统的资料，问题得不到帮助，坚持几天便放弃的感受的话，可以点击下方小卡片加入我们群，大家可以一起讨论交流，里面会有各种软件测试资料和技术交流。
敲字不易，如果此文章对你有帮助的话，点个赞收个藏来个关注，给作者一个鼓励。也方便你下次能够快速查找。

程序员二黑④

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
做Web自动化前，你必须掌握的几个技能

学习web自动化的前提条件：手工测试（了解各种测试的知识）、学习编程语言、学习Web基础、学习自动化测试工具、学习自动化测试框架、需要掌握前端的一些知识，无论学习语言还是前端知识，都是为了接下来的脚本和框架做铺垫，本篇文章介绍下前端基础知识
复制链接

扫一扫