<pre>标签保留空格、换行和缩进，<code>标签提供代码语义但不保留格式；二者嵌套（<pre><code>）可兼顾格式完整性与语义准确性，避免单独使用导致的缩进塌陷、换行丢失或可访问性缺失。
pre 标签本身就能保留原始空格、换行和缩进，不需要额外设置；而 code 标签语义上表示一段代码，但默认不保留空格。两者结合使用，既能保持格式，又具备语义准确性。
为什么用 pre 包裹 code
pre 提供预格式化环境（preserve whitespace），code 提供语义标识（这段是代码）。浏览器对 pre code 有默认样式（如等宽字体），也方便 CSS 精准控制。单独用 code 会把多个空格合并成一个，换行也被忽略。
基本写法：嵌套结构要正确
必须把 code 放在 pre 内部，而不是反过来：
function hello() {
console.log(" indented string ");
}避免常见错误
- 不要写成
<code><pre>...</pre></code> - 不要在 HTML 源码中用全角空格或特殊不可见字符，确保空格是 ASCII 空格（U+0020）
- 如果代码里含
<、>、&，必须转义为、<code>>、&，否则会被解析为标签
增强可访问性与样式控制
可以给 pre 添加 tabindex="0" 支持键盘聚焦，加 role="region" 和 aria-label 提升读屏体验。CSS 中推荐：
立即学习“前端免费学习笔记（深入）”；
pre {
overflow-x: auto; /* 防止长行溢出 */
padding: 1em;
}
pre code {
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
} 
