标签专用于标记内联短小代码片段，如函数名、变量名等，是行内元素且具语义；多行代码应配合使用，混用、会破坏语义准确性。
<code> 标签不是用来写代码的“容器”，而是专门标记**内联的、短小的代码片段**——比如函数名、变量名、命令、HTML 属性值这类需要和普通文本区分开的内容。它本身不带样式，但浏览器默认会用等宽字体（如 monospace）渲染，视觉上立刻可辨。
什么时候必须用 <code> 而不是 <pre class="brush:php;toolbar:false;"></pre> 或 <div>
<p>核心区别在语义和行内行为：</p>
<ul>
<li><code><code> 是行内元素，能嵌在句子中，比如 “调用 fetch() 时需传入 URL 字符串” —— 这里不能换行，也不能包裹大段代码
<pre class="brush:php;toolbar:false;"></pre> 保留空格与换行，适合多行代码块；<div> 完全无语义，纯靠 CSS 控制，搜索引擎和屏幕阅读器无法识别其内容是“代码”
<li>若把整段 JS 函数塞进 <code><code>，会导致格式错乱、不可读，也违背 HTML 语义规范
<code> 和 <var></var>、<samp></samp> 的分工差异
它们都属于短文本语义化标签，但用途明确不同：
<code>：表示计算机代码的字面量，如console.log、class="btn"、git clone-
<var></var>：表示变量或占位符，如 “将<var>username</var>替换为实际用户名” -
<samp></samp>：表示程序输出结果，如 “终端返回<samp>404 Not Found</samp>”
混用会导致语义失真——比如把错误信息 TypeError: Cannot read property 'length' of undefined 写成 <code>，其实更应归为 <samp></samp>（这是运行结果），而 length 本身才适合 <code>。
常见误用：嵌套、转义、CSS 干预带来的问题
新手常踩的坑集中在三处：
- 在
<code>里直接写未转义的 HTML 字符，比如<code><div></div>，浏览器会解析成真实标签而非文本 —— 正确做法是手动转义：<div></div> - 给
<code>加display: block或设宽高，破坏其行内特性，导致段落布局错位 - 用
<code>包裹整个代码块并配white-space: pre-wrap，看似“能换行”，实则绕过语义、增加维护成本；这种场景该用<pre class="brush:php;toolbar:false;"><code></code> 组合</pre>
真正干净的做法是：单行代码字面量 → <code>；多行可复制代码块 → <pre class="brush:php;toolbar:false;"><code></code>；变量/输出/用户输入 → 分别用 <code><var></var></code>/<code><samp></samp></code>/<code><kbd></kbd></code>。</pre>
最容易被忽略的是语义链断裂：当文档里大量出现 fetch()、localStorage.setItem() 却没用 <code>，或反过来把整段配置 JSON 塞进 <code>，都会让辅助技术失效、SEO 丢失上下文。语义不是“锦上添花”，而是前端基础里最沉默也最硬核的一环。
