网页文件的主体标记body

关键词：网站建设

来源：南宁网站建设

作者：南宁网站制作

发布时间：2018-08-11

浏览次数：1308

网页的主体部分包括要在浏览器中显示处理的所有信息。在网页的主体标记中有很多的属性设置，包括网页的背景设置、文字属性设置和链接设置等。

1.网页背景色bgcolor

对大多数浏览器而言，其默认的背景颜色为白色或灰白色。使用<body>标记的bgcolor 属性可以为整个网页定义背景颜色。

语法：

<body bgcolor="背景颜色">

说明：

在该语法中的body就是页面的主体标记，bgcolor的值可以是一个已命名的颜色，也可以是十六进制的颜色值。

举例：

<html>
<head>
<meta http-equiv="content-type"content="text/html;charset=gb2312"/>
<title>页面背景颜色</title>
</head>
<body bgcolor="FF99FF">
</body>
</html>

其中body栏目bgcolor="FF99FF"是为页面设置背景颜色，在浏览器中预览效果,如图2.4背景颜色在网页上非常常见。

设置页面的背景颜色

如图2.5所示的网页使用了大面积的蓝色背景。

使用背景颜色网页

2.网页背景图片background

使用恰当的图片作为背景，能够使页面看上去更加生动美观。使用background属性可以将图片设置为背景，还可以设置背景图片的平铺方式、显示方式等。

语法：

<body background="图片地址">

说明：

图片的地址可以是相对地址，也可以是绝对地址。在默认情况下，用户可以省略此属性，这时图片会按照水平和垂直的方向不断重复出现，直到铺满整个页面。

举例：

<html>
<head>
<meta http-equiv="content-type"content="text/html;charset=gb2312"/>
<title>页面背景图片</title>
</head>
<body background="images/12.JPG">
</body>
</html>

其中body栏目background="images/12.JPG"为设置的网页背景图片，在浏览器中预览可以看到背景图像，如图2.6所示。

页面的背景图像

在网络上除了可以看到各种背景色的页面之外，还可以看到一些以图片作为背景的网页，如图2.7所示的网页使用了背景图像。

使用了背景图像的网页

3.文字颜色text

可以通过text标记来设置文字的颜色。在没有对文字的颜色进行单独定义时，这一属性可以对页面中所有的文字起作用。

语法：

<body text="文字的颜色">

说明：

在该语法中，text的属性值与设置页面背景色的相同。

举例：

<html>
<head>
<meta http-equiv="content-type"content="text/html;charset=gb2312"/>
<title>文字颜色</title>
</head>
<body text="#9966CC">
<p>微观网络作为非常年轻的一家网站制作工作室，充满朝气和活力，以优质服务服务客户。我们以提高效率，降低成本，自强不息，厚德载物时时要求自己。<br/></p>
<p><strong>我们的宗旨：</strong><br/>以最优惠的价格,最优质的服务,最优秀的产品提供给我们的客户,与客户携手共进,同创共赢。<br/>
<br/><strong>我们的精神：</strong><br/>服务之精神、认真之精神、创造之精神、团队之精神、拼搏之精神。<br/>
<br/><strong>我们的经营理念：</strong><br/>以客户为中心,秉承7×24小时不间断的为客户提供运营维护服务、业务咨询服务,及时响应客户的需求,及时解决客户的问题。</p>
</body>
</html>

其中body栏目text=“#9966CC”为设置的文字颜色，在浏览器中预览可以看到文档中文字的颜色，如图2.8所示。

设置文字的颜色

在网页中需要根据网页整体色彩的搭配来设置文字的颜色，如图2.9所示的文字和整个网页的颜色相协调。

文字的颜色

4.链接文字属性link

超链接是网页中最重要、最根本的元素之一。网站中的一个个网页是通过超链接的形式关联在一起的，正是因为有了网页之间的链接才形成了这纷繁复杂的网络世界。超链接中以文字链接最多，在默认情况下，浏览器以蓝色作为超链接文字的颜色，访问过的文字则颜色变为暗红色。可以通过link参数修改链接文字的颜色。

语法：

<body link=颜色 >

说明：

这一属性的设置与前面几个设置颜色的参数类似，都是与body标签放置在一起，表明它对网页中所有未单独设置的元素起作用。

举例：

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312"/>
<title>连接文字的颜色</title>
</head>
<body link="#993300" >
<center>
	<a href="#">连接的文字</a>
</center>
</body>
</html>

其中body栏目link=“#993300”是为链接文字设置颜色，在浏览器中预览效果，可以看到链接的文字已经不是默认的蓝色，如图2.10所示。

设置链接文字的颜色

使用alink可以设置正在访问的文字颜色，举例如下。

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312"/>
<title>连接文字的颜色</title>
</head>
<body link="#993300" alink="#0066FF" >
<center>
	<a href="#">连接的文字</a>
</center>
</body>
</html>

其中body栏目link="#993300"alink="#0066FF"是为单击链接的文字时设置颜色，在浏览器中预览效果，可以看到单击链接的文字时，文字已经改变了颜色，如图2.11所示。

单击链接文字时的颜色

使用vlink可以设置访问后的链接文字的颜色，举例如下。

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312"/>
<title>连接文字的颜色</title>
</head>
<body link="#993300" alink="#0066FF" vlink="#336600">
<center>
	<a href="#">连接的文字</a>
</center>
</body>
</html>

其中body栏目link="#993300"alink="#0066FF"vlink="#336600"是为链接的文字设置访问后的颜色，在浏览器中预览效果，可以看到单击链接后文字的颜色已经发生改变，如图2.12所示。

访问后链接文字的颜色

在网页中，一般文字上的超链接都是蓝色（当然，也可以自己设置成其他颜色)，文字下面有一条下画线。当移动鼠标指针到该超链接上时，鼠标指针就会变成一只手的形状，这时候用鼠标左键单击，就可以直接跳到与这个超链接相连接的网页。如果已经浏览过某个超链接，这个超链接的文本颜色就会发生改变，图2,13所示为网页中的超链接文字颜色。

网页中的超链接文字颜色

5. 边距 margin

在网页中可以设置页面与浏览器边框之间的距离，包括上边距和左边距。

语法：

<body topmargin=上边距的值 leftmargin=左边距的值>

说明：

在默认情况下，边距的值以像素为单位。

举例：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>
<title>设置边距</title>
</head>
<body topmargin="100" leftmargin="100">
<p>设置页面的上边距</p>
<p>设置页面的左边距</p>
</body>
</html>

其中body栏目topmargin=“100”leftmargin=“100”是设置上边距和左边距，在浏览器中预览效果，可以看出定义的边距效果，如图2.14所示。

设置的边距效果

提示:一般网站的页面左边距和上边距都设置为0,这样看起来页面不会有太多的空白。

本文内容摘取于《网页制作》，仅供参考学习用途！

上一篇：页面注释标记介绍

下一篇：元信息标记meta的作用