<code>标签用于内联代码高亮，适合单个函数名、变量或命令，不保留换行缩进；含<、>、&时须转义为、&；应配合CSS优化可读性，但不可滥用语义。
直接用 <code> 标签包裹函数名、变量或命令，就能让浏览器以等宽字体显示，这是教学网页里最轻量、最安全的代码标注方式——但它不保留换行和缩进，别指望它渲染整段逻辑。
什么时候该用 <code> 而不是 <pre>
当你只想高亮一个词、一个参数或一行嵌入式代码时，<code> 是唯一合理选择。比如解释 console.log() 的作用，或说明 CSS 中 display 属性的某个取值。
-
<code>document.getElementById()</code>—— 正确：单个 API 名称 -
<pre><code>function foo() { return true; }</code></pre>—— 必须套<pre>：否则换行丢失、缩进塌陷 - 在段落中写 “调用
fetch()时需传入 URL 字符串”，这是典型场景；若把整个fetch()调用示例贴进去，就该切到<pre><code>组合
<code> 里的 HTML 特殊字符必须转义
如果内容含 <、> 或 &，不转义会直接被浏览器解析成标签或实体起始符，导致错位甚至页面结构破坏。
- 错误写法：
<code>for (let i = 0; i < arr.length; i++) {</code>→<被当成标签开头，后续全乱 - 正确写法：
<code>for (let i = 0; i （<code> 表示 <code><） - 常见转义对照：
、<code>>、&；"可选，但建议统一处理
用 CSS 微调 <code> 的可读性
默认等宽字体太细、背景太白，学生容易看漏。加点基础样式能立刻提升教学效果：
立即学习“前端免费学习笔记（深入）”；
code {
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
background-color: #f6f8fa;
padding: 2px 4px;
border-radius: 3px;
font-size: 0.95em;
}
- 优先指定系统等宽字体链，避免加载失败回退到非等宽字体
- 浅灰背景 + 圆角 + 内边距，比纯文字更易从段落中识别出来
- 不要设
white-space: pre：这会让空格和换行生效，反而破坏内联语义
最容易被忽略的是语义边界——<code> 只适用于「计算机代码片段」，不是所有技术名词都该套它。比如“DOM”、“HTTP 状态码 404”这类术语，用 <span> 加 class 更准确；强行套 <code> 会误导初学者对语义的理解。
