标签用于标记一段计算机代码，需手动转义html特殊字符，单行用，多行须嵌套，不执行代码、无语法高亮、非替代品。
code 标签不是用来写代码的，而是标记「一段代码」
很多人第一次看到 <code> 就以为它是“写 HTML 代码的容器”，结果往里塞一大段 JavaScript 或 CSS，发现样式不对、换行失效、甚至被浏览器解析成真实标签——这是最常踩的坑。
<code> 的唯一职责是：告诉浏览器「这部分文字是计算机代码，按等宽字体显示，不渲染其中的 HTML 标签」。它不执行代码，也不提供语法高亮，更不是 <pre class="brush:php;toolbar:false;"></pre> 的替代品。
- 必须配合
<和>手动转义尖括号，否则<div> 会被当成真实标签解析 <li>单行内容用 <code><code>足够；多行、带缩进、需保留空格的代码块，必须套一层<pre class="brush:php;toolbar:false;"></pre> - 它默认无样式，实际项目中常和 CSS 类一起用，比如
<code class="html">
怎么正确显示 <p>Hello</p> 这样的 HTML 片段
直接写 <code><p>Hello</p> 是错的——浏览器会尝试解析里面的 <p></p>，最终只显示 “Hello” 两个字，且丢失标签结构。
正确做法是把特殊字符转义：
<code><p>Hello</p></code>
这样浏览器才把它当纯文本渲染。常见要转义的字符只有四个：&、<、>、"（双引号）。其他如空格、换行、缩进在 <code> 里会被合并成一个空格，所以别指望靠它排版多行代码。
- 手写转义容易漏，建议用在线工具或编辑器插件一键转换（搜 “HTML entity encoder”）
- VS Code 用户可安装 “Auto Rename Tag” 或 “Paste as HTML” 类插件辅助
- 若只是临时演示，用
<pre class="brush:php;toolbar:false;"><code></code> 嵌套更稳妥，但注意 <code><pre class="brush:php;toolbar:false;"></pre>本身也要求内容转义
和 <pre class="brush:php;toolbar:false;"></pre>、<var></var>、<samp></samp> 的区别在哪
这几个标签都属于“短语元素”，但语义和行为完全不同：
-
<pre class="brush:php;toolbar:false;"></pre>：保留所有空白符（空格、换行、缩进），适合整块代码；但它不声明内容是“代码”，仅表示“按原样显示” -
<var></var>：表示变量名，比如<var>username</var>，语义上强调“这是一个变量”，不是代码块 -
<samp></samp>：表示程序输出样本，比如命令行返回的<samp>File not found</samp>，不是你写的源码 - 只有
<code>同时满足两个条件：① 明确语义为“一段计算机可执行的源码”；② 浏览器默认用等宽字体（如monospace）
混用会导致语义混乱，搜索引擎和屏幕阅读器可能误读。例如把终端输出用 <code> 包裹，就等于告诉辅助技术“这是一段要运行的代码”，其实它只是结果。
真实项目里 <code> 怎么用才不翻车
新手最容易忽略的是上下文和可访问性。光有标签不够，得让它在页面里真正起作用：
- 内联代码（如函数名、属性名）直接用：
<p>调用 <code><code>fetch()方法发起请求 - 避免嵌套
<code>：比如<code>class="<code><code>btn" 是错的，应统一用一层<code>包住整个字符串 - 需要高亮？
<code>本身不支持，得靠 JS 库（如 Prism.js）或后端渲染时插入<span class="token"></span>等标记 - 如果代码片段含中文或全角符号，确保页面
<meta charset="UTF-8">已声明，否则可能显示为方框
最常被跳过的细节是：没有为 <code> 内容提供足够的对比度，导致小字号代码在浅灰背景上难以辨认——这不是语义问题，但直接影响可用性。
