在网页中如果要把文字有条理地显示,离不开段落标记的使用。在文本编辑窗口中,输入完一段文字后,按下回车键后就生成了一个段落。在HTML 中可以通过标记实现段落的效果,下面具体介绍和段落相关的一些标记。
1 段落标记——p
在HTML 语言中,段落通过<p>标记来表示。
语法:<p>段落文字</p>
说明:与其他标记不同的是,段落标记可以没有结束标记</p>,而每一个新的段落标记的开始同时也意味着上一个段落的结束。
实例代码:
<html>
<head>
<title>输入段落文字</title>
</head>
<body>
<p>小镇上七千多人依水而居,镇上的主要街道有9 条。
<p>临河筑的民房、黑瓦白墙,屋脊起翘,鳞次栉比,古色古香,具有“人家尽忱河,水巷小桥多”的特色。
</p>
<p>又似一幅古雅、秀丽的水乡风情画。</p>
</body>
</html>
运行这段代码,可以看到两种方法的段落标记都可以成功地将文字分段。
2 取消文字换行标记——nobr
在网页的显示过程中,如果某一行的文字宽度过长,浏览器会自动对这段文字进行换行处理。如果用户在创作时不希望被自动换行,则可以通过nobr 属性来实现。
语法:<nobr>不换行显示的文字</nobr>
说明:在标记之间的文字在显示的过程中不会自动换行。
实例代码:
<html>
<head>
<title>文字不换行显示</title>
</head>
<body>
<!--当浏览器宽度不够时,文本内容会自动换行显示-->
<p>HTML 的英文全称是Hyper Text Markup Language,直译为超文本标记语言,它是全球广域网上描述网
页内容和外观的标准。</p>
<!--下面这段文字不会自动换行显示,当浏览器宽度不够时,会出
现滚动条-->
<p><nobr>HTML 的英文全称是Hyper Text Markup Language,
直译为超文本标记语言,它是全球广域网上描述网页内容和外观的标
准。</nobr></p>
</body>
</html>
运行这段代码,可以看到强制文字不换行的效果。
3 换行标记——br
在网页的文字显示过程中,除了可以让文字不自动换行之外,还可以使用<br>标记将文字强制换行。这一换行标记与段落标记不同,段落标记的换行是隔行的,而使用换行标记能使两行的文字更加紧凑。
语法:<br>
说明:一个<br>标记代表一个换行,连续的多个标记可以多次换行。
实例代码:
<html>
<head>
<title>文字的换行效果</title>
</head>
<body>
下面是一段描写白龙池风景的文字:<br><br>
在建岱桥北的溪谷内是著名的白龙池。<br>
相传此处是东海龙王的小儿子小白龙在此潜居镇山治水。<br>
这里上有百丈崖悬流下掷,似玉龙腾飞,顺着峡谷穿山越涧泻
入池内。
</body>
</html>
运行这段代码,可以看到使用换行标记的效果。
4 保留原始排版方式标记——pre
在网页创作中,一般是通过各种标记对文字进行排版的。但是在实际应用中,往往需要一些特殊的排版效果,这样使用标记控制起来会比较麻烦。解决的方法就是保留文本格式的排版效果,例如空格、制表符等。如果要保留原始的文本排版效果,则需要使用<pre>标记。
语法:<pre>文字</pre>
说明:在标记之间的文字会保留文档中的空白,按照原始的文本格式进行显示。
实例代码:
<!--使用标记保留文字的排版效果-->
<html>
<head>
<title>保留原始排版方式</title>
</head>
<body>
<p>下面是原始文字的排版效果:</p>
<pre>
O O K K
O O K K
O O K K
O O KK
O O K K
O O K K
O O K K
</pre>
</body>
</html>
运行这段代码,可以看到运行效果和文本中的效果相同。
5 居中对齐标记——center
对于段落来说,和普通文字类似,有时候也需要将段落居中。在HTML 语言中提供了专门的标记。
语法:<center>文字</center>
说明:在标记之间的文字会自动居中显示。
实例代码:
<html>
<head>
<title>居中对齐</title>
</head>
<body>
<center>
<p>春雪</p>
新年都未有芳华,二月初惊见草芽。<br>
白雪却嫌春色晚,故穿庭树作飞花。<br>
</center>
</body>
</html>
运行这段代码,可以看到这首古诗居中显示。
6 向右缩进标记——blockquote
使用<blockquote>标记可以实现页面文字的段落缩进。这一标记也是每使用一次,段落就缩进一次,可以嵌套使用,以达到不同的缩进效果。
语法:<blockquote>文字</blockquote>
说明:在该标记之间的文字会自动缩进。
实例代码:
<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>
运行这段代码,可以看到缩进效果。