如何在HTML中通过 plaintext 标签直接输出原始文本
plaintext标签不能安全使用，因其在html2.0中已被标记为过时、html5中完全移除；主流浏览器将其视为未知标签，仍解析内部html标签并执行，无法实现原始文本输出。
plaintext 标签在现代 HTML 中已被废弃，**不能安全使用**，浏览器会将其视为未知标签并忽略其语义，实际渲染效果等同于普通 <div> 或 <code><span></span>，无法实现“原始文本输出”目的。
为什么 plaintext 不起作用
该标签早在 HTML 2.0 就被标记为过时（obsolete），HTML5 完全移除。主流浏览器（Chrome、Firefox、Safari、Edge）遇到 <plaintext>...</plaintext> 时：
- 不解析内部内容为纯文本 —— 所有 HTML 标签仍会被解析执行（比如
<b></b> 依然加粗）
- 不自动禁用转义 ——
< 还是得手动写成实体才能显示为
- 没有默认样式重置，也不会阻止 CSS 影响
替代方案：用 pre + code 组合输出原始文本
这是最接近需求且语义正确、兼容性好的做法。关键点在于：
-
<pre class="brush:php;toolbar:false;"></pre> 保留空格与换行，但本身不声明内容为代码/文本
<code> 告诉浏览器这是计算机代码或字面量文本，多数 UA 默认用等宽字体+禁用部分样式- 两者嵌套：
<pre class="brush:php;toolbar:false;"><code>...</code></pre> 是 W3C 推荐的语义化组合
示例：
<pre class="brush:php;toolbar:false;"><code><div class="foo">Hello & World</code>
注意：所有 HTML 特殊字符（、<code>>、&）必须提前转义为 <、>、&，否则会被解析。
html-deploy
使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。
下载
动态场景下避免手写转义：用 JavaScript 的 textContent 或 innerText
如果原始文本来自 JS 变量或用户输入，直接 innerHTML 会触发解析，必须用安全方式插入：
-
element.textContent = rawString —— 最可靠，完全不解析 HTML，原样输出
-
element.innerText = rawString —— 会受 CSS 影响（如 display: none 元素内容不计入），且有换行处理差异，一般不如 textContent
- 不要用
element.innerHTML = rawString，除非你明确信任内容且已自行转义
例如：
const el = document.querySelector('pre code');
el.textContent = '<div>Hello & World</div>'; // 自动转义，安全
服务端模板或构建工具中可借助 escape 函数
若你在模板里（如 EJS、Jinja2、Vue SFC）输出原始 HTML 字符串，应调用对应框架的 escape 工具：
- EJS：
- Vue：
{{ rawText }} 自动转义；要插 HTML 得用 v-html，但需确保内容可信
- Node.js（原生）：可用
he.escape() 或正则简单替换：str.replace(/&/g, '&').replace(/, '<').replace(/>/g, '>')
核心原则：原始文本输出不是靠某个标签“魔法生效”，而是靠「不解析」+「显式转义」+「语义容器」三者配合。漏掉任意一环，就可能 XSS 或格式错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
