为何<pre>标签自动显示？HTML代码问题排查与修复咨询

问题所在 #

你提供的代码仅使用了<code>标签包裹转义后的HTML内容，<code>属于行内代码标签，本身不会保留文本中的换行、缩进等空白格式。如果页面自动显示出<pre>文本，大概率是你使用的渲染环境（如Markdown解析器、CMS系统）在处理<code>标签时出现逻辑异常，错误插入了额外的<pre>文本内容；另外你代码里的tets是拼写笔误，不过这和<pre>文本显示问题无关。

修复方法 #

要正确展示带格式的HTML代码，需要结合<pre>与<code>标签：

• <pre>标签会完整保留文本中的所有空白字符（换行、缩进、空格），确保代码格式不丢失；
• <code>标签用于标识内容为代码，提供语义化支持和默认代码样式。

修复后的代码如下：

<pre><code>&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
   test
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

如果是在Markdown环境中展示代码，更简便的方式是直接用三个反引号包裹代码块，无需手动书写<pre>和<code>标签：

```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>
   test
</body>
</html>

这种方式既能避免环境自动插入异常内容，也能保证代码格式正确显示。

内容的提问来源于stack exchange，提问作者Indra Basnet