code标签专用于标记单行、内联、上下文依赖的技术标识符，如函数名、CSS属性、命令等；多行代码应使用pre+code，UI文字或伪代码不可滥用；必须转义HTML字符，避免嵌套，确保语义真实准确。

code 标签不是为了“让代码看起来像代码”，而是为了告诉浏览器、搜索引擎和屏幕阅读器：“这段文本是程序代码，不是普通文字”。用错地方，语义就塌了。

什么时候该用 code，而不是

 或 <div></H3>
<p>只用于**单行、内联、上下文依赖的技术文本**。比如你在段落里提到了一个函数名、一个 CSS 属性、一条命令，就得包一层 <code>code</code>：</p>
<ul>
<li>✅ 正确：<code>parseInt()</code> 会把字符串转成整数</li>
<li>✅ 正确：设置 <code>display: flex</code> 启用弹性布局</li>
<li>✅ 正确：运行 <code>npm install --save-dev jest</code> 安装测试依赖</li>
<li>❌ 错误：<code>function foo() { return true; }</code>（多行函数体，应改用 <pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;">）</li>
<li>❌ 错误：<code>点击【提交】按钮

（UI 文字，不属于源码）

code 必须转义 HTML 字符，否则会解析失败

如果你直接写 <div class="app">，浏览器会把它当标签解析，页面就乱了。必须先做 HTML 实体转义：

Markdown to HTML

{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}

下载

• ✅ 正确：<div class="app"> <li>❌ 错误：<code><div class="app">（未转义，实际渲染为空或破坏结构） <li>工具建议：用 <code>DOMPurify.sanitize() 或服务端模板引擎的自动转义功能，别手写

嵌套 、 等标签能提升语义精度

code 表示的是“标识符”本身，不是变量含义或用户操作。混用其他语义标签才能表达完整意图：

立即学习“前端免费学习笔记（深入）”；

• ✅ Math.PI —— 表示数学变量，

   表示命名空间下的属性名</li>
  <li>✅ 按 <kbd>Ctrl+Shift+I</kbd> 打开开发者工具，再查看 <code>console.log()

  输出
• ✅ 错误信息 ReferenceError: foo is not defined —— 表示程序输出，

   包裹其中的标识符</li>
  <li>⚠️ 避免嵌套 <code>code

  在 code 里，没有语义依据，纯属视觉堆砌

最容易被忽略的是：语义不是“加了标签就生效”，而在于是否与上下文一致。比如文档里写“调用 fetch() 方法”，如果这个 fetch() 其实是伪代码或已被废弃的 polyfill 名，那它就不该用 code——语义要求真实、准确、可验证。