WebUI自动化必备技能-HTML和css知识详解

Posted 2022-08-04 TEST_二 黑

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

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

• HTML：负责网页架构

• CSS：负责网页的样式，美化

• JS：负责网页行为

常见的HTML标签

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

案例：txt文本转html格式

HTML标签

HTML属性

1、HTML骨架

用来声明当前的文档类型是html

• html：是网页当中最大的标签，我们称之为根标签

• head：称之为网页的头部，它里面的内容主要用来定义网页标签及给浏览器查看的一些信息

• UTF-8：用来定义网页的编码标准 ，国际编码

• 图片title：称之为网页标题标签，它里的内容会显示在浏览器的标签页上

• 图片body：称之为网页主体标签，它里面的内容都会显示在浏览器的白色窗口区域

2、基本HTML标签

图片HTML标题、

HTML段落

图片HTML超链接

图片HTML图片

图片HTML空格和回车

3、HTML表单

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

文本输入框

密码输入框

单选按钮

复选框

下拉框

提交按钮

熟悉CSS常见选择器

CSS：指层叠样式表

作用：

• 用来定义如何显示HTML元素（定义HTML元素的样式），就像 HTML 中的字体标签和颜色属性所起的作用那样

• .css 文件中，我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观
  

• 选择器：是用来指定要改变样式的HTML元素，每条声明由一个属性和一个值组成

• 属性：代表要设置的样式属性，每个属性有一个值，属性和值被冒号分开

• CSS：声明总是以分号(;)结束，声明以大括号()括起来在HTML文档中，可以把样式定义在 标签中

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

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

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

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

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

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

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

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

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

CSS中标签选择器直接，比如： h 、 input