如何在HTML中使用 xmp 标签包裹并显示 HTML 源代码-html教程-PHP中文网

标签因非标准、易导致截断错位及xss风险，早在html 3.2就被废弃，html5完全不支持；应改用配合字符转义（&→&、→>、"→"）并使用 textcontent 赋值以确保安全。

如何在html中使用 xmp 标签包裹并显示 html 源代码

为什么 `<xmp></xmp>` 标签现在不能用了

<xmp></xmp> 是 HTML 2.0 中的非标准标签，早在 HTML 3.2 就被废弃，HTML5 完全不支持。现代浏览器（Chrome、Firefox、Safari、Edge）虽仍能“渲染”它，但行为不可靠：会忽略其中的 <script></script>、<style></style>，甚至意外解析实体（如），且无法正确处理嵌套标签或 Unicode。直接用它展示 HTML 源码，大概率出现截断、错位或 XSS 风险。

替代方案：用 `<pre class="brush:php;toolbar:false;"></pre>` + `<code>` 手动转义

最稳妥的做法是把 HTML 字符串里的特殊字符全部转义，再放进 <pre class="brush:php;toolbar:false;"><code></code> 结构里：</pre>

→ <code><
> → >
& → &
" → "（仅在属性值中必需，但统一转更安全）

例如，想显示 <div class="box">Hello</div>，实际写成：

<pre class="brush:php;toolbar:false;"><code><div class="box">Hello</div></code>

JavaScript 动态渲染时怎么安全转义

如果源码来自变量或用户输入，别手动拼接字符串——容易漏转、引发 XSS。用函数封装转义逻辑：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

function escapeHtml(str) {
  return str
    .replace(/&/g, '&')
    .replace(/, '<')
    .replace(/>/g, '>')
    .replace(/"/g, '"');
}

const raw = '<button onclick="alert(1)">Click</button>';
document.querySelector('code').textContent = escapeHtml(raw);

关键点：

用 textContent 赋值，而非 innerHTML，避免二次解析
不要用正则替换 '（单引号），除非你确定它出现在属性值里且未被双引号包裹
若需高亮语法，再额外引入 highlight.js 或 Prism.js，它们内部已处理转义

注意 `<textarea></textarea>` 的“伪替代”陷阱

有人用 <textarea readonly></textarea> 显示 HTML 源码，因为它自动转义内容。这看似省事，但问题不少：

默认有边框和滚动条，样式重置麻烦（border: none; resize: none; 等）
字体非等宽，代码对齐错乱，需加 font-family: monospace;
选中文本时带光标和 caret，体验不如 <pre class="brush:php;toolbar:false;"><code></code></pre>
无法配合 syntax highlighter 使用

真要快速预览，临时用可以；生产环境别依赖它。

真正难的不是贴几行代码，而是确保所有 和 <code>& 都被转义——少一个就可能让页面结构崩掉，或者执行不该执行的脚本。手写时盯紧这两个字符，动态生成时用函数兜底。