code标签是行内元素，不保留换行与空格，单行代码需配合CSS（如white-space: nowrap和等宽字体）；多行代码必须用<pre><code>嵌套，由pre保留格式、code提供语义与等宽字体。
code 标签本身不处理换行，必须配合 CSS 或父容器
<code> 是行内元素，只包裹文字内容，不会自动换行或保留空格。直接写 <code>console.log('hello world'); 在 HTML 中渲染出来就是一长串挤在一起的字符，连缩进和换行都丢失了。
常见错误是以为加了 <code> 就能“展示代码”，结果复制粘贴时格式全乱，或者在响应式布局里被硬截断。
- 单行代码若含空格、点号、斜杠等，浏览器会按普通文本折行，位置不可控
-
<code>不继承<pre>的空白处理逻辑，white-space默认为normal - 纯靠
<code>实现“可读单行代码”几乎不可能，必须有外层配合
用 <pre><code> 组合才能可靠保留格式
这是最简但最有效的做法：<pre> 控制空白和换行行为，<code> 提供语义和默认样式（如等宽字体）。两者嵌套是 W3C 推荐模式。
示例：
立即学习“前端免费学习笔记（深入）”；
<pre><code class="js">const user = { name: 'Alice', age: 30 };</code></pre>
-
<pre>会让内部所有空白符（空格、换行、制表符）原样呈现 -
<code>加上class="js"方便后续用 Prism.js 或 Highlight.js 做语法高亮 - 注意：不要写成
<pre><code><pre>——<pre>不能嵌套，否则解析异常
单行场景下，用 CSS 强制不换行 + 等宽字体更轻量
如果明确只要“一行显示、不折行、带代码感”，又不想用 <pre>（比如怕影响行高或垂直对齐），可以只用 <code> 配 CSS：
<code style="font-family: ui-monospace, 'SFMono-Regular', monospace; white-space: nowrap; overflow-x: auto;">npm install --save-dev @types/react</code>
-
white-space: nowrap阻止折行，内容超宽时横向滚动（需父容器设overflow-x: hidden） -
font-family推荐用系统级等宽字体栈，比硬写Courier New更兼容 - 避免用
text-overflow: ellipsis截断命令行参数，会丢失关键信息如--legacy-peer-deps
容易忽略的细节：空格、BOM 和 lang 属性影响渲染
即使结构写对，以下三点仍会导致 <code> 显示异常：
- HTML 文件开头若有 BOM 或空格，可能触发怪异模式，使
white-space行为失常（尤其旧版 IE/Edge） -
<code>内部若含中文标点或全角空格，某些字体下宽度不一致，造成对齐错位 - 没设
<html lang="zh-CN">时，部分屏幕阅读器对<code>内容发音不准，影响无障碍访问
真正难的不是怎么写标签，而是让那一行代码在所有设备、所有辅助工具、所有编辑器复制路径下，看起来和运行起来都一致。
