4.1 段落排版和换行

网页的外观是否美观，在很大程度上取决于其排版。在页面中出现大段的文字，通常采用分段进行规划，对换行也有极其严格的划分。本节从段落的细节设置入手，使读者学习后能利用标签轻松自如地处理大段的文字。

4.1.1 给大段文字进行分段

简单地对文字分段常用<p></p>标签，即段落的开始用<p>，段落的结束用</p>标签。某些网页分段时省略了</p>，即作为单标签使用，因为下一段开始的<p>标签就意味上一段的结束。

在D:\web\目录下创建网页文件，命名为p.htm，编写代码如代码4.1所示。

在浏览器地址栏输入http://localhost/p.htm，浏览效果如图4.1所示。

通过<p></p>标签的分段，使大段的文字排版井井有条。

4.1.2 给文字加入空格

仔细观察如图4.1所示，图中的分段感觉有点别扭，因为每段开始没有字符空格。

前面章节已学习过，在HTML代码中直接用键盘敲击空格键，是无法显示在页面上的。HTML使用“&nbsp；”表现1个空格字符（英文的空格字符）。由于1个中文字符占两个英文字符的宽度，所以在段落的首行开头加上4个“&nbsp；”字符，修改p.htm的代码如代码4.2所示。

在浏览器地址栏输入http://localhost/p.htm，浏览效果如图4.2所示。

段落已经初步成形，空格已经表现了出来。读者可以在段落中任意加上空格符测试。

4.1.3 设置文字换行与不换行

如图4.1所示看上去已经没有问题了，当文字到达浏览器的边界后将自动换行。但是当调整浏览器的宽度时，文字换行的位置也相应发生变化，格式显得相当混乱。为了规范格式，读者应该在编写代码时在需要换行的位置用单标签<br/>强制换行。反之，不需要换行的部分用双标签<nobr></nobr>包含。修改p.htm代码如代码4.3所示。

在浏览器地址栏输入http://localhost/p.htm，浏览效果如图4.3所示。

由本例可得，被<nobr></nobr>包含的部分不会自动换行，除非有<br/>强制换行。

4.1.4 设置文字对齐方式

段落中的文字在某些时候需要有不同的对齐方式，默认对齐方式是左对齐。<p>标签的对齐属性为align，通过设置align为left、right或center值实现左对齐、右对齐和居中对齐。修改p.htm代码如代码4.4所示。

在浏览器地址栏输入http://localhost/p.htm，浏览效果如图4.4所示。

4.1.5 添加水平分隔线

HTML提供了修饰段落的水平分隔线，在很多场合中可以轻松使用，不需要另外作图。水平分隔线的标签是单标签<hr/>，默认情况下占一行。

在D:\web\目录下创建网页文件，命名为hr.htm，编写代码如代码4.5所示。

在浏览器地址栏输入http://localhost/hr.htm，浏览效果如图4.5所示。

一个简单的<hr/>标签就可以实现分隔线，轻松地修饰了段落排版，使之更美观。不过对于不同的应用场合，<hr/>默认单一的线条样式显然不能满足要求。<hr/>标签的多种属性解决了这个问题，常用的属性有width、size、align、color和title。width，即宽度设置，属性值默认单位为像素，也可以用百分比来表示分隔线所占空间的比例；size可以理解为分隔线的厚度或高度，属性值默认单位同宽度；align为对齐方式，类似于<p>的align；color，即颜色，根据需要设置分隔线的不同颜色；title属性使用不多，浏览者光标悬停在分隔线上时出现属性值的内容提示。

<hr/>还有一个属性是noshade，当分隔线没有设置颜色，并且设置了一定的size时，分隔线看上去是立体下凹的，有阴影。如果使用了noshade属性，分隔线将会呈现单色。修改hr.htm代码如代码4.6所示。

在浏览器地址栏输入http://localhost/hr.htm，浏览效果如图4.6所示。