pre与xmp标签有什么区别？

pre 和 xmp 标签都是用于在 HTML 中显示预格式化文本，保留空格、换行符和制表符。但是它们之间存在关键区别，xmp 已被弃用，不应该在新代码中使用。

pre (Preformatted Text)

• 作用: 保留文本中的空格、换行和制表符，通常用于显示代码、诗歌或其他需要保留格式的文本。
• HTML 实体: 会解释 HTML 实体，例如 < 会显示为 <。
• 标签: 会解释 HTML 标签，这意味着如果在 <pre> 标签内写入 HTML 标签，浏览器会尝试渲染它们。 这可能导致意外的布局或安全问题（例如，如果用户输入包含 <script> 标签）。 为了避免这种情况，需要将 HTML 标签中的特殊字符转义，例如将 < 转换为 <。
• CSS 样式: 可以使用 CSS 样式来控制 <pre> 元素的外观。

xmp (Example Text)

• 作用: 与 <pre> 类似，保留文本中的空格、换行和制表符。
• HTML 实体和标签: 不会 解释 HTML 实体和标签。它们会按字面量显示。 例如，<p>This is a paragraph</p> 会在页面上显示为字符串 <p>This is a paragraph</p>，而不是渲染成一个段落。
• 已弃用: xmp 标签在 HTML 4.01 中被弃用，在 HTML5 中被完全移除。 不应该在新代码中使用它。
• 安全风险: 由于 xmp 不解释 HTML 标签，如果其中包含用户提供的文本，可能会导致跨站点脚本攻击 (XSS)。

总结:

特性	pre	xmp
空格/换行	保留	保留
HTML 实体	解释	不解释
HTML 标签	解释	不解释
状态	支持	已弃用
安全性	需注意转义	有风险

最佳实践:

使用 pre 标签，并手动转义 HTML 特殊字符，以确保安全并避免意外的渲染。 可以使用 JavaScript 或服务器端代码来转义用户提供的文本。 例如，在 JavaScript 中，可以使用以下方法：

function escapeHtml(unsafe) {
  return unsafe
       .replace(/&/g, "&")
       .replace(/</g, "&lt;")
       .replace(/>/g, "&gt;")
       .replace(/"/g, "&quot;")
       .replace(/'/g, "&#039;");
}

let user_input = "<script>alert('XSS!')</script>";
let safe_input = escapeHtml(user_input);
document.getElementById("mypre").textContent = safe_input;

<pre id="mypre"></pre>

这样可以安全地显示用户输入，而不会执行其中的任何 HTML 或 JavaScript 代码。

总而言之，应该始终使用 pre 并进行适当的转义，而不是使用已弃用且不安全的 xmp 标签。