2.5 页面的主体标记<body>
教学录像：光盘\TM\lx\2\页面的主体标记．exe
网页的主体部分以<body>标记标志它的开始，以</body>标志它的结束。在网页的主体标记中有很多的属性设置，如表2.5所示。
表2.5 <body>元素的属性
下面就来分别介绍这些属性的应用。
2.5.1 设置文字颜色——text
<body>元素的text属性可以改变整个页面默认文字的颜色。在没有对文字进行单独定义颜色的时候，这个属性将对页面中所有的文字产生作用。
语法
<body text="颜色代码">
语法解释
在该语法中，text的属性值与设置页面背景色相同，也就是说该属性设置要和页面的主体标记放置在一起。
实例代码
<html>
<head>
<title>设置页面文字颜色</title>
</head>
<body text="#0000FF">
设定页面的文字颜色为蓝色
</body>
</html>
运行这段代码，实现的效果如图2.10所示。
图2.10 设置页面文字颜色为蓝色
2.5.2 背景颜色属性——bgcolor
<body>元素的bgcolor属性用来设定整个页面的背景颜色。与文字颜色相似，也是使用颜色名称或者十六进制值来表现颜色效果。
语法
<body bgcolor="颜色代码">
语法解释
该语法中的body就是页面的主体标记，也就是说设置页面的颜色要和页面的主体标记放置在一起。
实例代码
<html>
<head>
<title>设置页面文字颜色</title>
</head>
<body bgcolor="#0000FF" text="#FFFFFF">
设定页面的背景为蓝色，文字的颜色为白色
</body>
</html>
运行这段代码，可以看到打开的页面背景色为蓝色（#0000FF），文字的颜色为白色（#FFFFFF），效果如图2.11所示。
图2.11 设置页面的背景颜色为蓝色
2.5.3 背景图像属性——background
页面中可以使用jpg或gif图片来表现。这些图片可以作为页面的背景图，通过<body>语句中的background属性来实现。它与向网页中插入图片不同，它放在网页的最底层，文字和图片等都位于它的上面。文字、插入的图片等会覆盖背景图片。在默认的情况下，背景图片在水平方向和垂直方向上会不断重复出现，直到铺满整个网页。
语法
<body background="文件链接地址" bgproperties="背景图片固定属性">
语法解释
文件的链接地址可以是相对地址，也就是本机上图片文件的存储位置，也可以设置为网上的图片资料，如http://www.mingribook.com/book.jpg。在默认情况下，用户可以省略bgproperties属性，这时图片会按照水平和垂直的方向不断重复出现，直到铺满整个页面，如果将bgproperties属性设置为fixed，那么当滚动页面时，背景图像也会跟着移动，对浏览者来说，就是总停留在相同的位置上。
【例2.2】下面以实例说明背景图片的设置与显示效果。
（1）设置一个图片文件作为网页的背景，在默认情况下不设置bgproperties属性，此时图片将在水平和垂直方向平铺图像。（实例位置：光盘\TM\sl\2\2）
2-5.html代码如下。
<html>
<head>
<title>背景图片</title>
</head>
<body background="images/1.jpg">
</body>
</html>
运行这段代码，可以看到如图2.12所示的效果，图像在水平和垂直方向平铺。
图2.12 平铺图像作为背景
（2）如果希望图片不重复显示，一般情况下需要借助CSS样式，这里简单介绍一下，在后面的章节中将详细介绍CSS的相关内容。
对于网页背景的样式设置，一般在头部标记中添加style标记，2-6.html代码如下。
<html>
<head>
<title>背景图片不重复出现</title>
<style type="text/css">
body{background-repeat:no-repeat}
</style>
</head>
<body background="images/1.jpg">
</body>
</html>
在这段代码中，background-repeat的值设置为no-repeat，也就是不重复，运行效果如图2.13所示。
图2.13 背景图像单独显示
如果在这段代码中，将background-repeat的值设置为repeat-x，则背景图片只在水平方向平铺，效果如图2.14所示。相反，如果设置为repeat-y，则只在垂直方向平铺。
图2.14 背景图像水平平铺效果
（3）除了设置背景是否重复之外，在网页中还可以设置背景图片是否随拖动条的拖动而变化。这一属性是通过bgproperties参数来设定的，将bgproperties的值设置为fixed，背景图片会固定在页面上静止不动。2-8.html的代码如下。
<html>
<head>
<title>背景图片</title>
<style type="text/css">
body{background-repeat:no-repeat}
</style>
</head>
<body background="images/1.jpg" bgproperties="fixed" text="#00FFCC">
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>
运行这段代码后的效果如图2.15所示。当拖动滚动条时，会发现只有文字在动，而背景却是静止不动的，如图2.16所示。
图2.15 运行代码的效果
图2.16 拖动滚动条的效果
2.5.4 设置链接文字属性——link
在网页创建中，除了文字、图片，超链接也是最常用的一种元素。超链接中以文字链接最多，在默认情况下，浏览器以蓝色作为超链接文字的颜色；访问过的文字则变为暗红色。用户在创作网页时，可以通过link参数修改链接文字的颜色。
语法
<body link="颜色代码">
语法解释
这一属性的设置与前面几个设置颜色的参数类似，都是与body标签放置在一起的，表明它对网页中所有未单独设置的元素起作用。
【例2.3】下面通过实例进行链接文字设置。（实例位置：光盘\TM\sl\2\3）
（1）设置未访问的链接文字的颜色。
2-9.html代码如下。
<html>
<head>
<title>页面的链接文字</title>
</head>
<body text="#6699FF" link="#FF0000">
<center>
设置文字的链接效果
<br /><br />
<a href="http://www.mingribook.com">链接文字</a>
<br /><br />
</center>
</body>
</html>
运行这段代码，可以看到链接文字的颜色已经不是默认的蓝色，而是设置成了红色，如图2.17所示。
图2.17 设置链接文字的颜色
（2）在上面的代码中，添加正在访问的文字颜色设置。这一属性需要用到alink参数，添加后的2-10.html代码如下。
<html>
<head>
<title>页面的链接文字</title>
</head>
<body text="#6699FF" link="#FF0000" alink="#99FF00">
<center>
设置文字的链接效果
<br /><br />
<a href="http://www.mingribook.com">链接文字<a/>
<br/><br/>
<a href="http://www.mrbccd.com">正在访问的链接</a>
</center>
</body>
</html>
运行这段代码之后，单击链接文字“正在访问的链接”，会发现按下鼠标时，文字颜色变成了绿色，如图2.18所示。
图2.18 设置正在访问的文字颜色
（3）在上面的代码中，继续使用vlink参数设置访问后的文字链接颜色，2-11.html实现的代码如下。
<html>
<head>
<title>页面的链接文字</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body text="#6699FF" link="#FF0000" alink="#99FF00" vlink="#CCCCCC">
<center>
设置文字的链接效果
<br/><br/>
<a href="http://www.mingribook.com">链接文字</a>
<br/><br/>
<a href="2-11.html">访问后的链接</a>
</center>
</body>
</html>
运行这段代码之后，当单击“访问后的链接”文字链接后，与此同时也就完成了页面的跳转（这里设置的是跳转回本页），这时会看到访问过的链接文字颜色变成了灰色，如图2.19所示。
图2.19 设置访问后的文字链接颜色
2.5.5 设置边距——margin
在网页的制作过程中，还可以定义页面的空白，也就是网页内容与浏览器边框之间的距离。其中包括上边框和左边框，设定合适的边距可以防止网页外观过于拥挤。
语法
<body topmargin=上边距的值leftmargin=左边距的值>
语法解释
在默认情况下，边距的值是以像素为单位的。
实例代码
<html>
<head>
<title>设置边距</title>
</head>
<body topmargin="60" leftmargin="50">
设置页面的上边距为60像素
<br/>
设置页面的左边距为50像素
</body>
</html>
运行此段代码，可以看到设置边距前后的对比效果，设置边距前的效果如图2.20所示，设置自定义边距的效果如图2.21所示。
图2. 20 默认的页面的效果
图2.21 设置边距的效果