举例说明如何原样输出HTML代码，不被浏览器解析？

要在前端显示 HTML 代码而不被浏览器解析，主要有几种方法：

1. 使用 <pre> 和 <code> 标签： 这是最简单的方法，适合显示较短的代码片段。<code> 标签表示这是一段代码，<pre> 标签则保留空格和换行符，从而实现原样输出。

   <pre>
   <code>
   &lt;div class="container"&gt;
       &lt;p&gt;Hello, world!&lt;/p&gt;
   &lt;/div&gt;
   </code>
   </pre>
   

   注意：你需要将 HTML 特殊字符（如 <、>、&）转换为 HTML 实体（如 <、>、&）。 这可以防止浏览器将它们解释为 HTML 标签。

2. 使用 JavaScript 转义 HTML 实体： 这种方法更灵活，尤其适用于动态生成的 HTML 代码。 你可以使用 JavaScript 将特殊字符转换为 HTML 实体，然后将结果输出到页面上。

   <div id="code-container"></div>
   <script>
       const htmlCode = '<div class="container">\n\t<p>Hello, world!</p>\n</div>';
       const escapedHtml = htmlCode.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
       document.getElementById('code-container').innerText = escapedHtml;
   </script>
   

3. 使用 <xmp> 标签 (已弃用，但不失为一种快速演示的方法): 虽然 <xmp> 标签在 HTML5 中已被弃用，但在某些旧版浏览器中仍然可以使用。它可以让你直接在标签内嵌入 HTML 代码，而无需转义特殊字符。 不推荐在生产环境中使用。

   <xmp>
   <div class="container">
       <p>Hello, world!</p>
   </div>
   </xmp>
   

4. 使用 JavaScript 库： 一些 JavaScript 库可以更方便地处理 HTML 转义和代码高亮。 例如，highlight.js 可以自动检测代码语言并进行语法高亮。

选择哪种方法取决于你的具体需求。 对于简单的静态代码片段，<pre> 和 <code> 标签就足够了。 对于动态生成的代码或需要语法高亮的情况，JavaScript 方法或 JavaScript 库是更好的选择。 避免使用 <xmp>，因为它已被弃用，未来可能不被支持。

以下是一个更完整的 JavaScript 例子，包含了换行符的处理：

<div id="code-container"></div>
<script>
  const htmlCode = `<div class="container">
    <p>Hello, world!</p>
  </div>`;

  function escapeHtml(html) {
    return html.replace(/&/g, '&amp;')
               .replace(/</g, '&lt;')
               .replace(/>/g, '&gt;')
               .replace(/"/g, '&quot;')
               .replace(/'/g, '&#039;')
               .replace(/\n/g, '<br>'); // 处理换行
  }

  document.getElementById('code-container').innerHTML = escapeHtml(htmlCode);
</script>

这个例子使用了 innerHTML 而不是 innerText， 并用 <br> 替换了换行符 \n，以便在输出中保留换行效果。 并且，它对单引号和双引号也进行了转义，使其更加健壮。