如何使用HTML <code>元素实现正确的代码缩进效果？

问题出在你的标签嵌套和元素使用逻辑上：

• <code> 是行内元素，默认不会保留连续空格、换行和缩进，浏览器会把多个空白合并成一个空格。
• 把代码块放在 <p> 里更是雪上加霜，<p> 标签本身就会自动合并内部的空白字符，手动加的缩进直接被浏览器忽略了。

正确的实现方式 #

1. 用 <pre> + <code> 的组合 #

<pre> 是块级元素，会完整保留内部的空格、换行和缩进格式，搭配 <code> 可以同时获得语义标记和格式保留的效果，而且不要把它们放在 <p> 里面。

2. 正确转义HTML特殊字符 #

需要把代码里的 < 转成 <，> 转成 >，双引号转成 "，避免浏览器把代码解析成HTML标签。

正确代码示例 #

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en-US&quot; dir=&quot;ltr&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;
    &lt;title&gt;Title Name&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;This is a headline.&lt;/h1&gt;
    &lt;p&gt;1st paragraph.&lt;/p&gt;
    &lt;p&gt;Usually there's quite a lot here.&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

3. 可选：添加CSS优化显示 #

如果想要更好的代码显示效果，可以给 <pre> 和 <code> 加基础样式：

pre {
  background-color: #f5f5f5;
  padding: 1rem;
  border-radius: 4px;
  overflow-x: auto;
}

code {
  font-family: monospace;
}

这样你的代码块就能正确显示手动设置的缩进了。

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