code标签仅用于行内短代码，如函数名、命令等；多行代码必须用组合，前者保留格式，后者声明语义，且html字符需转义。
code 标签只用于行内代码，不是代码块
<code> 是 HTML 的语义化行内元素，专为标记「一段短的、上下文中的代码」而设计，比如函数名、命令、文件路径或变量名。它不换行、不预格式化，也不保留多余空格——这点和 <pre class="brush:php;toolbar:false;"></pre> 完全不同。误用 <code> 包裹多行脚本或缩进代码，会导致样式错乱、空格塌陷，甚至语义错误。
哪些内容适合用 code 标签包裹
判断标准很简单：能否自然嵌入一句话中，且不影响阅读流。符合的典型场景包括：
- 命令行指令：
npm install --save-dev vite - JavaScript 函数名：
JSON.stringify() - HTML 属性名：
class、data-id - 文件路径：
src/main.ts - 环境变量名：
NODE_ENV - 错误信息片段：
TypeError: Cannot read property 'length' of undefined
常见误用与修复方式
很多人把 <code> 当成“看起来像代码就行”的样式工具，结果埋下可访问性和维护隐患：
- 用
<code>包裹整段 shell 脚本 —— 应改用<pre class="brush:php;toolbar:false;"><code>...</code></pre> - 在
<code>里手动加 - 把 CSS 类名写成
.btn-primary却漏掉点号 —— 语义上类名就是.btn-primary，点号是必需部分 - 在 Markdown 渲染后仍套一层
<code>—— 多数 Markdown 解析器已自动处理反引号，重复包裹会导致嵌套标签
配合 CSS 微调样式时要注意什么
浏览器默认给 <code> 加了等宽字体和轻微背景，但实际项目中常需调整。关键约束有：
- 不要重置
font-family为非等宽字体，否则失去代码辨识度 - 慎用
white-space: pre-wrap—— 它会让换行符生效，破坏行内语义 - 若需高亮关键词（如
const），应在 JS 层处理，而非靠 CSS 选中文字内容 - 在暗色主题下，仅靠
background-color不够，需同步调整color和border以保证可读性
<code> 之前，先问一句：这段内容是不是真的属于当前句子的「一个词」？如果不是，就得换方案。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
