首页 > 编程笔记
HTML <pre>标签:预定义格式
HTML <pre> 标签可以定义预定义文本,它是计算机代码示例的理想元素。
预定义文本就是可以保持文本固有的换行和空格。例如:
对于包含重要的空格和换行的文本(如这里显示的C语言代码),使用 pre 元素是非常适合的。
如果要显示包含 HTML 元素的内容,应将包围元素名称的
一定要对页面进行验证,检查是否在 pre 中嵌套了 HTML 元素。不要将 pre 作为逃避以合适的语义标记内容和用 CSS 控制样式的快捷方式。
例如,如果想发布一篇在字处理软件中写好的文章,不要为了保留原来的格式而简单地将它复制、粘贴到 pre 里。相反,应该使用 p 元素,以及其他相关的文本元素标记内容,编写 CSS 控制页面的布局。
同段落一样,pre 默认从新一行开始显示,浏览器通常会对 pre 里面的内容关闭自动换行。如果这些内容很宽,就会影响页面的布局,或产生横向滚动条。
使用下面的 CSS 样式可以对 pre 包含的内容打开自动换行,但在 IE 7 及以下版本中并不适用。
预定义文本就是可以保持文本固有的换行和空格。例如:
<pre> #include <stdio.h> int main() { puts("C语言中文网"); return 0; } </pre>演示效果:
对于包含重要的空格和换行的文本(如这里显示的C语言代码),使用 pre 元素是非常适合的。
要注意 code 元素的使用,该元素可以标记 pre 外面的代码块或与代码有关的文本。
预定义文本通常以等宽字体显示,可以使用 CSS 改变字体样式。如果要显示包含 HTML 元素的内容,应将包围元素名称的
<
和>
分别改为其对应的字符实体 < 和 >。否则,浏览器就会试着显示这些元素。一定要对页面进行验证,检查是否在 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,格式就丢失了。