2.4 基本排版元素

段落和水平线属于最基本的文档结构元素。在网页制作过程中，通过段落的排版即可制作出简单的网页。以下讲解基本的文档结构元素。

2.4.1 段落标签<p>

由于浏览器忽略用户在HTML编辑器中输入的回车符，为了使文字段落排列得整齐、清晰，常用段落标签<p>…</p>实现这一功能。段落标签<p>是HTML格式中特有的段落元素，在HTML格式里不需要在意文章每行的宽度，不必担心文字太长而被截掉，它会根据窗口的宽度自动转折到下一行。段落标签的格式如下。

【例2-6】 列出包含<p>标签的多种属性。本例在浏览器中的显示效果如图2-6所示。

【说明】段落标签<p>会在段落前后加上额外的空行，相当于使段落间的间距加了两个换行标签<br/>，用以区别不同段落。

2.4.2 换行标签<br/>

网页内容并不都是像段落那样，有时候没有必要用多个<p>标签去分割内容。如果编辑网页内容只是为了换行，而不是从新段落开始的话，可以使用<br/>标签。

<br/>标签将打断HTML文档中正常段落的行间距和换行。将<br/>放在任意一行中都会使该行换行，如果将<br/>放在一行的末尾，可以使后面的文字、图像、表格等显示于下一行，而又不会在行与行之间留下空行，即强制文本换行。换行标签的格式如下。

浏览器解释为从该处换行。换行标签单独使用，可使页面清晰、整齐。

【例2-7】 制作爱心包装联系方式的页面。本例的显示效果如图2-7所示。

【说明】用户可以使用段落标签<p>制作页面中较大的行间距，如本例中“客服邮箱”和“客服电话”之间的间距，也可以使用两个<br/>标签实现这一效果。

2.4.3 预格式化标签<pre>

<pre>标签可定义预格式化的文本。<pre>标签中的文本块通常会保留空格和换行符，而文本也会呈现为等线字体。<pre>标签的一个常见应用就是用来表示计算机的源代码。预格式化标签的格式如下。

【例2-8】 <pre>标签的基本用法。本例在浏览器中显示的效果如图2-8所示。

【说明】<pre>标签所定义的文本块里不允许包含使段落断开的标签（例如<h#>标签、<p>标签）。

2.4.4 缩排标签<blockquote>

<blockquote>标签可定义一个文本块引用。<blockquote>与</blockquote>之间的所有文本都会从常规文本中分离出来，通常在左、右两边进行缩进，而且有时使用斜体。也就是说，文本块引用拥有自己的空间。缩排标签的格式如下。

【例2-9】 <blockquote>标签的基本用法。本例在浏览器中的显示效果如图2-9所示。

【说明】浏览器会自动在<blockquote>标签前后进行换行，并增加外边距。

2.4.5 水平线标签<hr/>

水平线可以作为段落与段落之间的分隔线，使得文档结构清晰、层次分明。当浏览器解释到HTML文档中的<hr/>标签时，会在此处换行，并加入一条水平线段。水平线标签的格式如下。

【例2-10】 <hr/>标签的基本用法。本例在浏览器中的显示效果如图2-10所示。

【说明】<hr/>标签强制执行一次换行，将导致段落的对齐方式重新回到默认设置。

2.4.6 案例——制作爱心包装品牌简介页面

经过前面文档结构元素的学习，接下来使用基本的段落排版制作爱心包装品牌简介页面。

【例2-11】 制作爱心包装品牌简介页面。本例在浏览器中的显示效果如图2-11所示。