code标签仅用于语义标记单行代码，多行代码必须用嵌套；需转义html特殊字符，设display: block和overflow-x: auto，字体优先选用ui-monospace等稳定等宽字体。
code 标签不是代码块容器，它只负责语义标记——告诉浏览器“这段是计算机代码”，不处理换行、缩进或高亮。说明书里写错用法，轻则格式塌陷、阅读困难，重则 HTML 解析失败、文档结构错乱。
单行代码必须用 code，不能套
在说明文字中提函数、命令、路径或变量时，code 是唯一正确选择。比如：“调用 fetch() 时传入 AbortSignal”，或“配置文件位于 /etc/nginx/conf.d/”。
-
fetch()✅ 正确：等宽字体、行高正常、屏幕阅读器读作“fetch 函数” -
fetch()
❌ 错误：是块级元素，自带 margin，插在段落中会撑开上下行距，视觉断裂
- 漏转义
或 <code>>（如写x ）→ 浏览器尝试解析为标签，后续内容可能消失 - 别给
code加white-space: pre：长命令会溢出容器，且基线对不齐
多行代码必须用 嵌套，缺一不可
函数体、配置片段、命令输出这类内容，只用 code 会压成一行；只用
则丢失“这是代码”的语义，语法高亮库（如 Prism.js）无法识别语言，SEO 和读屏器也难理解。
- 正确结构：
<pre class="brush:php;toolbar:false;">function greet(name) { return `Hello, ${name}!`; }——保格式，<code> 定语义</code>
- 错误写法：
function greet(name) { return `Hello, ${name}!`; } → 渲染为单行，缩进全丢 - 错误写法：
function greet(name) { return `Hello, ${name}!`; }→ 搜索引擎当普通预格式文本，不索引为代码 - HTML 特殊字符必须手动转义：
、<code>>、&，哪怕只是写个比较表达式
排版细节决定说明书是否可用
用户不会为格式问题重读三遍。真正容易被忽略的是边界模糊：有人把整段 Shell 脚本塞进 code，有人把 console.log() 单独包一层
。判断标准只有一个——要不要保留原始换行和缩进。
必须设 <code>overflow-x: auto</code>，否则长代码行直接撑破容器
-
code要设display: block，否则它作为行内元素，不响应的宽高和滚动控制
- 字体建议用
ui-monospace, 'SFMono-Regular', 'Consolas', monospace，比默认等宽更稳 - 缩进统一用空格（2 或 4 个），别用 Tab——不同环境渲染宽度不一致，容易错行
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
