2.5. 简单区块元素

区块元素具有类似段落的块结构，我们就从段落开始介绍区块元素。

2.5.1. 段落

段落（paragraph）几乎是排版时最常用的结构，HTML 中使用 p 元素来进行创建。

<em>段落前的文本</em>
<p>这是一个段落。</p>
<strong>段落后的文本</strong>

如上例所示，p 元素很好地展示了区块元素的特点：

• 在新行上开始
• 占据其容器（父元素）水平方向的整行空间
• 可以容纳内联元素

对于 p 元素，可以设置其 align 属性以指定该段落中文本或内联元素的水平对齐（alignment）方式，align 属性的属性值有：

• left：左对齐
• center：居中对齐
• right：右对齐
• justify：两端对齐

其中，justify 使得文本行的左右两端都放在段落的内边界上，然后调整单词或字母间的间隔，使各行的长度恰好相等，实现文本两端都对齐的效果，在打印领域比较常见。浏览器对于 justify 属性值的实现方式并不一致，而且在纯汉字排版时效果并不明显。

<p align="left">段落元素 p 的 align 属性值被设置为 left 时，段落内的文本会居左显示。
由于简体中文是自左向右显示文本，left 是 align 属性的默认值，即在不指定段落的 align 属性值时会自动居左对齐。</p>
<p align="center">居中对齐</p>
<p align="right">段落中文本的实际宽度超出段落宽度时会自动换行，此时对齐设置视觉上主要体现在最后一行。</p>
<p align="justify">HTML was originally developed by Tim Berners-Lee while at CERN, and popularized by the
Mosaic browser developed at NCSA. During the course of the 1990s it has blossomed with the explosive growth
of the Web. During this time, HTML has been extended in a number of ways. The Web depends on Web page authors
and vendors sharing the same conventions for HTML. This has motivated joint work on specifications for HTML.</p>

在浏览器中查看本书时，如果缓慢拖动浏览器窗口句柄以缩放窗口宽度时，会发现示例的第 4 个段落内的字符或单词间距的轻微变化，其文本左右两侧始终紧贴段落边缘。

对于居中对齐设置来说，HTML 还提供了一个名为 center 的元素，直接把文本或内联元素放置到该元素的开始和结束标签中即可，如：

<center>The CENTER element is exactly equivalent to specifying the DIV element with the
align attribute set to "center". <strong>The CENTER element is deprecated.</strong></center>

作为最基本的区块元素，段落是网页文档中最常见的结构之一，在一些网页设计软件（如 Dreamweaver）中，设计视图按下回车键即可创建一个新的段落。

2.5.2. 标题

此处讨论的标题不是 head 元素中不可见的文档标题 title，而是用于对所介绍章节主题的简要描述，使得整个文档形成一定的目录结构。

HTML 中定义了 6 级 标题（heading），从 h1 到 h6，h1 定义网页中最上层的标题，h6 定义最底层的标题。

<h1>HTML 4.01 Specification</h1>
<h2>17. Forms</h2>
<h3>13.Form submission</h3>
<h4>3. Processing form data</h4>
<h5>Step four: Submit the encoded form data set</h5>
<h6>"get" method</h6>

从示例可以看出，标题文本通常默认被显示为粗体，从 h1 到 h6，文本大小在递减。通常 h1 元素会被显示为很大的字体，因此会有一些网页设计人员使用 h2 元素代替 h1 元素来显示最上层的标题，这样做不会对读者产生影响，在语法上也不会产生错误，但会使那些试图“理解网页结构”的搜索引擎或其它软件感到迷惑。 请确保把 h1 用于最顶层的标题，h2、h3等依次用于较低的层级，以使得整个文档具有逻辑上正确的层次结构。

2.5.3. 区块引用

简短引文可以使用前面介绍过的内联元素 q 来包含，成段出现的 区块引用（block quote）需要使用 blockquote 元素。和 q 元素一样，blockquote 元素支持使用 cite 属性指定引用的来源。

<blockquote cite="http://www.w3.org/TR/1999/REC-html401-19991224/struct/text.html#h-9.2.2">
<p>We recommend that style sheet implementations provide a mechanism for inserting quotation marks before and
after a quotation delimited by BLOCKQUOTE in a manner appropriate to the current language context and the
degree of nesting of quotations.</p>
<p>However, as some authors have used BLOCKQUOTE merely as a mechanism to indent text, in order to preserve the
intention of the authors, user agents should not insert quotation marks in the default style.</p>
</blockquote>

