HTML <pre> 标签-代码号

HTML <pre> 标签指南：保留格式的文本显示

HTML中的<pre>标签用于定义预格式化的文本内容。被<pre>标签包裹的文本会保持原有的空格和换行格式，并以等宽字体（通常是Courier字体）显示在网页上。这个标签在展示代码示例、诗歌、ASCII艺术等需要精确格式的内容时特别有用。

pre标签的核心特性

<pre>标签最重要的特点就是能够保持文本的原始格式。与普通HTML文本不同，在pre标签内的多个空格、制表符和换行符都会被浏览器原样呈现，这使得它成为展示程序代码的理想选择。

从语义化角度分析，pre标签向浏览器和搜索引擎明确表示：这段内容需要保持原有的排版格式，这对于代码展示和技术文档的SEO优化很有帮助。

基础使用示例

下面是一个简单的pre标签使用示例：

<!DOCTYPE html>
<html>
<head>
    <title>代码号编程学习 - pre标签基础</title>
</head>
<body>
    <pre>
function welcome() {
    console.log("欢迎来到代码号编程学习");
    console.log("这里展示pre标签的用法");
}
    </pre>
</body>
</html>

显示效果会保持代码的缩进和换行结构，这对于阅读和理解代码逻辑非常重要。

编程代码展示实战

pre标签最常见的应用场景就是展示各种编程语言的代码示例：

<pre>
#include <stdio.h>

int main() {
    // 这是C语言示例
    printf("Hello, 代码号学习平台!\n");
    for(int i=0; i<3; i++) {
        printf("循环次数: %d\n", i);
    }
    return 0;
}
</pre>

经验分享：在项目开发中，我发现在pre标签内展示代码时，经常会遇到内容宽度超出容器的情况。这时候可以使用CSS的overflow: auto属性来添加滚动条，而不是让内容撑破布局。这是一个很实用的小技巧。

与code标签的配合使用

为了更好地语义化，pre标签经常与<code>标签结合使用：

<pre><code>
def python_example():
    """
    这是Python代码示例
    演示pre与code标签的结合使用
    """
    numbers = [1, 2, 3, 4, 5]
    squares = [x**2 for x in numbers]
    print(f"平方结果: {squares}")
</code></pre>

这种组合方式既保持了格式，又明确了内容的代码性质，对SEO和可访问性都有好处。

CSS样式定制技巧

虽然pre标签默认使用等宽字体，但我们可以通过CSS来自定义样式：

pre {
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    border-left: 3px solid #f36d33;
    color: #666;
    page-break-inside: avoid;
    font-family: monospace;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1em 1.5em;
    display: block;
    word-wrap: break-word;
}

响应式设计考虑

在移动设备上，pre标签的内容可能会出现横向滚动问题。我的建议是：

@media screen and (max-width: 768px) {
    pre {
        white-space: pre-wrap;
        word-wrap: break-word;
    }
}

这样可以在小屏幕设备上实现更好的显示效果。

本节课程知识要点

pre标签保持文本的原始空格和换行格式
默认使用等宽字体显示内容
非常适合展示代码示例和技术文档
可以与code标签结合使用增强语义
通过CSS可以自定义显示样式
需要考虑移动设备的响应式显示

实际应用场景

除了代码展示，pre标签还可以用于：

诗歌和歌词的排版
ASCII艺术作品的显示
终端命令的输出展示
需要精确对齐的表格数据
计算机图形字符画

浏览器兼容性说明

pre标签被所有现在浏览器支持，包括Chrome、Firefox、Safari、Edge等。在HTML5标准中，width属性已被废弃，建议使用CSS来控制宽度。

从我的开发经验来看，虽然pre标签很简单，但在技术文档和教程网站中却是不可或缺的元素。合理使用pre标签可以显著提升代码示例的可读性和专业性。

本文标签：

HTML <pre> 标签