HTML pre标签|极客教程

HTML pre标签

在HTML中，<pre>标签用于定义预格式化的文本。预格式化的文本会保留空格和换行符，而不会被浏览器忽略或合并。这使得<pre>标签非常适合显示代码示例或其他需要保留格式的文本。

基本用法

下面是一个简单的示例，展示了如何在HTML中使用< pre>标签：

<!DOCTYPE html>
<html>
<head>
    <title>Pre标签示例</title>
</head>
<body>
    <pre>
        function greet() {
            console.log("Hello, geek-docs.com!");
        }
        greet();
    </pre>
</body>
</html>

Output:

HTML pre标签

在上面的示例中，< pre>标签包裹了一段JavaScript代码，这段代码会在页面上保留原始的格式，包括空格和换行符。

设置样式

< pre>标签通常会保留默认的字体和间距样式，但你可以通过CSS来自定义< pre>标签的外观。下面是一个示例，展示了如何为< pre>标签设置背景色和字体样式：

<!DOCTYPE html>
<html>
<head>
    <title>Pre标签样式示例</title>
    <style>
        pre {
            background-color: #f4f4f4;
            font-family: monospace;
            padding: 10px;
        }
    </style>
</head>
<body>
    <pre>
        function greet() {
            console.log("Hello, geek-docs.com!");
        }
        greet();
    </pre>
</body>
</html>

Output:

HTML pre标签

在上面的示例中，我们使用CSS为< pre>标签设置了灰色的背景色、等宽字体和内边距。

显示特殊字符

有时候我们需要在< pre>标签中显示一些特殊字符，比如小于号(<)、大于号(>)等。在HTML中，这些字符会被解释为标签，而不是文本。为了在< pre>标签中显示这些特殊字符，我们可以使用HTML实体来代替。下面是一个示例，展示了如何在< pre>标签中显示小于号和大于号：

<!DOCTYPE html>
<html>
<head>
    <title>Pre标签特殊字符示例</title>
</head>
<body>
    <pre>
        <html>
        <head>
            <title>Hello, geek-docs.com!</title>
        </head>
        <body>
            <h1>Hello, geek-docs.com!</h1>
        </body>
        </html>
    </pre>
</body>
</html>