首页 > 编程笔记

HTML <pre>标签:预定义格式

HTML <pre> 标签可以定义预定义文本,它是计算机代码示例的理想元素。

预定义文本就是可以保持文本固有的换行和空格。例如:
<pre>
#include <stdio.h>
int main()
{
    puts("C语言中文网");
    return 0;
}
</pre>
演示效果:
pre标签演示效果

对于包含重要的空格和换行的文本(如这里显示的C语言代码),使用 pre 元素是非常适合的。

要注意 code 元素的使用,该元素可以标记 pre 外面的代码块或与代码有关的文本。

预定义文本通常以等宽字体显示,可以使用 CSS 改变字体样式。

如果要显示包含 HTML 元素的内容,应将包围元素名称的<>分别改为其对应的字符实体 &lt; 和 &gt;。否则,浏览器就会试着显示这些元素。

一定要对页面进行验证,检查是否在 pre 中嵌套了 HTML 元素。不要将 pre 作为逃避以合适的语义标记内容和用 CSS 控制样式的快捷方式。

例如,如果想发布一篇在字处理软件中写好的文章,不要为了保留原来的格式而简单地将它复制、粘贴到 pre 里。相反,应该使用 p 元素,以及其他相关的文本元素标记内容,编写 CSS 控制页面的布局。

同段落一样,pre 默认从新一行开始显示,浏览器通常会对 pre 里面的内容关闭自动换行。如果这些内容很宽,就会影响页面的布局,或产生横向滚动条。

使用下面的 CSS 样式可以对 pre 包含的内容打开自动换行,但在 IE 7 及以下版本中并不适用。
pre {
    white-space: pre-wrap;
}
在大多数情况下,不推荐对 div 等元素使用 white-space:pre 以代替 pre,因为空格可能对这些内容(尤其是代码)的语义非常重要,而只有 pre 才能始终保留这些空格。同时,如果用户在其浏览器中关闭 CSS,格式就丢失了。

推荐阅读