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