html元素中pre、code元素的使用及说明

最新推荐文章于 2025-05-14 19:03:23 发布

windfallsheng

最新推荐文章于 2025-05-14 19:03:23 发布

阅读量3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端 html css

本文链接：https://blog.csdn.net/Silence1515/article/details/108310723

前端专栏收录该内容

14 篇文章

订阅专栏

pre、code元素的使用；

展示效果：

<pre>

Text that is preformatted in the HTML code.
在HTML代码中预先格式化的文本。
被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 pre标签的一个常见应用就是用来表示计算机的源代码。
在 HTML 4.01 中，不赞成使用 width 属性，在 HTML 5 中不再支持该属性。

提示：请使用pre标签来显示非常规的格式化内容，或者某类计算机代码。

<code>

Fragment of code.
代码的片断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <p>
        function add(x, y) {
            return x + y;
        }
    </p>
    <pre>
        ≧◠‿●‿◠≦

        ≥︺‿︺≤

        (✿◠‿◠)

        function add(x, y) {
            return x + y;
        }
    </pre>

    <code>
        function add(x, y) {
            return x + y;
        }
    </code>

    <code>
        <pre>
            function add(x, y) {
                return x + y;
            }
        </pre>
    </code>

    <code style="white-space: pre;">
        function add(x, y) {
            return x + y;
        }
    </code>

</body>
</html>

pre元素的展示效果实际上取决于CSS属性：