HTML如何设置背景颜色？bgcolor属性的作用是什么？
在HTML页面开发中，背景颜色是调整页面视觉效果的基础操作之一。早期HTML版本提供了专门的属性来设置背景颜色，随着标准迭代，也出现了更符合结构与样式分离原则的CSS设置方式。本文将详细介绍HTML中设置背景颜色的方法，以及bgcolor属性的具体作用。
一、bgcolor属性的作用与用法
bgcolor是HTML早期版本中用于设置元素背景颜色的内联属性，其名称是background color的缩写。该属性可以直接添加到支持的HTML标签中，为对应元素设置纯色背景。
需要注意的是，bgcolor属性属于表现性属性，在HTML4.01版本中已被列为不推荐使用的属性，HTML5规范中更是直接移除了该属性的标准支持，现代浏览器虽然仍对部分标签的bgcolor属性做兼容处理，但不建议在新项目中使用。
1.1 支持bgcolor属性的常见标签
bgcolor属性最初主要用于以下标签：
<body>：设置整个页面的背景颜色
<table>：设置整个表格的背景颜色
<tr>：设置表格行的背景颜色
<td>、<th>：设置表格单元格的背景颜色
<div>、<p>等块级标签：部分浏览器也支持为其设置bgcolor属性
1.2 bgcolor属性的取值规则
bgcolor属性的取值可以是以下几种形式：
颜色英文名称：如red（红色）、blue（蓝色）、green（绿色）等
十六进制颜色值：以#开头，6位十六进制数表示，如#FF0000表示红色，#00FF00表示绿色
RGB颜色值：格式为rgb(红,绿,蓝)，每个颜色分量为0-255的整数，如rgb(255,0,0)表示红色
1.3 bgcolor属性使用示例
以下是使用bgcolor属性设置页面和表格背景颜色的示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>bgcolor属性示例</title> </head> <body bgcolor="#f0f0f0"> <h3>使用bgcolor设置背景颜色</h3> <table border="1" bgcolor="#ffffff"> <tr> <th bgcolor="lightblue">姓名</th> <th bgcolor="lightblue">年龄</th> </tr> <tr> <td bgcolor="rgb(255,240,240)">张三</td> <td>25</td> </tr> </table> </body> </html>
上述代码中，<body>标签的bgcolor设置为浅灰色，表格整体背景为白色，表头行背景为浅蓝色，第一个单元格背景为浅红色。
二、现代HTML设置背景颜色的标准方法
按照HTML结构与样式分离的原则，现代开发中推荐使用CSS来设置背景颜色，这种方式更灵活、易维护，也符合HTML5的规范。
2.1 使用内联样式设置背景颜色
通过元素的style属性，可以直接写入CSS的background-color属性来设置背景颜色，这种方式的作用范围仅针对当前元素。
示例代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>内联样式设置背景颜色</title> </head> <body style="background-color: #f5f5f5;"> <div style="background-color: white; padding: 20px; width: 300px;"> <p style="background-color: #e8f4ff; padding: 10px;">这是一段带背景颜色的文本</p> </div> </body> </html>
2.2 使用内部样式表设置背景颜色
在<head>标签内通过<style>标签定义CSS规则，可以为多个元素统一设置背景颜色，修改时只需要调整样式表中的规则即可，无需逐个修改元素属性。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内部样式表设置背景颜色</title>
<style>
/* 设置整个页面背景 */
body {
background-color: #fafafa;
}
/* 设置类名为card的元素背景 */
.card {
background-color: white;
padding: 20px;
margin: 10px;
border-radius: 8px;
}
/* 设置表格偶数行背景 */
tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="card">
<p>卡片内容区域</p>
</div>
<table border="1" style="width: 100%;">
<tr>
<th>商品名</th>
<th>价格</th>
</tr>
<tr>
<td>笔记本</td>
<td>5000元</td>
</tr>
<tr>
<td>鼠标</td>
<td>100元</td>
</tr>
</table>
</body>
</html>2.3 使用外部样式表设置背景颜色
将CSS规则写入独立的.css文件中，再通过<link>标签引入到HTML页面，这种方式适合多页面项目，可以实现样式的全局复用。
首先创建样式文件style.css，内容如下：
/* style.css */
body {
background-color: #f0f2f5;
}
.header {
background-color: #1890ff;
color: white;
padding: 15px;
}
.footer {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}然后在HTML页面中引入该样式表：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>外部样式表设置背景颜色</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="header">页面头部</div> <div class="content">页面主体内容</div> <div class="footer">页面底部</div> </body> </html>
三、bgcolor属性与CSS background-color的对比
为了更清晰地了解两种方式的差异，以下是两者的对比说明：
| 对比项 | bgcolor属性 | CSS background-color |
|---|---|---|
| 规范支持 | HTML5已移除，属于过时属性 | CSS标准属性，所有现代浏览器支持 |
| 作用范围 | 仅支持部分HTML标签，无法灵活选择元素 | 支持所有HTML元素，可通过选择器精准匹配 |
| 可维护性 | 样式与结构耦合，修改需要逐个调整元素属性 | 样式与结构分离，修改样式表即可全局生效 |
| 扩展能力 | 仅支持纯色背景 | 支持渐变背景、背景图片、背景重复等多种效果 |
四、总结
bgcolor属性是HTML早期用于设置背景颜色的内联属性，仅支持部分标签，且只能设置纯色背景，目前已不属于HTML标准推荐的使用方式，仅在处理老旧代码时可能需要了解其用法。
现代HTML开发中，应当使用CSS的background-color属性来设置背景颜色，通过内联样式、内部样式表或外部样式表的方式实现，这种方式更符合Web标准，可维护性更强，也支持更丰富的背景效果。如果需要查看相关示例，可以访问https://www.ipipp.com查看对应的演示页面。