html颜色代码对照表—html颜色rgba代码 收藏 0

前端入门——css颜色和背景

如果网页只有一种颜色，那是非常可怕的，颜色的设置丰富了网页，就如同多彩缤纷的世界。

在了解css颜前，我们回顾下？计算机根据色光三原色的原理通过各种算法来显示颜色。

网页中使用颜色关键字、16进制字符、rgb、rgba等表示红，绿，蓝三种颜色混合色，如下示例,几种写法都是指同一个颜色（红色）：

对于16进制形式，每2位表示一个颜色，从左到右分别是红、绿、蓝，每种颜色取值从00 到 FF。

如下示例：

对于rgb的表示法，由三个参数组成，分别是红、绿、蓝，每种颜色取值从0 到 255。

如下示例：

红，绿，蓝值从0到255的结合，给出了总额超过1600多万不同的颜色（256 × 256 ×256）。

但是现代大多数显示器能够显示至少16384种颜色。所以在使用颜色时要格外注意，避免设置不能够显示的颜色，可以参考网页安全色：https://www.w3school.com.cn/cssref/css_colors.asp。

颜色除了有三原色红绿蓝组成，还有亮度层级，如下图：

rgba 中的a是指透明度，这个是css3新增加的属性，通过rgba可以设置更加漂亮的颜色。

通过background属性可以设置元素的背景色、背景图片，语法如下：

background 在一个声明中设置所有的背景属性，可以在这里设置如下属性：

• background-color —— 背景颜色。
• background-image —— 使用的背景图像
• background-position —— 背景图像的位置
• background-size —— 背景图片的大小
• background-repeat —— 如何重复背景图像
• background-origin —— 背景图片的定位区域
• background-clip —— 背景的绘制区域
• background-attachment —— 背景图像是否固定或者随着页面的其余部分滚动。

各值之间用空格分隔，不分先后顺序。可以只有其中的某些值，例如 background：＃FF0000 url(img.png)是允许的，但至少有一个值。

建议使用background 简写属性，这样可以更好地兼容较老的浏览器，少写很多代码，当然你也可以分开使用，比如：

1、背景颜色 —— background-color

background-color 和之前讲的的color 一样，可以使用16进制、rgb、rgba等设置颜色。如下实例：

如下图显示：

注意：background-color: transparent; 指透明色，不显示任何颜色。

2、背景图片的使用——background-image

给html元素添加背景图片，在早期网页制作中被广泛应用，如今已不建议大量使用。如下实例：

这里使用了一个125*125大小的图片，如下：

但是你会发现，整个网页铺满了图片，上面的代码默认会铺满整个页面从左到右，从上到下 。如果不想被平铺，可以使用background-repeat 设置。

背景图片同时可以设置多个背景图片，如下：

多个图像以逗号隔开，在页面中多个图片会叠加显示，第一张图片显示在最顶端。

如下效果：

3、背景重复方式 —— background-repeat

它有如下几个属性：

实例如下：

4、背景图的位置 —— background-position

背景图片默认显示在左上角，语法如下：

如果要改变它的位置，可以使用关键字：top、bottom、left、right 和 center；或者使用长度值，如 100px 或 5cm；也可以使用百分数值。

x 可以取值 百分比| 数值| left | center | right。

y 可以取值 百分比| 数值| top| center | bottom。

当只设置一个值的时候，另一个会缺省为 center。

使用关键字，将背景图片水平居中，垂直居中：

使用百分比%：

50% 50% 等同于 center center，显示效果和上图一样。

还可以使用具体数值，比如 px、em、cm等。

显示效果如下：

5、背景图相对于容器的基准点 —— background-origin

就是设置背景图片相对于html元素什么位置作为初始坐标点，语法：

几种值得含义：

如下实例：

6、背景图片大小 —— background-size

默认会显示背景图原始尺寸，可以通过此属性设置背景图片在元素上的大小，语法：

宽度和高度可以使用 数值、百分比%、cover 及 contain ;

数值：可以使用任何单位的数字，比如 px、em、cm等。如果设置一个值，第二个为\”auto(自动)\”。

百分比%：相对于其所在html原始宽度和高度，如果设置一个值，第二个为\”auto(自动)\”。

cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

contain：把背景图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

如下示例：

7、背景图像是否固定或者随着页面的其余部分滚动

background-attachment 属性有以下几个值：

如设置一个固定的背景图片，不跟随页面滚动：

滚动滚动条，会发下背景图片始终固定在屏幕那个位置。

8、背景绘制区域 —— background-clip

语法如下：

这个属性类似于 background-origin ，只不过它会裁剪背景图片，如下示例：

9、背景层的混合模式 —— background-blend-mode

