HTML5从入门到精通 (第2版)
上QQ阅读APP看书,第一时间看更新

3.3 设置段落格式

教学录像:光盘\TM\lx\3\设置段落格式.exe

文字属性的设定我们已经做了介绍,文字的组合就是段落,在文本编辑窗口中,输入完一段文字后,按下Enter键就生成了一个段落。在HTML中可以通过标记实现段落的效果,下面具体介绍和段落相关的一些标记。

3.3.1 段落标记——p

在HTML语言中,段落通过<p>标记来表示。

语法

        <p>段落文字</p>

语法解释

可以使用成对的<p>标记来包含段落,也可以使用单独的<p>标记来划分段落。

【例3.11】实例代码。(实例位置:光盘\TM\sl\3\11)

        <html>
        <head>
        <title>输入段落文字</title>
        </head>
        <body>
        <p>张而不弛,文武弗能也;</p>
        弛而不张,文武弗为也,一张一弛,文武之道也。<p>
        </body>
        </html>

运行这段代码,可以看到两种方法的段落标记都可以成功地将文字分段。效果如图3.11所示。

图3.11 段落效果

3.3.2 取消文字换行标记——nobr

如果浏览器中单行文字的宽度过长,浏览器会自动将该文字换行显示,如果希望强制浏览器不换行显示,可以使用相应的标记。

语法

        <nobr>不换行显示的文字</nobr>

语法解释

标记之间的文字在显示的过程中不会自动换行。

【例3.12】实例代码。(实例位置:光盘\TM\sl\3\12)

        <html>
        <head>
        <title>文字不换行显示</title>
        </head>
        <body>
        <!--当浏览器宽度不够时,文本内容会自动换行显示-->
        World Wide Web(万维网WWW)是一种建立在Internrt上的、全球性的、交互的、多平台的、分布式的信息资
        源网络。它采用HTML语言描述超文本(Hypertext)文件。这里所说的超文本指的是包含有链接关系的文件,并
        且包含了多媒体对象的文件。<p>
        <!--下面这段文字不会自动换显示,当浏览器宽度不够时,会出现滚动条-->
        <p><nobr>World Wide Web(万维网WWW)是一种建立在Internrt上的、全球性的、交互的、多平台的、分布
        式的信息资源网络。它采用HTML语言描述超文本(Hypertext)文件。这里所说的超文本指的是包含有链接关系
        的文件,并且包含了多媒体对象的文件。</nobr></p>
        </body>
        </html>

运行这段代码,可以看到强制文字不换行的效果,如图3.12所示。

图3.12 文字不换行的效果

3.3.3 换行标记——br

段落与段落之间是隔行换行的,文字的行间距过大,这时可以使用换行标记来完成文字的紧凑换行显示。

语法

        <br>

语法解释

一个<br>标记代表一个换行,连续的多个标记可以多次换行。

【例3.13】实例代码。(实例位置:光盘\TM\sl\3\13)

        <html>
        <head>
        <title>文字的换行</title>
        </head>
        <body>
        龚自珍<br/><br/>
        九州生气恃风雷,万马齐喑究可哀。<br/>
        我劝天公重抖擞,不拘一格降人才。<br/>
        </body>
        </html>

图3.13 文字的换行

运行这段代码,可以看到使用换行标记的效果,如图3.13所示。

3.3.4 保留原始排版方式标记——pre

在网页创作中,一般是通过各种标记对文字进行排版的。但是在实际应用中,往往需要一些特殊的排版效果,这样使用标记控制起来会比较麻烦。解决的方法就是保留文本格式的排版效果,例如空格、制表符等。如果要保留原始的文本排版效果,则需要使用<pre>标记。

【例3.14】实例代码。(实例位置:光盘\TM\sl\3\14)

        <html>
        <head>
        <title>保留原始排版方式</title>
        </head>
        <body>
        <p>下面是原始文字的排版效果</p>
        <pre>
                      m            mm                 rrrrrrrr
                     mmmm         mm mm              rrr   rrr
                    mm  mm      mm    mm             rrr  rrr
                   mm    mm    mm      mm            rrr rrr
                  mm      mm  mm        mm           rrr   rrr
                 mm        mmm           mm         rrr    rrrr
        </pre>
        </body>
        </html>

运行这段代码,可以看到运行效果和文本中的效果相同,如图3.14所示。

图3.14 保留原始的排版效果

3.3.5 居中对齐标记——center

对于段落来说,和普通文字类似,有时候也需要将段落居中。在HTML语言中提供了专门的标记。

语法

        <center>文字</center>

语法解释

在标记之间的文字会自动居中显示。

【例3.15】实例代码。(实例位置:光盘\TM\sl\3\15)

        <html>
        <head>
        <title>文字的居中对齐</title>
        </head>
        <body>
        <center>
        <p>汉乐府《长歌行》</p>
        百川东到海,何时复西归?<br/>
        少壮不努力,老大徒伤悲。
        </center>
        </body>
        </html>

运行这段代码,可以看到这首古诗居中显示,如图3.15所示。

图3.15 段落的居中显示

3.3.6 向右缩进标记——blockquote

使用<blockquote>标记可以实现页面文字的段落缩进。这一标记也是每使用一次,段落就缩进一次,可以嵌套使用,以达到不同的缩进效果。

语法

        <blockquote>文字</blockquote>

语法解释

在该标记之间的文字会自动缩进。

【例3.16】实例代码。(实例位置:光盘\TM\sl\3\16)

        <html>
        <head>
        <title>段落的缩进效果</title>
        </head>
        <body>
        《荀子》
        <blockquote>不登高山</blockquote>
        <blockquote><blockquote>不知天之高也</blockquote></blockquote>
        <blockquote><blockquote><blockquote>不临深溪</blockquote></blockquote></blockquote>
        <blockquote><blockquote><blockquote><blockquote>
        不知地之厚也</blockquote></blockquote></blockquote></blockquote>
        </body>
        </html>

在上面的代码中,多次嵌套使用了<blockquote>标记,运行这段代码的效果如图3.16所示。

图3.16 段落的缩进效果