- HTML5从入门到精通（第3版）
- 明日科技
- 5708字
- 2025-02-15 16:23:34
第3章 设计网页文本内容
（
视频讲解：28分钟）
在网页创作中，文字是最基本的元素之一。增加文字的易读性，让浏览者在短时间内阅读更多的文字、理解更多的信息，同时也能为文字设置视觉上的效果，从而达到网页创作者所追求的目标。
通过阅读本章，您可以掌握：
标题文字的建立
设置文字格式
设置段落格式
水平线标记
其他文字标记
3.1 标题文字的建立
视频讲解
在浏览器中的正文部分，可以显示标题文字，所谓标题文字就是以某种固定的字号显示文字。HTML文档中的标题文字分别用来指明页面上的1～6级标题。
3.1.1 标题字标记<H>
标题文字共包含6种标记，每一种的标题在字号上有明显的区别，从1级～6级依次减小。
语法
语法解释
在该语法中，1级标题使用最大的字号表示，6级标题使用的是最小的字号。
【例3.1】实例代码。（实例位置：资源包\TM\sl\3\1）
运行这段代码可以看到网页中6种不同大小的标题文字，如图3.1所示。
图3.1 标题文字的效果
3.1.2 标题文字的对齐方式——align
默认情况下，标题文字是左对齐的。而在网页制作的过程中，可以实现标题文字的编排设置。对于文字标题的属性设置中，最常用的就是关于对齐方式的设置，这就需要使用align参数来进行设置。
语法
语法解释
在该语法中，align属性需要设置在标题标记的后面，标题文字的对齐属性如表3.1所示。
表3.1 标题文字的对齐方式
【例3.2】实例代码。（实例位置：资源包\TM\sl\3\2）
运行这段代码，可以看到不同对齐方式的标题效果，如图3.2所示。
图3.2 标题文字的对齐效果
3.2 设置文字格式
视频讲解
除了标题文字外，在网页中普通的文字信息更是不可缺少的。而多种多样的文字效果可以使网页变得更加绚丽。
在网页的编辑中，可以直接在文字的主体部分输入文字，这些文字会显示在页面中。这是HTML语言编辑中最简单的事情，只需要在<body>标记和</body>标记之间输入相应的文字即可。设置不同的文字效果的属性位于文字格式标记<font>中，下面将逐一进行讲解各种文字格式的设置方式。
3.2.1 设置文字字体——face
在HTML语言中，可以通过face属性设置文字的不同字体效果。设置的字体效果必须在浏览器安装了相应的字体后才可以正确浏览，否则这些特殊字体会被浏览器中的普通字体所代替。因此，在网页中尽量减少使用过多的特殊字体，以免在用户浏览时无法看到正确的效果。由于浏览器默认情况下都包含了宋体、黑体等几种基本字体，因此网页的创建者应该注意在设计网页时，多利用这几种字体。
语法
语法解释
在该语法中，face属性的值可以是1个或者多个。默认情况下，使用第1种字体进行显示；如果第1种字体不存在，则使用第2种字体进行代替，以此类推。如果设置的几种字体在浏览器中都不存在，则会以默认字体显示。
【例3.3】实例代码。（实例位置：资源包\TM\sl\3\3）
运行这段代码，可以看到几种不同的字体效果，如图3.3所示。
图3.3 设置不同的文字字体
3.2.2 设置字号——size
HTML页面中的文字可以使用不同的字号表现。字号指的是字体的大小，它没有一个相对的大小标准，其大小只是相对于默认字体而言。除了使用标题文字标记设置固定大小的字号之外，HTML语言提供了<font>标记size属性来设置普通文字的字号。
语法
语法解释
在该语法中，文字的字号可以设置1～7，也可以是+1～+7或者是-1～－7。这些字号并没有一个固定的大小值，而是相对于默认文字大小来设定的，默认文字的大小与3号字相同，而数值越大，文字也越大。
【例3.4】实例代码。（实例位置：资源包\TM\sl\3\4）
运行这段代码，可以看到文字的大小变化，其效果如图3.4所示。
图3.4 设置不同的字号
3.2.3 设置文字颜色——color
在HTML页面中，还可以通过不同的颜色表现不同的文字效果。丰富的字符颜色毫无疑问能够极大增强文档的表现力。
语法
语法解释
与网页背景色的设置类似，颜色代码页是十六进制的。
【例3.5】实例代码。（实例位置：资源包\TM\sl\3\5）
运行这段代码，可看到不同色彩的文字效果，如图3.5所示。
图3.5 设置不同的文字颜色
3.2.4 粗体、斜体、下画线——strong、em、u
在浏览网页时，还常常可以看到一些特殊效果的文字，例如粗体字、斜体字以及下画线文字。而这些文字效果也可以通过设置HTML语言的标记来实现。
语法
语法解释
这几种效果的语法类似，只是标记不同。粗体的效果也可以通过标记<b>来实现；斜体字也可以使用标记<I>或者<cite>表示。
【例3.6】实例代码。（实例位置：光盘\TM\sl\3\6）
运行这段代码，可以看到不同的样式效果，且使用不同的标记也可以达到相同的效果，如图3.6所示。
图3.6 设置文字的不同样式
3.2.5 上标与下标——sup、sub
除了设置不同的文字效果之外，有时候在网页中还需要一种特殊的文字效果，即上标和下标，这在显示公式时常常会出现，而在HTML语言中，也可以通过标记轻松进行设置。
语法
语法解释
在该语法中，上标标记和下标标记的使用方法基本相同，只需要将文字放在标记中间即可。
【例3.7】实例代码。（实例位置：光盘\TM\sl\3\7）
运行这段代码，可以看到如图3.7所示的效果。
图3.7 设置文字的上标与下标
3.2.6 设置删除线——strike
在网页中可以通过strike参数对文字添加删除线效果。
语法
语法解释
这两种标记都可以创建删除线效果，使用起来也很简单，只要把需要设置成删除线效果的文字设置在标记中间即可。
【例3.8】实例代码。（实例位置：资源包\TM\sl\3\8）
运行这段代码，可以看到如图3.8所示的效果。
图3.8 删除线效果
3.2.7 等宽文字标记——code
等宽文字标记常用于英文效果，使用该标记可以实现网页中字体的等宽效果。使用等宽效果能够使页面显得更加整齐。
语法
语法解释
在该语法中的这两种标记都可以实现文字的等宽显示，而在应用时只要把需要等宽显示文字的放置在标记中间即可。
【例3.9】实例代码。（实例位置：资源包\TM\sl\3\9）
运行这段代码，可以看到如图3.9所示的效果。
图3.9 等宽文字的效果
3.2.8 空格——
一般情况下，在网页中输入文字时，如果在段落开始增加了空格，在使用浏览器进行浏览时往往看不到这些空格。这主要是因为在HTML文件中，浏览器本身会将两个句子之间的所有半角空白仅当作一个来看待。如果需要保留空格的效果，一般需要使用全角空格符号，或者通过空格码来代替。下面将介绍如何应用空格码来输入保留文字中的空格效果。
语法
语法解释
在网页中可以有多个空格，一个 只代表一个半角空格，多个空格则可以多次使用这一符号。
【例3.10】实例代码。（实例位置：资源包\TM\sl\3\10）
运行这段代码，可以清楚地看到不管在两个句子间输入多少个半角空格，其中仅有一个半角的空格符会被接受，其余多出的空格符将被忽略掉。而输入空格代码则可以完整地保留空格的效果，如图3.10所示。
图3.10 在网页中输入空格
3.2.9 其他特殊符号
除了空格以外，在网页的创作过程中，还有一些特殊的符号也需要使用代码进行代替。一般情况下，特殊符号的代码由前缀“&”、字符名称和后缀“;”组成。使用方法与空格符号类似，具体如表3.2所示。
表3.2 特殊符号的表示
说明
在需要输入这些特殊符号的位置处，使用相应的代码代替即可。
3.3 设置段落格式
视频讲解
文字属性的设定我们已经做了介绍，文字的组合就是段落，在文本编辑窗口中，输入完一段文字后，按下Enter键后就生成了一个段落。在HTML中可以通过标记实现段落的效果，下面具体介绍和段落相关的一些标记。
3.3.1 段落标记——p
在HTML语言中，段落通过<p>标记来表示。
语法
语法解释
可以使用成对的<p>标记来包含段落，也可以使用单独的<p>标记来划分段落。
【例3.11】实例代码。（实例位置：资源包\TM\sl\3\11）
运行这段代码，可以看到两种方法的段落标记都可以成功地将文字分段。效果如图3.11所示。
图3.11 段落效果
3.3.2 取消文字换行标记——nobr
如果浏览器中单行文字的宽度过长，浏览器会自动将该文字换行显示，如果希望强制浏览器不换行显示，可以使用相应的标记。
语法
语法解释
在标记之间的文字在显示的过程中不会自动换行。
【例3.12】实例代码。（实例位置：资源包\TM\sl\3\12）
运行这段代码，可以看到强制文字不换行的效果，如图3.12所示。
图3.12 文字不换行的效果
3.3.3 换行标记——br
段落与段落之间是隔行换行的，文字的行间距过大，这时可以使用换行标记来完成文字的紧凑换行显示。
语法
语法解释
一个<br>标记代表一个换行，连续的多个标记可以多次换行。
【例3.13】实例代码。（实例位置：资源包\TM\sl\3\13）
运行这段代码，可以看到使用换行标记的效果，如图3.13所示。
图3.13 文字的换行
3.3.4 保留原始排版方式标记——pre
在网页创作中，一般是通过各种标记对文字进行排版的。但是在实际应用中，往往需要一些特殊的排版效果，这样使用标记控制起来会比较麻烦。解决的方法就是保留文本格式的排版效果，例如空格、制表符等。如果要保留原始的文本排版效果，则需要使用<pre>标记。
【例3.14】实例代码。（实例位置：资源包\TM\sl\3\14）
运行这段代码，可以看到运行效果和文本中的效果相同，如图3.14所示。
图3.14 保留原始的排版效果
3.3.5 居中对齐标记——center
对于段落来说，和普通文字类似，有时候也需要将段落居中。在HTML语言中提供了专门的标记。
语法
语法解释
在标记之间的文字会自动居中显示。
【例3.15】实例代码。（实例位置：资源包\TM\sl\3\15）
运行这段代码，可以看到这首古诗居中显示，如图3.15所示。
图3.15 段落的居中显示
3.3.6 向右缩进标记——blockquote
使用<blockquote>标记可以实现页面文字的段落缩进。这一标记也是每使用一次，段落就缩进一次，可以嵌套使用，以达到不同的缩进效果。
语法
语法解释
在该标记之间的文字会自动缩进。
【例3.16】实例代码。（实例位置：资源包\TM\sl\3\16）
在上面的代码中，多次嵌套使用了<blockquote>标记，运行这段代码效果如图3.16所示。
图3.16 段落的缩进效果
3.4 水平线标记
视频讲解
水平线用于段落与段落之间的分隔，使文档结构清晰明白，使文字的编排更整齐。水平线自身具有很多属性，如宽度、高度、颜色、排列对齐等。在HTML文档中经常会用到水平线，合理使用水平线可以获得非常好的效果。一篇内容繁杂的文档，如果合理放置几条水平线，就会变得层次分明，便于阅读。
3.4.1 添加水平线——hr
语法
语法解释
在网页中输入一个<hr>标记，就添加了一条默认样式的水平线。
【例3.17】实例代码。（实例位置：资源包\TM\sl\3\17）
运行代码，可以看到在网页中出现了一条水平线，如图3.17所示。
图3.17 添加水平线
3.4.2 设置水平线宽度与高度属性——width、height
在默认情况下，在网页中插入的水平线是100%的宽度，1像素的高度。而在实际创建网页时，可以对水平线的宽度和高度进行设置。
语法
语法解释
在该语法中，水平线的宽度值可以是确定的像素值，也可以是窗口的百分比。而水平线的高度值则只能是像素数。如果在创建水平线时只设置一个参数，那么另外一个参数则会取默认值。
【例3.18】实例代码。（实例位置：资源包\TM\sl\3\18）
运行这段代码，可以看到3条高度和宽度不等的水平线效果，如图3.18所示
图3.18 设置水平线宽度和高度
3.4.3 设置水平线的颜色——color
为了使水平线更美观，同整体页面更协调，我们可以设置水平线的颜色。
语法
语法解释
颜色代码是十六进制的数值。
【例3.19】实例代码。（实例位置：资源包\TM\sl\3\19）
运行这段代码，可以看到颜色和大小不同的两条水平线，而这两条水平线将文章的主体映衬得更加醒目，如图3.19所示
图3.19 设置水平线的颜色
3.4.4 设置水平线的对齐方式——align
通过前面几个实例可以看到，水平线在默认情况下是居中对齐的。如果希望水平线左对齐或右对齐，就需要使用align参数。
语法
语法解释
在该语法中对齐方式可以有3种，包括left、center和right。其中，center的效果与默认效果相同。
【例3.20】实例代码。（实例位置：资源包\TM\sl\3\20）
运行这段代码，可以看到分别位于左边和右边的不同效果的水平线，如图3.20所示。
图3.20 设置水平线的对齐方式
3.4.5 去掉水平线阴影——noshade
在默认情况下，水平线是空心带阴影的立体效果，通过设置noshade参数可以将水平线的阴影去掉。
语法
【例3.21】实例代码。（实例位置：资源包\TM\sl\3\21）
运行代码，可以看到如图3.21所示的效果，上面的水平线是空心带阴影的立体效果，而下面的水平线是通过noshade参数将阴影去除掉的水平线。
图3.21 去掉水平线的阴影效果
3.5 其他文字标记
3.5.1 文字标注标记——ruby
在网页中可以通过添加对文字的标注来说明网页中的某段文字。
语法
语法解释
在这段代码中，被说明的文字就是网页中需要添加标注的那段文字，而文字的标注则是真正的说明文字。
【例3.22】实例代码。（实例位置：资源包\TM\sl\3\22）
运行这段代码，可以在古诗的上面看到标注文字“作者秦观”，如图3.22所示。
图3.22 添加标注文字
说明
在默认情况下，标注文字很小，但是在HTML中也可以像设置其他文字一样调整标注文字的各种属性，包括大小、颜色等。
3.5.2 声明变量标记——var
在使用网页讲解某些知识时，为了统一地突出变量，常常将其设置为斜体。而在HTML中也提供了一种标记，用于专门设置变量的效果。
语法
语法解释
在标记之间的文字就以声明变量的效果显示。
【例3.23】实例代码。（实例位置：资源包\TM\sl\3\23）
运行这段代码，可以看到如图3.23所示的效果。
图3.23 声明变量
3.5.3 忽视HTML标签标记——plaintext、xmp
忽视HTML标签标记主要是用来使HTML标签失去作用，而直接显示在页面中。这一标记在实际中应用并不多。
语法
语法解释
这两个标记中的任何一个如果加入HTML代码中，都会使HTML标记失去作用，一般放置在<body>标记之后。
【例3.24】实例代码。（实例位置：资源包\TM\sl\3\24）
运行程序的效果如图3.24所示。
图3.24 忽视HTML标签的作用
3.5.4 设置地址文字标记<address>
<address>标记可定义一个地址（如电子邮件地址）。我们可以使用它来定义地址、签名或者文档的作者身份等信息。该标记主要用于英文字体的显示。
语法
在标记间的文字就是地址等内容。
【例3.25】实例代码。（实例位置：资源包\TM\sl\3\25）
运行结果如图3.25所示。
图3.25 设置地址文字标记
说明
<address></address>标记对中的内容通常被显示为斜体。大多数浏览器会在<address>标记的前后添加一个换行符，如果有必要，还可以在地址文本的内容添加额外的换行符。
3.6 小结
本章主要讲解了如何设置文字以及段落。文字是网页设计最基础的部分，一个标准的文字页面可以起到传达信息的作用。通过本章的学习，读者可以设置文字格式、段落格式以及水平线标记。在熟悉和掌握了各个知识点后，读者可以在HTML中设置个性的文字样式。
3.7 习题
选择题
1．HTML文本显示状态代码中，<SUP></SUP>表示（ ）。
A．文本加注下标
B．文本加注上标
C．文本闪烁
D．文本或图片居中
2．创建最小的标题的文本标签是（ ）。
A．<pre></pre>
B．<h1></h1>
C．<h6></h6>
D．<b></b>
3．创建黑体字的文本标签是（ ）。
A．<pre></pre>
B．<h1></h1>
C．<h6></h6>
D．<b></b>
4．设置水平线高度的HTML代码是（ ）。
A．<hr>
B．<hr size=?>
C．<hr width=?>
D．<hr noshade>
5．在HTML中，下面是段落标签的是（ ）。
A．<HTML>…</HTML>
B．<HEAD>…</HEAD>
C．<BODY>…</BODY>
D．<P>…</P>
6．HTML代码<hr width=? >表示（ ）。
A．设置水平线的高度
B．设置水平线的宽度
C．创建一个没有阴影的水平线
D．创建任意水平线
判断题
7．HTML的段落标志中，标注文本以原样显示的是<PRE></PRE>。（ ）
8．HTML中，空格的代码为“ ”。（ ）
9．标识<b>无须</b>标识。（ ）
填空题
10．要设置一条1像素粗的水平线，应使用的HTML语句是________。