不能直接用显示html源码，因其在html5中已被正式移除，w3c不保证兼容性且控制台会警告；它无法嵌套、不支持css选择器，正确做法是用组合并手动转义、&为、&。
为什么不能直接用 <xmp></xmp> 显示 HTML 源码
<xmp></xmp> 确实会原样输出内容，包括标签、空格和换行，但它在 HTML5 中已被**正式移除**，不是标准语法。现代浏览器虽大多仍能渲染（出于兼容性），但 W3C 不保证行为一致，且会在控制台抛出警告：The <xmp> element is obsolete. Use <pre class="brush:php;toolbar:false;"> with entity encoding instead.</pre></xmp>。更重要的是，<xmp></xmp> 无法嵌套其他标签（比如加样式或交互），也不支持 CSS 选择器控制，后期维护成本高。
正确做法：用 <pre class="brush:php;toolbar:false;"></pre> + <code> 组合并转义特殊字符
预格式化展示源码的合规路径是：<pre class="brush:php;toolbar:false;"></pre> 负责保留缩进与换行，<code> 提供语义标记，再对原始字符串中的 、<code>>、& 做 HTML 实体转义。否则浏览器会尝试解析里面的标签，导致显示不全或结构错乱。
- 后端或 JS 处理时，必须将
→ <code><，>→>，&→& - 不要依赖浏览器自动转义；
<pre class="brush:php;toolbar:false;"></pre>内容不会被自动编码 - 可加
class="html"方便后续接 Prism.js 或 Highlight.js - 示例正确写法：
<pre class="brush:php;toolbar:false;"><code class="html"><div class="container"><p>Hello</p></div></code>
<textarea readonly></textarea> 是快速临时方案，但有明显限制
如果只是调试或内部页面，用 <textarea readonly></textarea> 包裹源码确实“开箱即用”，无需转义，也能保留格式。但它本质是表单控件，存在几个硬伤：
- 默认带边框和滚动条，需额外 CSS 重置（如
border: none; background: #f5f5f5;） - 无法用 CSS 选择器精确控制内部文字样式（比如给
<tag></tag>上色） - 不支持代码高亮、行号、复制按钮等增强功能
- 语义错误：它表示“用户可输入的文本区域”，而源码展示是只读内容，违反 ARIA 和 SEO 原则
容易忽略的细节：换行、空格与制表符处理
即使用了 <pre class="brush:php;toolbar:false;"></pre>，实际显示仍可能错位——根源常在源码本身的空白字符未被正确保留或标准化：
- 服务端返回的 XML/HTML 字符串若含 Windows 风格换行（
\r\n），部分浏览器在<pre class="brush:php;toolbar:false;"></pre>中可能只识别\n，建议统一转为 Unix 换行 - 制表符
\t在不同字体下宽度不一，推荐在生成源码字符串时提前替换为 2 或 4 个空格 - 首尾空行易被 HTML 解析器吞掉，可在前后各加一个不可见字符（如
）保底，或用white-space: pre-wrap;替代默认pre - 若源码来自用户粘贴，注意过滤掉富文本编辑器插入的零宽空格（
\u200b）或软连字符（\u00ad），它们会导致渲染异常
