<code>本身不保留空格和缩进，因其为行内元素且受white-space:normal控制；需与<pre>嵌套使用才能保留格式，且<pre>内代码须顶格书写、尖括号需转义、复制时应处理空白行并注意浏览器兼容性。
<code> 本身不保留空格和缩进——这是最常被误解的一点。它只表示一段内联代码语义，浏览器会像处理普通文本一样折叠空白符。真要保留缩进，必须配合 <pre> 使用。
为什么单独用 <code> 无法保留缩进
<code> 是行内容器（inline element），受 CSS 默认的 white-space: normal 控制：连续空格、制表符、换行都会被合并为单个空格。哪怕你在 HTML 源码里写成：
<p><code>function foo() {<br> return true;<br>}</code></p>
渲染出来也是 function foo() { return true; }，所有缩进全丢。
<pre><code> 组合才是标准解法
<pre> 的核心作用是原样保留源码中的空白与换行，<code> 则提供语义标注——二者嵌套是 HTML5 官方推荐模式。
立即学习“前端免费学习笔记（深入）”；
- 必须把
<code>放在<pre>内部，不能反过来 -
<pre>内容需严格顶格书写，否则首行缩进会被当作文本显示（比如缩进 4 个空格，整段代码就右偏 4 字符） - 若用 IDE 自动格式化，关闭对
<pre>块的自动缩进，或手动删掉其内部的换行前空格 - 尖括号
<、>、&必须转义为、<code>>、&，否则会被浏览器解析为标签
复制带缩进的代码时容易丢空格
用 navigator.clipboard.writeText() 复制 <pre><code> 里的内容，粘贴后缩进可能变单空格——这不是前端 bug，而是剪贴板 API 对文本做标准化所致。
- 正确做法：取
<code>元素的textContent，再用正则清理首尾纯空白行：codeEl.textContent.replace(/^\s+|\s+$/g, '') - 然后传给
navigator.clipboard.write()+ClipboardItem，MIME 类型必须是text/plain - Firefox 116 之前不支持
write()，得降级并提醒用户“粘贴后可能需手动调整缩进”
缩进用空格，别用 Tab
不同编辑器/浏览器对 Tab 的渲染宽度不一致（常见 2、4、8 字符），而空格宽度固定。HTML 源码中混入 Tab 很容易导致预览错位。
- 统一用 2 或 4 个空格缩进，全项目保持一致
- VS Code 中设
"editor.insertSpaces": true和"editor.tabSize": 2 - 用 Prettier 配置
"tabWidth": 2并开启formatOnSave，避免手抖误按 Tab
真正麻烦的不是怎么写，而是 HTML 源码里那些看不见的换行和空格——它们会直接变成页面上多出来的空白。每次改完 <pre> 内容，记得检查开头有没有空行、第一行有没有缩进、结尾有没有多余回车。
