code标签仅是语义标签，不提供安全防护，需配合转义或textcontent才能防止html解析执行；常见错误是误以为其能自动转义，导致等标签被浏览器直接执行。
code 标签本身不防解析，必须配合转义或 textContent 才能避免浏览器执行 HTML 代码。
为什么code标签里写<script></script>还是会弹窗
code 只是语义标签，不是安全沙箱。浏览器照常解析其中的 HTML 结构——<script>alert(1)</script> 会被当作真实脚本加载执行。
- 常见错误现象：
<div class="btn">Click</div>在页面中渲染出按钮，而不是显示这段文字 -
code是行内元素，对换行、缩进、多空格完全不保留，只适合短片段（如console.log） - 单独用
code展示多行 HTML/JS/CSS 几乎必然出错，别试
真正起作用的三种方法
安全展示 HTML 源码只有三条可靠路径：
- 手动转义后塞进
<pre class="brush:php;toolbar:false;"><code></code>：把 <code> → <code><</code>，<code>></code> → <code>></code>，<code>&</code> → <code>&</code></code></pre> - 用 JavaScript 的
textContent动态注入：el.textContent = "<div>hello</div>"—— 绕过 HTML 解析器，零风险 - 服务端或构建时预处理：比如 Markdown 渲染器（remark）或 Vue/React 的
v-html替代方案（如v-text），本质仍是转义 + 插入
用pre嵌套code时最容易漏掉的细节
<pre class="brush:php;toolbar:false;"><code></code> 是标准组合，但光写对标签远远不够：</pre>
- 缩进必须用空格，别混用 Tab —— 某些编辑器会把 Tab 转成 4 个空格，但有些只转 2 个，导致高亮错位
- 语言 class 名要规范：
class="html"而不是lang="html"（lang是给自然语言用的） - 如果用了 Highlight.js 或 Prism.js，必须确保转义已在 JS 运行前完成；它们不负责转义，只负责着色
- CSS 中别加
white-space: pre-wrap到code上——它会破坏pre的原生行为，反而让换行失效
最常被忽略的一点：转义必须在内容进入 DOM 前完成。无论你用模板字符串拼接、innerHTML 还是 SSR，只要中间某步没转义，就可能被解析。安全边界只有一条：进 DOM 之前， 必须已是 <code><。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
