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