3.3 设置段落格式_HTML5从入门到精通（第4版）-QQ阅读男生轻小说网

上QQ阅读APP看书，第一时间看更新

3.3　设置段落格式

文字的组合是段落，例如，在Word文档中输入完一段文字后，按Enter键，就会生成一个段落。在HTML中同样可以以段落形式显示文字，本节将介绍与段落相关的一些标签。

3.3.1　段落标签—

在HTML语言中，段落通过标签来表示。语法格式如下。

     <p>段落文字</p>

【例3.8】巧用段落标签介绍明日学院。（实例位置：资源包\TM\sl\3\8）

使用段落标签在网页中介绍明日学院，并且添加创意边框。具体代码如下。

运行这段代码，可以看到段落标签成功地对文字进行了分段，效果如图3.8所示。

图3.8　段落标签的使用效果

3.3.2　换行标签—

默认情况下，段落与段落之间是隔行换行的，这样使得文字的行间距会比较大。如果要避免这种情况，则需要使用换行标签 来完成文字的紧凑换行显示。语法格式如下。

     文字<br>

一个 标签代表一个换行符，多次使用标签可以多次换行。

【例3.9】网页中显示《三国演义》片首歌词。（实例位置：资源包\TM\sl\3\9）

本实例使用标签和 标签实现在网页中显示《三国演义》片首歌词，代码如下。

     <p align="center">
          临江仙<br>
          <!--使用2个换行标签-->
          杨慎<br><br>
          <!--以下使用换行标签-->
          滚滚长江东逝水，浪花淘尽英雄。<br>
          是非成败转头空。<br>
          青山依旧在，几度夕阳红。<br>
          白发渔樵江渚上，惯看秋月春风。<br>
          一壶浊酒喜相逢。<br>
          古今多少事，都付笑谈中。<br>
     </p>

运行这段代码，效果如图3.9所示。

图3.9　文字的换行显示

说明

实际开发中，也可以使用 标签进行换行。

3.3.3　保留原始排版方式标签—<pre>

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

     <pre>要保留原始格式的文字<pre>

【例3.10】巧用原始排版标签输出二十四节气歌。（实例位置：资源包\TM\sl\3\10）

本实例使用原始排版标签<pre>实现以设计网页时编写的默认格式输出二十四节气歌。具体代码如下。

     <!DOCTYPE html>
     <html>
     <head>
          <!--指定页面编码格式-->
          <meta charset="UTF-8">
          <!--指定页头信息-->
          <title>原格式标签</title>
     </head>
     <body>
          <h1>原格式标签&<pre&></h1>
          <!--使用原始排版标签，输出二十四节气歌-->
          <pre>
                          二十四节气歌
                               ——传统版
               春雨惊春清谷天，夏满芒夏暑相连。
               秋处露秋寒霜降，冬雪雪冬小大寒。
               每月两节不变更，最多相差一两天。
               上半年来六廿一，下半年是八廿三。
          </pre>
     </body>
     </html>

运行这段代码，可以看到排版效果中的《二十四节气歌》的显示形式与设计网页时是一致的，如图3.10所示。

图3.10　保留原始的排版效果

3.3.4　向右缩进标签—<blockquote>

<blockquote>标签可以用于实现页面文字的段落缩进，使用该标签时，每使用一次，段落就缩进一次。另外，<blockquote>标签可以嵌套使用，以达到不同的缩进效果。语法格式如下。

     <blockquote>文字</blockquote>

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

【例3.11】巧用<blockquote>标签阶梯式呈现古文名句。（实例位置：资源包\TM\sl\3\11）

本实例实现在网页中显示《荀子》中的4句名句时，除了第一句使用<blockquote>标签缩进显示，其他每句都通过嵌套使用<blockquote>标签进行设置，以使其相比上一句的位置再向右缩进一次。具体代码如下。

     <!DOCTYPE html>
     <html>
     <head>
         <meta charset="utf-8">
         <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>

运行这段代码，效果如图3.11所示。

图3.11　段落的缩进效果

编程训练（答案位置：资源包\TM\sl\3\编程训练）

【训练5】实现新年快乐字符画　使用<pre>标签实现“新年快乐”字符画。

【训练6】制作清明节放假通知　使用<h1>标签和标签实现在网页中显示清明节放假通知。