code标签专用于语义化标记短小内联技术标识符，如函数名、命令、属性值；多行代码须用pre+code嵌套，且、&必须转义为<、>、&。

code 标签不是“加个等宽字体”的装饰手段，用错就等于把代码塞进普通段落里——屏幕阅读器读不准、搜索引擎不识别、协作时别人得猜你写的是命令还是 UI 文字。

什么时候该用 code，而不是 pre 或纯文本

核心判断标准：是否为「短小、内联、上下文明确的技术标识符」。

• ✅ 适合：fetch()、localStorage.setItem()、display: flex、npm install、userProfile
• ❌ 不适合：function hello() { return 'Hi'; }（多行逻辑 → 改用

  <pre class="brush:php;toolbar:false;">）

• ❌ 不适合：点击【提交】按钮（UI 文字 → 用 <button> 或 <span>）</span></button>
• ❌ 不适合：<div class="header"></div>（含 HTML 字符但未转义 → 必须写成
  ）

code 里哪些字符必须手动转义

code 是 HTML 元素，不是代码沙盒。浏览器先解析标签结构，再渲染内容。只要出现 、<code>>、&，就必须转义。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 危险写法：if (x 10) → 浏览器会尝试解析 为标签开头，可能中断 DOM
• 安全写法：if (x 10)
• CSS 属性如 display: flex 不需转义（没出现那三个字符）
• 哪怕只是写个 HTML 元素名 <header></header>，也得写成 <header>

如何搭配 var、kbd、samp 增强语义

单靠 code 表达力有限；组合使用才能让机器和人都理解「谁在做什么、输出什么」。

• 变量或参数名用 <var>x</var>，标识符（函数/类/属性名）才用 <code>parseInt
• 用户输入操作写成 <kbd>Ctrl+C</kbd>，别塞进 code
• 程序输出示例用 <samp>Hello World</samp>，不是 code
• 组合示例：<var>timeout</var> 参数传入 <code>setTimeout 后，控制台输出 timeout exceeded

样式与可访问性容易被忽略的点

默认等宽字体不可靠，且屏幕阅读器对 code 内容有特殊朗读逻辑，所以内容必须干净、准确。

• CSS 中显式声明字体栈：font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
• 避免在 code 里塞注释、省略号或未定义缩写（如 req 而不说明是 request）
• 不加额外空格或换行——code 本身不保留格式，所有缩进都会塌成单空格
• 不要用 code 包裹路径（如 /api/v1/users），那是 URL，更适合 <a href></a> 或 <dfn></dfn> + 注释

真正难的不是记住规则，而是每次敲下 <code> 时，下意识问一句：这个东西，是代码本身，还是我借它表达别的意思？一旦混淆，语义就断了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！