·30·
HTML网页设计参考手册
标题文字的建立
文字格式标记
段落标记
水平线标记
其他标记
在网页创作中，文字是最基本的元素之一。增加文字的易读性，让浏览者在短时间内阅读更多、理解更多信息，并达到视觉艺术及传达的功能是网页创作者追求的目标。本章将介绍各种文字标记的使用方法。
第3章文字与段落·31·
3.1  标题文字的建立
在浏览网页时，常常看到一些标题文字，用于对文本中的章节进行划分，它们以固定的字号显示。HTML文档中的标题文字分别用来指明页面上的1～6级标题。
3.1.1  标题文字标记
标题文字共包含6种标记，分别表示6个级别的标题，每一级别的字体大小都有明显的区别，从1级～6级依次减小。
语法：
1级标题：<h1>…</h1>
2级标题：<h2>…</h2>
依次下去，到6级标题。
说明：在该语法中，1级标题使用最大的字号表示；6级标题使用的是最小的字号。
实例代码：
<!--这是关于标题文字的实例-->
<html>
<head>
<title>标题文字的效果</title> Array </head>
<body>
<h1>1级标题的效果</h1>
<h2>2级标题的效果</h2>
<h3>3级标题的效果</h3>
<h4>4级标题的效果</h4>
<h5>5级标题的效果</h5>
<h6>6级标题的效果</h6>
</body>
</html>
运行这段代码可以看到网页中6种不同大小的标
图3-1  标题文字效果
题文字，如图3-1所示。
3.1.2  标题文字的对齐方式——align
默认情况下，标题文字是左对齐的。而在网页制作的过程中，可以实现标题文字的编排设置。对
于文字标题的属性设置中，最常用的就是关于对齐方式的设置，这需要使用align参数进行设置。
语法：align=对齐方式
说明：在该语法中，align属性需要设置在标题标记的后面，其对齐方式的取值见表3-1。
HTML 网页设计参考手册
·32·表3-1  标题文字的对齐方式
属  性  值 含    义 left 左对齐 center 居中对齐 right
右对齐
实例代码：
<!--设置标题文字的不同对齐方式--> <html> <head>
<title>标题文字的对齐效果</title> </head> <body>
<h1>1级标题的默认对齐效果</h1>  <h2 align=left>2级标题的左对齐效果</h2>  <h3 align=center>3级标题的居中对齐效果</h3>  <h4 align=right>4级标题的右对齐效果</h4> </body> </html>
运行这段代码，可以看到不同对齐方式的标题效果，如图3-2所示。
3.2  文字格式标记
除了标题文字外，在网页中普通的文字信息更是不可缺少的。而多种多样的文字效果可以使网页变得更加绚丽。
在网页的编辑中，可以直接在文字的主体部分输入文字，而这些文字便会显示在页面中。可以说，这是HTML 语言编辑中最简单的事情，只需要在<body>标记和</body>
标记之间输入相应的文字即可。重要的是如何设置不同的文字效果，而这些属性的设置都位于文字格式标记<font>中，下面将逐一进行讲解各种文字格式的设置方式。
3.2.1  设置文字字体——face
在HTML 语言中，可以通过face 属性设置文字的不同字体效果。而设置的字体效果必须在浏览器安装了相应的字体后才可以正确浏览，否则这些特殊字体会被浏览器中的普通字体所代替。因此，在网页中尽量减少使用过多的特殊字体，以免在用户浏览时无法看到正确的效果。由于浏览器默认情况下都包含了宋体、黑体等几种基本字体，因此网页创作者也应该注意在设计网页时，多利用这几种    字体。
语法：<font face="字体1，字体2">应用字体的文字</font>
图3-2  标题文字的对齐效果
第3章  文字与段落
·33·
说明：在该语法中，face 属性的值可以是1个或者多个。默认情况下，使用第1种字体进行显示；如果第1种字体不存在，则使用第2种字体进行代替，以此类推。如果设置的几种字体在浏览器中都不存在，则会以默认字体显示。
实例代码：
<!--设置不同的文字字体--> <html> <head>
<title>不同字体的显示效果</title> </head> <body>
<font face="经典空叠圆简">经典空叠圆简的字体效果</font><br>  <font face="黑体">黑体效果</font><br>  <font face="Times New Roman,Times"> English fonts</font> </body> </html>
运行这段代码，可以看到几种不同的字体效果，如图3-3所示。
3.2.2  设置字号——size
除了字体外，文字的大小也是吸引用户注意的一个元素。除了使用标题文字标记设置固定大小的字号之外，HTML 语言提供了<font>标记的size 属性来设置普通文字的字号。
语法：<font size="文字字号"></font>
说明：在该语法中，文字的字号可以设置为1~7，也可以是+1~+7或者是-1~7。这些字号并没有一个固定的大小值，而是相对于默认文字大小来设定的，默认文字的大小与3号字相同，而数值越大，文字也越大。
实例代码：
<!--设置不同的文字大小--> <html> <head>
<title>不同字号文字的效果</title> </head> <body>
<font size="1">1号字体的效果</font><br>  <font size="2">2号字体的效果</font><br>  <font size="3">3号字体的效果</font><br>  <font size="4">4号字体的效果</font><br>  <font size="5">5号字体的效果</font><br>  <font size="6">6号字体的效果</font><br>  <font size="7">7号字体的效果</font><br>  <font size="+2">默认字号+2，也就是5号字体的效果</font><br>  <font size="-1">默认字号-1，即2号字体的效果
</font> </body> </html>
运行这段代码，可以看到文字的大小变化，其效果如图3-4所示。
图3-3  设置不同的文字字体
图3-4  设置不同的字号
HTML 网页设计参考手册
·34·3.2.3  设置文字颜——color
在HTML 页面中，还可以通过不同的颜表现不同的文字效果，从而增加网页的亮丽彩，吸引浏览者的注意。
语法：<font color="颜代码"></font>
说明：与网页背景的设置类似，颜代码也是十六进制的。 实例代码：
<!--设置不同的文字颜--> <html> <head>
<title>不同彩的文字效果</title> </head> <body>
<font face="黑体"color="#0099FF">淡蓝的黑体效果</font><br>  <font size="2" color="#990000">暗红的2号文字效果</font><br>  <font face="经典空叠圆简" size="5" color="#FF6600">桔的5号经典空叠圆简</font> </body> </html>
运行这段代码，可看到不同彩的文字效果，如图3-5所示。
3.2.4  粗体、斜体、下划线——strong 、em 、u
在浏览网页时，还常常可以看到一些特殊效果的文字，例如粗体字、斜体字以及下划线文字。而这些文字效果也可以通过设置HTML 语言的标记来实现。
语法：<strong>粗体的文字</strong>      <em>斜体字</em>
<u>带下划线的文字</u>
说明：这几种效果的语法类似，只是标记不同。粗体的效果也可以通过标记<b>来实现；斜体字也可以使用标记<I>或者<cite>表示。html中的5种空格表示
实例代码：
<!--设置不同的文字效果--> <html> <head>
<title>不同的文字样式</title> </head> <body>  正常的文字效果<br><br>
<strong>使用strong 标记加粗文字</strong><br>  <b>使用B
标记加粗文字</b><br><br>  图3-5  设置不同的文字颜

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。