标签仅适用于嵌入文本中的短代码（如fetch()、package.json），因其为行内元素，不保留换行与缩进；展示多行代码必须嵌套使用，并转义、&，统一用空格缩进，且建议添加语言类名以支持高亮与语义识别。
code 标签本身不能可靠显示多行源代码——它只负责语义标识，不保留换行、缩进或空格。真要展示可读的源代码片段，必须配合 pre 使用。
什么时候该用 code 标签
仅用于嵌在普通文本中的短代码元素，比如函数名、变量、命令、属性值这类“一句话能说完”的内容：
-
fetch()、useState、package.json都适合单独用code - 浏览器默认会用等宽字体渲染，但会把所有换行和多余空格压成一个空格
- 别把它当容器用：往里塞 4 行 Python，结果全塌成一行，大括号错位、逻辑失效
- 它不是样式工具，加
background或font-family也救不了格式丢失
为什么单用 pre 不行
pre 能保留缩进和换行，但它只说“按原样显示”，没说“这是代码”。后果很实际：
- 屏幕阅读器读作“预格式化文本”，而非“JavaScript 代码块”
- SEO 可能忽略语义，搜索引擎无法识别这是技术内容
- CSS 想统一给所有代码加背景色时，
pre会把诗歌、日志、ASCII 艺术也染上 - highlight.js、Prism.js 这类高亮库基本都靠
code标签识别目标，没它，高亮直接不触发
pre 和 code 必须嵌套使用
正确结构是 <pre class="brush:php;toolbar:false;"><code>...</code></pre>，三件事缺一不可：
- HTML 特殊字符必须转义：
→ <code><，>→>，&→&；否则浏览器会尝试解析<div> 成真实标签，导致页面空白或 DOM 错乱 <li>缩进统一用空格（别用 Tab），不同编辑器对 Tab 宽度解释不一致，容易渲染错位</li> <li>建议给 <code>code加语言类名，如class="js"或class="python"，为后续高亮或自动化处理留钩子 - CSS 中需设
pre code { display: block; }，否则长代码行可能折断在单词中间 - 服务端输出前就要转义（如 Node.js 用
he.escape()，PHP 用htmlspecialchars()）；前端用innerHTML直接插入未转义字符串，等于主动引入 XSS 风险 - 哪怕只是展示一段 HTML 示例，只要含
、<code>>、&，就必须转义——没有例外 - 别依赖高亮库帮你转义：Prism.js 和 highlight.js 都不做这一步，它们只负责着色
-
pre默认可能横向溢出容器，得配overflow-x: auto和tab-size: 2控制可读性
容易被忽略的底线细节
最常翻车的地方不在写法，而在转义时机和缩进一致性：
