
2.2 文本排版
在网页中如果要把文字都合理地显示出来,离不开段落标记的使用。对网页中文字段落进行排版,并不像文本编辑软件Word那样可以定义许多模式来安排文字的位置。在网页中要让某一段文字放在特定的地方是通过HTML标记来完成的。
2.2.1 换行标记<br/>与段落标记<p>
浏览器在显示网页时,完全按照HTML标记来解释HTML代码,忽略多余的空格和换行。在HTML文件里,不管输入多少空格(按空格键)都将被视为一个空格;换行(按Enter键)也是无效的。在HTML中,换行使用<br/>标记,换段使用<p>标记。
1.换行标记<br/>
换行标记<br/>是一个单标记,没有结束标记,是英文单词break的缩写,作用是将文字在一个段内强制换行。一个<br/>标记代表一个换行,连续的多个标记可以实现多次换行。使用换行标记时,在需要换行的位置添加<br/>标记即可。例如,下面的代码实现了对文本的强制换行。
【例2.4】(实例文件:ch02\2.4.html)

虽然在HTML源代码中,主体部分的内容在排版上没有换行,但是增加<br/>标记后,在IE 11.0中的预览效果如图2-7所示,实现了换行效果。

图2-7 换行标记的使用
2.段落标记<p>
段落标记是双标记,即<p></p>,在<p>开始标记和</p>结束标记之间的内容形成一个段落。如果省略结束标记,从<p>标记开始,直到下一个段落标记之前的文本都在一段段落内。段落标记中的p是英文单词paragraph(段落)的首字母,用来定义网页中的一段文本,文本在一个段落中会自动换行。
【例2.5】(实例文件:ch02\2.5.html)

在IE 11.0中的预览效果如图2-8所示,<p>标记将文本分成了4个段落。

图2-8 段落标记的使用
2.2.2 标题标记<h1>~<h6>
在HTML文档中,文本的结构除了以行和段出现之外,还可以作为标题存在。通常一篇文档最基本的结构就是由若干不同级别的标题和正文组成的。
HTML文档中包含有各种级别的标题,各种级别的标题由<h1>到<h6>元素来定义,<h1>至<h6>标题标记中的字母h是英文headline(标题行)的简称。其中,<h1>代表1级标题,级别最高,文字也最大,其他标题元素依次递减,<h6>级别最低。
【例2.6】(实例文件:ch02\2.6.html)

在IE 11.0中的预览效果如图2-9所示。

图2-9 标题标记的使用
技巧提示
作为标题,它们的重要性是有区别的,其中<h1>标题的重要性最高、<h6>的最低。