HTML基础教程：颜色知多少

色由红色、绿色、蓝色混合而成。

颜色值

颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。

每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。

这个表格给出了由三种颜色混合而成的具体效果：

HTML基础教程：颜色知多少

TML（HyperText Markup Language）是一种用于创建网页的标记语言。它由一系列的标签组成，这些标签用于描述网页的结构和内容。HTML标签通常由尖括号包围，例如<tag>。

HTML标签可以分为两类：块级元素和内联元素。块级元素用于组织网页的结构，例如段落、标题、列表等。内联元素用于标记文本中的特定部分，例如链接、强调文本等。

HTML标签可以包含属性，属性提供了有关标签的额外信息。例如，<a>标签用于创建链接，可以使用href属性指定链接的目标URL。

除了标签和属性，HTML还支持一些特殊字符实体，用于表示特殊字符，例如小于号（<）、大于号（>）等。

HTML可以与CSS（层叠样式表）和JavaScript一起使用，以增强网页的外观和功能。CSS用于控制网页的样式，例如颜色、字体、布局等。JavaScript用于实现交互性和动态效果，例如表单验证、动画等。

通过使用HTML，开发人员可以创建具有结构良好、易于理解和导航的网页。它是构建互联网的基础之一，被广泛应用于网站开发和内容管理系统。

HTML的语法由标签、属性和内容组成。下面是HTML的基本语法规则：

标签：HTML标签用于定义网页的结构和内容。标签通常由尖括号包围，例如<tag>。标签可以是成对出现的，其中包含一个开标签和一个闭标签，例如<tag>content</tag>。也可以是自闭合标签，即只有一个标签，没有内容，例如<tag />。
属性：HTML标签可以包含属性，属性提供了有关标签的额外信息。属性通常以键值对的形式出现，例如<tag attribute="value">。属性的值可以是字符串或布尔值。常见的属性包括class、id、src、href等。
内容：HTML标签可以包含文本内容或其他标签。文本内容直接放置在标签的开闭标签之间，例如<p>这是一个段落。</p>。标签可以嵌套在其他标签中，形成标签的层次结构。
注释：HTML注释用于在代码中添加注释，不会在网页中显示。注释以结尾，例如。

下面是一个简单的HTML示例：

<!DOCTYPE html>
<html>
<head>
  <title>我的网页</title>
</head>
<body>
  <h1>欢迎来到我的网页</h1>
  <p>这是一个段落。</p>
  <a href="https://www.example.com">点击这里</a>访问示例网站。
</body>
</html>

在这个示例中，<!DOCTYPE html>声明了文档类型为HTML5。<html>标签是HTML文档的根元素。<head>标签用于定义文档的头部信息，例如标题和样式表。<title>标签定义了网页的标题，将显示在浏览器的标题栏中。<body>标签用于定义文档的主体内容。<h1>标签定义了一个一级标题，<p>标签定义了一个段落，<a>标签定义了一个链接。

言

在做web自动化的时候，对于一些弹出的提示信息的字体颜色，当然一般都是红色的。那么当我们跑自动化时候，如何判断提示新的字体颜色是否我们预期的结果呢？

个人思路

安静这里先介绍下自己的思路：

·先获取到提示信息的元素坐标点；

·想办法获取到前端中该元素的颜色属性值；

·最后通过获取的属性值与我们的预期值进行比较。

猛然一看该思路，啥用没有。但是我们可以先翻阅selenium中的官方文档，看看官方文档中有没有一些帮助内容。

安静从官方文档中找到了：

def value_of_css_property(self, property_name):

"""The value of a CSS property."""

return self._execute(Command.GET_ELEMENT_VALUE_OF_CSS_PROPERTY, {

'propertyName': property_name})['value']

该方法意思就是可以获取到元素的CSS的属性值。这不就解决了获取元素的颜色属性值了吗？

实战演示

安静这里随便找个网站先查看下错误提示信息的元素坐标，以及错误提示信息的字体颜色内容。

通过代码的形式查看下CSS的属性值是否和我们的预期一样。

from selenium import webdriver

import time

driver = webdriver.Chrome()

# 随便找了个经常逛的网站。

driver.get('https://passport.juhe.cn/cas/login')

# 输入账号名

driver.find_element_by_name('username').send_keys('12345')

# 输入密码

driver.find_element_by_id('password-o').send_keys('1111111')

# 点击登录

driver.find_element_by_id('loginBtn').click()

time.sleep(1)

# 获取提示字体信息

xx = driver.find_element_by_xpath('//*[@class="sysError"]').text

print(xx)

aa = driver.find_element_by_xpath('//*[@class="sysError"]')

# 获取该元素的CSS属性值

print(aa.value_of_css_property('color'))

通过执行后发现获取的CSS属性值基本上和我们在web页面上的一样，为啥说基本上呢，因为这web页面CSS区域显示的是rgba(254 ,81 , 74)，没有1。

安静也不确定对不对，于是再次查看selenium中的官方文档，发现了selenium中有对字体颜色的标识内容。

从文档中可以看出来，可以对其颜色的格式内容进行转换，这样我们就可以来判断是否字体颜色是否正确。

from selenium import webdriver

import time

from selenium.webdriver.support.color import Color

driver = webdriver.Chrome()

# 随便找了个经常逛的网站。

driver.get('https://passport.juhe.cn/cas/login')

# 输入账号名

driver.find_element_by_name('username').send_keys('12345')

# 输入密码

driver.find_element_by_id('password-o').send_keys('1111111')

# 点击登录

driver.find_element_by_id('loginBtn').click()

time.sleep(1)

# 获取提示字体信息

xx = driver.find_element_by_xpath('//*[@class="sysError"]').text

print(xx)

aa = driver.find_element_by_xpath('//*[@class="sysError"]')

# 获取该元素的CSS属性值

print(aa.value_of_css_property('color'))

# 查看#fe514a格式的rgb格式

print(Color.from_string('#fe514a').rgba)

# 查看颜色的hex格式。

print(Color.from_string('rgba(254, 81, 74, 1)').hex)

通过执行后发现，颜色内容是一致的。

PS：这里的rgba和hex表示颜色的标识，其实hex是十六进制。

总结

安静简单地通过一个案例，演示了如何进行判断页面中的字体颜色。

在实践中也遇到了一些困难，通过查阅官方文档进行解决了，也学习了两个方法，一个是获取CSS属性，以及颜色的转换支持。所以说遇到问题不要着急，看看官方文档，说不定就有意外的收获。

好了，我是安静，感谢您的阅读。

**推荐一个「Python自动化测试学习交流群」给大家：
请关注+私信回复："测试" 就可以免费拿到软件测试学习资料，同时进入群学习交流~~

在线咨询

上一篇：前端入门-html 表单
下一篇：PDF转HTML格式如何转？看完这篇你就会了

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML基础教程：颜色知多少

颜色值

您的项目需求