如何在 HTML 中更改背景颜色

2025 年 3 月 25 日 | 阅读 5 分钟

在 HTML 中，我们可以使用以下不同的方法更改网页的背景颜色

使用 bgcolor 属性
使用内联样式属性
使用内部 CSS

1. 使用 bgcolor 属性

注意：HTML 5 不支持 <body> 标签的 bgcolor 属性，因此我们必须使用内联样式属性和内部 CSS 选项来更改网页的颜色。

如果我们想使用 bgcolor 属性更改网页的背景颜色，我们必须遵循以下步骤。通过这些步骤，我们可以轻松更改背景颜色

步骤 1：首先，我们必须在任何文本编辑器中键入 Html 代码，或者打开我们希望使用 bgcolor 属性更改该 Html 页面背景颜色的现有 Html 文件。

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Change the background color using Bgcolor attribute 
</Title>
</Head>
<Body> 
tpointtech   <br>
Html Tutorial   <br>
In HTML, we can change the color of the background of a webpage using the following different ways: <br>
1. Using bgcolor attribute  <br>
2. Using an Inline style attribute  <br>
3. Using internal CSS  
</Body>
</Html>

步骤 2：现在，将光标移动到 Html 文档中的起始 <body> 标签内。然后，键入 bgcolor 属性，如下面的代码块所示

步骤 3：现在，我们必须指定要在网页背景上使用的颜色。因此，在 bgcolor 属性中键入颜色名称，如下面的代码块所述。

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Change the background color using Bgcolor attribute 
</Title>
</Head>
<Body bgcolor="blue"> 
tpointtech   <br>
Html Tutorial   <br>
In HTML, we can change the color of the background of a webpage using the following different ways: <br>
1. Using bgcolor attribute  <br>
2. Using an Inline style attribute  <br>
3. Using internal CSS  
</Body>
</Html>

步骤 4：最后，我们必须将 Html 代码保存在文本编辑器中并运行代码。执行后，我们将看到网页背景显示为文档中指定的颜色。以下屏幕截图显示了上述 Html 代码的输出

2. 使用内联样式属性

如果我们想使用内联样式属性更改网页的背景颜色，我们必须遵循以下步骤。通过这些步骤，我们可以轻松更改背景颜色。

步骤 1：首先，我们必须在任何文本编辑器中键入 Html 代码，或者打开我们希望使用内联样式属性更改该 Html 页面背景颜色的现有 Html 文件。

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Change the background color using Inline style attribute
</Title>
</Head>
<Body> 
This page helps you to understand how to change the backround color of a web page. <br>
<br>
And, this section helps you to understand how to change the backround color of an Html page using the style attribute.
</Body>
</Html>

步骤 2：现在，将光标移动到 Html 文档中的起始 <body> 标签内。然后，键入 style 属性，如下面的代码块所示

步骤 3：现在，我们必须指定要在网页背景上使用的颜色。因此，在样式属性的 background-color 属性中键入颜色名称，如下面的代码块所述。

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Change the background color using Inline style attribute
</Title>
</Head>
<Body style="background-color:orange"> 
This page helps you to understand how to change the backround color of a web page. <br>
<br>
And, this section helps you to understand how to change the backround color of an Html page using the style attribute.
</Body>
</Html> 

步骤 4：最后，我们必须将 Html 代码保存在文本编辑器中并运行代码。执行后，我们将看到网页背景显示为文档中指定的颜色。以下屏幕截图提供了上述 Html 代码的输出

3. 使用内部 CSS

如果我们想使用内部层叠样式表更改网页的背景颜色，我们必须遵循以下步骤。通过这些步骤，我们可以轻松更改背景颜色。

步骤 1：首先，我们必须在任何文本编辑器中键入 Html 代码，或者打开我们希望使用内部 CSS 更改该 Html 页面背景颜色的现有 Html 文件。

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Change the background color using Internal Cascading StyleSheet
</Title>
</Head>
<Body> 
This page helps you to understand how to change the backround color of a web page. <br>
<br>
And, this section helps you to understand how to change the backround color of an Html page using the Internal Cascading Stylesheet.
</Body>
</Html>

步骤 2：现在，我们将光标放在 Html 文档的 head 标签中，然后像下面的代码块所示那样在 <style> 标签内定义样式。然后，在 body 元素中键入 background-color 属性。

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Change the background color using Internal Cascading StyleSheet
</Title>
<style>
Body
{
background-color:green;
}
</style>
</Head>
<Body> 
This page helps you to understand how to change the backround color of a web page. <br>
<br>
And, this section helps you to understand how to change the backround color of an Html page using the Internal Cascading Stylesheet.
</Body>
</Html>

下一主题如何在 Html 中添加注释

如何在 HTML 中更改背景颜色

1. 使用 bgcolor 属性

注意：HTML 5 不支持 <body> 标签的 bgcolor 属性，因此我们必须使用内联样式属性和内部 CSS 选项来更改网页的颜色。

2. 使用内联样式属性

3. 使用内部 CSS

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

如何在 HTML 中更改背景颜色

1. 使用 bgcolor 属性

注意：HTML 5 不支持 <body> 标签的 bgcolor 属性，因此我们必须使用内联样式属性和内部 CSS 选项来更改网页的颜色。

2. 使用内联样式属性

3. 使用内部 CSS

相关帖子

在 HTML 中使用 JavaScript 构建计算器的不同方法

HTML 分隔线

HTML 长度

如何在 HTML 中添加边框

如何在 HTML 中使用 Font Awesome 图标

在 HTML 中调整图片大小

HTML 注释快捷键

HTML 创建器

Hspace

HTML 基本标签

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器