所谓混合模式就是将图片与颜色或图片与图片进行混合，语法：

属性值：

示例如下：

正常模式

luminosity 亮度模式

color 颜色模式

其它模式可以自己试试，看下有什么区别。

到此，我们了解了颜色和背景的使用方法，尤其是背景的使用，由于它的属性很多，可以简写也可以分开写，要想完全掌握，还得多练习，每种属性进行组合使用看看其效果。

一般建议使用 background 简写方式，主要是可以少写很多代码。以上介绍难免有误，或不齐全，欢迎指出错误，并补充。

上篇：

不同语言，不同场景，透明颜色表示方法知多少

在程序开发的过程中，无论是使用Swift进行iOS/macOS应用开发，还是使用javascript、CSS进行网页设计，亦或使用java开发Android的APP应用或其他应用，C#开发桌面程序，颜色的透明度都是一个非常重要的设计元素。它能帮助我们创造出更加丰富、层次分明的用户界面。本文将分别介绍在Android、java、javascript、css、c#、Swift如何设置颜色的透明度，并探讨他们之间的异同。注意使用不同的编程语言，其透明颜色的表达的方式是一样，请注意它们表达的细节。下面我整理一些常见的表达方式，方便粉丝们查询学习。在开发过程中，

在Android的APP开发中，我们一般使用Java开发，使用16进制的透明颜色值来设置透明颜色。透明度的范围从00（完全透明）到FF（完全不透明）。格式为#AARRGGbb（没办法和谐一下），其中bb是透明度值，记住透明度表示在十六进制数据的开始。如果您想设置50%的透明度红色，可以使用#80FF0000。

在代码中设置透明颜色，您可以使用Color.parseColor方法解析颜色字符串，然后将其应用到视图的背景或文本颜色等。

如果您需要编程方式设置透明度，可以使用Color类的argb方法：

在XML中设置透明颜色：

我们在网页开发中，一定会使用到JavaScript语言，如果你想设置一个透明颜色，你可以使用RGBA颜色格式，其中A代表Alpha通道，即透明度。透明度的范围从0.0（完全透明）到1.0（完全不透明）。记住，这个的顺序正好和Android的表达正好相反，透明色在最后，而且范围是0-1。

例如，创建一个半透明的颜色：

在这个例子中，红色的RGB值是255, 0, 0，透明度是0.5，意味着颜色是50%透明的。

如果使用Canvas API进行绘图，设置背景为透明，可以使用clearRect方法：

这样，将清除画布上指定区域的像素，使其透明。如果设置整个画布的背景透明，可以直接设置canvas元素的style.background属性：

这样设置后，画布将不会有任何背景色，默认是透明的。

我们在网页开发中，我一定离不开样式的表达。CSS中实现透明颜色可以使用rgba()或hsla()函数，其中a代表透明度（alpha），取值范围从0（完全透明）到1（完全不透明），这个和javascript的表达方式一致。另外，CSS3中还引入了opacity属性，它会影响一个元素及其所有子元素的透明度。

以下是使用rgba()和hsla()的例子：

使用opacity属性的例子：

选择使用rgba()还是hsla()，这个取决于你的爱好，使用基于红绿蓝（RGB）色彩模型还是基于色相（Hue）、饱和度（Saturation）、亮度（Lightness）的颜色模型。一般情况，rgba()更常用，因为它更直观。

在Java中，\”透明色\”通常指的是一种具有透明效果的颜色。在图形用户界面(GUI)中，你可能会使用这种颜色来创建带有透明背景的组件或图片。

在Java中，你可以使用Color类来表示透明色，但是需要注意的是，Color类本身不支持完全的透明度。要表示透明色，你需要使用Graphics2D类，它提供了对透明度编辑的支持。

以下是一个示例代码，展示如何在Java中设置一个透明颜色：

在这个例子中，TransparentExample类继承自JPanel，并覆盖了paintComponent方法。在paintComponent方法中，创建了一个具有120个透明度的红色，并使用Graphics2D对象绘制了一个半透明的红色矩形。这里面表达方式又有所不同，请注意细节，范围都是0-255，透明度的值最后。

在C#中，如果你想要设置一个颜色为透明，你可以使用Color结构体，并使用它的构造函数来指定透明度（Alpha值）。Color结构体中的每个分量（红色、绿色、蓝色和透明度）都是一个8位的整数，范围从0到255。透明颜色的Alpha值通常是0（完全透明）到255（完全不透明）。这个和Android的表示方式是一致的。

下面是一个创建具有特定透明度的透明颜色的示例代码：

在这个例子中，FromArgb 方法的第一个参数是Alpha值，后面跟着的三个参数分别是红色、绿色、蓝色分量的强度。

