code标签不能嵌套自身或作容器，仅用于单行短代码；多行代码必须用pre包裹code，因code是行内元素会忽略换行与空格，而pre+code语义正确、样式可控、可访问性强。

code 标签本身不能嵌套自己，也不该作为容器使用；它只负责包裹单行、短小的代码片段，比如函数名或属性名。想展示多行、带缩进或换行的代码块，必须和 pre 配合——这是唯一符合语义且浏览器渲染可靠的方式。

为什么单独用 code 无法显示多行代码

因为 code 是行内元素，默认忽略换行符和多余空格。你写成：

<p>调用方式：<code>fetch('/api')</code><br><code>.then(res => res.json())</code></p>

浏览器会把它压成一行显示，br 标签在 p 内虽生效，但两个 code 之间没有语义关联，也无法对齐缩进。

• 行内元素不保留空白符（空格、制表符、换行）
• 多个 code 并列 ≠ 一个代码块，屏幕阅读器会分别读作“fetch 括号斜杠 api 括号”“点 then 括号 res 箭头 res 点 json 括号”，失去上下文
• CSS 控制困难：无法统一设置背景、边框或内边距到“整个代码段”

pre + code 是唯一标准组合

语义上：pre 表示“预格式化文本”，code 表示“这段是计算机代码”。二者嵌套，既保留格式，又声明意图。

Pptx To Html

使用 MinerU 将 PowerPoint (.pptx) 演示文稿转换为 HTML，保留幻灯片内容与结构，生成可直接在网页使用的 HTML格式。

下载

• 必须 pre 包裹 code，不能反过来（code 里不能放 pre）
• 样式上，pre code 可统一设字体、背景、padding；单独给 pre 设样式会丢失代码语义
• 可访问性上，屏幕阅读器遇到 pre + code 组合，会读作“预格式化代码块”，再逐行读内容

正确写法：

<pre class="brush:php;toolbar:false;"><code class="js">fetch('/api')
  .then(res => res.json())
  .catch(err => console.error(err));</code>

嵌套其他语义标签增强表达力

code 可以安全嵌套 var、kbd、samp 等，用于区分代码中的不同角色：

• var 表示变量或参数：<code>console.log(<var>msg</var>&gt);
• kbd 表示用户输入：<code>按下 <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>R</kbd> 刷新
• samp 表示程序输出：<code>运行结果：<samp>Hello, World!</samp>

注意：这些标签都必须在 code 内部，不能跨出边界；它们本身也是行内元素，不能包 div 或 p。

容易被忽略的兼容性细节

老版本 Safari 和部分安卓 WebView 对 pre code 的换行处理不一致，尤其当代码行超长时：

• 默认不换行，可能横向溢出容器
• 加 white-space: pre-wrap 或 word-break: break-all 能缓解，但会破坏缩进语义
• 更稳妥的做法是加 overflow-x: auto 并确保父容器有明确宽度
• 如果用 Prism.js 或 Highlight.js，它们自动注入 pre + code，但需确认初始化逻辑是否覆盖了自定义 class

真正难的不是怎么写，而是每次看到别人把 code 当 div 用、或者用 br 模拟换行时，得忍住不手抖去改 DOM 结构。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！