2.2 与文字排版相关的元素
与文字排版相关的元素包括文本缩进、段落、换行、段落居中等。一个好的网页，文字段落的设置是必不可少的，它可以使网页更加简洁和美观。
2.2.1 文本缩进
文本缩进元素<BLOCKQUOTE>主要用于设置文本的缩进效果，从而使页面的文字布局更加错落有致。文本缩进元素的语法格式如下。
<BLOCKQUOTE>需要进行缩排的文字</BLOCKQUOTE>
需要注意的是，文本缩进元素<BLOCKQUOTE>可以嵌套使用，每使用一次，文本就缩进一次。
【示例2-7】不同次数的缩进。
01 <HTML> 02 <HEAD> 03 <TITLE>设置文本缩进</TITLE> 04 </HEAD> 05 <BODY> 06 在一个山区里，有一座大山，叫顶天山。山脚下有个小村子，村里的人家都是靠打猎过生活的。有 一天，不知道是谁，在一块光滑的岩石上画了一只狐狸。 07 <BLOCKQUOTE>第一个人看到了，就说：“哈！这上面画的根本不像狐狸，倒像一只狼。” </BLOCKQUOTE> 08 <BLOCKQUOTE><BLOCKQUOTE>这句话一传两传，传到另外一个人的嘴里，就变成这样说了：“有 人说，顶天山上有一只狐狸，一下子变狼了。”</BLOCKQUOTE></BLOCKQUOTE> 09 <BLOCKQUOTE><BLOCKQUOTE>别人听了都问：“是真的吗？”</BLOCKQUOTE> </BLOCKQUOTE> 10 <BLOCKQUOTE>“是真的，好多人都在这样说。”</BLOCKQUOTE> 11 </BODY> 12 </HTML>
第6～10行演示了使用<BLOCKQUOTE>来实现文本的缩行。示例2-7运行效果如图2.10所示，可以看出，使用文本缩进时，段落左右两侧都被缩进了。文本缩进元素可以嵌套使用，使用的元素越多，缩进的程度也越大。
图2.10 文本缩进运行结果
2.2.2 换行
HTML中的换行元素在前面的章节已经多次提到并使用过了。<BR>元素就是用来对文字进行换行的。<BR>元素没有结束标签，也就是说，一个<BR>元素就是换一次行。
【示例2-8】使用换行元素来对文字进行换行。
01 <HTML> 02 <HEAD> 03 <TITLE>换行</TITLE> 04 </HEAD> 05 <BODY> 06 这是一行文字，虽然在源代码里并没有换行，<BR>但是因为使用了一个“<BR>”标签，所 以它换行了。<BR><BR> 07 这是 08 两行文字<BR> 09 上面一行文字，在源代码里是分两行写的，因为没有使用“<BR>”标签，所以它没有换行。 10 </BODY> 11 </HTML>
第6～9行使用<BR>标签来演示HTML换行。示例2-8运行效果如图2.11所示，可以看出，虽然源代码中的文字没有换行，但是只要加上了<BR>标签，就会在添加<BR>标签之处换行；另外源代码中的文字即使换了行，只要没有加上<BR>标签，在用浏览器浏览时，文字也不会换行。
图2.11 文字换行运行结果
注意
浏览器中显示“<”和“>”字符时，在源代码中要分别以“<”和“>”替代。
2.2.3 段落
在HTML中，使用<P>元素可以区分一个段落与另一个段落，在<P>标签与</P>标签之间的文字是一个段落，其语法格式如下。
<P>一段文字</P>
【示例2-9】有时候读者会分不清段落与换行之间的概念，下面通过一个例子来区分这两个概念。
01 <HTML> 02 <HEAD> 03 <TITLE>段落与换行</TITLE> 04 </HEAD> 05 <BODY> 06 <P> 07 从这里开始，是一个新的段落，一个段落里表达的是一种意思。<BR> 08 这是一行文字，<BR>因为使用了“<BR>”标签，所以被分为了两行。 09 </P> 10 <P> 11 从这里开始，又是一个新的段落，这个段落里表达的可能会是另一种意思。 12 </P> 13 </BODY> 14 </HTML>
第6～12行演示了如何在HTML中使用<P>标签来实现分段。示例2-9运行效果如图2.12所示，可以看出，前4行文字是第一个段落，后两行文字是第2个段落。从直观上看来，在一个段落与另一个段落之间，空了一行文字的距离。而<BR>元素只是使文字换了一行，并没有在文字与文字之间增加一个空白行。
图2.12 为文字设置段落运行结果
注意
虽然<P>元素有开始标签与结束标签，但是结束标签可以省略。当浏览器遇到一个新的<P>标签时，会自动将前面的段落结束，并开始一个新的段落。
2.2.4 段落居中
如果想要居中显示网页中的段落，可以使用居中对齐元素<CENTER>。居中对齐元素是双元素，成对出现，以<CENTER>开始，以</CENTER>结束。在元素之间的所有内容都居中对齐，包括文字、图像、表格等，其具体的语法格式如下。
<CENTER>需要居中对齐的内容</CENTER>
【示例2-10】使用居中对齐元素使段落居中显示。
01 <HTML> 02 <HEAD> 03 <TITLE>设置元素的居中对齐</TITLE> 04 </HEAD> 05 <BODY> 06 这是默认的文字对齐方式。这是默认的文字对齐方式。这是默认的文字对齐方式。这是默认的文字 对齐方式。这是默认的文字对齐方式。 07 <CENTER> 08 <H3>HTML 中的字体元素</H3> 09 <P> 在HTML 中有很多元素，学习好这些元素可以更好地掌握创建网页的方法。</P> 10 </CENTER> 11 </BODY> 12 </HTML>
第6行使用默认对齐方式，第7～10行使用<CENTER>标签实现居中对齐方式。示例2-10运行效果如图2.13所示，可以看出第一段文字没有使用居中对齐元素，段落就以默认方式居左对齐；第二段的三级标题和第三段的段落文字使用了居中对齐元素，它们就居中显示了。
图2.13 段落居中运行效果
2.2.5 预定义格式
通过前面章节的学习可以知道，在HTML源代码中，即使文字已经换行，但是只要没有使用<BR>标签，在浏览器里显示出来的文字也不会换行。如果想在浏览器中显示源代码中设置的所有格式，包括文字之间的空白，如空格、制表符等，可以使用<PRE>元素。使用<PRE>元素相当于设置了一个“块”，这个块可以将源代码中的所有文本（除HTML标签外）在浏览器中按原样显示出来。其语法格式如下。
<PRE>设定了格式的文字</PRE>
例如，源代码中有10个空格，在浏览器也会显示10个空格，不再合并多个空格为一个空格；源代码中有一个换行，在浏览器中也会显示一个换行，不再需要使用<BR>标签来强制换行。
【示例2-11】使用预定义格式来设置文本按原样显示。
01 <HTML> 02 <HEAD> 03 <TITLE>预格式化</TITLE> 04 </HEAD> 05 <BODY> 06 春 晓 07 春眠不觉晓，处处闻啼鸟。 08 夜来风雨声，花落知多少。 09 <PRE> 10 春 晓 11 春眠不觉晓，处处闻啼鸟。 12 夜来风雨声，花落知多少。 13 </PRE> 14 <PRE> 15 春 晓 16 春眠不觉晓，处处闻啼鸟。 17 夜来风雨声，花落知多少。 18 </PRE> 19 </BODY> 20 </HTML>
示例2-11运行效果如图2.14所示，可以看出，没有使用<PRE></PRE>标签时，无论在源代码中怎么换行，在浏览器中显示出来的都是一行，并且多个空格都被处理成一个空格。而在使用<PRE></PRE>标签后，源代码中是什么样的格式，在浏览器中显示出来的就是什么样的格式，有换行的位置就显示换行，有空格的位置就显示空格。
图2.14 预定义格式运行效果
2.2.6 水平分隔线
当页面内容比较烦琐时，可以在段与段之间插入一条水平分隔线来使页面层次分明，便于阅读。在HTML中可以使用<HR>元素来创建一条水平分隔线，其语法格式如下。
<HR ALIGN=" 对齐方式" WIDTH="宽度" SIZE=" 高度" COLOR="颜色" NOSHADE>
其中，<HR>元素中的属性说明如下。
• ALIGN属性的值可以为LEFT（左对齐）、CENTER（居中）和RIGHT（右对齐）3种。
• WIDTH属性代表宽度，可以有两种表示法：一种是百分数，代表水平分隔线占浏览器窗口宽度的百分比；另一种是像素，代表水平分隔线宽度占多少像素。
• SIZE属性代表水平分隔线的高度，其值为数字。
• COLOR属性代表水平分隔线的颜色，默认为黑色。
• NOSHADE代表水平分隔线不显示阴影，默认情况下水平分隔线是显示阴影的。
【示例2-12】创建不同类型的水平分隔线。
01 <HTML> 02 <HEAD> 03 <TITLE>水平分隔线</TITLE> 04 </HEAD> 05 <BODY> 06 这是一个默认的水平分隔线： 07 <HR> 08 该水平分隔线占浏览器窗口的 50%,并向左对齐 09 <HR WIDTH="50%" ALIGN="LEFT"> 10 该水平分隔线宽度为 500 像素 11 <HR WIDTH="500"> 12 该水平分隔线的高度为 3，并不显示阴影 13 <HR WIDTH="200" SIZE="3" NOSHADE> 14 该水平分隔线为红色 15 <HR WIDTH="50%" COLOR="red"> 16 </BODY> 17 </HTML>
第6～15行分别使用<HR>标签，显示不同水平分隔线的内容。示例2-12运行效果如图2.15所示。
图2.15 创建水平分隔线运行结果
在例2-12中创建了以下几种水平分隔线。
① 第1条水平分隔线为默认的水平分隔线，该水平分隔线的宽度为100％，居中，高度为1，颜色为黑色。
② 第2条水平分隔线的宽度为50％。当调整浏览器窗口大小时，该水平分隔线也会自动调整长度，以保证永远只占浏览器窗口50％的长度。
③ 第3条水平分隔线的宽度为500像素。无论浏览器窗口的大小是多少，该水平分隔线的长度都是500像素，不会随着窗口大小改变而改变，一旦浏览器窗口的宽度小于500像素，就会在窗口上出现横向滚动条。
④ 为第4条水平分隔线指定了NOSHADE属性。该属性没有属性值，此时的水平分隔线没有立体感。
⑤ 第5条水平分隔线的颜色为红色，如果不设置颜色，水平分隔线默认为黑色。水平线使用COLOR属性后，将不能显示阴影效果。