HTML中的文字与段落标记之三:段落标记

在网页中如果要把文字有条理地显示,离不开段落标记的使用。在文本编辑窗口中,输入完一段文字后,按下回车键后就生成了一个段落。在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>

运行这段代码,可以看到缩进效果。

html专题相关文章

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.liangtzi.net/index.php/post/277.html