一般情况下，浏览器默认使得 blockquote 元素包含的引文部分文本在左右两侧产生看起来像文本缩进的留白，以和正文部分相区分。

2.5.4. 联系信息

address 元素用于定义文档或文章的作者或拥有者的联系信息（如电子邮件、地址 等），一般出现在文档的开头或结尾，如 W3C 某个页面的联系信息可能是这样的：

<address>
    <a href="../People/Raggett/">Dave Raggett</a>,
    <a href="../People/Arnaud/">Arnaud Le Hors</a>,
    contact persons for the
    <a href="Activity">W3C HTML Activity</a>
    <br />
    $Date: 1999/12/24 23:07:14 $
</address>

默认情况下，address 元素中的文本将以斜体显示。

2.5.5. 预格式化文本

pre 元素可定义预格式化的文本（preformatted text）。被包围在 pre 元素中的文本将会呈现为等宽字体；同时，该元素更重要的特点是会使得我们前面提到的 HTML 源代码中“ 连续出现的多个空白区域会被收缩成一个空格符”这个规则失效，即该元素中所有空白区域都会被保留，这在某些场景中比较有用。

比如，在编写某些代码时为了美观、易读等排版需要直接使用的一些制表符、换行、空格等，如果直接放到网页中显示结果会非常糟糕：

<p>
    function(array) {
        var i = 0,
        len = array.length,
        j, d;
        for (; i < len; i++) {
        for (j = 0; j < len; j++) {
            if (array[i] < array[j]) {
                d = array[j];
                array[j] = array[i];
                array[i] = d;
            }
        }
    }
</p>

但是只需要把例子中的 p 元素换为 pre 元素，我们就能得到一个符合我们要求和原代码基本一致的结果：

<pre>
    function(array) {
        var i = 0,
        len = array.length,
        j, d;
        for (; i < len; i++) {
        for (j = 0; j < len; j++) {
            if (array[i] < array[j]) {
                d = array[j];
                array[j] = array[i];
                array[i] = d;
            }
        }
    }
</pre>

    function(array) {
        var i = 0,
        len = array.length,
        j, d;
        for (; i < len; i++) {
        for (j = 0; j < len; j++) {
            if (array[i] < array[j]) {
                d = array[j];
                array[j] = array[i];
                array[i] = d;
            }
        }
    }

如果使用 pre 元素呈现 HTML 代码，还是需要在 pre 元素内部把一些 HTML 的保留字符使用字符引用来代替，即 pre 元素只涉及到空白区域的处理而不会总是把任意 HTML 源代码中的字符原貌呈现出来，如：

<pre>
    &lt;p&gt;
        <em><strong>  pre  </strong></em> 用于与格式化文本。
    &lt;/p&gt;
</pre>

    <p>
          pre   用于与格式化文本。
    </p>

在早期的计算机网络中，由于客户端不支持图片，流行一种被称为 ASCII艺术 的创作方式，即使用一些 ASCII 字符来表达图片。这些作品中可能存在大量空白区域，如

      \    /\
       )  ( ')
      (  /  )
       \(__)|

如果想把这种作品放到网页上，最好、最直接的方法是把字符包含在 pre 元素中。

<pre>
      \    /\
       )  ( ')
      (  /  )
       \(__)|
</pre>

2.5.6. 水平线

hr 元素用于在页面中创建一条 水平线（horizontal rule），是空元素。

hr 元素的常用属性有：

• color: 颜色，参见 font 元素的 color 属性
• width: 宽度，参见 img 元素的 width 属性
• align: 对齐方式，参见 p 元素的 align 属性，不能是 justify

默认情况下，水平线会占用其容器（父元素）水平方向的所有空间，所以只有在水平线 width 小于其容器宽度，其 align 属性的设定才能看到实际效果。即使水平线 width 小于 其容器的宽度，作为区块元素，水平线左右两侧也无法在放置其它元素。

另外，可以使用 size 属性可以指定水平线的 高度，其属性值是一个整数数值，用于表示该水平线高度的像素数。

在 size>=3 时，可以非常明显地看到水平线上下两条边框之间的部分呈现出一种凹陷下去的阴影效果。如果要 取消阴影，可以使用属性 noshade，这是一个布尔属性，其属性值和属性名一样，属性值也可以省略不写。