3.3 任务3 文本及版面风格的控制
任务描述及任务目标：处理文本、字号、外版面风格是制作精美网页所需要的基本功，为了使网页版面风格更加美观吸引人，则需进一步进行标签控制。该任务主要讲解如何在HTML中编排段落和修饰文字。
3.3.1 文本控制
1.字体控制
文本控制主要用于控制文字的字体大小、颜色，这些可以通过<font>标签实现。另外，还有一些设置字体某个特点的标签，如<strong>、<em>、<u>、<sup>、<sub>、<strike>、<code>等，它们都要成对出现。
<font>标签的主要格式如下：
<font face = 字体类型size = 字体大小color = 颜色值style = 样式>……</font>
其中，
（1）face：指定字体类型，如宋体、Times New Roman等。但只有对方的计算机中可以设置相同的字体，才可以在其浏览器中出现预先设计的风格，所以最好指定常用字体。
（2）size：设置字号大小，有效值的范围为1～7的整数，默认值为3。可以在size属性值之前加上+、—字符，来指定相对于当前字号值的增量或减量。
（3）color：指定字体颜色。颜色值既可以是十六进制数（最好用#作前缀），也可以是颜色名称。
（4）style：指定字体样式。
为了让文字富有变化，或者为了着重强调某一部分，HTML还提供了一些标签，这些标签的格式和含义如表3-1所示。
表3-1 常用标签的格式和含义
实例3-1 阅读下面代码，了解<font>标签的使用方法。不同标签设置效果的运行结果如图3-2所示。
图3-2 各种大小类型字体
<html>
<head>
<title>HTML、JavaScript简介——实例3-1：font标签的使用</title>
</head>
<body bgcolor = "#eeeeee">
<center>
<font>默认字体</font><br>
<font size = "1">1号字体</font><br>
<font size = "2" face = "Arial" color = blue>2号Arial蓝色字体
</font><br>
<font size = "3" face = "Times New Roman">3号Times New Roman
字体</font><br>
<font size = "4" face = "楷体_gb2312">4号楷体（未必能显示）</font><br>
<font size = "5" face = "Comic Sans MS, 仿宋_gb2312">5号仿宋字体
（未必能显示），英文字体是Comic Sans MS</font><br>
<font size = "6" style = "color:green">6号绿色字体</font><br>
<font size = "7" style = "color:red">7号红色字体</font>
<font size = 3>
<p><b>黑体字</b><i>斜体字</i>
<u>加下画线</u><strike>加中画线</strike></p>
<p><big>大一号字体</big>原字体<small>小一号字体</small></p>
<p><em>你好, </em><strong>欢迎学习HTML!</strong></p>
<p><cite>Welcome!</cite></p>
<p>a<sub>1</sub> = x<sup>2</sup>+ y<sup>2</sup></p>
</font>
</center>
</body>
</html>
2.标题
一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标记<hn>和</hn>，其中n为标题的等级。HTML一共提供6个等级的标题，分别从<h1>到<h6>。n越小，标题字号就越大，主要格式为：
<hn align = 对齐方式>……</hn>
其中，对齐方式有left、right、center 3种，即左对齐、右对齐和居中，默认为left。
实例3-2 各级标题<hn>的使用，代码如下，运行结果如图3-3所示。
图3-3 各级标题
<html>
<head>
<title>HTML、JavaScript简介——实例3-2：hn标签的使用</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3 align = center>三级标题</h3>
<h4 align = left>四级标题</h4>
<h5 align = right>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
从结果可以看出，每一个标题的字体均为黑体，内容文字前后都插入空行。
3.3.2 版面风格控制
1.网页整体风格控制
对页面整体风格的控制主要通过<body>标签的相关属性实现，常用的属性主要有以下几种。
❑ bgcolor属性：用于设置网页的背景颜色。
❑ text属性：设置网页文本的背景颜色。
❑ background属性：用于设置网页的背景图形，图形以平铺方式作为网页背景。
❑ bgproperties属性：该属性只有一个取值，即FIXED，用于锁定网页的背景图形。
锁定后再滚动页面时，背景图片不会跟着滚动。其语法如下：
<body background="背景图" bgproperties="FIXED">
❑ Link、VLink和ALink属性：该组属性用于设置超链接在不同状态下的颜色。Link设置链接的颜色，VLink设置已经访问过的链接的颜色，ALink设置活动链接的颜色。
2.分段和换行控制
（1）分段标记（<p>）
段落分段使用<P>标记实现。<p>表示一段落的开始；</p>表示段落的结束，通常可以省略不写。单独的一个<p>标记可以产生一个空行。
（2）换行（<br>）和禁止换行标记（<nobr>文本</nobr>）
换行用标记<br>来实现，没有对应的结束标记，它指示浏览器在标记处执行一个换行动作。<br>标记后的文本将显示换行，换行后的文本，与前面的文本仍属于一个段落，因此换行后字符和段落格式不会改变，这与<p>标记不同。
为了保证某一单词的完整性，有时候需要禁止某处换行，此时使用<nobr>标记实现。其用法为<nobr>文本</nobr>，该标记作用的文本将在同一行显示。
3.预格式化文本（<pre>文本块</pre>）
预格式化文本是文本块以等宽字体显示，在网页中显示时可保留预排版的格式。预格式化文本使用<pre>标记来实现，使用方法是<pre>文本块</pre>。
4.画分隔线（<hr>）
在网页中产生的分隔线使用<hr>标记来实现，其用法为：
<hr size = 宽度width = 长度align = 对齐方式color = 颜色noshade>
各个属性说明如下。
❑ size：用于设置水平线的宽度，以像素为单位，默认值为1。
❑ width：用于表示水平线的长度，可以以像素为单位，如100；也可以是浏览器窗口宽度的百分比，如80%，默认值为100%。
❑ align：水平线的对齐方式，有left、right、center 3种，默认为center。
❑ color：指定线条颜色。颜色值既可以是一个十六进制数（最好用#作前缀），也可以是颜色名称，默认为灰色。
❑ noshade：线段无阴影属性，为实心线段，默认为空心线段。
<hr>是一个单标记，也就是说没有对应的</hr>。