code 标签仅用于语义化包裹纯计算机代码文本，如 sql 语句、api 路径、json 键名等；不可用于数值、标题或按钮文字，多行代码须嵌套在 pre 中，且需设置等宽字体兜底样式。
code 标签不是用来高亮数据或渲染图表的，它只负责语义化地包裹「一段计算机代码文本」——用错地方会导致可访问性下降、样式失控，甚至被屏幕阅读器误读为可执行内容。
什么时候该用 code 标签？
只在报告中需要明确标识「某段文字本身就是代码」时使用，比如展示 SQL 查询语句、API 请求路径、JSON 键名、CSS 属性名、函数调用片段等。
- ✅ 正确场景：
SELECT COUNT(*) FROM orders WHERE status = 'shipped'、response.data.items[0].id、chart.update() - ❌ 错误场景：把销售额数字
12,480包进code；把表格列标题“订单日期”包进去；把按钮文字“导出 CSV”也套上 —— 这些都不是代码，只是普通文本或 UI 元素 - ⚠️ 注意：若需强调数值单位或格式（如
¥12,480.00），应使用span+ CSS 控制样式，而非code
code 和 pre 的配合逻辑
单行代码片段用 code；多行、带缩进/换行的完整代码块，必须外层套 pre，否则空格和换行会被 HTML 合并丢失。
- 单行示例：
<p>调用接口请传参 <code>start_date和end_date - 多行示例：
<pre class="brush:php;toolbar:false;"><code>fetch('/api/sales?date=2026-09-01')<br> .then(r => r.json())<br> .then(data => renderChart(data));</code></pre> - 不配
pre的后果：上面那段 JS 会变成一行挤在一起，失去可读性
样式兼容性与常见踩坑
浏览器默认对 code 应用 font-family: monospace，但企业内网系统或某些报表平台可能重置了全局字体，导致代码块看起来和普通文本无异。
- 必加兜底样式：
code { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; } - 避免用
code实现「等宽数值对齐」：数字列右对齐应靠td.numeric { text-align: right; }，而不是给每个数字套code—— 后者会让辅助技术把数字当成代码字面量读出来 - 禁止嵌套交互元素：
code内不能放button、input或onclick，否则语义断裂，键盘焦点无法进入
真正容易被忽略的是语义边界：一个报表里，code 出现的位置，就是开发者向机器（和未来维护者）声明「此处是代码，非内容」的地方。多用一次，就多一分歧义风险。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
