设置网页背景颜色主要有三种方法,我会按照推荐顺序和常用程度为你逐一介绍：

html5网页背景颜色
（图片来源网络，侵删）
  1. 使用 CSS background-color 属性（最推荐、最灵活）
  2. 使用 HTML bgcolor 属性（已过时，不推荐）
  3. 使用内联样式（特定场景下使用）

使用 CSS background-color 属性（强烈推荐）

这是现代网页设计的标准方法,CSS (层叠样式表) 负责网页的视觉表现，将样式与内容分离，是最佳实践。

在 <style> 标签中设置（适用于单页面）

你可以在 HTML 文件的 <head> 部分内添加一个 <style> 标签，然后在其中为 body 元素设置背景色。

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">我的网页</title>
    <style>
        /* 为整个页面的 body 元素设置背景色 */
        body {
            background-color: lightblue; /* 使用英文颜色名 */
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网页！</h1>
    <p>整个页面的背景色现在是天蓝色。</p>
</body>
</html>

说明：

html5网页背景颜色
（图片来源网络，侵删）
  • body：选择器，代表 HTML 文档的 <body> 部分，也就是用户能看到的所有内容区域。
  • background-color：CSS 属性，用于设置元素的背景颜色。
  • lightblue：属性值，可以是颜色名称、十六进制代码、RGB/RGBA 值或 HSL/HSLA 值。

在外部 CSS 文件中设置（最佳实践，适用于多页面）

当你的网站有多个页面时,最好的做法是创建一个单独的 CSS 文件，然后在 HTML 文件中引用它，这样可以实现样式的复用和统一管理。

步骤：

第一步：创建 CSS 文件 创建一个名为 styles.css 的文件，内容如下：

/* styles.css */
body {
    background-color: #f0f8ff; /* 使用十六进制代码 */
    /* background-color: rgb(240, 248, 255); 也可以使用 RGB 值 */
    /* background-color: hsl(210, 100%, 95%); 也可以使用 HSL 值 */
}

第二步：在 HTML 文件中引用 CSS 文件 在你的 HTML 文件的 <head> 部分使用 <link> 标签来引入这个 CSS 文件。

html5网页背景颜色
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">我的网页</title>
    <!-- 引入外部 CSS 文件 -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>欢迎来到我的网页！</h1>
    <p>这个页面通过外部 CSS 文件设置了背景色。</p>
</body>
</html>

颜色值的表示方法

在 background-color 属性中，你可以使用多种方式来定义颜色：

类型 示例 描述
颜色名称 background-color: red;
background-color: lightgreen;		 最简单直观的方式，但可选颜色有限。
十六进制代码 background-color: #ff0000;
background-color: #00ff00;
background-color: #f0f8ff;		 最常用的方式之一，以 开头，后跟6位十六进制数（红、绿、蓝），可以简写为3位，如 #f0f 代表 #ff00ff。
RGB 值 background-color: rgb(255, 0, 0);
background-color: rgb(0, 255, 0);
background-color: rgb(240, 248, 255);		 使用红、绿、蓝三个通道的值，每个值的范围是 0 到 255。
RGBA 值 background-color: rgba(255, 0, 0, 0.5); 在 RGB 的基础上增加了 Alpha 通道（A），用于设置透明度。0 为完全透明，1 为完全不透明。5 表示50%透明。
HSL 值 background-color: hsl(0, 100%, 50%); 色相、饱和度、亮度，更符合人类对颜色的感知。
HSLA 值 background-color: hsla(0, 100%, 50%, 0.5); 在 HSL 的基础上增加了 Alpha 通道，用于设置透明度。

使用 HTML bgcolor 属性（已过时）

这是在 HTML4 及更早版本中使用的方法，在 HTML5 中，这个属性已经被废弃，不推荐使用。

为什么被废弃？和样式混在一起，违反了“结构与表现分离”的原则，不利于网站的维护和扩展。

示例（仅作了解，不要在生产环境中使用）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">已过时的方法</title>
</head>
<!-- 直接在 body 标签中使用 bgcolor 属性 -->
<body bgcolor="yellow">
    <h1>这个页面使用了过时的 bgcolor 属性</h1>
    <p>请勿在新的 HTML5 项目中使用这种方法。</p>
</body>
</html>

使用内联样式（特定场景）

内联样式是直接在 HTML 元素中使用 style 属性来设置样式，这种方法优先级最高，但会使得 HTML 代码变得混乱，难以维护。

适用场景： 当你需要为某一个特定的、孤立的元素设置样式时，可以使用内联样式。但不推荐用它来设置整个页面的背景。

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">内联样式</title>
</head>
<body>
    <!-- 这个段落的背景色是橙色 -->
    <p style="background-color: orange;">这个段落使用了内联样式设置了背景色。</p>
    <!-- 这个段落的背景色是默认的 -->
    <p>这个段落没有设置背景色。</p>
    <!-- 注意：整个页面的背景色仍然需要通过 CSS 来设置 -->
    <style>
        body {
            background-color: #e0e0e0; /* 整个页面是灰色 */
        }
    </style>
</body>
</html>

总结与最佳实践

方法 优点 缺点 推荐度
外部 CSS 文件 最佳实践与样式分离，易于维护和复用，加载更快。 需要创建额外的文件。 ⭐⭐⭐⭐⭐ (强烈推荐)
<style> 适用于单页面或小型项目，无需额外文件。 如果页面多，代码会变得冗长。 ⭐⭐⭐⭐ (推荐)
HTML bgcolor 属性 简单，无需学习 CSS。 已过时，违反设计原则，难以维护。 ⭐ (不推荐)
内联样式 优先级最高，适用于特定元素的快速样式调整。 使 HTML 混乱，难以维护，无法复用。 ⭐⭐ (仅在特定场景下使用)

给你的最终建议：

始终使用外部 CSS 文件来设置你的网页背景颜色。 这是一种专业、高效且易于维护的开发方式，是所有现代网页开发者的标准做法。