从零开始的异世界之HTML5-day05

最新推荐文章于 2025-11-29 17:19:36 发布

原创最新推荐文章于 2025-11-29 17:19:36 发布 · 112 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5

Html5 专栏收录该内容

6 篇文章

订阅专栏

本文详细讲解了如何使用HTML <body>标签设置文字颜色(text)，背景颜色(bgcolor)，背景图片(background)，链接颜色(link, alink, vlink)以及边距(topmargin, leftmargin)。通过实例代码展示了如何应用这些属性来定制网页布局。

网页的主体部分以<body>标记标志它的开始，以</body>标志它的结束。

属性	描述
text	设定页面的文字
bgcolor	设定页面的背景颜色
background	设定页面的背景图片
bgproperties	设定页面的背景图像为固定，不随页面的滚动而滚动
link	设置链接的颜色（未点击之前）
alink	设置链接的颜色（点击的时候）
vlink	设置链接的颜色（点击之后）
topmargin	设置页面的上边距
leftmargin	设置页面的下边距

1.设置文字颜色-text

text属性可以改变整个页面的默认文字颜色，如果才没有css、html进行单独的说明文字颜色，都将使用设置的颜色。

语法:

实例代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body text="#3545D9">
	这个颜色的字体是蓝色的
</body>
</html>

2.背景颜色的属性-bgcolor

bgcolor属性用来设置整个页面的背景颜色。

语法:

实例代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body bgcolor="#23E949">
	哇，快看快看这个背景颜色是绿色的	
</body>
</html>

3.背景图像属性-background

页面中可以使用jpg、png甚至gif。

background属性将图片放在页面的最最最底层。

语法:

实例代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">	
		body{
			background-repeat: no-repeat;
		}
	</style>
</head>

<body background="../../WEB.workspace 04/3.jpg" bgproperties="fixed"  text="#4234EB">
	1.行金遵庆酒斗千金<br>
	2.行与潘正修之万千<br>
	3.听倍投箸不能是<br>
	4.拔剑四顾心茫然<br>
	5.玉渡黄河冰赛穿<br>
	6.姜登太行雪满山<br>
	7.现在垂钓碧溪上<br>
	8.护肤郴州梦日边<br>
	9.行路难，行路难<br>
	10.多歧路 今安在<br>
	11.长风破浪会有时<br>
	12.直挂云帆济沧海<br>
	1.行金遵庆酒斗千金<br>
	2.行与潘正修之万千<br>
	3.听倍投箸不能是<br>
	4.拔剑四顾心茫然<br>
	5.玉渡黄河冰赛穿<br>
	6.姜登太行雪满山<br>
	7.现在垂钓碧溪上<br>
	8.护肤郴州梦日边<br>
	9.行路难，行路难<br>
	10.多歧路 今安在<br>
	11.长风破浪会有时<br>
	12.直挂云帆济沧海<br>
	1.行金遵庆酒斗千金<br>
	2.行与潘正修之万千<br>
	3.听倍投箸不能是<br>
	4.拔剑四顾心茫然<br>
	5.玉渡黄河冰赛穿<br>
	6.姜登太行雪满山<br>
	7.现在垂钓碧溪上<br>
	8.护肤郴州梦日边<br>
	9.行路难，行路难<br>
	10.多歧路 今安在<br>
	11.长风破浪会有时<br>
	12.直挂云帆济沧海<br>
</body>
</html>

4.设置链接文字属性

超链接中以文字链接为主要，在默认情况下，浏览器以蓝色作为超链接的颜色，访问过的颜色为红色。

link可以改变访问之前的颜色.

alink可以改变点击时候的颜色.

vlink可以改变访问之后的颜色.

语法:

实例代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面链接的文字</title>
</head>

<body text="#000000" link="#D6E31B" alink="#3B13F3" vlink="#DF0B0E">
	<a href="2.1 头部文件.html" target="_blank" >
	鼠标移动到链接的文字时候是黄色，链接电机的时候的颜色为蓝色，链接点击之后的颜色是红色
	</a>
</body>
</html>

5.设置边距-margin

在网页制作的过程中，还可以定义页面的空白，也就是内容与浏览器边框之间的距离。其中包括上边距和左边距

语法:

实例代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body topmargin="60px" leftmargin="70px">
	上边距为60px,左边距为70px.
</body>
</html>