在Swift中，设置颜色的透明度主要通过UIColor（在UIKit中）或Color（在SwiftUI中）的withAlphaComponent方法来实现。这个方法允许你为颜色添加一个alpha值（即透明度），其取值范围是0.0（完全透明）到1.0（完全不透明）。这是和上面都不一样的地方，四个变量取值范围都是0-1。

在SwiftUI中，Color的初始化器直接接受一个opacity参数来设置透明度，这使得在SwiftUI中设置颜色透明度变得非常直观。

在UIKit中，你需要先创建一个颜色，然后使用withAlphaComponent方法来修改其透明度。

设置颜色的透明度都是一个简单而强大的设计工具。通过合理地使用透明度，我们可以创造出更加吸引人、层次分明的用户界面，以及友好人机交互体验。希望本文能帮助你更好地理解他们在透明度设置上的异同，并在实际项目中灵活运用。

同时建议，只有通过不断实践和探索，你将能够更加熟练地掌握这些技术，为用户创造出更加优秀的界面体验。

HTML 标签和属性值的基本格式

HTML: HyperText Markup Language 超文本标记语言

HTML代码不区分大小写, 包括HTML标记、属性、属性值都不区分大小写;

任何空格或回车键在代码中都无效，插入空格或回车有专用的标记，分别是 、<br>

HTML标记中不要有空格，否则浏览器可能无法识别。

如何添加注释(comment:评论;注释)

字符集

可以将a链接的默认属性设置为_blank属性

单个标签要有最好有结束符(可以没有结束符)

便于兼容XHTML(XHTML必须要有结束符)

HTML标签的属性值可以有引号,可以没有引号,为了提高代码的可读性,推荐使用引号(单引号和双引号)，尽管属性值是整数，也推荐加上引号。

便于兼容XHTML(XHTML必须要有引号)

经过测试,以上程序都可以正确运行

HTML标签涉及到的颜色值格式:

color_name 规定颜色值为颜色名称的文本颜色(比如 \”red\”)。

hex_number 规定颜色值为十六进制值的文本颜色(比如 \”#ff0000\”)。

rgb_number 规定颜色值为 rgb 代码的文本颜色(比如 \”rgb(255,0,0)\”)。

transparent 透明色 color:transparent

rgba(红0-255,绿0-255,蓝0-255,透明度0-1)

opacity属性: 就是葫芦娃兄弟老六(技能包隐身)

css:

英文(颜色值)不区分大小写

HTML中颜色值：采用十六进制兼容性最好(十六进制显示颜色效果最佳)

CSS中颜色值：不存在兼容性

红色 #FF0000

绿色 #00FF00

蓝色 #0000FF

黑色： #000000

灰色 #CCCCCC

白色 #FFFFFF

青色 #00FFFF

洋红 #FF00FF

黄色 #FFFF00

请问后缀 html 和 htm 有什么区别?

答: 1. 如果一个网站有 index.html和index.htm，默认情况下，优先访问.html

2. htm后缀是为了兼容以前的DOS系统8.3的命名规范

XHTML与HTML之间的关系?

XHTML是EXtensible HyperText Markup Language的英文缩写,即可扩展的超文本标记语言.

XHTML语言是一种标记语言,它不需要编译,可以直接由浏览器执行.

XHTML是用来代替HTML的, 是2000年w3c公布发行的.

XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求.

XHTML是基于XML的应用.

XHTML更简洁更严谨.

XHTML也可以说就是HTML一个升级版本.(w3c描述它为\’HTML 4.01\’)

XHTML是大小写敏感的,XHTML与HTML是不一样的;HTML不区分大小写,标准的XHTML标签应该使用小写.

XHTML属性值必须使用引号,而HTML属性值可用引号,可不要引号

XHTML属性不能简写：如checked必须写成checked=\”checked\”

单标记<br>, XHTML必须有结束符<br/>,而HTML可以使用<br>,也可以使用<br/>

除此之外XHTML和HTML基本相同.

网页宽度设置多少为最佳?

960px

target属性值理解

_self 在当前窗口中打开链接文件,是默认值

_blank 开启一个新的窗口打开链接文件

_parent 在父级窗口中打开文件,常用于框架页面

_top 在顶层窗口中打开文件,常用语框架页面

字符集：

charset=utf-8

Gb2312 简单中文字符集, 最常用的中文字符

Gbk 简繁体字符集, 中文字符集

Big5 繁体字符集, 台湾等等

Utf-8 世界性语言的字符集

ANSI编码格式编码格式的扩展字符集有gb2312和gbk

单位问题：

HTML属性值数值型的一般不带单位, CSS必须带单位;

强制刷新

ctrl+F5

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com