标签仅语义化表示计算机代码，不执行、不可编辑、无交互能力；真正可运行代码需结合编辑、展示及iframe或function沙箱执行。
<code> 标签不是用来高亮或执行代码的，它只是语义化地表示一段“计算机代码”，浏览器默认会用等宽字体渲染，但不会自动加语法高亮、不可编辑、也不带交互能力。在交互式代码演练场（如 CodePen、JSFiddle、MDN Playground 或自建的 Live Editor）中，直接用 <code> 包裹示例代码，既不能运行，也不能编辑，更无法响应用户输入。
为什么不能直接用 <code> 做可运行代码块
常见错误现象：把一段 JS 函数复制进 <code> 标签后，页面上只显示为纯文本，控制台无输出，点击也无反应——因为 <code> 本质是行内语义标签，和 <span></span> 类似，不触发解析或执行。
<code>不会触发 HTML 解析：里面写<div> 会被当成文字，而非真实 DOM 元素 <li>浏览器不会执行其中的 JS：即使写了 <code>console.log("hello")，也不会运行- 不支持用户编辑：它不是
<textarea></textarea>或<pre class="brush:php;toolbar:false;"><code></code> 配合 contenteditable 的组合</pre> - 缺乏上下文隔离：没有沙箱机制，若配合
eval()手动执行，存在严重 XSS 和执行风险 -
展示用：
<pre class="brush:php;toolbar:false;"><code class="js">...</code></pre>—— 仅用于静态高亮（需配合 Prism.js 或 highlight.js） -
编辑用：
<textarea id="editor">console.log(1)</textarea>—— 用户可修改，内容通过 JS 读取 -
执行用：用
iframe沙箱或Function构造器动态执行（不推荐eval），例如：new Function(editor.value)() - 在 CSP（Content-Security-Policy）严格的环境（如 GitHub Pages、Azure Static Web Apps）下，
eval、new Function、内联 script 都被禁止，必须预编译或用 Web Worker + module 动态导入 <code>中的 HTML 实体（如<）必须手动解码才能还原为真实标签，否则执行时会报错- 用户输入的代码若含
document.write或无限循环，会直接卡死主页面；需要 timeout 控制或用 iframe 沙箱隔离 - 用
innerHTML直接插入用户代码到<div> 是高危操作，可能触发 XSS；应始终使用 <code>textContent显示，执行走独立上下文真正关键的不是
<code>标签本身，而是它在演练流程中所处的位置：它是「输入源」还是「输出容器」？是否参与执行链？没理清这点，所有“让代码动起来”的尝试都会变成调试噩梦。
在演练场中真正起作用的是三类组合
交互式演练依赖结构 + 渲染 + 执行分离。典型组合如下：
注意：MDN 的“可运行示例”底层是将 <pre class="brush:php;toolbar:false;"><code></code> 内容提取后注入 iframe 的 <code></code>，再用 <code>iframe.contentWindow.eval()</code>（受 CSP 限制）或更安全的模块化加载方式执行。</pre>
容易被忽略的兼容性与安全点
很多初学者试图让 <code> “活起来”，结果踩进这些坑：
