html - 为什么表格单元格内的 pre 标记中的代码看起来很糟糕？

Question

我尝试使用 html 对不同的编程语言进行快速参考，在参考中我尝试将代码片段放在单元标记内的 pre 标记中。

首先，html这样，代码看起来很糟糕

                <td>
                    <pre><code>if (..){

                    } else {

                    }</code></pre>
                </td>

然后，我通过删除pre标签中的所有缩进来解决问题

                    <td>
<pre><code>if (..) {

} else {

}</code></pre>
                    </td>

这张图显示了不同之处，第一个单元格是漂亮的缩进 html，而其他单元格是丑陋的缩进 html。我不明白原因，是否有任何方法可以解决问题？

Answer 1

该pre元素保留了与 HTML 源代码中所写完全相同的空白（包括空格和换行符）。这完全解释了会发生什么。在您的第一个代码片段中，例如第三行在 text 之前有大量空格} else {，这些空格将被保留。该pre元素中的第一行没有前导空格，因为该行在 start tag 之后开始<pre>。