直接用标签包裹函数名、命令或变量名即可实现语义正确的行内代码展示，但必须配合CSS强制等宽字体，且不能塞多行内容——否则格式全丢、语义错乱；适合内容包括fetch()、useState()、npm install等短标识符，禁用多行逻辑代码。
直接用 code 标签包裹函数名、命令或变量名即可实现语义正确的行内代码展示，但必须配合 CSS 强制等宽字体，且不能塞多行内容——否则格式全丢、语义错乱。
哪些内容适合放进 code 标签
code 是行内语义元素，只该用于穿插在段落中的短标识符。它的作用不是“让文字看起来像代码”，而是告诉浏览器“这是可执行文本片段”。
- ✅ 正确：
fetch()、useState()、npm install、/src/utils.ts、aria-label - ❌ 错误：
if (x > 0) { return x * 2; }（含换行缩进）、{ name: "Alice", age: 30 }（对象字面量，视觉上已超单行） - ⚠️ 边界情况：
`Hello ${name}`模板字符串、(a, b) => a + b箭头函数体——哪怕没换行，也建议改用，因空格和括号易被压缩错位
不加 CSS 的 code 标签会出什么问题
浏览器不保证 code 默认渲染为等宽字体。Windows 上可能 fallback 到非等宽的系统字体，导致 const 和 console.log() 对不齐、数字 1 和字母 l 难区分。
- 必须显式设置字体栈：
font-family: "SFMono-Regular", "Fira Code", "Consolas", "Liberation Mono", "Menlo", monospace; - 别只写
font-family: monospace——它不指定具体字体，纯靠运气 - 中文字体名如
"Microsoft YaHei"必须加引号，否则 CSS 失效 - 建议加轻量样式：
background-color: #f6f6f6、padding: 0.2em 0.4em、border-radius: 3px，快速与正文区隔
HTML 特殊字符不转义的后果很直接
code 标签内容不经过 HTML 解析预处理，所有 、<code>>、& 都必须手动转义。漏掉一个，轻则内容消失，重则破坏后续 DOM 结构。
- 写
x → 浏览器尝试解析成标签，<code> 被吞掉，只剩 <code>x - 写
<div class="box"></div>→ 真解析成 DOM 节点，页面结构错乱 - 安全写法：
x 、<code><div class="box"></div> - Shell 命令中多个空格也有语义（如
ls -l /home），连续空格会被压成一个；需用white-space: pre（慎用，可能横向溢出）
为什么不能给 code 加 white-space: pre 或套
加 white-space: pre 会让长命令（如带一堆 flags 的 curl 命令）横向撑破容器，且破坏行内基线对齐，导致上下文文字“飘起来”；而把 code 塞进
里，<pre class="brush:php;toolbar:false;"> 自带块级 margin，会撑开段落行距，视觉断裂。
- 行内代码就老老实实用
code+ 正确 CSS，别动布局属性 - 真需要保留多空格或换行？说明它已经不是“行内”了，该切到
结构
- 判断标准不是“有没有换行符”，而是“复制粘贴到编辑器能否直接运行”——如果要手动补缩进、加括号，那它就不该在
code里
最常被忽略的不是怎么写，而是何时停手：看到模板字符串、箭头函数体、带注释的表达式，哪怕只有一行，也该本能地切到
。语义和可维护性，比省一次嵌套更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
