<code>需与<pre>嵌套使用并配合CSS才有效：<pre><code>保留格式与语义，单独使用仅等宽字体且无样式；须转义HTML字符、加language-类名、设等宽字体及背景等基础样式。
<code> 标签本身不提升阅读体验，它只是语义化标记一段内联代码；真正起作用的是配合 CSS 样式、合理嵌套与上下文使用。
为什么直接写 <code> 没效果
浏览器对 <code> 的默认样式极简（通常仅等宽字体 + 小号字号），既无背景、也无边框、不换行、不处理空格。用户复制粘贴时还可能丢失缩进——这反而降低可读性。
- 纯文本中写
<code>console.log('hello')</code>，和直接写console.log('hello')在视觉上几乎没区别 -
<code>不自动转义 HTML 字符，若内容含<或&会解析出错 - 嵌套在
<pre>外的<code>遇到长行会撑破容器，且空格被合并
必须搭配 <pre> 才能保留格式
要让代码块真正“像代码”，<code> 应始终作为 <pre> 的子元素使用：<pre><code>...</code></pre>。只有这样，空白符、换行、缩进才被保留。
-
<pre>控制格式保留，<code>提供语义（告诉浏览器“这段是计算机代码”，而非诗歌或地址） - 单独用
<pre>缺少语义，屏幕阅读器不会特别提示这是代码；单独用<code>则格式全丢 - 现代语法高亮库（如 Prism.js、highlight.js）也依赖这个组合结构来定位目标节点
加 CSS 才算真正可用
没有样式，<pre><code> 仍是灰扑扑一块。至少应加基础样式：
立即学习“前端免费学习笔记（深入）”；
code {
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
font-size: 0.875em;
background-color: #f6f8fa;
padding: 0.2em 0.4em;
border-radius: 6px;
}
pre code {
display: block;
padding: 1em;
overflow-x: auto;
line-height: 1.5;
}
-
font-family显式指定等宽栈，避免某些系统 fallback 到非等宽字体 -
background-color和border-radius让代码块视觉上“浮出来”，一眼可辨 -
overflow-x: auto必须加在pre code上（不是pre），否则滚动条位置错乱 - 别用
white-space: pre-wrap替代<pre>—— 它无法保证缩进对齐，尤其含 Tab 时
容易忽略的语义细节
<code> 是内联元素，不能直接包多行结构化代码（比如带缩进的 HTML 片段）。这时该用 <pre><code class="html">，并确保类名真实对应语言类型。
- 写
<code class="html"><div>...</div></code>不如写<pre><code class="html"><div>...</div></code></pre> - 类名用
language-xxx（而非lang-xxx或html）是 highlight.js 等工具的识别约定 - 如果代码含用户输入变量（如
const name = <%= user.name %>;），需先 HTML 转义，否则会被解析为标签
最常被跳过的一步：给 <code> 加 aria-label 或包裹 <figure><figcaption>——当代码是示例而非运行时输出时，说明用途比“代码”二字更重要。
