需与嵌套使用并配合css才有效：保留格式与语义，单独使用仅等宽字体且无样式；须转义html字符、加language-类名、设等宽字体及背景等基础样式。
<code> 标签本身不提升阅读体验，它只是语义化标记一段内联代码；真正起作用的是配合 CSS 样式、合理嵌套与上下文使用。
为什么直接写 <code> 没效果
浏览器对 <code> 的默认样式极简（通常仅等宽字体 + 小号字号），既无背景、也无边框、不换行、不处理空格。用户复制粘贴时还可能丢失缩进——这反而降低可读性。
- 纯文本中写
<code>console.log('hello')，和直接写console.log('hello')在视觉上几乎没区别 <code>不自动转义 HTML 字符，若内容含或 <code>&会解析出错- 嵌套在
<pre class="brush:php;toolbar:false;"></pre>外的<code>遇到长行会撑破容器，且空格被合并
必须搭配 <pre class="brush:php;toolbar:false;"></pre> 才能保留格式
要让代码块真正“像代码”，<code> 应始终作为 <pre class="brush:php;toolbar:false;"></pre> 的子元素使用：<pre class="brush:php;toolbar:false;"><code>...</code></pre>。只有这样，空白符、换行、缩进才被保留。
-
<pre class="brush:php;toolbar:false;"></pre>控制格式保留，<code>提供语义（告诉浏览器“这段是计算机代码”，而非诗歌或地址） - 单独用
<pre class="brush:php;toolbar:false;"></pre>缺少语义，屏幕阅读器不会特别提示这是代码；单独用<code>则格式全丢 - 现代语法高亮库（如 Prism.js、highlight.js）也依赖这个组合结构来定位目标节点
加 CSS 才算真正可用
没有样式，<pre class="brush:php;toolbar:false;"><code></code> 仍是灰扑扑一块。至少应加基础样式：</pre>
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 class="brush:php;toolbar:false;"></pre>—— 它无法保证缩进对齐，尤其含 Tab 时
容易忽略的语义细节
<code> 是内联元素，不能直接包多行结构化代码（比如带缩进的 HTML 片段）。这时该用 <pre class="brush:php;toolbar:false;"><code class="html"></code>，并确保类名真实对应语言类型。</pre>
- 写
<code class="html"><div>...</div>不如写<pre class="brush:php;toolbar:false;"><code class="html"><div>...</div></code></pre> - 类名用
language-xxx（而非lang-xxx或html）是 highlight.js 等工具的识别约定 - 如果代码含用户输入变量（如
const name = ;），需先 HTML 转义<，否则会被解析为标签
最常被跳过的一步：给 <code> 加 aria-label 或包裹 <figure><figcaption></figcaption></figure>——当代码是示例而非运行时输出时，说明用途比“代码”二字更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
